X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/819787ff54335a68b34b7d9729f6d7e28870d8ac..91810a36f31f93d25209e62f40aa24851aa33351:/word/memory.js diff --git a/word/memory.js b/word/memory.js index 0e523a1..a6b1906 100644 --- a/word/memory.js +++ b/word/memory.js @@ -1,4 +1,4 @@ -class WordMemory { +class WordMemory extends WordQuiz { turn(click) { let target = click.currentTarget; if (!target.classList.contains('turn')) { @@ -15,8 +15,10 @@ class WordMemory { } // compare two cards - let match = this.pairs[this.turned[0].id] == this.turned[1].id - || this.pairs[this.turned[1].id] == this.turned[0].id; + let match = !this.pairs ? this.turned[0].id == this.turned[1].id : ( + this.pairs[this.turned[0].id] == this.turned[1].id + || this.pairs[this.turned[1].id] == this.turned[0].id + ); if (!match && !this.turned[0].classList.contains('bad')) { put(this.turned[0], '.bad'); // indicate failure on first card return; @@ -26,6 +28,9 @@ class WordMemory { // lock both as correct this.turned.forEach(card => put(card, '.good![onclick]')); this.turned = []; + if (Array.from(this.form.children).every(card => card.classList.contains('good'))) { + put(this.form, '.good'); + } return; } @@ -34,23 +39,43 @@ class WordMemory { .forEach(card => put(card, '!.turn!.bad')); } - constructor() { - this.dataurl = '/data/wordpairs.json'; - fetch(this.dataurl).then(res => res.json()).then(pairs => { - this.turned = []; - this.pairs = pairs; - this.form = document.getElementById('quiz'); - this.cards = Object.entries(pairs).flat() - .map(e => e.toString()) - .sort(() => {return .5 - Math.random()}) // shuffle - this.cards.forEach(word => { - put(this.form, - 'figure>img[src=$]<', `/data/word/en/${word}.jpg`, - {onclick: e => this.turn(e), id: word} - ); + load(dataurl) { + if (dataurl) { + super.load(dataurl); + } + else { + this.dataurl = '/data/wordpairs.json'; + fetch(this.dataurl).then(res => res.json()).then(pairs => { + this.pairs = pairs; + this.setup(); }); + } + } + + setup() { + this.turned = []; + this.form = document.getElementById('quiz'); + + 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]); + cards.push(...cards.map(val => -val)); + } + else { + cards = Object.entries(this.pairs).flat() + .map(e => e.toString()) + } + + cards.shuffle().forEach(word => { + 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' : ''} + ); }); } }; - -new WordMemory();