beautify js
This commit is contained in:
parent
ef12ef3715
commit
0addb4d4dc
|
|
@ -1,38 +1,42 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
function updateStats(statParameter)
|
||||
{
|
||||
let stTotalGames = JSON.parse(localStorage.getItem('stTotalGames'));
|
||||
let stWinWords = JSON.parse(localStorage.getItem('stWinWords'));
|
||||
let stLetterClick = JSON.parse(localStorage.getItem('stLetterClick'));
|
||||
let stCorrLetter = JSON.parse(localStorage.getItem('stCorrLetter'));
|
||||
function updateStats(statParameter) {
|
||||
let stTotalGames = JSON.parse(localStorage.getItem("stTotalGames"));
|
||||
let stWinWords = JSON.parse(localStorage.getItem("stWinWords"));
|
||||
let stLetterClick = JSON.parse(localStorage.getItem("stLetterClick"));
|
||||
let stCorrLetter = JSON.parse(localStorage.getItem("stCorrLetter"));
|
||||
switch (statParameter) {
|
||||
case "stTotalGames":
|
||||
localStorage.setItem("stTotalGames", stTotalGames + 1);
|
||||
break;
|
||||
|
||||
switch(statParameter)
|
||||
{
|
||||
case 'stTotalGames':
|
||||
localStorage.setItem('stTotalGames', stTotalGames + 1);
|
||||
|
||||
break;
|
||||
case 'stWinWords':
|
||||
localStorage.setItem('stTotalGames', stTotalGames + 1);
|
||||
localStorage.setItem('stWinWords', stWinWords + 1);
|
||||
|
||||
break;
|
||||
case 'stLetterClick':
|
||||
localStorage.setItem('stLetterClick', stLetterClick + 1);
|
||||
|
||||
break;
|
||||
case 'stCorrLetter':
|
||||
localStorage.setItem('stLetterClick', stLetterClick + 1);
|
||||
localStorage.setItem('stCorrLetter', stCorrLetter + 1);
|
||||
|
||||
break;
|
||||
case 'stCheck':
|
||||
if (stTotalGames == null) { localStorage.setItem('stTotalGames', 0); }
|
||||
if (stWinWords == null) { localStorage.setItem('stWinWords', 0); }
|
||||
if (stLetterClick == null) { localStorage.setItem('stLetterClick', 0); }
|
||||
if (stCorrLetter == null) { localStorage.setItem('stCorrLetter', 0); }
|
||||
case "stWinWords":
|
||||
localStorage.setItem("stTotalGames", stTotalGames + 1);
|
||||
localStorage.setItem("stWinWords", stWinWords + 1);
|
||||
break;
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
case "stLetterClick":
|
||||
localStorage.setItem("stLetterClick", stLetterClick + 1);
|
||||
break;
|
||||
|
||||
case "stCorrLetter":
|
||||
localStorage.setItem("stLetterClick", stLetterClick + 1);
|
||||
localStorage.setItem("stCorrLetter", stCorrLetter + 1);
|
||||
break;
|
||||
|
||||
case "stCheck":
|
||||
if (stTotalGames == null) {
|
||||
localStorage.setItem("stTotalGames", 0);
|
||||
}
|
||||
if (stWinWords == null) {
|
||||
localStorage.setItem("stWinWords", 0);
|
||||
}
|
||||
if (stLetterClick == null) {
|
||||
localStorage.setItem("stLetterClick", 0);
|
||||
}
|
||||
if (stCorrLetter == null) {
|
||||
localStorage.setItem("stCorrLetter", 0);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
187
js/index.js
187
js/index.js
|
|
@ -1,135 +1,96 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
// keyboard layouts
|
||||
const keyboardLayouts = {
|
||||
'usQwertyKeyboard' : 'abcdefghijklmnopqrstuvwxyz'.toUpperCase(),
|
||||
'ruQwertyKeyboard' : 'йцукеёнгшщзхъфывапролджэячсмитьбю'.toUpperCase()
|
||||
}
|
||||
usQwertyKeyboard: "abcdefghijklmnopqrstuvwxyz".toUpperCase(),
|
||||
ruQwertyKeyboard: "йцукеёнгшщзхъфывапролджэячсмитьбю".toUpperCase()
|
||||
};
|
||||
|
||||
const words = [
|
||||
'google', 'speed', 'design', 'forest', 'forever', 'love',
|
||||
'horizon', 'defect'
|
||||
];
|
||||
const words = [ "google", "speed", "design", "forest", "forever", "love", "horizon", "defect" ];
|
||||
|
||||
// game variables
|
||||
let gameWord = words[Math.floor(Math.random() * words.length)].toUpperCase();
|
||||
let gameAnswered = new Array(gameWord.length + 1).join('-');
|
||||
|
||||
let gameAnswered = new Array(gameWord.length + 1).join("-");
|
||||
|
||||
let lives = 6;
|
||||
|
||||
// init keyboard
|
||||
function generateKeyboard(layout)
|
||||
{
|
||||
let keyboardHtmlStr = '';
|
||||
|
||||
layout.split('').forEach(function(letter)
|
||||
{
|
||||
keyboardHtmlStr = keyboardHtmlStr + '<button class="button clear is-marginless" id="' + letter +
|
||||
'" onclick="letterClick(\'' + letter + '\')"> ' + letter + '</button>';
|
||||
})
|
||||
|
||||
let keyboard = document.querySelector("#keyboard");
|
||||
keyboard.classList.remove('is-hidden');
|
||||
document.querySelector("#keyboard").innerHTML = keyboardHtmlStr;
|
||||
function generateKeyboard(layout) {
|
||||
let keyboardHtmlStr = "";
|
||||
layout.split("").forEach(function(letter) {
|
||||
keyboardHtmlStr = keyboardHtmlStr + '<button class="button clear is-marginless" id="' + letter + '" onclick="letterClick(\'' + letter + "')\"> " + letter + "</button>";
|
||||
});
|
||||
let keyboard = document.querySelector("#keyboard");
|
||||
keyboard.classList.remove("is-hidden");
|
||||
document.querySelector("#keyboard").innerHTML = keyboardHtmlStr;
|
||||
}
|
||||
|
||||
// letter click action
|
||||
function letterClick(letter)
|
||||
{
|
||||
let charButton = document.getElementById(letter);
|
||||
charButton.disabled = true;
|
||||
|
||||
let indices = [];
|
||||
let idx = gameWord.split('').indexOf(letter)
|
||||
|
||||
if (idx == -1)
|
||||
{
|
||||
wrongLetter();
|
||||
|
||||
updateStats('stLetterClick');
|
||||
return;
|
||||
}
|
||||
|
||||
while (idx != -1)
|
||||
{
|
||||
indices.push(idx);
|
||||
idx = gameWord.split('').indexOf(letter, idx + 1);
|
||||
}
|
||||
|
||||
indices.forEach(function(item, indices)
|
||||
{
|
||||
let wordArray = gameAnswered.split('')
|
||||
wordArray[item] = letter;
|
||||
gameAnswered = wordArray.join('');
|
||||
document.querySelector("#word").innerHTML = gameAnswered;
|
||||
|
||||
updateStats('stCorrLetter');
|
||||
})
|
||||
|
||||
if (gameAnswered.split('').indexOf('-') == -1)
|
||||
{
|
||||
updateStats('stWinWords');
|
||||
|
||||
// display win scene
|
||||
document.querySelector('#keyboard').innerHTML = '\
|
||||
<img src="https://icongr.am/clarity/happy-face.svg?size=128&color=28bd14">\
|
||||
<h1 class="text-success">Your winner!!</h1>\
|
||||
<button class="button error" onclick="document.location.reload(true);"\
|
||||
>Restart game</button>';
|
||||
}
|
||||
function letterClick(letter) {
|
||||
let charButton = document.getElementById(letter);
|
||||
charButton.disabled = true;
|
||||
let indices = [];
|
||||
let idx = gameWord.split("").indexOf(letter);
|
||||
if (idx == -1) {
|
||||
wrongLetter();
|
||||
updateStats("stLetterClick");
|
||||
return;
|
||||
}
|
||||
while (idx != -1) {
|
||||
indices.push(idx);
|
||||
idx = gameWord.split("").indexOf(letter, idx + 1);
|
||||
}
|
||||
indices.forEach(function(item, indices) {
|
||||
let wordArray = gameAnswered.split("");
|
||||
wordArray[item] = letter;
|
||||
gameAnswered = wordArray.join("");
|
||||
document.querySelector("#word").innerHTML = gameAnswered;
|
||||
updateStats("stCorrLetter");
|
||||
});
|
||||
if (gameAnswered.split("").indexOf("-") == -1) {
|
||||
updateStats("stWinWords");
|
||||
// display win scene
|
||||
document.querySelector("#keyboard").innerHTML = '\t\t<img src="https://icongr.am/clarity/happy-face.svg?size=128&color=28bd14">\t\t<h1 class="text-success">Your winner!!</h1>\t\t<button class="button error" onclick="document.location.reload(true);"\t\t>Restart game</button>';
|
||||
}
|
||||
}
|
||||
|
||||
// action by wrong letter
|
||||
function wrongLetter()
|
||||
{
|
||||
if (lives <= 0)
|
||||
{
|
||||
updateStats('stTotalGames');
|
||||
|
||||
// display hidden word
|
||||
document.querySelector("#word").innerHTML = gameWord;
|
||||
document.querySelector("#word").classList.add('text-success');
|
||||
|
||||
// display lose scene
|
||||
document.querySelector('#keyboard').innerHTML = '\
|
||||
<img src="https://icongr.am/clarity/sad-face.svg?size=128&color=d43939">\
|
||||
<h1 class="text-error">Your lose!!</h1>\
|
||||
<button class="button error" onclick="document.location.reload(true);"\
|
||||
>Restart game</button>';
|
||||
}
|
||||
|
||||
lives -= 1;
|
||||
document.querySelector("#lives").innerHTML = 'Lives ' + lives;
|
||||
function wrongLetter() {
|
||||
if (lives <= 0) {
|
||||
updateStats("stTotalGames");
|
||||
// display hidden word
|
||||
document.querySelector("#word").innerHTML = gameWord;
|
||||
document.querySelector("#word").classList.add("text-success");
|
||||
// display lose scene
|
||||
document.querySelector("#keyboard").innerHTML = '\t\t<img src="https://icongr.am/clarity/sad-face.svg?size=128&color=d43939">\t\t<h1 class="text-error">Your lose!!</h1>\t\t<button class="button error" onclick="document.location.reload(true);"\t\t>Restart game</button>';
|
||||
}
|
||||
lives -= 1;
|
||||
document.querySelector("#lives").innerHTML = "Lives " + lives;
|
||||
}
|
||||
|
||||
// display tab content
|
||||
function showPage(element, pageName)
|
||||
{
|
||||
// alert(event.srcElement.id);
|
||||
|
||||
['gameButton', 'statsButton', 'creditsButton'].forEach(function(item)
|
||||
{
|
||||
document.querySelector("#" + item).classList.remove('active');
|
||||
});
|
||||
document.querySelector("#" + element.id).classList.add('active');
|
||||
|
||||
document.querySelector("#content").innerHTML = pageName;
|
||||
|
||||
if (pageName == pageStatistics) { updateStatsPage(); }
|
||||
function showPage(element, pageName) {
|
||||
// alert(event.srcElement.id);
|
||||
[ "gameButton", "statsButton", "creditsButton" ].forEach(function(item) {
|
||||
document.querySelector("#" + item).classList.remove("active");
|
||||
});
|
||||
document.querySelector("#" + element.id).classList.add("active");
|
||||
document.querySelector("#content").innerHTML = pageName;
|
||||
if (pageName == pageStatistics) {
|
||||
updateStatsPage();
|
||||
}
|
||||
}
|
||||
|
||||
// game init
|
||||
window.onload = function()
|
||||
{
|
||||
updateStats('stCheck');
|
||||
|
||||
generateKeyboard(keyboardLayouts['usQwertyKeyboard']);
|
||||
document.querySelector('#lives').innerHTML = 'Lives ' + lives;
|
||||
console.log('Word:', gameWord.toLowerCase());
|
||||
document.querySelector('#word').innerHTML = gameAnswered;
|
||||
|
||||
if (window.screen.availWidth <= 599)
|
||||
{
|
||||
document.querySelector('#lives').classList.remove('error');
|
||||
document.querySelector('#lives').classList.add('dark');
|
||||
}
|
||||
}
|
||||
window.onload = function() {
|
||||
updateStats("stCheck");
|
||||
generateKeyboard(keyboardLayouts["usQwertyKeyboard"]);
|
||||
document.querySelector("#lives").innerHTML = "Lives " + lives;
|
||||
console.log("Word:", gameWord.toLowerCase());
|
||||
document.querySelector("#word").innerHTML = gameAnswered;
|
||||
if (window.screen.availWidth <= 599) {
|
||||
document.querySelector("#lives").classList.remove("error");
|
||||
document.querySelector("#lives").classList.add("dark");
|
||||
}
|
||||
};
|
||||
|
|
@ -17,7 +17,8 @@
|
|||
},
|
||||
"scripts": {
|
||||
"build": "uglifyjs js/_* js/index.js -o docs/game.js",
|
||||
"server": "python3.7 -m http.server --directory ./docs/"
|
||||
"server": "python3.7 -m http.server --directory ./docs/",
|
||||
"beautify": "uglifyjs -b beautify,comments ${} -o ${}"
|
||||
},
|
||||
"devDependencies": {
|
||||
"uglify-js": "^3.12.8"
|
||||
|
|
|
|||
Loading…
Reference in New Issue