-class WordMemory {
+class WordMemory extends WordQuiz {
turn(click) {
let target = click.currentTarget;
if (!target.classList.contains('turn')) {
// 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
}
// 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;
this.turned = [];
if (Array.from(this.form.children).every(card => card.classList.contains('good'))) {
put(this.form, '.good');
+ this.stop('done');
}
return;
}
.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() {
+ 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.innerHTML = '';
+ this.form.className = '';
+
+ let cards;
+ if (this.words) {
+ 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 {
+ cards = Object.entries(this.pairs).flat()
+ .map(e => e.toString())
+ }
+
+ 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' : '',
+ index: seq,
+ }
+ );
});
}
};
-
-new WordMemory();