diff --git a/upgrade/events.js b/upgrade/events.js
index 1b65fa1..3f68c02 100644
--- 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
index b13d40c..03faca0 100644
--- 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
index 88d244b..658225c 100644
--- 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
index 76e1243..770659b 100644
--- a/upgrade/index.html
+++ b/upgrade/index.html
@@ -60,13 +60,12 @@ Create Tower ?
-->
-