Minor changes

public/css/style.css

@@ -195,11 +195,42 @@ html {
   color: #1e1e2e;
   font-size: 60pt;
   border-radius: 20px;
+  z-index: 21;
 }
 
-#readiness {
+#status {
-  width: 98vw;
+  padding: 20px;
-  text-align: center;
+  background-color: #585b70;
+  border-radius: 5px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  overflow: scroll;
+  height: 50px;
+  display: flex;
+  flex-direction: column-reverse;
+  overflow-x: hidden;
+}
+
+.highlight {
+  filter: drop-shadow(0px 0px 10px #74c7ec);
+  transition-duration: 0.2s;
+  cursor: pointer;
+}
+
+.highlight:hover {
+  transform: translate(-5px,-5px);
+}
+
+.cover {
+  height: 100vh;
+  width: 100vw;
+  position: absolute;
+  top:0;
+  left:0;
+  background-color: #0008;
+  z-index: 20;
+  backdrop-filter: blur(2px);
+  transition-duration: 0.2s;
 }
 
 /* Mobile CSS */

public/index.html

@@ -49,22 +49,26 @@
         <button class="hostbutton" onclick="host()">Host</button>
         <button class="joinbutton" onclick="join()">Join</button>
       </div>
-      <div style="display:flex;justify-content:space-between;" id="classselect">
+      <div style="display: none;" id="classselect">
         <button id="scout" onclick="classChange('Scout')">Scout</button>
         <button id="antivirus" onclick="classChange('Antivirus')">Antivirus</button>
         <button id="firewall" onclick="classChange('Firewall')">Firewall</button>
       </div>
-      <div class="buttongroup" id="readyup">
+      <div class="buttongroup" id="readyup" style="display:none;">
         <button id="ready" onclick="ready()">Ready</button>
       </div>
     </div>
 
-    <div class="stats buttons">
+    <div id="playerContainer" class="stats buttons" style="text-align: left; width: 90%;display:none;">
-      <label id="playerHeader" for="playerList" style="display: none;">Players:</label>
+      <h3 id="playerHeader" for="playerList" style="display: none;">Players:</h3>
-      <ul id="playerList" style="display: none;">
+      <ul id="playerList" style="margin-left: 30px;display: none;">
       </ul>
-      <label for="playerClass" style="display: none;">Your Class: </label>
+      <br>
-      <p id="playerClass" style="display: none;"></p>
+      <hr>
+      <br>
+      <label id="classLabel" for="playerClass">Your Class: </label>
+      <span id="playerClass"></span>
+      <br><br>
       <p id="readiness"></p>
       <button id="start" style="display: none" onclick="start()">Start</button>
     </div>
@@ -73,28 +77,32 @@
   <!-- Box shown after the game has begun -->
   <div id="game" class="game" style="display:none;">
     <h1 id="winLose" style="display: none;"></h1>
+    <span id="cover" class="cover" style="display:none;"></span>
     <h1 style="text-align: center;">Files</h1>
     <ol id="files">
     </ol>
   </div>
 
-  <div id="statusMenu" class="center" style="display:none;">
-    <p id="hp"></p>
-    <p id="actionAmount"></p>
-    <p id="status" style="overflow:scroll;height: 50px;"></p>
-  </div>
-
   <div id="controlMenu" class="center" style="display:none;">
-    <label for="playerGameClass">Class: </label>
+    <p id="hp" style="float:left;font-size:14pt;"></p>
-    <p id="playerGameClass"></p>
+    <p id="actionAmount" style="float:right;font-size:14pt;"></p>
-    <button id="move" onclick="move()">Move</button>
+    <br><br>
-    <button style="display:none;" id="detect" onclick="action('detect')">Detect</button>
+    <div style="display:flex;justify-content:center;align-content: center;align-content: center;">
-    <button style="display:none;" id="disinfect" onclick="action('disinfect')">Disinfect</button>
+      <button id="move" onclick="move()">Move</button>
-    <button style="display:none;" id="purge" onclick="action('purge')">Purge</button>
+      <button style="display:none;" id="detect" onclick="action('detect')">Detect</button>
-    <button style="display:none;" id="smash" onclick="smash()">Smash</button>
+      <button style="display:none;" id="disinfect" onclick="action('disinfect')">Disinfect</button>
+      <button style="display:none;" id="purge" onclick="action('purge')">Purge</button>
+      <button style="display:none;" id="smash" onclick="smash()">Smash</button>
+    </div>
+    <span id="direction" style="font-size: 16pt;width:100%;text-align:center;display:block;"></span>
+    <br>
+    <hr>
+    <br>
+    <h2>Log:</h2>
+    <p id="status"></p>
   </div>
 
-  <div id="debugMenu" class="center" style="display: none;">
+  <div id="debugMenu" class="center" style="display: block;">
     <button id="godStart" onclick="godStart()">Force Start</button>
     <button id="godScout" onclick="classChange('Scout')">Scout</button>
     <button id="godAntivirus" onclick="classChange('Antivirus')">Antivirus</button>
@@ -139,6 +147,7 @@
 
     // Loop through the elements and add an event listener to each one
     for (var i = 0; i < files.length; i++) {
+      files[i].classList.add("highlight");
       files[i].addEventListener('click', (e) => {
         // When the event is triggered, retrieve the value of the element and send it as the file ID
         socket.emit('action', document.getElementById('roomCode').value, action, e.target.id)
@@ -181,7 +190,6 @@
     document.getElementById('centerbox').style.display = 'none'
     document.getElementById('game').style.display = 'block'
     document.getElementById('controlMenu').style.display = 'block'
-    document.getElementById('statusMenu').style.display = 'block'
     switch (document.getElementById('playerClass').innerText) {
       case 'Scout':
         document.getElementById('detect').style.display = 'inline'
@@ -251,6 +259,10 @@
 
   socket.on('code', function (roomCode) {
     document.getElementById('roomCode').value = roomCode
+
+    //show all classes here, since we know roomCode is valid
+    document.getElementById('classselect').style = "display:flex;justify-content:space-between;";
+    document.getElementById('readyup').style = "";
   })
 
   socket.on('class', function (playerClass) {
@@ -270,6 +282,7 @@
   socket.on('end', function (message) {
     document.getElementById('winLose').innerText = message
     document.getElementById('winLose').style.display = "block"
+    document.getElementById('cover').style.display = "block"
   })
 
   socket.on('ready', function (ready) {
@@ -321,7 +334,8 @@
     }
 
     // Update player list
-    document.getElementById('playerList').innerHTML = ''; // Clear existing list
+    document.getElementById('playerList').innerHTML = ''; // Clear existing list\
+    document.getElementById('playerContainer').style.display = 'block';
     document.getElementById('playerList').style.display = 'block';
     document.getElementById('playerHeader').style.display = 'block';
     document.getElementById('playerGameClass').style.display = 'block';

src/lib/classes.ts

@@ -30,7 +30,7 @@ export class File {
   constructor(id: number) {
     this.id = id
     this.goodData = randomInt(1, 3) //BALANCING OPTION
-    this.badData = randomInt(1, 3) //BALANCING OPTION
+    this.badData = randomInt(1, 3) * 3 //BALANCING OPTION
     this.size = this.goodData + this.badData
     this.x = 0
     this.y = 0
@@ -255,7 +255,7 @@ export class Game {
       // Get and calculate HP change BALANCING OPTION
       let hpChange = 0
       hpChange = checkFile.goodData * 1
-      hpChange -= checkFile.badData * 3
+      hpChange -= checkFile.badData * 1
       this.hp += hpChange
 
       // Check if computer is Schrödinger'd

src/lib/logic.ts

@@ -38,7 +38,7 @@ export function handleTurn(socket: Socket, game: Game, player: Player) {
     game.round++
 
     // Reset players actions
-    game.resetPlayerActions()
+    //game.resetPlayerActions()
 
     // Move all the files
     game.moveFiles(socket, game)
@@ -55,6 +55,10 @@ export function handleTurn(socket: Socket, game: Game, player: Player) {
 
     socket.emit('success', `All players have used their actions. You are now on round ${game.round}`)
     socket.to(game.code).emit('success', `All players have used their actions. You are now on round ${game.round}`)
+
+    game.resetPlayerActions()
+    socket.emit('actionAmount', 2)
+    socket.to(game.code).emit('actionAmount', 2)
   }
 }
 
@@ -91,14 +95,14 @@ export function playerSmash(socket: Socket, game: Game, player: Player, stringX:
     }
   }
 
-  if (damagedFiles.length > 0) {
+  if (damagedFiles.length > 0 && damagedFiles.find((file) => file.badData > 0) != undefined) {
     //Reduce players actions by 1
     player.actions--
 
     // Damage files found
     for (const damagedFile of damagedFiles) {
-      if (damagedFile.badData > 0) {
+      if (damagedFile.badData > 2) {
-        damagedFile.badData--
+        damagedFile.badData -= 3
       }
     }
 
@@ -112,6 +116,9 @@ export function playerSmash(socket: Socket, game: Game, player: Player, stringX:
     socket.emit('error', 'No files to smash. Try another action')
   }
 
+  socket.emit('file', game.fileList())
+  socket.to(game.code).emit('file', game.fileList())
+
   handleTurn(socket, game, player)
 }
 
@@ -132,14 +139,19 @@ function handleDetect(socket: Socket, game: Game, file: File, player: Player) {
 }
 
 function handleDisinfect(socket: Socket, game: Game, file: File, player: Player) {
-  let removeMB = 1
+  let removeMB = 3
-  if (file.badData < 1) {
+  if (!game.detectedFiles.includes(file)) {
+    socket.emit('error', `File ${file.id} hasn't been detected yet please detect it first`)
+    player.actions++
+    return
+  }
+  if (file.badData < 3) {
     socket.emit('error', 'This file is already clean. Try another')
     // Refund player's action
     player.actions++
     return
-  } else if (file.badData > 1) {
+  } else if (file.badData > 5) {
-    removeMB = 2
+    removeMB = 6
   }
   file.badData = file.badData - removeMB
   if (file.badData === 0) {

src/sockets/game.ts

@@ -30,6 +30,7 @@ export function handleStart(socket: Socket, roomCode: string) {
     // HOTFIX FIX LATER
     const dummyPlayer = new Player('dummy', 'dummy')
     handleTurn(socket, game, dummyPlayer)
+    socket.to(roomCode).emit('actionAmount', 2)
     socket.emit('start', 'start')
     socket.to(roomCode).emit('start', 'start')
 
@@ -50,6 +51,10 @@ function handleSmash(socket: Socket, roomCode: string, playerX: string, playerY:
         socket.emit('error', `${player.class} can't use smash`)
         return
       }
+      if (player.actions < 1) {
+        socket.emit('error', `You can't smash since you are out of actions`)
+        return
+      }
       if (playerX != undefined && playerX.match('^[A-J]$') && playerY != undefined && playerY > 0 && playerY < 10) {
         playerSmash(socket, game, player, playerX, playerY)
       } else {