initial commit
This commit is contained in:
Klemek
@@ -0,0 +1 @@
|
||||
/lib
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
'commonjs': true,
|
||||
'es2021': true,
|
||||
},
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 12,
|
||||
},
|
||||
rules: {
|
||||
'indent': [
|
||||
'error',
|
||||
4,
|
||||
],
|
||||
'linebreak-style': [
|
||||
'error',
|
||||
'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': [
|
||||
'error',
|
||||
'always-multiline',
|
||||
],
|
||||
'complexity': 'error',
|
||||
'consistent-return': 'error',
|
||||
'dot-location': [
|
||||
'error',
|
||||
'property',
|
||||
],
|
||||
'eqeqeq': [
|
||||
'error',
|
||||
'always',
|
||||
{ null: 'ignore' },
|
||||
],
|
||||
'no-empty-function': 'error',
|
||||
'no-floating-decimal': 'error',
|
||||
'no-multi-spaces': 'error',
|
||||
'camelcase': [
|
||||
'error',
|
||||
{ properties: 'never' },
|
||||
],
|
||||
'comma-spacing': [
|
||||
'error',
|
||||
{ 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',
|
||||
'func-call-spacing': 'error',
|
||||
'key-spacing': 'error',
|
||||
'keyword-spacing': 'error',
|
||||
'multiline-comment-style': 'error',
|
||||
'newline-per-chained-call': 'error',
|
||||
'no-lonely-if': 'error',
|
||||
'no-multiple-empty-lines': 'error',
|
||||
'no-trailing-spaces': 'error',
|
||||
'no-unneeded-ternary': 'error',
|
||||
'no-whitespace-before-property': 'error',
|
||||
'operator-assignment': 'error',
|
||||
'quote-props': [
|
||||
'error',
|
||||
'consistent-as-needed',
|
||||
],
|
||||
'space-before-blocks': 'error',
|
||||
'space-infix-ops': 'error',
|
||||
},
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
lib
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"esversion": 6,
|
||||
"maxerr": 999,
|
||||
"indent": true,
|
||||
"camelcase": true,
|
||||
"eqeqeq": true,
|
||||
"forin": true,
|
||||
"immed": true,
|
||||
"latedef": true,
|
||||
"noarg": true,
|
||||
"noempty": true,
|
||||
"nonew": true,
|
||||
"undef": true,
|
||||
"unused": true,
|
||||
"varstmt": true,
|
||||
"sub": true,
|
||||
"quotmark": "single",
|
||||
"browser": true,
|
||||
"devel": true,
|
||||
"globals": {
|
||||
"Vue": false,
|
||||
"data": true,
|
||||
"cookies": true,
|
||||
"app": true
|
||||
}
|
||||
}
|
||||
+28
-13
@@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Change this you moron</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Kana Test</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script type="text/javascript" src="lib/vue.min.js"></script>
|
||||
<script type="text/javascript" src="main.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- card related -->
|
||||
<!--
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
@@ -18,14 +18,29 @@
|
||||
<meta property="twitter:image" content="">
|
||||
<meta property="org:url" content="https://...">
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<main id="app" style="display:none">
|
||||
</head>
|
||||
<body>
|
||||
<main id="app" style="display: none">
|
||||
<h1>{{title}}</h1>
|
||||
<br>
|
||||
<p v-html="content"></p>
|
||||
<br>
|
||||
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - 2019</small>
|
||||
<div id='score'>score : {{ score }}</div>
|
||||
<div id='question'><span>{{question}}</span></div>
|
||||
<div id='answers'>
|
||||
<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><br />
|
||||
<input type="checkbox" id="opt_rk" v-model="options.rk"><label for="opt_rk">Romaji ↔ カタカナ</label><br />
|
||||
<input type="checkbox" id="opt_hk" v-model="options.hk"><label for="opt_hk">ひらがな ↔ カタカナ</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 : '()' }} </label>
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<small
|
||||
><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> -
|
||||
<a href="" target="_blank">Github Repository</a> - 2021</small
|
||||
>
|
||||
</main>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,99 +1,199 @@
|
||||
/* exported app, utils */
|
||||
|
||||
const kanas = {
|
||||
columns: ["A", "I", "U", "E", "O"],
|
||||
rows: ["", "K", "S", "T", "N", "H", "M", "Y", "R", "W", "(N)"],
|
||||
hiraganas: [
|
||||
["あ", "い", "う", "え", "お"],
|
||||
["か", "き", "く", "け", "こ"],
|
||||
["さ", "し", "す", "せ", "そ"],
|
||||
["た", "ち", "つ", "て", "と"],
|
||||
["な", "に", "ぬ", "ね", "の"],
|
||||
["は", "ひ", "ふ", "へ", "ほ"],
|
||||
["ま", "み", "む", "め", "も"],
|
||||
["や", "", "ゆ", "", "よ"],
|
||||
["ら", "り", "る", "れ", "ろ"],
|
||||
["わ", "", "", "", "を"],
|
||||
["ん"],
|
||||
],
|
||||
katakanas: [
|
||||
["ア", "イ", "ウ", "エ", "オ"],
|
||||
["カ", "キ", "ク", "ケ", "コ"],
|
||||
["サ", "シ", "ス", "セ", "ソ"],
|
||||
["タ", "チ", "ツ", "テ", "ト"],
|
||||
["ナ", "ニ", "ヌ", "ネ", "ノ"],
|
||||
["ハ", "ヒ", "フ", "ヘ", "ホ"],
|
||||
["マ", "ミ", "ム", "メ", "モ"],
|
||||
["ヤ", "", "ユ", "", "ヨ"],
|
||||
["ラ", "リ", "ル", "レ", "ロ"],
|
||||
["ワ", "", "", "", "ヲ"],
|
||||
["ン"],
|
||||
],
|
||||
exceptions: {
|
||||
SI: "SHI",
|
||||
TI: "CHI",
|
||||
TU: "TSU",
|
||||
HU: "FU",
|
||||
},
|
||||
};
|
||||
|
||||
const utils = {
|
||||
ajax: {
|
||||
proxy: 'cors-anywhere.herokuapp.com',
|
||||
/**
|
||||
* Define a get HTTP request to be executed with .then/.catch
|
||||
* @param {string} url
|
||||
* @param {Object} data
|
||||
* @param {boolean} proxy - use cors proxy
|
||||
* @returns {Promise<Object|string>} return JSON parsed data or string
|
||||
*/
|
||||
get: (url, data, proxy = false) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (data && Object.keys(data).length) {
|
||||
url += '?' + Object.keys(data)
|
||||
.map(k => k + '=' + encodeURIComponent(data[k]))
|
||||
.join('&')
|
||||
.replace(/%20/g, '+');
|
||||
}
|
||||
const xhr = new XMLHttpRequest();
|
||||
if (proxy) {
|
||||
const http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
|
||||
url = `${http}//${utils.ajax.proxy}/${url}`;
|
||||
}
|
||||
xhr.open('GET', url);
|
||||
xhr.onload = () => {
|
||||
try {
|
||||
resolve(JSON.parse(xhr.responseText));
|
||||
} catch (ignored) {
|
||||
resolve(xhr.responseText);
|
||||
}
|
||||
};
|
||||
xhr.onerror = () => reject(xhr);
|
||||
xhr.send();
|
||||
});
|
||||
randint: function (min, max) {
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
},
|
||||
randindex: function (array, ...toIgnore) {
|
||||
let index;
|
||||
do {
|
||||
index = this.randint(0, array.length);
|
||||
} while (this.contains(toIgnore, index));
|
||||
return index;
|
||||
},
|
||||
cookies: {
|
||||
/**
|
||||
* Save a value in a cookie
|
||||
* @param {string} name
|
||||
* @param {string} value
|
||||
* @param {number | undefined} days
|
||||
*/
|
||||
set: function (name, value, days = undefined) {
|
||||
const maxAge = !days ? undefined : days * 864e2;
|
||||
document.cookie = `${name}=${encodeURIComponent(value)}${maxAge ? `;max-age=${maxAge};` : ''}`;
|
||||
randitem: function (array) {
|
||||
return array[this.randindex(array)];
|
||||
},
|
||||
/**
|
||||
* Get a value from a cookie
|
||||
* @param {string} name
|
||||
* @return {string} value from cookie or empty if not found
|
||||
*/
|
||||
get: function (name) {
|
||||
return document.cookie.split('; ').reduce(function (r, v) {
|
||||
const parts = v.split('=');
|
||||
return parts[0] === name ? decodeURIComponent(parts[1]) : r;
|
||||
}, '');
|
||||
},
|
||||
/**
|
||||
* Delete a cookie
|
||||
* @param {string} name
|
||||
*/
|
||||
delete: function (name) {
|
||||
this.set(name, '', -1);
|
||||
},
|
||||
/**
|
||||
* Clear all cookies
|
||||
*/
|
||||
clear: function () {
|
||||
const cookies = document.cookie.split(';');
|
||||
for (let i = 0; i < cookies.length; i++) {
|
||||
const cookie = cookies[i];
|
||||
const eqPos = cookie.indexOf('=');
|
||||
const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
|
||||
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
|
||||
randindexes: function (array, number, ...toIgnore) {
|
||||
const output = [];
|
||||
for (let i = 0; i < number; i++) {
|
||||
output.push(this.randindex(array, ...output, ...toIgnore));
|
||||
}
|
||||
return output;
|
||||
},
|
||||
shuffle: function (array) {
|
||||
const output = [...array];
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
const i1 = this.randindex(array);
|
||||
const i2 = this.randindex(array, i1);
|
||||
[output[i1], output[i2]] = [output[i2], output[i1]];
|
||||
}
|
||||
return output;
|
||||
},
|
||||
contains: function(array, item) {
|
||||
return array.indexOf(item) >= 0;
|
||||
}
|
||||
};
|
||||
|
||||
Array.prototype.shuffle = function() { return utils.shuffle(this);};
|
||||
Array.prototype.contains = function(item) { return utils.contains(this, item);};
|
||||
|
||||
let app = {
|
||||
el: '#app',
|
||||
el: "#app",
|
||||
data: {
|
||||
title: 'Vue-Boilerplate',
|
||||
content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>'
|
||||
title: "Kana Test",
|
||||
score: 0,
|
||||
options: {
|
||||
available: kanas.rows,
|
||||
selected: kanas.rows,
|
||||
rh: true,
|
||||
rk: false,
|
||||
hk: false,
|
||||
answers: 4,
|
||||
},
|
||||
methods: {},
|
||||
'mounted': function () {
|
||||
kanas: [],
|
||||
question: "あ",
|
||||
answers: ["A", "I", "U", "O"],
|
||||
wrongAnswers: [],
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
handler: "changeOption",
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
buildKanas: function () {
|
||||
const self = this;
|
||||
console.log('app mounted');
|
||||
setTimeout(() => {
|
||||
self.$el.setAttribute('style', '');
|
||||
self.kanas = [];
|
||||
self.options.selected.forEach((prefix) => {
|
||||
const row = kanas.rows.indexOf(prefix);
|
||||
if (prefix === "(N)") {
|
||||
self.kanas.push([
|
||||
"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([
|
||||
text,
|
||||
kanas.hiraganas[row][column],
|
||||
kanas.katakanas[row][column],
|
||||
]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
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 = [];
|
||||
if (self.options.rh) {
|
||||
mappings.push([0, 1], [1, 0]);
|
||||
}
|
||||
if (self.options.rk) {
|
||||
mappings.push([0, 2], [2, 0]);
|
||||
}
|
||||
if (self.options.hk) {
|
||||
mappings.push([1, 2], [2, 1]);
|
||||
}
|
||||
const mapping = utils.randitem(mappings);
|
||||
|
||||
self.question = self.kanas[questionIndex][mapping[0]];
|
||||
self.answers = [questionIndex]
|
||||
.concat(answerIndexes)
|
||||
.map((index) => self.kanas[index][mapping[1]]);
|
||||
self.answers = self.answers.shuffle();
|
||||
self.wrongAnswers = [];
|
||||
},
|
||||
answer: function (v) {
|
||||
const self = this;
|
||||
|
||||
const question = self.kanas.filter(kana => {
|
||||
return kana.contains(self.question);
|
||||
})[0];
|
||||
|
||||
if(question.contains(v)) {
|
||||
self.score += 1;
|
||||
self.generateQuestion();
|
||||
} else {
|
||||
self.score = 0;
|
||||
self.wrongAnswers.push(v);
|
||||
}
|
||||
|
||||
},
|
||||
changeOption: function (v) {
|
||||
const self = this;
|
||||
if (!self.options.rh && !self.options.rk && !self.options.hk) {
|
||||
self.options.rh = true;
|
||||
}
|
||||
if (self.options.selected.length === 0) {
|
||||
self.options.selected.push("");
|
||||
}
|
||||
self.score = 0;
|
||||
self.buildKanas();
|
||||
self.generateQuestion();
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
const self = this;
|
||||
console.log("app mounted");
|
||||
setTimeout(() => {
|
||||
self.$el.setAttribute("style", "");
|
||||
});
|
||||
self.buildKanas();
|
||||
self.generateQuestion();
|
||||
},
|
||||
};
|
||||
|
||||
window.onload = () => {
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
@@ -12,31 +13,80 @@ html, body {
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #F5F5F5;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1.5rem;
|
||||
margin: auto;
|
||||
background-color: #EEEEEE;
|
||||
background-color: #eeeeee;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: .5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table{
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width:100%;
|
||||
font-size: .9em;
|
||||
width: 100%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
main {
|
||||
max-width: 42rem;
|
||||
}
|
||||
table{
|
||||
font-size:inherit;
|
||||
table {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#score {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#question {
|
||||
text-align: center;
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
#question > span {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#answers {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.answer {
|
||||
font-size: 1.5em;
|
||||
width: 3.5em;
|
||||
height: 2em;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0.2em;
|
||||
border: 1px solid #424242;
|
||||
border-radius: .1em;
|
||||
display:inline-block;
|
||||
line-height: 2em;
|
||||
cursor: pointer;
|
||||
background-color: #FAFAFA;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.answer:hover {
|
||||
background-color: #E0E0E0;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.answer:active {
|
||||
background-color: #757575;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background-color: #f44336;
|
||||
color: #eeeeee;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user