klemek/kana-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

highscores and cookies

Browse Source
This commit is contained in:
Klemek
2021-10-15 11:53:09 +02:00
parent 6f6c3e84e1
commit 896b28f8ba
2 changed files with 46 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -22,7 +22,7 @@
<body> <body>
<main id="app" style="display: none"> <main id="app" style="display: none">
<h1>{{title}}</h1> <h1>{{title}}</h1>
<div id='score'>score : {{ score }}</div> <div id='score'>score : {{ score }} / highscore : {{ highscore }}</div>
<div id='question'><span>{{question}}</span></div> <div id='question'><span>{{question}}</span></div>
<div id='answers'> <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 class='answer' type="button" v-for='v in answers' v-on:click="answer(v)" :class="{disabled:wrongAnswers.contains(v)}">{{ v }}</div>
main.js
+45 -1
View File
@@ -133,11 +133,26 @@ Array.prototype.unique = function () {
return utils.unique(this); return utils.unique(this);
}; };
const cookies = {
set: function (name, value, days = undefined) {
const maxAge = !days ? undefined : days * 864e2;
document.cookie = `${name}=${encodeURIComponent(value)}${maxAge ? `;max-age=${maxAge};` : ''}`;
},
get: function (name) {
return document.cookie.split('; ').reduce(function (r, v) {
const parts = v.split('=');
return parts[0] === name ? decodeURIComponent(parts[1]) : r;
}, '');
},
};
let app = { let app = {
el: '#app', el: '#app',
data: { data: {
title: 'Kana Test', title: 'Kana Test',
score: 0, score: 0,
highscore: 0,
savedHighscores: {},
options: { options: {
available: kanas.rows, available: kanas.rows,
selected: kanas.rows, selected: kanas.rows,
@@ -200,7 +215,7 @@ let app = {
similarIndexes.push(self.kanas.indexOf(self.findKana(trapKana))); similarIndexes.push(self.kanas.indexOf(self.findKana(trapKana)));
}); });
} }
if (kana[0].length !== 1 || kana[0] !== 'N') { if (kana[0] !== 'N') {
const sameRow = self.kanas.filter((kana2, i) => !similarIndexes.contains(i) && kana2 !== kana && kana2[3] === kana[3]); const sameRow = self.kanas.filter((kana2, i) => !similarIndexes.contains(i) && kana2 !== kana && kana2[3] === kana[3]);
if (sameRow.length > 0) { if (sameRow.length > 0) {
similarIndexes.push(self.kanas.indexOf(utils.randitem(sameRow))); similarIndexes.push(self.kanas.indexOf(utils.randitem(sameRow)));
@@ -246,6 +261,11 @@ let app = {
if (question.contains(v)) { if (question.contains(v)) {
self.score += 1; self.score += 1;
if (self.score > self.highscore) {
self.highscore = self.score;
self.savedHighscores[btoa(JSON.stringify(self.options))] = self.highscore;
cookies.set('highscores', btoa(JSON.stringify(self.savedHighscores)));
}
self.generateQuestion(); self.generateQuestion();
} else { } else {
self.score = 0; self.score = 0;
@@ -256,16 +276,39 @@ let app = {
}, },
changeOption: function () { changeOption: function () {
const self = this; const self = this;
if (self.options.mappings.length === 0) { if (self.options.mappings.length === 0) {
self.options.mappings.push(0); self.options.mappings.push(0);
} }
if (self.options.selected.length === 0) { if (self.options.selected.length === 0) {
self.options.selected.push(''); self.options.selected.push('');
} }
cookies.set('options', btoa(JSON.stringify(self.options)));
self.highscore = self.savedHighscores[btoa(JSON.stringify(self.options))] ?? 0;
self.score = 0; self.score = 0;
self.buildKanas(); self.buildKanas();
self.generateQuestion(); self.generateQuestion();
}, },
readCookies: function() {
const self = this;
const savedOptions = cookies.get('options');
if (savedOptions) {
try {
self.options = JSON.parse(atob(savedOptions));
} catch (e) { /* ignored */ }
}
const savedHighscores = cookies.get('highscores');
if (savedHighscores) {
try {
self.savedHighscores = JSON.parse(atob(savedHighscores));
self.highscore = self.savedHighscores[btoa(JSON.stringify(self.options))] ?? 0;
} catch (e) { /* ignored */ }
}
},
}, },
mounted: function () { mounted: function () {
const self = this; const self = this;
@@ -274,6 +317,7 @@ let app = {
self.$el.setAttribute('style', ''); self.$el.setAttribute('style', '');
}); });
self.buildKanas(); self.buildKanas();
self.readCookies();
self.generateQuestion(); self.generateQuestion();
}, },
}; };