added difficulty

.eslintrc.js

@@ -1,83 +1,39 @@
 module.exports = {
     env: {
-        'commonjs': true,
+        commonjs: true,
-        'es2021': true,
+        es2021: true,
+        browser: true,
     },
-    extends: [
+    globals: {
-        'eslint:recommended',
+        Vue: 'readonly',
-    ],
+    },
+    extends: [ 'eslint:recommended' ],
     parserOptions: {
         ecmaVersion: 12,
     },
     rules: {
-        'indent': [
+        'indent': [ 'error', 4 ],
-            'error',
+        'linebreak-style': [ 'error', 'unix' ],
-            4,
+        'quotes': [ 'error', 'single' ],
-        ],
+        'semi': [ 'error', 'always' ],
-        'linebreak-style': [
+        'curly': [ 'error', 'all' ],
-            'error',
+        'brace-style': [ 'error', '1tbs' ],
-            'unix',
-        ],
-        'quotes': [
-            'error',
-            'single',
-        ],
-        'semi': [
-            'error',
-            'always',
-        ],
-        'curly': [
-            'error',
-            'all',
-        ],
-        'brace-style': [
-            'error',
-            '1tbs',
-        ],
         'jest/no-done-callback': 'off',
         'jest/expect-expect': 'off',
-        'comma-dangle': [
+        'comma-dangle': [ 'error', 'always-multiline' ],
-            'error',
-            'always-multiline',
-        ],
         'complexity': 'error',
         'consistent-return': 'error',
-        'dot-location': [
+        'dot-location': [ 'error', 'property' ],
-            'error',
+        'eqeqeq': [ 'error', 'always', { null: 'ignore' } ],
-            'property',
-        ],
-        'eqeqeq': [
-            'error',
-            'always',
-            { null: 'ignore' },
-        ],
         'no-empty-function': 'error',
         'no-floating-decimal': 'error',
         'no-multi-spaces': 'error',
-        'camelcase': [
+        'camelcase': [ 'error', { properties: 'never' } ],
-            'error',
+        'comma-spacing': [ 'error', { before: false, after: true } ],
-            { properties: 'never' },
+        'array-bracket-newline': [ 'error', { multiline: true } ],
-        ],
+        'array-element-newline': [ 'error', { multiline: true, minItems: 6 } ],
-        'comma-spacing': [
+        'array-bracket-spacing': [ 'error', 'always' ],
-            'error',
+        'object-curly-spacing': [ 'error', 'always' ],
-            { before: false, after: true },
-        ],
-        'array-bracket-newline': [
-            'error',
-            { multiline: true },
-        ],
-        'array-element-newline': [
-            'error',
-            { multiline: true, minItems: 2 },
-        ],
-        'array-bracket-spacing': [
-            'error',
-            'always',
-        ],
-        'object-curly-spacing': [
-            'error',
-            'always',
-        ],
         'comma-style': 'error',
         'computed-property-spacing': 'error',
         'eol-last': 'error',
@@ -92,10 +48,7 @@ module.exports = {
         'no-unneeded-ternary': 'error',
         'no-whitespace-before-property': 'error',
         'operator-assignment': 'error',
-        'quote-props': [
+        'quote-props': [ 'error', 'consistent-as-needed' ],
-            'error',
-            'consistent-as-needed',
-        ],
         'space-before-blocks': 'error',
         'space-infix-ops': 'error',
     },

index.html

@@ -28,9 +28,9 @@
         <div class='answer' type="button" v-for='v in answers' v-on:click="answer(v)" :class="{disabled:wrongAnswers.contains(v)}">{{ v }}</div>
       </div>
       <h3>Options</h3>
-      <input type="checkbox" id="opt_rh" v-model="options.rh"><label for="opt_rh">Romaji → ひらがな</label> <input type="checkbox" id="opt_hr" v-model="options.hr"><label for="opt_hr">ひらがな → Romaji</label><br />
+      <input type="checkbox" id="opt_rh" v-model="options.mappings" value="0"><label for="opt_rh">Romaji → ひらがな</label> <input type="checkbox" id="opt_hr" v-model="options.mappings" value="1"><label for="opt_hr">ひらがな → Romaji</label><br />
-      <input type="checkbox" id="opt_rk" v-model="options.rk"><label for="opt_rk">Romaji → カタカナ</label> <input type="checkbox" id="opt_kr" v-model="options.kr"><label for="opt_kr">カタカナ → Romaji</label><br />
+      <input type="checkbox" id="opt_rk" v-model="options.mappings" value="2"><label for="opt_rk">Romaji → カタカナ</label> <input type="checkbox" id="opt_kr" v-model="options.mappings" value="3"><label for="opt_kr">カタカナ → Romaji</label><br />
-      <input type="checkbox" id="opt_hk" v-model="options.hk"><label for="opt_hk">ひらがな ↔ カタカナ</label> <input type="checkbox" id="opt_kh" v-model="options.kh"><label for="opt_kh">カタカナ → ひらがな</label><br />
+      <input type="checkbox" id="opt_hk" v-model="options.mappings" value="4"><label for="opt_hk">ひらがな → カタカナ</label> <input type="checkbox" id="opt_kh" v-model="options.mappings" value="5"><label for="opt_kh">カタカナ → ひらがな</label><br />
       <br />
       <span v-for="char in options.available">
         <input type="checkbox" :id="'opt_' + char" v-model="options.selected" :value="char"><label :for="'opt_' + char">{{ char ? char : '()' }}&nbsp;</label>

main.js

@@ -1,40 +1,68 @@
 /* exported app, utils */
 
 const kanas = {
-  columns: ["A", "I", "U", "E", "O"],
+    columns: [ 'A', 'I', 'U', 'E', 'O' ],
-  rows: ["", "K", "S", "T", "N", "H", "M", "Y", "R", "W", "(N)"],
+    rows: [
+        '',
+        'K',
+        'S',
+        'T',
+        'N',
+        'H',
+        'M',
+        'Y',
+        'R',
+        'W',
+        '(N)',
+    ],
     hiraganas: [
-    ["あ", "い", "う", "え", "お"],
+        [ 'あ', 'い', 'う', 'え', 'お' ],
-    ["か", "き", "く", "け", "こ"],
+        [ 'か', 'き', 'く', 'け', 'こ' ],
-    ["さ", "し", "す", "せ", "そ"],
+        [ 'さ', 'し', 'す', 'せ', 'そ' ],
-    ["た", "ち", "つ", "て", "と"],
+        [ 'た', 'ち', 'つ', 'て', 'と' ],
-    ["な", "に", "ぬ", "ね", "の"],
+        [ 'な', 'に', 'ぬ', 'ね', 'の' ],
-    ["は", "ひ", "ふ", "へ", "ほ"],
+        [ 'は', 'ひ', 'ふ', 'へ', 'ほ' ],
-    ["ま", "み", "む", "め", "も"],
+        [ 'ま', 'み', 'む', 'め', 'も' ],
-    ["や", "", "ゆ", "", "よ"],
+        [ 'や', '', 'ゆ', '', 'よ' ],
-    ["ら", "り", "る", "れ", "ろ"],
+        [ 'ら', 'り', 'る', 'れ', 'ろ' ],
-    ["わ", "", "", "", "を"],
+        [ 'わ', '', '', '', 'を' ],
-    ["ん"],
+        [ 'ん' ],
     ],
     katakanas: [
-    ["ア", "イ", "ウ", "エ", "オ"],
+        [ 'ア', 'イ', 'ウ', 'エ', 'オ' ],
-    ["カ", "キ", "ク", "ケ", "コ"],
+        [ 'カ', 'キ', 'ク', 'ケ', 'コ' ],
-    ["サ", "シ", "ス", "セ", "ソ"],
+        [ 'サ', 'シ', 'ス', 'セ', 'ソ' ],
-    ["タ", "チ", "ツ", "テ", "ト"],
+        [ 'タ', 'チ', 'ツ', 'テ', 'ト' ],
-    ["ナ", "ニ", "ヌ", "ネ", "ノ"],
+        [ 'ナ', 'ニ', 'ヌ', 'ネ', 'ノ' ],
-    ["ハ", "ヒ", "フ", "ヘ", "ホ"],
+        [ 'ハ', 'ヒ', 'フ', 'ヘ', 'ホ' ],
-    ["マ", "ミ", "ム", "メ", "モ"],
+        [ 'マ', 'ミ', 'ム', 'メ', 'モ' ],
-    ["ヤ", "", "ユ", "", "ヨ"],
+        [ 'ヤ', '', 'ユ', '', 'ヨ' ],
-    ["ラ", "リ", "ル", "レ", "ロ"],
+        [ 'ラ', 'リ', 'ル', 'レ', 'ロ' ],
-    ["ワ", "", "", "", "ヲ"],
+        [ 'ワ', '', '', '', 'ヲ' ],
-    ["ン"],
+        [ 'ン' ],
     ],
     exceptions: {
-    SI: "SHI",
+        SI: 'SHI',
-    TI: "CHI",
+        TI: 'CHI',
-    TU: "TSU",
+        TU: 'TSU',
-    HU: "FU",
+        HU: 'FU',
     },
+    traps: {
+        hiraganas: {
+            //TODO
+        },
+        katakanas: {
+            //TODO
+        },
+    },
+    mappings: [
+        [ 0, 1 ],
+        [ 1, 0 ],
+        [ 0, 2 ],
+        [ 2, 0 ],
+        [ 1, 2 ],
+        [ 2, 1 ],
+    ],
 };
 
 const utils = {
@@ -42,6 +70,9 @@ const utils = {
         return Math.floor(Math.random() * (max - min)) + min;
     },
     randindex: function (array, ...toIgnore) {
+        if (array.length === 0 || toIgnore.length >= array.length) {
+            return -1;
+        }
         let index;
         do {
             index = this.randint(0, array.length);
@@ -49,9 +80,15 @@ const utils = {
         return index;
     },
     randitem: function (array) {
+        if (array.length === 0) {
+            return undefined;
+        }
         return array[this.randindex(array)];
     },
     randindexes: function (array, number, ...toIgnore) {
+        if (array.length === 0 || toIgnore.length >= array.length) {
+            return [];
+        }
         const output = [];
         for (let i = 0; i < number; i++) {
             output.push(this.randindex(array, ...output, ...toIgnore));
@@ -80,82 +117,102 @@ Array.prototype.contains = function (item) {
 };
 
 let app = {
-  el: "#app",
+    el: '#app',
     data: {
-    title: "Kana Test",
+        title: 'Kana Test',
         score: 0,
         options: {
             available: kanas.rows,
             selected: kanas.rows,
-      rh: true,
+            mappings: [ 0, 1 ],
-      hr: true,
-      rk: false,
-      kr: false,
-      hk: false,
-      kh: false,
             answers: 6,
         },
         kanas: [],
-    question: "あ",
+        question: 'あ',
-    answers: ["A", "I", "U", "O"],
+        answers: [ 'A', 'I', 'U', 'O' ],
         wrongAnswers: [],
     },
     watch: {
         options: {
-      handler: "changeOption",
+            handler: 'changeOption',
             deep: true,
         },
     },
     methods: {
+        findKana: function(v) {
+            const self = this;
+            return self.kanas.filter((kana) => {
+                return kana.contains(v);
+            })[0];
+        },
         buildKanas: function () {
             const self = this;
             self.kanas = [];
             self.options.selected.forEach((prefix) => {
                 const row = kanas.rows.indexOf(prefix);
-        if (prefix === "(N)") {
+                if (prefix === '(N)') {
-          self.kanas.push([
+                    self.kanas.push([ 'N', kanas.hiraganas[row][0], kanas.katakanas[row][0] ]);
-            "N",
-            kanas.hiraganas[row][0],
-            kanas.katakanas[row][0],
-          ]);
                 } else {
                     kanas.columns.forEach((suffix, column) => {
                         const text = kanas.exceptions[prefix + suffix]
                             ? kanas.exceptions[prefix + suffix]
                             : prefix + suffix;
                         if (kanas.hiraganas[row][column] || kanas.katakanas[row][column]) {
-              self.kanas.push([
+                            self.kanas.push([ text, kanas.hiraganas[row][column], kanas.katakanas[row][column] ]);
-                text,
-                kanas.hiraganas[row][column],
-                kanas.katakanas[row][column],
-              ]);
                         }
                     });
                 }
             });
         },
+        findSimilars: function(kanaIndex, mapping) {
+            const self = this;
+            const kana = self.kanas[kanaIndex];
+            const similarIndexes = [];
+            if (mapping.contains(1) && kanas.traps.hiraganas[kana[1]]) {
+                const trap = self.findKana(utils.randitem(kanas.traps.hiraganas[kana[1]]));
+                const trapIndex = self.kanas.indexOf(trap);
+                similarIndexes.push(trapIndex);
+            }
+            if (mapping.contains(2) && kanas.traps.katakanas[kana[2]]) {
+                const trap = self.findKana(utils.randitem(kanas.traps.hiraganas[kana[1]]));
+                const trapIndex = self.kanas.indexOf(trap);
+
+                if (!similarIndexes.contains(trapIndex)) {
+                    similarIndexes.push(self.kanas.indexOf(trap));
+                }
+            }
+            if (kana[0].length === 1) {
+                if (kana[0] !== 'N') { // !== (N)
+                    const sameRow = self.kanas.filter((kana2, i) => !similarIndexes.contains(i) && kana2 !== kana && kana2[0].length === 1);
+                    similarIndexes.push(self.kanas.indexOf(utils.randitem(sameRow)));
+                    const sameColumn = self.kanas.filter((kana2, i) => !similarIndexes.contains(i) && kana2 !== kana && kana2[0].substr(-1, 1) === kana[0].substr(-1, 1));
+                    if (sameColumn.length > 0) {
+                        similarIndexes.push(self.kanas.indexOf(utils.randitem(sameColumn)));
+                    }
+                }
+            } else {
+                const sameRow = self.kanas.filter((kana2, i) => !similarIndexes.contains(i) && kana2 !== kana && kana2[0].substr(0, 1) === kana[0].substr(0, 1));
+                similarIndexes.push(self.kanas.indexOf(utils.randitem(sameRow)));
+                const sameColumn = self.kanas.filter((kana2, i) => !similarIndexes.contains(i) && kana2 !== kana && kana2[0].substr(-1, 1) === kana[0].substr(-1, 1));
+                if (sameColumn.length > 0) {
+                    similarIndexes.push(self.kanas.indexOf(utils.randitem(sameColumn)));
+                }
+            }
+            return similarIndexes;
+        },
         generateQuestion: function () {
             const self = this;
-      const questionIndex = utils.randindex(self.kanas);
-      const answerIndexes = utils.randindexes(
-        self.kanas,
-        self.options.answers - 1,
-        questionIndex
-      );
-      //TODO add difficulty
 
-      const mappings = [];
+            const mapping = kanas.mappings[utils.randitem(self.options.mappings)];
-      if (self.options.rh) { mappings.push([0, 1]); }
+
-      if (self.options.hr) { mappings.push([1, 0]); }
+            const questionIndex = utils.randindex(self.kanas);
-      if (self.options.rk) { mappings.push([0, 2]); }
+            const similarIndexes = self.findSimilars(questionIndex, mapping);
-      if (self.options.kr) { mappings.push([2, 0]); }
+            const otherIndexes = utils.randindexes(self.kanas, Math.max(0, self.options.answers - similarIndexes.length - 1), questionIndex );
-      if (self.options.hk) { mappings.push([1, 2]); }
-      if (self.options.kh) { mappings.push([2, 1]); }
-      const mapping = utils.randitem(mappings);
 
             self.question = self.kanas[questionIndex][mapping[0]];
             self.answers = [ questionIndex ]
-        .concat(answerIndexes)
+                .concat(similarIndexes)
+                .concat(otherIndexes)
                 .map((index) => self.kanas[index][mapping[1]]);
             self.answers = self.answers.shuffle();
             self.wrongAnswers = [];
@@ -163,9 +220,7 @@ let app = {
         answer: function (v) {
             const self = this;
 
-      const question = self.kanas.filter((kana) => {
+            const question = self.findKana(self.question);
-        return kana.contains(self.question);
-      })[0];
 
             if (question.contains(v)) {
                 self.score += 1;
@@ -177,13 +232,13 @@ let app = {
 
             document.activeElement.blur();
         },
-    changeOption: function (v) {
+        changeOption: function () {
             const self = this;
-      if (!self.options.rh && !self.options.rk && !self.options.hk) {
+            if (self.options.mappings.length === 0) {
-        self.options.rh = true;
+                self.options.mappings.push(0);
             }
             if (self.options.selected.length === 0) {
-        self.options.selected.push("");
+                self.options.selected.push('');
             }
             self.score = 0;
             self.buildKanas();
@@ -192,9 +247,9 @@ let app = {
     },
     mounted: function () {
         const self = this;
-    console.log("app mounted");
+        console.log('app mounted');
         setTimeout(() => {
-      self.$el.setAttribute("style", "");
+            self.$el.setAttribute('style', '');
         });
         self.buildKanas();
         self.generateQuestion();