diff --git a/index.html b/index.html index 31a5fa6..e3f88b5 100644 --- a/index.html +++ b/index.html @@ -67,9 +67,10 @@

Score:

- -
-

Something interesting

+ +
+

History

+
diff --git a/resources/css/style.css b/resources/css/style.css index 6a35a7b..9ed1850 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -131,3 +131,23 @@ button:disabled { .hidden { display: none; } + +.history p { + text-align: center; +} + +.history-score { + margin: 10px; + padding: 10px; + max-width: 200px; + width: 200px; + display: flex; + flex-direction: column; + gap: 5px; + font-size: 12px !important; + border-radius: 12px; + background-color: #4caf50aa; + color: #fff; + font-size: 1em; + font-family: 'Press Start 2P', cursive; +} diff --git a/resources/js/history.js b/resources/js/history.js new file mode 100644 index 0000000..c52fae6 --- /dev/null +++ b/resources/js/history.js @@ -0,0 +1,30 @@ +export class HistoryManager { + storage_key = 'history'; + history = []; + + constructor() { + this.load(); + } + + load() { + let stored = JSON.parse(localStorage.getItem(this.storage_key)); + if (stored === null) { + stored = []; + this.save(stored); + } + this.history = stored; + return this.history; + } + + append(score) { + this.history.push(score); + this.save(); + } + + save(value) { + localStorage.setItem( + this.storage_key, + JSON.stringify(value ? value : this.history) + ); + } +} diff --git a/resources/js/index.js b/resources/js/index.js index 4921acb..68effd0 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -1,4 +1,6 @@ import { audioPlayer, backgroundMusicPlayer } from './AudioPlayer.js'; +import { HistoryManager } from './history.js' + // Generate a randiom number between 1 and 10 let targetNumber = Math.floor(Math.random() * 10) + 1; const guessInput = document.getElementById('guessInput'); @@ -18,8 +20,10 @@ const applySettingsButton = document.getElementById('savesettings'); const toggleBgMusic = document.getElementById('toggleBgMusic'); const stopBgMusicButton = document.getElementById('stopBgMusic'); // const timeBox = document.getElementById('time'); +const historyManager = new HistoryManager(); let attempts = 0; +let score = 100; function regenerateVar() { // Generate the random number based on the range selected by the user const min = parseInt(range1.value); @@ -136,6 +140,12 @@ function checkGuess() { 60 - timerSeconds } seconds.` ); + historyManager.append({ + attempts, + timer: timerSeconds, + score, + }) + } else if (playerGuess < targetNumber) { messageBox.id = 'message-error'; displayMessage(`Wrong guess. Try again.`); @@ -172,7 +182,7 @@ function resetGame() { regenerateVar(); attempts = 0; timerSeconds = 60; - let score = 100; + score = 100; // targetNumber = Math.floor(Math.random() * 10) + 1; guessInput.value = ''; guessInput.disabled = false; @@ -288,3 +298,22 @@ stopBgMusicButton.addEventListener('click', () => { backgroundMusicPlayer.playRandomTrack(); }); +window.addEventListener("DOMContentLoaded", ()=>{ + console.log(historyManager.history); + for(const item of historyManager.history){ + const div = document.createElement('div') + div.classList.add('history-score') + + const attempts = document.createElement('span') + attempts.innerText = `Attempts: ${item.attempts}` + const score = document.createElement('span') + score.innerText = `Score: ${item.score}` + const timer = document.createElement('span') + timer.innerText = `Time: ${item.timer}` + + div.appendChild(score) + div.appendChild(attempts) + div.appendChild(timer) + document.getElementById('history-scores').appendChild(div) + } +})