diff --git a/.gitignore b/.gitignore index 589cd6b..41c6e40 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ node_modules/ package-lock.json - +*.afdesign _media/css/chota.min.css diff --git a/CHANGELOG.md b/CHANGELOG.md index cb16f8f..5e8eea8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## 2.0.2 # Build 2 [2021-02-25] +- ➕ - Added game statistics - ✔️ - Fix keyboard fize on big screen +- ♻️ - JS code replace `var` by `let` ## 2.0.1 [2021-02-25] - ℹ️ - Make iOS web app diff --git a/index.html b/index.html index 12607d3..b35af30 100644 --- a/index.html +++ b/index.html @@ -95,6 +95,7 @@ + diff --git a/js/game.js b/js/game.js index 6254e35..adaaa64 100644 --- a/js/game.js +++ b/js/game.js @@ -16,15 +16,15 @@ let gameWord = words[Math.floor(Math.random() * words.length)].toUpperCase(); let gameAnswered = new Array(gameWord.length + 1).join('-'); let lives = 6; -// Функция генерации html кода клавиатуры +// init keyboard function generateKeyboard(layout) { - var keyboardHtmlStr = ''; + let keyboardHtmlStr = ''; layout.split('').forEach(function(letter) { keyboardHtmlStr = keyboardHtmlStr + ''; + '" onclick="letterClick(\'' + letter + '\')"> ' + letter + ''; }) let keyboard = document.querySelector("#keyboard"); @@ -32,17 +32,20 @@ function generateKeyboard(layout) document.querySelector("#keyboard").innerHTML = keyboardHtmlStr; } -function offChar(letter) +// letter click action +function letterClick(letter) { - var charButton = document.getElementById(letter); + let charButton = document.getElementById(letter); charButton.disabled = true; - var indices = []; - var idx = gameWord.split('').indexOf(letter) + let indices = []; + let idx = gameWord.split('').indexOf(letter) if (idx == -1) { - wrong(); + wrongLetter(); + + updateStats('stLetterClick'); return; } @@ -54,30 +57,29 @@ function offChar(letter) indices.forEach(function(item, indices) { - var wordArray = gameAnswered.split('') + let wordArray = gameAnswered.split('') wordArray[item] = letter; gameAnswered = wordArray.join(''); document.querySelector("#word").innerHTML = gameAnswered; - var wordsAnswered = localStorage.getItem('wordsAnswered'); - localStorage.setItem('wordsAnswered', parseInt(wordsAnswered) + 1); + + updateStats('stCorrLetter'); }) if (gameAnswered.split('').indexOf('-') == -1) { - var gamesWon = localStorage.getItem('gamesWon'); - localStorage.setItem('gamesWon', parseInt(gamesWon) + 1); alert('You Win'); + updateStats('stWinWords'); document.location.reload(true); } } -function wrong() +// action by wrong letter +function wrongLetter() { if (lives <= 0) { - var gamesFail = localStorage.getItem('gamesFail'); - localStorage.setItem('gamesFail', parseInt(gamesFail) + 1); alert('You dead'); + updateStats('stTotalGames'); document.location.reload(true); } @@ -85,7 +87,7 @@ function wrong() document.querySelector("#lives").innerHTML = 'Lives ' + lives; } - +// display tab content function showPage(element, pageName) { // alert(event.srcElement.id); @@ -97,11 +99,15 @@ function showPage(element, pageName) document.querySelector("#" + element.id).classList.add('active'); document.querySelector("#content").innerHTML = pageName; + + if (pageName == pageStatistics) { updateStatsPage(); } } -// game +// game init window.onload = function() { + updateStats('stCheck'); + generateKeyboard(keyboardLayouts['usQwertyKeyboard']); document.querySelector('#lives').innerHTML = 'Lives ' + lives; console.log('Word:', gameWord.toLowerCase()); diff --git a/js/pageStatistics.js b/js/pageStatistics.js index 14ae38b..a31e9b9 100644 --- a/js/pageStatistics.js +++ b/js/pageStatistics.js @@ -11,29 +11,50 @@ const pageStatistics = '\ \ \ \ - Всего игр\ - 0\ + Total games\ + ...\ \ \ - Отгаданных слов\ - 0\ + Guess words\ + ...\ \ \ - % побед\ - 0\ + % Win\ + ...\ \ \ - Всего букв нажато\ - 0\ + Total letters clicked\ + ...\ \ \ - Букв отгадано\ - 0\ + Correctly guessed letters\ + ...\ \ \ - Процент верных букв\ - 0\ + % correctly letters\ + ...\ \ \ \ +

\ + Clear statistics\ +

\ '; + + +function updateStatsPage() +{ + let stTotalGames = localStorage.getItem('stTotalGames'); + let stWinWords = localStorage.getItem('stWinWords'); + let stWinPercentage = localStorage.getItem('stWinPercentage'); + let stLetterClick = localStorage.getItem('stLetterClick'); + let stCorrLetter = localStorage.getItem('stCorrLetter'); + let stWinLetterPercent = localStorage.getItem('stWinLetterPercent'); + + document.querySelector('#stTotalGames').innerHTML = stTotalGames; + document.querySelector('#stWinWords').innerHTML = stWinWords; + document.querySelector('#stWinPercentage').innerHTML = Math.round((stWinWords / stTotalGames) * 100); + document.querySelector('#stLetterClick').innerHTML = stLetterClick; + document.querySelector('#stCorrLetter').innerHTML = stCorrLetter; + document.querySelector('#stWinLetterPercent').innerHTML = Math.round((stCorrLetter / stLetterClick) * 100); +} diff --git a/js/statFunction.js b/js/statFunction.js new file mode 100644 index 0000000..c07e719 --- /dev/null +++ b/js/statFunction.js @@ -0,0 +1,36 @@ +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; + 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); } + + break; + } +}