From b6d95a7dde0012d8299301383570f967266eb4c3 Mon Sep 17 00:00:00 2001
From: Dorian Pula <dorian.pula@points.com>
Date: Thu, 17 Dec 2020 14:10:19 -0500
Subject: [PATCH] Improve style for frame.

---
 fixed-size.html | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)
diff --git a/fixed-size.html b/fixed-size.html
index 8d190c6..af96188 100644
--- a/fixed-size.html
+++ b/fixed-size.html
@@ -195,7 +195,7 @@
 $GODOT_HEAD_INCLUDE
 </head>
 <body>
-    <div id="game_box" class="game_frame hidden">
+    <div id="game" class="pretty-frame hidden">
         <h1>Click to Victory!</h1>
         <div id="container">
             <canvas id="canvas" width="640" height="480">
@@ -415,9 +415,17 @@ $GODOT_HEAD_INCLUDE
             const gameLauncher = document.querySelector("#gameLauncher");
             gameLauncher.remove();
 
-            const gameFrame = document.querySelector("#game_box");
-            gameFrame.className = "game_frame";
-        }
+            const gameFrame = document.querySelector("#game");
+            showElement(gameFrame);
+		}
+		
+		const hideElement = (element) => {
+			element.className = "pretty-frame hidden"
+		}
+
+		const showElement = (element) => {
+			element.className = "pretty-frame"
+		}
  
         window.addEventListener("load", () => {
             // Prevent the game launcher form from redirect on submit.
@@ -436,10 +444,10 @@ $GODOT_HEAD_INCLUDE
         }
 
 		const showScoresAfterGameEnd = () => {
-			const game_box = document.querySelector('#game_box');
-			game_box.remove();
-			const score_list = document.querySelector('#scoreList');
-			score_list.className = "game_frame";
+			const game = document.querySelector('#game');
+			hideElement(game);
+			const finalScoreBox = document.querySelector('#scoreList');
+			showElement(finalScoreBox);
         }
 
         const updateScoreMessage = () => {
@@ -457,7 +465,7 @@ $GODOT_HEAD_INCLUDE
 			height: 0px;
 		}
 
-        .game_frame {
+        .pretty-frame {
 			background-color: #383838;
 			color: #f0f0f0;
 			width: 66%;
@@ -468,7 +476,7 @@ $GODOT_HEAD_INCLUDE
 		}
     </style>
     
-    <div id="gameLauncher" class="game_frame">
+    <div id="gameLauncher" class="pretty-frame">
         <h1>Click to Victory!</h1>
         <form>
             <label for="playerName">Player Name</label>
@@ -477,7 +485,7 @@ $GODOT_HEAD_INCLUDE
         </form>
     </div>
 
-	<div id="scoreList" class="game_frame hidden">
+	<div id="scoreList" class="pretty-frame hidden">
         <h1 id="scoreMessage">Your Score Here</h2>
     </div>
     <!-- End of Custom Game block -->
