Allow the user to place cards in rows with previous missing elements

Closes #8
This commit is contained in:
2020-09-04 19:24:49 +02:00
parent cfed3d3d0a
commit f4ce288914
3 changed files with 18 additions and 10 deletions

View File

@ -24,16 +24,17 @@
</div>
<template v-for="(elem, row) in solution">
<div class="row">
<div
v-for="(idx, column) in elem.idx"
class="card"
v-bind:class="{incorrect: column == store.section && incorrects[row], revealed: column == store.section && elem.got_revealed}"
>
<span>{{ solution_text(elem, column) }}</span>
<svg width=20 height=20 v-if="column == store.section && !solution_correct" v-on:click="remove_solution(row)">
<path d="M2 2L18 18M18 2L2 18" stroke="#f00" stroke-width="2px" />
</svg>
</div>
<template v-for="(idx, column) in elem.idx"><div
v-if="idx != null"
class="card"
v-bind:class="{incorrect: column == store.section && incorrects[row], revealed: column == store.section && elem.got_revealed}"
>
<span>{{ solution_text(elem, column) }}</span>
<svg width=20 height=20 v-if="column == store.section && !solution_correct" v-on:click="remove_solution(row)">
<path d="M2 2L18 18M18 2L2 18" stroke="#f00" stroke-width="2px" />
</svg>
</div><div v-if="idx == null" class="card_placeholder">
</div></template>
<svg v-if="elem.idx.length == store.section && store.selected != null" v-on:click="add_card_to(row)" class="plus" width="20" height="20">
<path d="M8 0H12V8H20V12H12V20H8V12H0V8H8Z" fill="#2b8856" />
</svg>