From da40b38fd279d077d1f62a395d0615bd108a785e Mon Sep 17 00:00:00 2001
From: Dorian Pula <dorian.pula@points.com>
Date: Thu, 17 Dec 2020 10:22:22 -0500
Subject: [PATCH] Update the shell to handle names and scores via local
 storage.

---
 fixed-size.html | 45 +++++++++++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/fixed-size.html b/fixed-size.html
index a8f2e40..4957d19 100644
--- a/fixed-size.html
+++ b/fixed-size.html
@@ -392,9 +392,25 @@ $GODOT_HEAD_INCLUDE
     <!-- Start of Custom Game block -->
     <script type="application/javascript">
         const setPlayerName = () => {
-            const playerName = document.querySelector("#gameLauncher input[name=playerName]");
-            window.game = {playerName: playerName.text};
-        }
+			const nameInput = document.querySelector("#gameLauncher input[name=playerName]");
+			const store = window.localStorage;
+			store.setItem("playerName", nameInput.value);
+		}
+		
+		const getPlayerName = () =>  {
+			const store = window.localStorage;
+			return store.getItem("playerName") || "Unknown Player"
+		}
+
+		const setPlayerScore = (score) => {
+			const store = window.localStorage;
+			store.setItem("playerScore", score);
+		}
+
+		const getPlayerScore = () =>  {
+			const store = window.localStorage;
+			return store.getItem("playerScore") || "0"
+		}
 
         const showGame = () => {
             const gameLauncher = document.querySelector("#gameLauncher");
@@ -414,9 +430,10 @@ $GODOT_HEAD_INCLUDE
             });
         })
 
-        const finishGame = (playerName, score) => {
-            showScoresAfterGameEnd();
-            updateScores(playerName, score);
+        const finishGame = (score) => {
+			showScoresAfterGameEnd();
+			setPlayerScore(score);
+            updateScoreMessage();
         }
 
 		const showScoresAfterGameEnd = () => {
@@ -426,10 +443,11 @@ $GODOT_HEAD_INCLUDE
 			score_list.className = "game_frame";
         }
 
-        const updateScores = (playerName, score) => {
-			// Update the score
+        const updateScoreMessage = () => {
+			const playerName = getPlayerName();
+			const score = getPlayerScore();
 			const title = document.querySelector('#scoreMessage');
-			title.textContent = `${playerName}'s score is ${score}!`;
+			title.innerHTML = `Congratulations ${playerName}!<br /> Your score is ${score}!`;
 		}
 
     </script>
@@ -443,7 +461,7 @@ $GODOT_HEAD_INCLUDE
         .game_frame {
 			background-color: #383838;
 			color: #f0f0f0;
-			width: 85%;
+			width: 66%;
 			margin: auto;
 			margin-top: 20px;
 			padding: 25px;
@@ -461,12 +479,7 @@ $GODOT_HEAD_INCLUDE
     </div>
 
 	<div id="scoreList" class="game_frame hidden">
-        <h1>Click to Victory High Scores</h1>
-        <h2 id="scoreMessage">Your Score Here</h2>
-        <h2>High Scores</h2>
-        <ul>
-            <li>Player: 1000</li>
-        </ul>
+        <h1 id="scoreMessage">Your Score Here</h2>
     </div>
     <!-- End of Custom Game block -->
 </body>