word/memory: mirrored duplication of unpaired images

More typical gameplay operating on normal selections, but still distinguish
matches for added difficulty.

diff --git a/word/memory.js b/word/memory.js
index 48e8b44cfb441ae2db57eba2b90482e8b19910f2..94836c282b54666093c396631cc56fe17c8840db 100644 (file)
--- a/word/memory.js
+++ b/word/memory.js
@@ -15,8 +15,10 @@ class WordMemory extends WordQuiz {
                }
 
                // 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;
@@ -38,20 +40,38 @@ class WordMemory extends WordQuiz {
        }
 
        load(dataurl) {
-               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())
-                               .shuffle()
-                       this.cards.forEach(word => {
-                               put(this.form,
-                                       'figure>img[src=$]<', `/data/word/en/${word}.jpg`,
-                                       {onclick: e => this.turn(e), id: word}
-                               );
+               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) {
+                       cards = this.words.splice(0, 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/en/${ref}.jpg`,
+                               {onclick: e => this.turn(e), id: ref, className: word < 0 ? 'mirror' : ''}
+                       );
                });
        }
 };

diff --git a/word/memory.plp b/word/memory.plp
index d0364e43bd601fc4dadf230adc9e28f86b81777b..26a7cd4e04330feae707c0b84b53b5e5c0032e2d 100644 (file)
--- a/word/memory.plp
+++ b/word/memory.plp
@@ -1,5 +1,7 @@
 <(../common.inc.plp)><:
 
+our $wordlistbase;
+
 Html({
        raw => <<'EOT',
 <script src="/word/put.min.js"></script>
@@ -38,18 +40,22 @@ figure, img {
 
 /* card faces */
 figure img {
-       height: 100%;
-       width: auto;
        backface-visibility: hidden;
        transform: rotateY(180deg); /* back */
        transform-style: preserve-3d;
        -float: left; /* ff workaround to prevent click selection */
 }
+figure.mirror img {
+       transform: rotateY(180deg) scaleX(-1);
+}
 
 /* turn results */
 figure.turn img {
        transform: rotateY(0deg);
 }
+figure.mirror.turn img {
+       transform: rotateY(0deg) scaleX(-1);
+}
 figure.bad img {
        filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
 }
@@ -71,4 +77,4 @@ figure.good {
 EOT
 });
 say '<h1>memory</h1><p id="quiz"></p>';
-say "<script>new WordMemory()</script>";
+say "<script>new WordMemory('/$wordlistbase.json')</script>";