update main.css and public/js/index.js

tmchuynh · Jul 28, 2024 · bef8f2e · bef8f2e
1 parent b6d9ba1
commit bef8f2e
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 51 deletions.
diff --git a/public/css/main.css b/public/css/main.css
@@ -197,16 +197,14 @@ button {
 /* a normal ship */
 .grid-ship,
 .human-player .grid-ship:hover {
-      background-color: #808080;
+      background-image: url("../img/ship.svg");
 }
 
 /* cannonball in the water */
 .grid-miss,
 .grid-miss:hover,
 .human-player .grid-miss:hover {
-      background-color: #ffffff;
-      background-image: url("../img/cross-icon.png"); /* Fallback */
-      background-image: url("../img/cross-icon.svg");
+      background-image: url("../img/bomb-emoji.svg");
       background-position: center;
       background-repeat: no-repeat;
 }
@@ -215,9 +213,7 @@ button {
 .grid-hit,
 .grid-hit:hover,
 .human-player .grid-hit:hover {
-      background-color: #f60018;
-      background-image: url("../img/cross-icon.png"); /* Fallback */
-      background-image: url("../img/cross-icon.svg");
+      background-image: url("../img/bomb-explosion.svg");
       background-position: center;
       background-repeat: no-repeat;
 }
@@ -226,8 +222,7 @@ button {
 .grid-reveal,
 .grid-reveal:hover {
       /* background-color: purple; */
-      background-image: url("../img/ship-wheel.svg"); /* Fallback */
-      /* background-image: url("../img/ship-wheel.png"); */
+      background-image: url("../img/ship.svg");
       background-position: center;
       background-repeat: no-repeat;
 }

diff --git a/public/img/bomb-emoji.svg b/public/img/bomb-emoji.svg
diff --git a/public/img/bomb-explosion.svg b/public/img/bomb-explosion.svg
diff --git a/public/img/ship.svg b/public/img/ship.svg
diff --git a/public/js/index.js b/public/js/index.js
@@ -1,5 +1,4 @@
 // Global Constants
-var DEBUG_MODE = localStorage.getItem('DEBUG_MODE') === 'true';
 var CONST = {};
 CONST.AVAILABLE_SHIPS = ['carrier', 'battleship', 'destroyer', 'submarine', 'patrolboat'];
 // You are player 0 and the computer is player 1
@@ -38,7 +37,6 @@ class Stats {
             this.gamesPlayed = +localStorage.getItem('gamesPlayed') || 0;
             this.gamesWon = +localStorage.getItem('gamesWon') || 0;
             this.uuid = localStorage.getItem('uuid') || this.createUUID();
-            this.skipCurrentGame = DEBUG_MODE ? true : false;
       }
 
       incrementShots() {
@@ -112,15 +110,15 @@ Game.gameOver = false;
 Game.prototype.checkIfWon = function () {
       if (this.computerFleet.allShipsSunk()) {
             alert('Congratulations, you win!');
-            document.getElementById('forfeit-sidebar').classList.toggle('hidden');
+            document.getElementById('forfeit-sidebar').classList.add('hidden');
             Game.gameOver = true;
             Game.stats.wonGame();
             Game.stats.syncStats();
             Game.stats.updateStatsSidebar();
             this.showRestartSidebar();
       } else if (this.humanFleet.allShipsSunk()) {
             alert('Yarr! The computer sank all your ships. Try again.');
-            document.getElementById('forfeit-sidebar').classList.toggle('hidden');
+            document.getElementById('forfeit-sidebar').classList.add('hidden');
             Game.gameOver = true;
             Game.stats.lostGame();
             Game.stats.syncStats();
@@ -314,6 +312,7 @@ Game.prototype.restartGame = function (e) {
       document.getElementById('restart-sidebar').classList.add('hidden');
       document.getElementById('roster-sidebar').classList.remove('hidden');
       document.getElementById('roster-sidebar').classList.add('sidebar');
+      document.getElementById('roster-sidebar').classList.add('mx-5');
       document.getElementById('forfeit-sidebar').classList.add('hidden');
       self.resetFogOfWar();
       self.init();
@@ -324,7 +323,7 @@ Game.prototype.placeRandomly = function (e) {
       e.target.self.humanFleet.placeShipsRandomly();
       e.target.self.readyToPlay = true;
       document.getElementById('roster-sidebar').setAttribute('class', 'hidden');
-      document.getElementById('forfeit-sidebar').classList.toggle('hidden');
+      document.getElementById('forfeit-sidebar').classList.remove('hidden');
 };
 // Ends placing the current ship
 Game.prototype.endPlacing = function (shipType) {
@@ -472,6 +471,14 @@ Game.prototype.init = function () {
       randomButton.self = this;
       randomButton.addEventListener('click', this.placeRandomly, false);
       this.computerFleet.placeShipsRandomly();
+
+      var forfeitButton = document.getElementById('forfeit');
+      forfeitButton.self = this;
+      forfeitButton.addEventListener('click', () => {
+            this.revealComputerShips();
+            document.getElementById('forfeit-sidebar').classList.add('hidden');
+            this.showRestartSidebar();
+      });
 };
 
 // Grid object
@@ -653,8 +660,6 @@ class Fleet {
       }
 
       // Finds a ship by its type
-      // Param shipType is a string
-      // Returns the ship object that is of type shipType
       // If no ship exists, this returns null.
       findShipByType(shipType) {
             for (var i = 0; i < this.fleetRoster.length; i++) {
@@ -665,7 +670,6 @@ class Fleet {
             return null;
       }
       // Checks to see if all ships have been sunk
-      // Returns boolean
       allShipsSunk() {
             for (var i = 0; i < this.fleetRoster.length; i++) {
                   // If one or more ships are not sunk, then the sentence "all ships are sunk" is false.
@@ -940,12 +944,7 @@ class AI {
                   }
             }
       }
-      metagame() {
-            // Inputs:
-            // Proximity of hit cells to edge
-            // Proximity of hit cells to each other
-            // Edit the probability grid by multiplying each cell with a new probability weight (e.g. 0.4, or 3). Set this as a CONST and make 1-CONST the inverse for decreasing, or 2*CONST for increasing
-      }
+
       // Finds a human ship by coordinates
       // Returns Ship
       findHumanShip(x, y) {
@@ -1068,35 +1067,7 @@ if (!Array.prototype.map) {
 }
 
 
-// Browser compatability workaround for transition end event names.
-// From modernizr: http://stackoverflow.com/a/9090128
-function transitionEndEventName() {
-      var i,
-            undefined,
-            el = document.createElement('div'),
-            transitions = {
-                  'transition': 'transitionend',
-                  'OTransition': 'otransitionend',  // oTransitionEnd in very old Opera
-                  'MozTransition': 'transitionend',
-                  'WebkitTransition': 'webkitTransitionEnd'
-            };
-
-      for (i in transitions) {
-            if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
-                  return transitions[i];
-            }
-      }
-}
-
 // Returns a random number between min (inclusive) and max (exclusive)
 function getRandom(min, max) {
       return Math.random() * (max - min) + min;
 }
-
-// Toggles on or off DEBUG_MODE
-function setDebug(val) {
-      DEBUG_MODE = val;
-      localStorage.setItem('DEBUG_MODE', val);
-      localStorage.setItem('showTutorial', 'false');
-      window.location.reload();
-}