From ca04609a8c45b6bf105dcce209f01e31fff97470 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 2 Jan 2024 19:28:02 +0100
Subject: [PATCH 1/4] Update history section in index.html

---
 index.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 31a5fa6..e3f88b5 100644
--- a/index.html
+++ b/index.html
@@ -67,9 +67,10 @@ <h1 class="shake"> Score:<span id="score"></span></h1>
 
 	<div class="devider"></div>
 
-	<!-- Something -->
-	<div class="something-container">
-		<p>Something interesting</p>
+	<!-- History -->
+	<div class="history">
+		<p>History</p>
+		<div id="history-scores"></div>
 	</div>
 	</div>
 	</body>

From e9bcb0e138ec8c6e47c5ff9cd1a21f43adcf66ab Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 2 Jan 2024 20:30:28 +0100
Subject: [PATCH 2/4] Add HistoryManager class to manage history in
 localStorage

---
 resources/js/history.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 resources/js/history.js

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

From a9cc4314bb138f1138611b195522aa498b4c8106 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 2 Jan 2024 20:31:08 +0100
Subject: [PATCH 3/4] Load and display history to page

---
 resources/js/index.js | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

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

From 39318889a18f038e7fe7f329de58ad6dc1dda7fb Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 2 Jan 2024 20:31:20 +0100
Subject: [PATCH 4/4] Add styling for history

---
 resources/css/style.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

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