refactor: #32 html elements for base game

es-rene99 · Jul 18, 2021 · c7df289 · c7df289
1 parent 2c6ef5b
commit c7df289
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -5,21 +5,43 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Calculationster</title>
-    <link rel="stylesheet" href="./src/style.css" />
     <link rel="stylesheet" href="./src/sanitize.css" />
+    <link rel="stylesheet" href="./src/style.css" />
   </head>
   <body>
     <div class="app-wrapper">
-      <aside class="left-sidebar"></aside>
+      <aside class="left-sidebar">
+        <div class="game-left-panel hidden-element">
+          <h1 id="game-left-panel__title" class="game-left-panel__title">
+            Calculationster
+          </h1>
+          <div class="game-left-panel__items">
+            <h1 class="items__header"></h1>
+            <div class="items__container"></div>
+          </div>
+        </div>
+      </aside>
+
       <main id="main__game" class="main__game">
         <div id="title-screen">
-          <h1 class="title-screen__title">Calculationster</h1>
+          <h1 id="left-sidebar__title" class="title-screen__title">
+            Calculationster
+          </h1>
           <button id="game__start-btn" class="game__start-btn">Start</button>
         </div>
-        <div id="operation__panel" class="operation__panel hidden-element">
-          <p id="operation__question" class="operation__question"></p>
+
+        <div id="game-wrapper" class="game-wrapper hidden-element">
+          <div id="operation__panel" class="operation__panel">
+            <p id="operation__question" class="operation__question"></p>
+          </div>
+          <div
+            id="player-notification-msgs"
+            class="player-notification-msgs"
+          ></div>
+          <div id="monster-container" class="monster-container"></div>
         </div>
       </main>
+
       <aside class="right-sidebar">
         <div id="game__timer" class="game__timer hidden-element">
           <h1 class="timer__title">Time:</h1>

diff --git a/src/main.js b/src/main.js
@@ -4,6 +4,7 @@ Contains the constant uiElements, TODO still need to refactor
 const predefinedUIElements = {
   gameStartBtn: document.getElementById('game__start-btn'),
   gameTimer: document.getElementById('game__timer'),
+  gameWrapper: document.getElementById('game-wrapper'),
   operationPanel: document.getElementById('operation__panel'),
   operationQuestion: document.getElementById('operation__question'),
 };
@@ -279,7 +280,7 @@ const uiHandler = {
       timer.startTimer();
       this.toggleHiddenElement(predefinedUIElements.gameStartBtn);
       this.toggleHiddenElement(predefinedUIElements.gameTimer);
-      this.toggleHiddenElement(predefinedUIElements.operationPanel);
+      this.toggleHiddenElement(predefinedUIElements.gameWrapper);
       displayProblem();
       askProblem();
     };