From 4b4cacdd82037ffebd4314e0ff9bceb26c27a6dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dorian=20Pu=C5=82a?= <dorian.pula@amber-penguin-software.ca>
Date: Thu, 17 Dec 2020 00:13:56 -0500
Subject: [PATCH] Get basic setup working for demo.

---
 fixed-size.html | 72 ++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 59 insertions(+), 13 deletions(-)
diff --git a/fixed-size.html b/fixed-size.html
index adbc947..a8f2e40 100644
--- a/fixed-size.html
+++ b/fixed-size.html
@@ -195,7 +195,8 @@
 $GODOT_HEAD_INCLUDE
 </head>
 <body>
-    <div id="game_box">
+    <div id="game_box" class="game_frame hidden">
+        <h1>Click to Victory!</h1>
         <div id="container">
             <canvas id="canvas" width="640" height="480">
                 HTML5 canvas appears to be unsupported in the current browser.<br />
@@ -389,20 +390,45 @@ $GODOT_HEAD_INCLUDE
     //]]></script>
     
     <!-- Start of Custom Game block -->
-	<script type="application/javascript">
-		const get_user_name = () => {
-			const current_url = new URL(document.URL);
-			return current_url.searchParams.get('FirstName') || document.body.dataset.memberName;
-		}
+    <script type="application/javascript">
+        const setPlayerName = () => {
+            const playerName = document.querySelector("#gameLauncher input[name=playerName]");
+            window.game = {playerName: playerName.text};
+        }
 
-		const hide_game_show_score_list = (playerName, score) => {
+        const showGame = () => {
+            const gameLauncher = document.querySelector("#gameLauncher");
+            gameLauncher.remove();
+
+            const gameFrame = document.querySelector("#game_box");
+            gameFrame.className = "game_frame";
+        }
+ 
+        window.addEventListener("load", () => {
+            // Prevent the game launcher form from redirect on submit.
+            const launcherForm = document.querySelector("#gameLauncher form");
+            launcherForm.addEventListener("submit", (event) => {
+                event.preventDefault();
+                setPlayerName();
+                showGame();
+            });
+        })
+
+        const finishGame = (playerName, score) => {
+            showScoresAfterGameEnd();
+            updateScores(playerName, score);
+        }
+
+		const showScoresAfterGameEnd = () => {
 			const game_box = document.querySelector('#game_box');
 			game_box.remove();
-			const score_list = document.querySelector('#score_list');
-			score_list.className = "";
+			const score_list = document.querySelector('#scoreList');
+			score_list.className = "game_frame";
+        }
 
+        const updateScores = (playerName, score) => {
 			// Update the score
-			const title = document.querySelector('#score_title');
+			const title = document.querySelector('#scoreMessage');
 			title.textContent = `${playerName}'s score is ${score}!`;
 		}
 
@@ -413,10 +439,30 @@ $GODOT_HEAD_INCLUDE
 			visibility: collapse;
 			height: 0px;
 		}
-	</style>
 
-	<div id="score_list" class="">
-        <h1 id="score_title">Buy Points and Redeem Your Bonus!</h1>
+        .game_frame {
+			background-color: #383838;
+			color: #f0f0f0;
+			width: 85%;
+			margin: auto;
+			margin-top: 20px;
+			padding: 25px;
+			border-radius: 25px;
+		}
+    </style>
+    
+    <div id="gameLauncher" class="game_frame">
+        <h1>Click to Victory!</h1>
+        <form>
+            <label for="playerName">Player Name</label>
+            <input name="playerName" type="text" value="Player 1" />
+            <input type="submit" value="Start the Game!" />
+        </form>
+    </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>
