Merge pull request #53 from es-rene99/feature/game-elems-positions-#3…

…2-fixed Feature/game elems positions #32 fixed
es-rene99 · Jul 25, 2021 · d5becea · d5becea
2 parents acd5950 + 75ab2b3
commit d5becea
Show file tree

Hide file tree

Showing 7 changed files with 304 additions and 118 deletions.
diff --git a/index.html b/index.html
@@ -5,42 +5,76 @@
     <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="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="./src/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="http://fonts.googleapis.com/css?family=Press+Start+2P"
+      type="text/css"
+    />
     <link rel="stylesheet" href="./src/sanitize.css" />
+    <link rel="stylesheet" href="./src/style.css" />
   </head>
   <body>
+    <div class="app-wrapper">
+      <!-- <div class="lightining"></div> -->
+
+      <aside class="left-sidebar sidebar">
+        <div id="game-left-panel" 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">Items:</h1>
+            <div class="items__container">
+              <!-- TODO generate a list of items in JS -->
+            </div>
+          </div>
+        </div>
+      </aside>
 
-    <!-- <div class="lightining"></div> -->
-    <div class="thunder">  </div>
-    <main id="main__game" class="main__game">
+      <main id="main__game" class="main__game">
+        <div id="start-container">
+          <div class="thunder"></div>
+          <h1 id="opening-title">Calculationster</h1>
+          <div class="btn-container">
+            <button id="game__start-btn" class="game__start-btn">Start</button>
+          </div>
+        </div>
 
-      <div id="game__timer" class="game__timer hidden-element">
-        <h1 class="timer__title">TIME</h1>
-        <div id="timer-animation-container"></div>
-        <div class="timer__label" id="gameTimer"></div>
-
-      </div>
-      <div class="operation__list">
-        <div class="operation__item">
-          <p 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">
+            <img src="" alt="" id="monster" class="monster" />
+          </div>
         </div>
-        <div class="monster">
-          <img src="" alt="" id="monster">
+        <div class="game____over" id="game____overdiv"></div>
+      </main>
+
+      <aside class="right-sidebar sidebar">
+        <div id="game-right-panel" class="game-right-panel hidden-element">
+          <div id="game__timer" class="game__timer hidden-element">
+            <h1 class="timer__title">TIME:</h1>
+            <div id="timer-animation-container"></div>
+            <div class="timer__label" id="gameTimer"></div>
+          </div>
+          <div id="game__score" class="game__score">
+            <h1 class="score__title">SCORE:</h1>
+            <!-- TODO gameScore functionality -->
+            <label class="score__label" id="gameScore">0</label>
+          </div>
         </div>
-      </div>
-      <div id="start-container">
-      <h1 id='opening-title'>Calculationster</h1>
-      <div class="btn">
-      <button id="game__start-btn" class="game__start-btn">Start</button>
-      </div>
-      </div>
-    </main>
-    <div class="game____over" id="game____overdiv">
+      </aside>
     </div>
 
     <script src="./src/main.js"></script>

diff --git a/other/mockups/1-mockup-by-Arstix.png b/other/mockups/1-mockup-by-Arstix.png
diff --git a/other/mockups/1-mockup-by-Arstix.xcf b/other/mockups/1-mockup-by-Arstix.xcf
diff --git a/other/mockups/2-mockup-by-Rene.epgz b/other/mockups/2-mockup-by-Rene.epgz
diff --git a/other/mockups/2-mockup-by-Rene.png b/other/mockups/2-mockup-by-Rene.png
diff --git a/src/main.js b/src/main.js
@@ -289,7 +289,7 @@ function monsterGrowth() {
 // background switcher
 
 function changeBackground(src) {
-  document.body.style.background = src  + 'no-repeat center center fixed';
+  document.body.style.background = `${src}no-repeat center center fixed`;
   document.body.style.backgroundSize = 'cover';
 }
 
@@ -445,7 +445,7 @@ const timer = {
   gameOver() {
     this.updateDisplay('Time\'s up!');
     audioHandler.gameOver();
-    document.getElementById('main__game').innerHTML = '';
+    document.getElementById('game-wrapper').innerHTML = '';
     const div = document.createElement('div');
     div.classList.add('gameover____div');
     const text = document.createElement('h1');
@@ -525,35 +525,51 @@ function checkIfAnswerIsCorrect() {
 
 // display the problem, add input field and a button to check the result
 function displayProblem() {
-  const operationItem = document.getElementsByClassName('operation__item')[0];
-  const answerInputWrapper = document.createElement('p');
+  const operationPanel = document.getElementById('operation__panel');
+  const answerInputWrapper = document.createElement('div');
+  answerInputWrapper.classList.add('answer-input-wrapper');
   const answerInput = document.createElement('input');
   answerInput.id = 'answer';
-  operationItem.appendChild(answerInputWrapper);
+  const enterAnswerBtn = document.createElement('button');
+  enterAnswerBtn.id = 'enter-answer-btn';
+  enterAnswerBtn.classList.add('enter-answer-btn');
+  enterAnswerBtn.textContent = 'Enter';
   answerInputWrapper.appendChild(answerInput);
-  const submitButton = document.createElement('button');
-  submitButton.id = 'submit';
-  submitButton.textContent = 'submit';
-  operationItem.appendChild(submitButton);
-  submitButton.addEventListener('click', checkIfAnswerIsCorrect);
+  answerInputWrapper.appendChild(enterAnswerBtn);
+  operationPanel.appendChild(answerInputWrapper);
+  enterAnswerBtn.addEventListener('click', checkIfAnswerIsCorrect);
 }
 
 const uiHandler = {
   gameStartBtn: document.getElementById('game__start-btn'),
   gameTimer: document.getElementById('game__timer'),
   gameTitle: document.getElementById('opening-title'),
   thunder: document.getElementsByClassName('thunder')[0],
+  gameWrapper: document.getElementById('game-wrapper'),
+  gameLeftPanel: document.getElementById('game-left-panel'),
+  gameRightPanel: document.getElementById('game-right-panel'),
+  sidebars: document.getElementsByClassName('sidebar'),
+
+  toggleColorInSideBars(elements) {
+    [...elements].forEach((element) => {
+      element.classList.toggle('sidebar-colors');
+    });
+  },
   toggleHiddenElement(element) {
     element.classList.toggle('hidden-element');
   },
   activateEventListeners() {
     this.gameStartBtn.onclick = () => {
-      timer.startTimer();
+      // timer.startTimer();
       audioHandler.startBGM();
+      this.toggleHiddenElement(this.gameWrapper);
       this.toggleHiddenElement(this.gameTitle);
       this.toggleHiddenElement(this.gameStartBtn);
       this.toggleHiddenElement(this.thunder);
+      this.toggleHiddenElement(this.gameLeftPanel);
+      this.toggleHiddenElement(this.gameRightPanel);
       this.toggleHiddenElement(this.gameTimer);
+      this.toggleColorInSideBars(this.sidebars);
       changeBackground("url('assets/Backgrounds/Interior/interior04.jpg')");
       displayProblem();
       askProblem();