actions dashboard things + change images

server/controllers/board/createBoard.js

@@ -2,7 +2,7 @@ const Board = require("../../models/board");
 
 const createBoard = async () => {
   const size = 20;
-  const gridSize = 5;
+  const gridSize = 6;
   const newBoard = new Array(size);
   const terrains = ["plains", "tundra", "mountain"]; // List of terrain types
 
@@ -21,10 +21,10 @@ const createBoard = async () => {
   }
 
   // Terrain generation for biomes
-  for (let y = 0; y < size; y += Math.floor(Math.random() * 5 + 3)) {
-    for (let x = 0; x < size; x += Math.floor(Math.random() * 5 + 3)) {
-      const biomeSizeY = Math.min(Math.floor(Math.random() * 5 + 3), size - y);
-      const biomeSizeX = Math.min(Math.floor(Math.random() * 5 + 3), size - x);
+  for (let y = 0; y < size; y += Math.floor(Math.random() * 3 + 2)) {
+    for (let x = 0; x < size; x += Math.floor(Math.random() * 3 + 2)) {
+      const biomeSizeY = Math.min(Math.floor(Math.random() * 3 + 2), size - y);
+      const biomeSizeX = Math.min(Math.floor(Math.random() * 3 + 2), size - x);
       const terrain = terrains[Math.floor(Math.random() * terrains.length)]; // Assign a random terrain
       for (let by = y; by < y + biomeSizeY; by++) {
         for (let bx = x; bx < x + biomeSizeX; bx++) {

server/index.js

@@ -287,6 +287,7 @@ const processBuildAction = async (action, userId) => {
   else if(structureType === "structureSpawn") {
     buildingObject.hits = 5000;
     buildingObject.hitsMax = 5000;
+    buildingObject.spawning = false;
   }
 
   board[y][x].building = buildingObject;
@@ -299,7 +300,9 @@ const processTowerShootAction = async (action, userId) => {
   if (!(await isValidUser(username, userId))) {
     return;
   }
-  await addAction(action, userId);
+
+
+
 
   const tower = board[y][x].building;
   const target = board[targetY][targetX];
@@ -317,7 +320,6 @@ const processAxemanAttackAction = async (action, userId) => {
   if (!(await isValidUser(username, userId))) {
     return;
   }
-  await addAction(action, userId);
 
   const axeman = board[y][x].unit;
   const target = board[targetY][targetX];
@@ -327,6 +329,7 @@ const processAxemanAttackAction = async (action, userId) => {
   if(axeman.unitType !== "axeman") return;
   if(target.unit) target.unit.hits -= axeman.damage;
   if(target.building) target.building.hits -= axeman.damage;
+
 };
 
 const processSpawnWorkerAction = async (action, userId) => {
@@ -339,7 +342,6 @@ const processSpawnWorkerAction = async (action, userId) => {
 
   if(!await canUserAfford(userId, "worker")) return;
 
-  await addAction(action, userId);
 
   const spawn = board[y][x].building;
   const target = board[targetY][targetX];
@@ -348,6 +350,10 @@ const processSpawnWorkerAction = async (action, userId) => {
   if(spawn.owner !== username) return;
   if(spawn.structureType !== "structureSpawn") return;
   if(checkIfCellIsOccupied(targetX,targetY)) return;
+  if(spawn.spawning) {
+    console.log("spawn already spawning")
+    return;
+  }
   target.unit = {
     unitType: "worker",
     pos: {
@@ -358,7 +364,10 @@ const processSpawnWorkerAction = async (action, userId) => {
     hits: 500,
     hitsMax: 500,
     damage: 12,
+    nonMoveActions:1,
+    moved:false
   }
+  spawn.spawning = true;
   await updateUserGold(userId, "worker");
 };
 
@@ -372,7 +381,6 @@ const processSpawnAxemanAction = async (action, userId) => {
 
   if(!await canUserAfford(userId, "axeman")) return;
 
-  await addAction(action, userId);
 
   const spawn = board[y][x].building;
   const target = board[targetY][targetX];
@@ -381,6 +389,10 @@ const processSpawnAxemanAction = async (action, userId) => {
   if(spawn.owner !== username) return;
   if(spawn.structureType !== "structureSpawn") return;
   if(checkIfCellIsOccupied(targetX,targetY)) return;
+  if(spawn.spawning) {
+    console.log("spawn already spawning")
+    return;
+  }
   target.unit = {
     unitType: "axeman",
     pos: {
@@ -391,6 +403,8 @@ const processSpawnAxemanAction = async (action, userId) => {
     hits: 1000,
     hitsMax: 1000,
     damage: 50,
+    nonMoveActions:1,
+    moved:false
   }
   await updateUserGold(userId, "axeman");
 
@@ -402,15 +416,19 @@ const processWorkerMineAction = async (action, userId) => {
   if (!(await isValidUser(username, userId))) {
     return;
   }
-  await addAction(action, userId);
   const worker = board[y][x].unit;
   const target = board[targetY][targetX];
+
   if(!worker) return;
   if(!target) return;
   if(worker.unitType !== "worker") return;
   if(worker.owner !== username) return;
   if(!target.resource) return;
-
+  if(worker.nonMoveActions <= 0) {
+    console.log("worker out of non move actions")
+    return;
+  }
+  spawn.spawning = true;
   const goldToAdd = 80;
   // Update the user's resources.gold property in the database
   const updatedUser = await User.findByIdAndUpdate(
@@ -437,7 +455,6 @@ const processMoveWorkerAction = async (action, userId) => {
   if (!(await isValidUser(username, userId))) {
     return;
   }
-  await addAction(action, userId);
   const worker = board[y][x].unit;
   const target = board[targetY][targetX];
   if(!worker) return;
@@ -456,7 +473,6 @@ const processMoveAxemanAction = async (action, userId) => {
   if (!(await isValidUser(username, userId))) {
     return;
   }
-  await addAction(action, userId);
   const axeman = board[y][x].unit;
   const target = board[targetY][targetX];
   if(!axeman) return;

src/assets/styles/index.css

@@ -59,3 +59,6 @@ h3 {
 .overflow-scroll-y {
   overflow-y: scroll !important;
 }
+.justify-content-center {
+  justify-content: center;
+}

src/components/ActionsDashboard.vue

@@ -16,29 +16,57 @@
         </div>
       </div>
       <div class="relative">
-        <h2 class="">Pending Actions</h2>
+        <h2 style="margin: -6px 0 14px 0px" class="text-align-center">
+          Pending Actions
+        </h2>
         <div
           v-for="(action, index) in actions"
           :key="index"
           class="action-item"
         >
-          <div v-if="action.payload && action.type">
-            <div
-              :style="
-                getCellStyle(
-                  board[action.payload.targetY][action.payload.targetX]
-                )
-              "
-            ></div>
+          <div
+            @click="cancelAction(action.id)"
+            class="action-container"
+            v-if="action.payload && action.type"
+          >
+            <div class="content-wrapper">
+              <h3 class="action-type text-align-center">
+                {{ action.type }}
+              </h3>
 
-            <p>{{ action.type }}</p>
-            <p v-if="action.payload.targetX">
-              {{ action.payload.x }} -> {{ action.payload.targetX }}
-            </p>
-            <p v-if="action.payload.targetY">
-              {{ action.payload.y }} -> {{ action.payload.targetY }}
-            </p>
-            <button @click="cancelAction(action.id)">Cancel</button>
+              <div class="flex">
+                <div
+                  v-if="board && action.payload.x && action.payload.y"
+                  class="cell-wrapper"
+                  :style="
+                    getCellStyle(board[action.payload.y][action.payload.x])
+                  "
+                ></div>
+                <div
+                  v-if="action.payload.targetX && action.payload.targetY"
+                  class="cell-wrapper"
+                  style="margin-left: 1px"
+                  :style="
+                    getCellStyle(
+                      board[action.payload.targetY][action.payload.targetX]
+                    )
+                  "
+                ></div>
+              </div>
+
+              <div class="flex justify-content-center">
+                <p v-if="action.payload.targetX">
+                  x:{{ action.payload.x }}, y:{{ action.payload.y }}
+                </p>
+                <p>&nbsp;->&nbsp;</p>
+                <p v-if="action.payload.targetY">
+                  x:{{ action.payload.targetX }}, y:{{ action.payload.targetY }}
+                </p>
+              </div>
+            </div>
+
+            <div class="cancel-action">Cancel Action</div>
+            <div class="cover"></div>
           </div>
         </div>
       </div>
@@ -80,6 +108,17 @@ export default {
 </script>
 
 <style scoped>
+h2 {
+  margin: 0;
+}
+.cell-wrapper {
+  max-height: 80px;
+  max-width: 80px;
+}
+.cell-wrapper div {
+  height: 100%;
+  width: 100%;
+}
 .curved-maximiser {
   position: absolute;
   height: 100px;
@@ -143,7 +182,7 @@ button {
 }
 .big {
   width: 260px;
-  height: 290px;
+  height: 300px;
 }
 .small {
   height: 20px;
@@ -153,4 +192,48 @@ button {
 .small * {
   display: none;
 }
+.action-container {
+  cursor: pointer;
+  padding: 4px 20px;
+  position: relative; /* Needed for absolute positioning of cancel-action */
+  margin: 0 auto;
+  transition: background-color 0.3s ease; /* This will animate the background color */
+}
+
+.content-wrapper {
+  opacity: 1;
+  transition: opacity 0.3s ease;
+}
+
+.cancel-action {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none; /* Prevents click events on this element when it's not visible */
+  font-size: 20px;
+  text-align: center;
+  width: 100%;
+  padding: 4px 0;
+  background-color: rgba(0, 0, 0, 1);
+}
+
+.action-container:hover {
+  background-color: rgba(
+    0,
+    0,
+    0,
+    0.9
+  ); /* Your hover background color, semi-transparent black in this case */
+}
+
+.action-container:hover .content-wrapper {
+  opacity: 0.75;
+}
+
+.action-container:hover .cancel-action {
+  opacity: 1;
+}
 </style>

src/getDirectionToCell.js

@@ -0,0 +1,3 @@
+export function getDirectionToCell(cell1, cell2, range) {
+
+}