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 formstyle = window.getComputedStyle(this.form)
  64                         const gridsize = [
  65                                 formstyle['grid-template-rows'], formstyle['grid-template-columns']
  66                         ].map(val => val.match(/ /g).length + 1).reduce((x, y) => x * y) / 2;
  67                         cards = this.words.splice(0, gridsize || 6).map(row => row[2]);
  68                         cards.push(...cards.map(val => -val));
  69                 }
  70                 else {
  71                         cards = Object.entries(this.pairs).flat()
  72                                 .map(e => e.toString())
  73                 }
  74
  75                 cards.shuffle().forEach((word, seq) => {
  76                         let ref = Math.abs(word);
  77                         put(this.form,
  78                                 'figure>img[src=$]<', `/data/word/32/${ref}.jpg`, {
  79                                         onclick: e => this.turn(e),
  80                                         id: ref,
  81                                         className: word < 0 ? 'mirror' : '',
  82                                         index: seq,
  83                                 }
  84                         );
  85                 });
  86         }
  87 };