Lukas/Ministranten-Quiz
2
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Collapse free spaces in the store area

Browse Source 
Closes #2
This commit is contained in:
Lukas Fürderer 2020-09-03 11:23:28 +02:00
parent 10c45908d4
commit 49f87908c4
2 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -49,14 +49,16 @@
</svg> </svg>
</div> </div>
<div class="store"> <div class="store">
<div <div v-for="row in reduced_store">
class="card" <div
v-for="item_idx in store.items" class="card"
v-bind:class="{selected: item_idx == store.selected}" v-for="item_idx in row"
v-bind:style="{visibility: store_card_visible(item_idx) ? 'visible' : 'hidden'}" v-bind:class="{selected: item_idx == store.selected}"
v-on:click="store_select(item_idx)" v-bind:style="{visibility: store_card_visible(item_idx) ? 'visible' : 'hidden'}"
> v-on:click="store_select(item_idx)"
<span>{{ store_text(item_idx) }}</span> >
<span>{{ store_text(item_idx) }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>

19
quiz.js
View File

@ -277,6 +277,25 @@ var app = new Vue({
solution_correct: function() { solution_correct: function() {
return this.solution_revealed && this.all_inserted && !this.incorrects.includes(true); return this.solution_revealed && this.all_inserted && !this.incorrects.includes(true);
}, },
reduced_store: function() {
let width = 2;
let reduced_list = [];
for (let row_begin = 0; row_begin < this.store.items.length; row_begin += width) {
let row = [];
let needed = false;
for (let cell = row_begin; cell < this.store.items.length && cell - row_begin < width; cell++) {
let item_idx = this.store.items[cell];
row.push(item_idx);
if (this.store_card_visible(item_idx)) {
needed = true;
}
}
if (needed) {
reduced_list.push(row);
}
}
return reduced_list;
},
}, },
methods: { methods: {
store_text: function(idx) { store_text: function(idx) {