word/memory.js

   1 class WordMemory extends WordQuiz {
   2         turn(click) {
   3                 let target = click.currentTarget;
   4                 if (!target.classList.contains('turn')) {
   5                         // show an open card
   6                         this.turned.push(target);
   7                         put(target, '.turn');
   8                         this.log('pick', target.id, target.index);
   9                 }
  10                 else if (this.turned.length < 2) {
  11                         return; // keep open
  12                 }
  13
  14                 if (this.turned.length <= 1) {
  15                         return; // first choice
  16                 }
  17
  18                 // compare two cards
  19                 let match = !this.pairs ? this.turned[0].id == this.turned[1].id : (
  20                         this.pairs[this.turned[0].id] == this.turned[1].id
  21                         || this.pairs[this.turned[1].id] == this.turned[0].id
  22                 );
  23                 if (!match && !this.turned[0].classList.contains('bad')) {
  24                         put(this.turned[0], '.bad'); // indicate failure on first card
  25                         return;
  26                 }
  27
  28                 if (match) {
  29                         // lock both as correct
  30                         this.turned.forEach(card => put(card, '.good![onclick]'));
  31                         this.turned = [];
  32                         if (Array.from(this.form.children).every(card => card.classList.contains('good'))) {
  33                                 put(this.form, '.good');
  34                                 this.stop('done');
  35                         }
  36                         return;
  37                 }
  38
  39                 // fold back earlier cards
  40                 this.turned.splice(0, 2)
  41                 .forEach(card => put(card, '!.turn!.bad'));
  42         }
  43
  44         load(dataurl) {
  45                 if (dataurl) {
  46                         super.load(dataurl);
  47                 }
  48                 else {
  49                         this.dataurl = '/data/wordpairs.json';
  50                         fetch(this.dataurl).then(res => res.json()).then(pairs => {
  51                                 this.pairs = pairs;
  52                                 this.setup();
  53                         });
  54                 }
  55         }
  56
  57         setup() {
  58                 this.turned = [];
  59                 this.form = document.getElementById('quiz');
  60
  61                 let cards;
  62                 if (this.words) {
  63                         const aspect = this.form.clientWidth / window.innerHeight;
  64                         //TODO image ratio
  65                         let count = 35;
  66                         let cols = Math.round(Math.sqrt(count) * aspect**.5);
  67                         count = cols * Math.ceil(count / cols);
  68                         this.form.style['grid-template-columns'] = `repeat(${cols}, 1fr)`;
  69                         cards = this.words.splice(0, count>>1).map(row => row[2]);
  70                         cards.push(...cards.map(val => -val));
  71                 }
  72                 else {
  73                         cards = Object.entries(this.pairs).flat()
  74                                 .map(e => e.toString())
  75                 }
  76
  77                 cards.shuffle().forEach((word, seq) => {
  78                         let ref = Math.abs(word);
  79                         put(this.form,
  80                                 'figure>img[src=$]<', `/data/word/32/${ref}.jpg`, {
  81                                         onclick: e => this.turn(e),
  82                                         id: ref,
  83                                         className: word < 0 ? 'mirror' : '',
  84                                         index: seq,
  85                                 }
  86                         );
  87                 });
  88         }
  89 };