X-Git-Url: http://git.shiar.net/sheet.git/blobdiff_plain/91810a36f31f93d25209e62f40aa24851aa33351..e5a6d30b2cf44f7791d2cef79f8d08da3891f79d:/word/memory.js diff --git a/word/memory.js b/word/memory.js index a6b1906..b539b2d 100644 --- a/word/memory.js +++ b/word/memory.js @@ -5,6 +5,7 @@ class WordMemory extends WordQuiz { // show an open card this.turned.push(target); put(target, '.turn'); + this.log('pick', target.id, target.index); } else if (this.turned.length < 2) { return; // keep open @@ -30,6 +31,7 @@ class WordMemory extends WordQuiz { this.turned = []; if (Array.from(this.form.children).every(card => card.classList.contains('good'))) { put(this.form, '.good'); + this.stop('done'); } return; } @@ -39,30 +41,35 @@ class WordMemory extends WordQuiz { .forEach(card => put(card, '!.turn!.bad')); } - load(dataurl) { - if (dataurl) { - super.load(dataurl); - } - else { + load() { + this.configure(); + if (this.preset.pairs) { this.dataurl = '/data/wordpairs.json'; fetch(this.dataurl).then(res => res.json()).then(pairs => { this.pairs = pairs; this.setup(); }); } + else { + super.load(); + } } setup() { + super.setup(); this.turned = []; - this.form = document.getElementById('quiz'); + this.form.innerHTML = ''; + this.form.className = ''; let cards; if (this.words) { - const formstyle = window.getComputedStyle(this.form) - const gridsize = [ - formstyle['grid-template-rows'], formstyle['grid-template-columns'] - ].map(val => val.match(/ /g).length + 1).reduce((x, y) => x * y) / 2; - cards = this.words.splice(0, gridsize || 6).map(row => row[2]); + const aspect = this.form.clientWidth / window.innerHeight; + //TODO image ratio + let count = parseInt(this.preset.n) || 35; + let cols = Math.round(Math.sqrt(count) * aspect**.5); + count = cols * Math.ceil(count / cols); + this.form.style['grid-template-columns'] = `repeat(${cols}, 1fr)`; + cards = this.words.splice(0, count>>1).map(row => row.imgid); cards.push(...cards.map(val => -val)); } else { @@ -70,11 +77,15 @@ class WordMemory extends WordQuiz { .map(e => e.toString()) } - cards.shuffle().forEach(word => { + cards.shuffle().forEach((word, seq) => { let ref = Math.abs(word); put(this.form, - 'figure>img[src=$]<', `/data/word/32/${ref}.jpg`, - {onclick: e => this.turn(e), id: ref, className: word < 0 ? 'mirror' : ''} + 'figure>img[src=$]<', `/data/word/32/${ref}.jpg`, { + onclick: e => this.turn(e), + id: ref, + className: word < 0 ? 'mirror' : '', + index: seq, + } ); }); }