container buttons, damage-counter text flip

back-end.js

@@ -81,22 +81,6 @@ io.on('connection', (socket) => {
     socket.on('viewDeck', (data) => {
         socket.broadcast.to(data.roomId).emit('viewDeck', data);
     });
-
-
-    socket.on('discardAndDraw', (id, discardAmount, drawAmount) => {
-        socket.broadcast.to(id).emit('discardAndDraw', discardAmount, drawAmount);
-    });
-    socket.on('shuffleAndDraw', (id, shuffleAmount, drawAmount, indices) => {
-        socket.broadcast.to(id).emit('shuffleAndDraw', shuffleAmount, drawAmount, indices);
-    });
-    socket.on('shuffleBottomAndDraw', (id, shuffleAmount, drawAmount, indices) => {
-        socket.broadcast.to(id).emit('shuffleBottomAndDraw', shuffleAmount, drawAmount, indices);
-    });
-
-
-    socket.on('discardAll', (id, user, discardAmount) => {
-        socket.broadcast.to(id).emit('discardAll', user, discardAmount);
-    });
 });
 
 // Start the server

iframe-containers/opp-containers.html

@@ -4,7 +4,7 @@
 <div id="deckText" class="opp-text">(<span id="deckCount">0</span>)</div>
 <div id="deck_html" class="stack-container opp-view">
     <div class="stack-button-container">
-        <button class="action-button">Shuffle</button>
+        <button id="oppShuffleDeckButton" class="action-button">Shuffle</button>
         <button id="closeDeckDisplayButton" class="action-button">Close</button>
     </div>
 </div>

iframe-containers/self-containers.html

@@ -4,7 +4,7 @@
 <div id="deckText" class="self-text">(<span id="deckCount">0</span>)</div>
 <div id="deck_html" class="stack-container self-view">
     <div class="stack-button-container">
-        <button class="action-button">Shuffle</button>
+        <button id="selfShuffleDeckButton" class="action-button">Shuffle</button>
         <button id="closeDeckDisplayButton" class="action-button">Close</button>
     </div>
 </div>

index.html

@@ -94,8 +94,8 @@
             <li id="hidePrizesButton">Hide</li>
 
             <li id="handHeader">Hand</li>
-            <li id="revealOppHandButton">Reveal</li>
-            <li id="hideOppHandButton">Hide</li>
+            <li id="revealHandButton">Reveal</li>
+            <li id="hideHandButton">Hide</li>
             <li id="discardHandButton">Discard</li>
             <li id="shuffleHandButton">Shuffle into deck</li>
             <li id="shuffleHandBottomButton">Shuffle to bottom</li>

resources/css/opp-containers.css

@@ -233,7 +233,14 @@
   height: 24%;
   margin: 0.5%;
 }
-.circle {
+.self-circle {
+  position: absolute;
+  border-radius: 50%;
+  background-color: rgb(255, 98, 0);
+  color: white;
+  text-align: center;
+}
+.opp-circle {
   position: absolute;
   border-radius: 50%;
   background-color: rgb(255, 98, 0);
@@ -247,7 +254,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: rgba(169, 169, 169, 0.5); /* Transparent dark grey */
+  background-color: rgba(169, 169, 169, 0.5);
   border: 1px solid #ccc;
   border-radius: 0 0 15px 15px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

resources/css/self-containers.css

@@ -234,13 +234,21 @@
   height: 24%;
   margin: 0.5%;
 }
-.circle {
+.self-circle {
   position: absolute;
   border-radius: 50%;
   background-color: rgb(255, 98, 0);
   color: white;
   text-align: center;
 }
+.opp-circle {
+  position: absolute;
+  border-radius: 50%;
+  background-color: rgb(255, 98, 0);
+  color: white;
+  text-align: center;
+  transform: scaleX(-1) scaleY(-1);
+}
 #attachedCardPopup_html {
   display: none;
   position: fixed;

resources/js/front-end/actions/container/general.js

@@ -0,0 +1,74 @@
+import { selfContainersDocument } from "../../front-end.js";
+import { containerIdToLocation } from "../../setup/containers/container-reference.js";
+import { stringToVariable, variableToString } from "../../setup/containers/string-to-variable.js";
+import { moveCard } from "../general/move-card.js";
+import { shuffleContainer } from "./shuffle-container.js";
+
+export const shuffleAll = (event) => {
+    const containerId = event.target.parentElement.parentElement.id;
+    const user = selfContainersDocument.contains(event.target) ? 'self' : 'opp';
+    const location = containerIdToLocation(user, containerId);
+    const locationAsString = variableToString(user, location);
+    const count = location.count;
+
+    for (let i = 0; i < count; i++) {
+        moveCard(user, locationAsString, containerId, 'deck', 'deck_html', 0)
+    };
+
+    shuffleContainer(user, 'deck', 'deck_html');
+
+    const container_html = stringToVariable(user, containerId);
+    container_html.style.display = 'none';
+}
+
+export const discardAll = (event) => {
+    const containerId = event.target.parentElement.parentElement.id;
+    const user = selfContainersDocument.contains(event.target) ? 'self' : 'opp';
+    const location = containerIdToLocation(user, containerId);
+    const locationAsString = variableToString(user, location);
+    const count = location.count;
+
+    for (let i = 0; i < count; i++) {
+        moveCard(user, locationAsString, containerId, 'discard', 'discard_html', 0)
+    };
+
+    const container_html = stringToVariable(user, containerId);
+    container_html.style.display = 'none';
+}
+
+export const lostzoneAll = (event) => {
+    const containerId = event.target.parentElement.parentElement.id;
+    const user = selfContainersDocument.contains(event.target) ? 'self' : 'opp';
+    const location = containerIdToLocation(user, containerId);
+    const locationAsString = variableToString(user, location);
+    const count = location.count;
+
+    for (let i = 0; i < count; i++) {
+        moveCard(user, locationAsString, containerId, 'lostzone', 'lostzone_html', 0)
+    };
+
+    const container_html = stringToVariable(user, containerId);
+    container_html.style.display = 'none';
+}
+
+export const handAll = (event) => {
+    const containerId = event.target.parentElement.parentElement.id;
+    const user = selfContainersDocument.contains(event.target) ? 'self' : 'opp';
+    const location = containerIdToLocation(user, containerId);
+    const locationAsString = variableToString(user, location);
+    const count = location.count;
+
+    for (let i = 0; i < count; i++) {
+        moveCard(user, locationAsString, containerId, 'hand', 'hand_html', 0)
+    };
+
+    const container_html = stringToVariable(user, containerId);
+    container_html.style.display = 'none';
+}
+
+export const closeDisplay = (event) => {
+    const containerId = event.target.parentElement.parentElement.id;
+    const user = selfContainersDocument.contains(event.target) ? 'self' : 'opp';
+    const container_html = stringToVariable(user, containerId);
+    container_html.style.display = 'none';
+}

resources/js/front-end/actions/container/hand-actions.js

@@ -1,4 +1,4 @@
-import { deck, socket } from '../../front-end.js';
+import { deck, hand, oppDeck, oppHand, socket } from '../../front-end.js';
 import { shuffleIndices } from '../../setup/general/shuffle.js';
 import { moveCard } from '../general/move-card.js';
 import { shuffleContainer } from './shuffle-container.js';
@@ -13,49 +13,75 @@ export const drawHand = (user) => {
     };
 }
 
-export const discardAndDraw = (user, discardAmount, drawAmount) => {
-    for (let i = 0; i < discardAmount; i++){
-        moveCard(user, 'hand', 'hand_html', 'discard', 'discard_html', 0, false, true);
-    };
+export const discardAndDraw = (user) => {
+    let drawAmount;
+    const userInput = window.prompt('Draw how many cards?', '0');
+    drawAmount = parseInt(userInput);
+    const deckCount = user === 'self' ? deck.count : oppDeck.count;
+    const discardAmount = user === 'self' ? hand.count : oppHand.count;
+
+    if (!isNaN(drawAmount) && drawAmount >= 0){
+        drawAmount = Math.min(drawAmount, deckCount);
 
-    for (let i = 0; i < drawAmount; i++){
-        moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0, false, true);
+        for (let i = 0; i < discardAmount; i++){
+            moveCard(user, 'hand', 'hand_html', 'discard', 'discard_html', 0);
+        };
+        for (let i = 0; i < drawAmount; i++){
+            moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0);
+        };
+    } else {
+        window.alert('Please enter a valid number for the draw amount.');
     };
 }
 
-export const shuffleAndDraw = (user, shuffleAmount, drawAmount, indices) => {
-    for (let i = 0; i < shuffleAmount; i++){
-        moveCard(user, 'hand', 'hand_html', 'deck', 'deck_html', 0, false, true);
-    };
-    if (user === 'self'){
-        indices = shuffleIndices(deck.cards.length);
-    };
-    shuffleContainer(user, 'deck', 'deck_html', indices);
+export const shuffleAndDraw = (user) => {
 
-    for (let i = 0; i < drawAmount; i++){
-        moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0, false, true);
-    };
+    let drawAmount;
+    const userInput = window.prompt('Draw how many cards?', '0');
+    drawAmount = parseInt(userInput);
+    const deckCount = user === 'self' ? deck.count : oppDeck.count;
+    const shuffleAmount = user === 'self' ? hand.count : oppHand.count;
+
+    if (!isNaN(drawAmount) && drawAmount >= 0){
+        drawAmount = Math.min(drawAmount, (deckCount + shuffleAmount));
 
-    if (user === 'self'){
-        socket.emit('shuffleAndDraw', roomId, shuffleAmount, drawAmount, indices);
+        for (let i = 0; i < shuffleAmount; i++){
+            moveCard(user, 'hand', 'hand_html', 'deck', 'deck_html', 0);
+        };
+
+        shuffleContainer(user, 'deck', 'deck_html');
+
+        for (let i = 0; i < drawAmount; i++){
+            moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0);
+        };
+
+    } else {
+        window.alert('Please enter a valid number for the draw amount.');
     };
 }
 
-export const shuffleBottomAndDraw = (user, shuffleAmount, drawAmount, indices) => {
-    if (user === 'self'){
-        indices = shuffleIndices(hand.cards.length);
-    };
-    shuffleContainer(user, 'hand', 'hand_html', indices);
+export const shuffleBottomAndDraw = (user) => {
+
+    let drawAmount;
+    const userInput = window.prompt('Draw how many cards?', '0');
+    drawAmount = parseInt(userInput);
+    const deckCount = user === 'self' ? deck.count : oppDeck.count;
+    const shuffleAmount = user === 'self' ? hand.count : oppHand.count;
+
+    if (!isNaN(drawAmount) && drawAmount >= 0){
+        drawAmount = Math.min(drawAmount, (deckCount + shuffleAmount));
 
-    for (let i = 0; i < shuffleAmount; i++){
-        moveCard(user, 'hand', 'hand_html', 'deck', 'deck_html', 0, false, true);
-    };
+        shuffleContainer(user, 'hand', 'hand_html');
 
-    for (let i = 0; i < drawAmount; i++){
-        moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0, false, true);
-    };
+        for (let i = 0; i < shuffleAmount; i++){
+            moveCard(user, 'hand', 'hand_html', 'deck', 'deck_html', 0);
+        };
+
+        for (let i = 0; i < drawAmount; i++){
+            moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0);
+        };
 
-    if (user === 'self'){
-        socket.emit('shuffleBottomAndDraw', roomId, shuffleAmount, drawAmount, indices);
+    } else {
+        window.alert('Please enter a valid number for the draw amount.');
     };
 }

resources/js/front-end/actions/counters/damage-counter.js

@@ -1,5 +1,5 @@
 import { stringToVariable } from '../../setup/containers/string-to-variable.js';
-import { sCard, socket, selfContainersDocument, oppContainersDocument, p1, roomId } from '../../front-end.js';
+import { sCard, socket, selfContainersDocument, oppContainersDocument, p1, roomId, POV } from '../../front-end.js';
 
 export const addDamageCounter = (user, location, container, index, received = false) => {
 
@@ -25,10 +25,11 @@ export const addDamageCounter = (user, location, container, index, received = fa
     } else {
         if (user === 'self'){
             damageCounter = selfContainersDocument.createElement('div');
+            damageCounter.className = POV.user === 'self' ? 'self-circle' : 'opp-circle';
         } else {
             damageCounter = oppContainersDocument.createElement('div');
+            damageCounter.className = POV.user === 'self' ? 'opp-circle' : 'self-circle';
         };
-        damageCounter.className = 'circle';
         damageCounter.contentEditable = 'true';
         damageCounter.textContent = '10';
     };

resources/js/front-end/actions/counters/special-condition.js

@@ -1,5 +1,5 @@
 import { stringToVariable } from '../../setup/containers/string-to-variable.js';
-import { roomId, selfContainersDocument, oppContainersDocument, socket, p1, sCard } from '../../front-end.js';
+import { roomId, selfContainersDocument, oppContainersDocument, socket, p1, sCard, POV } from '../../front-end.js';
 
 export const addSpecialCondition = (user, location, container, index, received = false) => {
 
@@ -26,10 +26,11 @@ export const addSpecialCondition = (user, location, container, index, received =
     } else {
         if (user === 'self'){
             specialCondition = selfContainersDocument.createElement('div');
+            specialCondition.className = POV.user === 'self' ? 'self-circle' : 'opp-circle';
         } else {
             specialCondition = oppContainersDocument.createElement('div');
+            specialCondition.className = POV.user === 'self' ? 'opp-circle' : 'self-circle';
         };
-        specialCondition.className = 'circle';
         specialCondition.contentEditable = 'true';
         specialCondition.textContent = 'P';
         specialCondition.style.backgroundColor = 'green';