Display Cost infos in build menu + minor fixes

dorianbayart · Apr 7, 2024 · e81ba76 · e81ba76
1 parent f20160f
commit e81ba76
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 41 deletions.
diff --git a/upgrade/events.js b/upgrade/events.js
@@ -1,5 +1,7 @@
 import { ammoStart } from './script.js'
 import { hideGameBuildOptions, buttonclose } from './gui.js';
+import { towerTypeToLabel } from './helpers.js';
+import { TOWER_TYPES } from './types.js';
 
 import g from './global.js'
 
@@ -137,13 +139,23 @@ export const initGameButtonsEvents = () => {
     g.gameManager.game.towerTypes.forEach((type, i) => {
       const li = document.createElement('li')
       li.onclick = function() {
-        console.log(type)
         hideGameBuildOptions()
         g.gui.buildType = type
         g.scene.add(g.gui.cursor)
       }
       li.classList.add('button')
-      li.innerHTML = type.charAt(0) + type.slice(1).toLowerCase()
+      li.innerHTML = null
+      const spanLabel = document.createElement('span')
+      spanLabel.innerHTML = towerTypeToLabel(type)
+      spanLabel.classList.add('label')
+      li.appendChild(spanLabel)
+      const spanCost = document.createElement('span')
+      spanCost.innerHTML = TOWER_TYPES[type].cost
+      spanCost.classList.add('cost')
+      const imgMoney = document.createElement('img')
+      imgMoney.src = '../public/icons/money-alt.svg'
+      spanCost.appendChild(imgMoney)
+      li.appendChild(spanCost)
       gameBuildOptions.appendChild(li)
     })
     const liBack = document.createElement('li')

diff --git a/upgrade/gui.js b/upgrade/gui.js
@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import g from './global.js';
+import { towerTypeToLabel } from './helpers.js';
 import { COLOR, THREE_COLOR } from './constants.js';
 import { TOWER_TYPES } from './types.js';
 import { toggleElementVisibility } from './events.js';
@@ -274,14 +275,16 @@ export class Gui {
   createTowerGui_close = () => {
       document.getElementById('createTowerDiv').style.display = 'none';
   };
-  infoTowerGui_open = (speed, power, range) => {
+  infoTowerGui_open = (type, level, speed, power, range) => {
+      document.getElementById('towerInfo').innerHTML = `${towerTypeToLabel(type)} - Level ${level}`;
       document.getElementById('speed').innerHTML = Math.round(1/speed * 10) / 10;
       document.getElementById('power').innerHTML = power;
       document.getElementById('range').innerHTML = range;
-      document.getElementById('TowerInfoDiv').style.display = 'block';
+      document.getElementById('towerInfoDiv').style.display = 'block';
   };
   infoTowerGui_close = () => {
-      document.getElementById('TowerInfoDiv').style.display = 'none';
+      document.getElementById('towerInfoDiv').style.display = 'none';
+      document.getElementById('towerInfo').innerHTML = 'NULL';
       document.getElementById('speed').innerHTML = 'NULL';
       document.getElementById('power').innerHTML = 'NULL';
       document.getElementById('range').innerHTML = 'NULL';
@@ -313,7 +316,7 @@ export class Gui {
               rangeTower.position.set(this.cursor.position.x, mazeMesh.position.y + mazeMesh.geometry.parameters.height/2, this.cursor.position.z);
               g.towerManager.rangeTowerToDisplay = rangeTower;
               g.scene.add(rangeTower);
-              this.infoTowerGui_open(checkTower.speed, checkTower.power, checkTower.range);
+              this.infoTowerGui_open(checkTower.type, checkTower.level, checkTower.speed, checkTower.power, checkTower.range);
 
               g.scene.remove(g.gui.cursor);
               g.gui.buildType = undefined;
@@ -354,7 +357,7 @@ export class Gui {
       const checkTower = g.towerManager.getTowerAtPosition(this.cursor.position.x, this.cursor.position.z);
       const mazeMesh = g.mazeManager.maze.map[0][0].mesh;
 
-      if (this.cursorValid && g.gui.buildType) {
+      if (this.cursorValid && g.gui?.buildType) {
           this.cursor.material.color = THREE_COLOR.GREEN;
 
           if (checkTower === null) {
@@ -380,14 +383,14 @@ export class Gui {
             if(tmpRangeTower) g.scene.remove(tmpRangeTower);
             g.towerManager.rangeTowerToDisplay = undefined;
           }
-      } else if (this.cursorValid && checkTower && !g.gui.buildType && !g.towerManager.selectedTower) {
+      } else if (this.cursorValid && checkTower && g.gui && !g.gui.buildType && !g.towerManager.selectedTower) {
         var tmpRangeTower = g.towerManager.rangeTowerToDisplay;
         if(tmpRangeTower) g.scene.remove(tmpRangeTower);
         var rangeTower = TOWER_TYPES[checkTower.type].rangeMesh.clone();
         rangeTower.position.set(this.cursor.position.x, mazeMesh.position.y + mazeMesh.geometry.parameters.height/2, this.cursor.position.z);
         g.towerManager.rangeTowerToDisplay = rangeTower;
         g.scene.add(rangeTower);
-      } else if(!g.towerManager.selectedTower && !g.gui.buildType && (!checkTower || !this.cursorValid)) {
+      } else if(!g.towerManager.selectedTower && g.gui && !g.gui.buildType && (!checkTower || !this.cursorValid)) {
         var tmpRangeTower = g.towerManager.rangeTowerToDisplay;
         if(tmpRangeTower) g.scene.remove(tmpRangeTower);
         g.towerManager.rangeTowerToDisplay = undefined;

diff --git a/upgrade/helpers.js b/upgrade/helpers.js
@@ -1,12 +1,9 @@
-let boxShape;
-let transform;
-let vector;
-let quaternion;
+let boxShape, transform, vector, quaternion
 
 export const btBoxShape = (x, y, z) => {
-    if(boxShape) boxShape.setLocalScaling(btVector(x, y, z));
-    else boxShape = new Ammo.btBoxShape( btVector() );
-    return boxShape;
+    if(boxShape) boxShape.setLocalScaling(btVector(x, y, z))
+    else boxShape = new Ammo.btBoxShape( btVector() )
+    return boxShape
 }
 
 export const btVector = (x, y, z) => {
@@ -15,42 +12,46 @@ export const btVector = (x, y, z) => {
     } else {
       vector = new Ammo.btVector3(x, y, z)
     }
-    return vector;
+    return vector
 }
 
 export const btQuaternion = (x, y, z, w) => {
     if(quaternion) {
-      quaternion.setValue(x, y, z, w);
+      quaternion.setValue(x, y, z, w)
     } else {
-      quaternion = new Ammo.btQuaternion(x, y, z, w);
+      quaternion = new Ammo.btQuaternion(x, y, z, w)
     }
-    return quaternion;
+    return quaternion
 }
 
 export const btTransform = (vector, quaternion) => {
   if(transform) {
-    transform.setOrigin( vector );
-    transform.setRotation( quaternion );
+    transform.setOrigin( vector )
+    transform.setRotation( quaternion )
   } else {
-    transform = new Ammo.btTransform();
-    transform.setIdentity();
+    transform = new Ammo.btTransform()
+    transform.setIdentity()
   }
-  return transform;
+  return transform
 }
 
-export const getShuffledArr = arr => {
+export const getShuffledArr = (arr) => {
     const newArr = arr.slice()
     for (let i = newArr.length - 1; i > 0; i--) {
-        const rand = Math.floor(Math.random() * (i + 1));
-        [newArr[i], newArr[rand]] = [newArr[rand], newArr[i]];
+        const rand = Math.floor(Math.random() * (i + 1)); // ; is required because of next line
+        [newArr[i], newArr[rand]] = [newArr[rand], newArr[i]]
     }
     return newArr
 };
 
 export const toDegrees = (radians) => {
-    return radians * (180 / Math.PI);
+    return radians * (180 / Math.PI)
 };
 
 export const toRadians = (degrees) => {
-    return degrees * (Math.PI / 180);
+    return degrees * (Math.PI / 180)
 };
+
+export const towerTypeToLabel = (type) => {
+  return type.split('_').map(l => l.charAt(0).toUpperCase()+l.slice(1).toLowerCase()).join(' ')
+}
diff --git a/upgrade/index.html b/upgrade/index.html
@@ -60,13 +60,12 @@ <h2 style="text-align : center;">Create Tower ?</h2>
         </div>-->
 
         <!-- TOWER INFO MENU -->
-        <div id="TowerInfoDiv" class="popupdiv">
-            <h2 style="text-align : center;">Selected Tower Info</h2>
-            <p>Hit per second : <span id="speed">NULL</span> / Power : <span id="power">NULL</span> / Range : <span id="range">NULL</span></p>
-            </br>
-            <div style="display:flex;  align-items: center; justify-content: center;">
+        <div id="towerInfoDiv" class="popupdiv">
+            <h2 id="towerInfo">Name - Level</h2>
+            <p class="description">Hit per second : <span id="speed">NULL</span> / Power : <span id="power">NULL</span> / Range : <span id="range">NULL</span></p>
+            <div class="buttons-container">
                 <button class="buttonYesNo buttonno" id="buttondelete">Delete Tower</button>
-                <div style="width : 5%"></div>
+                <div class="separator"></div>
                 <button class="buttonYesNo buttonyes" id="buttonclose">Close</button>
             </div>
         </div>

diff --git a/upgrade/style-game.css b/upgrade/style-game.css
@@ -61,7 +61,42 @@ ul#gameBuildOptions li.back img {
   filter: invert(1);
 }
 
+ul#gameBuildOptions li .label {
+  flex-grow: 1;
+}
+
+ul#gameBuildOptions li .cost {
+  display: flex;
+  align-items: center;
+}
+
+ul#gameBuildOptions li .cost img {
+  height: 24px;
+  margin-left: 4px;
+}
+
 /* UI */
+#towerInfoDiv h2 {
+  text-align: center;
+  font-weight: normal;
+  margin-bottom: 0.8rem;
+}
+
+#towerInfoDiv .description {
+  font-weight: lighter;
+  margin: 1rem;
+}
+
+#towerInfoDiv .buttons-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#towerInfoDiv .buttons-container .separator {
+  width: 5%;
+}
+
 .buttonYesNo {
   width: 40%;
   height: 48px;
@@ -84,11 +119,11 @@ ul#gameBuildOptions li.back img {
   display: none;
   opacity: 0.7;
   position: absolute;
-  left: 5%;
-  bottom: 5%;
+  left: 10%;
+  bottom: 7%;
   box-sizing: border-box;
-  padding: 25px;
-  width: 90%;
+  padding: 20px;
+  width: 80%;
   color: white;
   background-color: black;
   border-radius: 6px;

diff --git a/upgrade/towermanager.js b/upgrade/towermanager.js
@@ -77,16 +77,18 @@ export class TowerManager {
 }
 
 export class Tower {
+  static DEFAULT_LEVEL = 1;
   static DEFAULT_POWER = 1;
   static DEFAULT_SPEED = 1;
   static DEFAULT_RANGE = 2.5;
   static DEFAULT_COST = 5;
 
-    constructor(type = 'NORMAL', power, speed, range, cost) {
+    constructor(type = 'NORMAL', level, power, speed, range, cost) {
         this.mesh = TOWER_TYPES[type].mesh.clone();
 
         this.type = type;
 
+        this.level = level ?? Tower.DEFAULT_LEVEL;
         this.power = power ?? TOWER_TYPES[this.type].power;
         this.speed = speed ?? TOWER_TYPES[this.type].speed;
         this.range = range ?? TOWER_TYPES[this.type].range;