add game statistics

.gitignore

@@ -1,5 +1,5 @@
 node_modules/
 package-lock.json
-
+*.afdesign
 
 _media/css/chota.min.css

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

index.html

@@ -95,6 +95,7 @@
   </script>
   <script type="text/javascript" src="js/pageStatistics.js?v=1"></script>
   <script type="text/javascript" src="js/pageCredits.js?v=1"></script>
+  <script type="text/javascript" src="js/statFunction.js?v=1"></script>
   <script type="text/javascript" src="js/game.js?v=2"></script>
 </body>
 </html>

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 + '<button class="button clear is-marginless" id="' + letter +
-			'" onclick="offChar(\'' + letter + '\')"> ' + letter + '</button>';
+			'" onclick="letterClick(\'' + letter + '\')"> ' + letter + '</button>';
 	})
 
 	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());

js/pageStatistics.js

@@ -11,29 +11,50 @@ const pageStatistics = '\
 		</thead>\
 		<tbody>\
 			<tr>\
-				<th>Всего игр</th>\
-				<th id="stTotalGames">0</th>\
+				<th>Total games</th>\
+				<th id="stTotalGames">...</th>\
 			</tr>\
 			<tr>\
-				<th>Отгаданных слов</th>\
-				<th id="stWinWords">0</th>\
+				<th>Guess words</th>\
+				<th id="stWinWords">...</th>\
 			</tr>\
 			<tr>\
-				<th>% побед</th>\
-				<th id="stWinPercentage">0</th>\
+				<th>% Win</th>\
+				<th id="stWinPercentage">...</th>\
 			</tr>\
 			<tr>\
-				<th>Всего букв нажато</th>\
-				<th id="stLetterClick">0</th>\
+				<th>Total letters clicked</th>\
+				<th id="stLetterClick">...</th>\
 			</tr>\
 			<tr>\
-				<th>Букв отгадано</th>\
-				<th id="stWinLetter">0</th>\
+				<th>Correctly guessed letters</th>\
+				<th id="stCorrLetter">...</th>\
 			</tr>\
 			<tr>\
-				<th>Процент верных букв</th>\
-				<th id="stWinLetterPercent">0</th>\
+				<th>% correctly letters</th>\
+				<th id="stWinLetterPercent">...</th>\
 			</tr>\
 		</tbody>\
 	</table>\
+	<p class="text-center">\
+		<buttton class="button error" onclick="localStorage.clear();">Clear statistics</buttton>\
+	</p>\
 ';
+
+
+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);
+}

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;
+	}
+}