More typical gameplay operating on normal selections, but still distinguish
matches for added difficulty.
- 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;
if (!match && !this.turned[0].classList.contains('bad')) {
put(this.turned[0], '.bad'); // indicate failure on first card
return;
- 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' : ''}
+ );
Html({
raw => <<'EOT',
<script src="/word/put.min.js"></script>
Html({
raw => <<'EOT',
<script src="/word/put.min.js"></script>
/* card faces */
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 */
}
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);
}
/* 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 */
}
figure.bad img {
filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
}
EOT
});
say '<h1>memory</h1><p id="quiz"></p>';
EOT
});
say '<h1>memory</h1><p id="quiz"></p>';
-say "<script>new WordMemory()</script>";
+say "<script>new WordMemory('/$wordlistbase.json')</script>";