toggles galore

back-end.js

@@ -81,6 +81,9 @@ io.on('connection', (socket) => {
     socket.on('removeAbilityCounter', (data) => {
         socket.broadcast.to(data.roomId).emit('removeAbilityCounter', data);
     });
+    socket.on('resetCounters', (data) => {
+        socket.broadcast.to(data.roomId).emit('resetCounters', data);
+    });
     socket.on('shuffleContainer', (data) => {
         socket.broadcast.to(data.roomId).emit('shuffleContainer', data);
     });

index.html

@@ -41,9 +41,9 @@
         </div>
         <input id="messageInput" type="text" placeholder="Type your message here...">
         <div id="bottomP1ButtonContainer" class="sidebox-button-container">
-            <button id="setupButton">Setup</button>
+            <button id="setupButton">Set Up</button>
             <button id="resetButton">Reset</button>
-            <button id="setupBothButton">Setup Both</button>
+            <button id="setupBothButton">Set Up Both</button>
             <button id="resetBothButton">Reset Both</button>
         </div>
     </div>
@@ -70,7 +70,7 @@
             </div>
             <input id="p2MessageInput" type="text" placeholder="Type your message here...">
             <div id="p2BottomButtonContainer" class="sidebox-button-container">
-                <button id="p2SetupButton">Setup</button>
+                <button id="p2SetupButton">Set Up</button>
                 <button id="p2ResetButton">Reset</button>
                 <button id="leaveRoomButton">Leave Room</button>
             </div>
@@ -109,14 +109,82 @@
 
             <li id="moveButton">Move to...
                 <ul class="subMenu">
-                    <li id="moveToTopButton">Top of deck</li>
-                    <li id="moveToBottomButton">Bottom of deck</li>
-                    <li id="shuffleIntoDeckButton">Shuffle into deck</li>
                     <li id="moveToBoardButton">Board</li>
+                    <li id="moveToTopButton">Deck (top)</li>
+                    <li id="moveToBottomButton">Deck (bottom)</li>
+                    <li id="switchWithTopButton">Deck (switch)</li>
+                    <li id="shuffleIntoDeckButton">Deck (shuffle)</li>
                 </ul>
             </li>
         </ul>
-    </div>    
+    </div>
+
+    <div id="keybindModal">
+        <h1>Keybinds</h1>
+        <div class="sections-container">
+            <div class="section">
+                <div class="column">
+                    <h2>Move card...</h2>
+                    <ul>
+                        <li>to Hand <code>[h]</code></li>
+                        <li>to Discard <code>[d]</code></li>
+                        <li>to Bench <code>[b]</code></li>
+                        <li>to Active <code>[a]</code></li>
+                        <li>to Stadium <code>[g]</code></li>
+                        <li>to Lost Zone <code>[l]</code></li>
+                        <li>to Prizes <code>[p]</code></li>
+                        <li>to Board <code>[space]</code></li>
+                        <li>to Deck (top) <code>[↑]</code></li>
+                        <li>to Deck (bottom) <code>[↓]</code></li>
+                        <li>to Deck (switch) <code>[→]</code></li>
+                        <li>to Deck (shuffle)<code>[s]</code></li>
+                    </ul>
+                </div>
+                <div class="column">
+                    <h2>Card actions</h2>
+                    <ul>
+                        <li>Attach <code>[q]</code></li>
+                        <li>Evolve <code>[e]</code></li>
+                        <li>View <code>[v]</code></li>
+                        <li>Ability toggle <code>[w]</code></li>
+                        <li>Damage counter</li>
+                        <ul>
+                            <li>Increase <code>[1-9]</code></li>
+                            <li>Decrease <code>[alt + 1-9]</code></li>
+                            <li>Remove <code>[0]</code></li>
+                        </ul>
+                        <li>Special condition</li>
+                        <ul>
+                            <li>Add/remove <code>[y]</code></li>
+                            <li>Toggle <code>[alt + y]</code></li>
+                        </ul>
+                    </ul>
+                </div>
+            </div>
+            <div class="section">
+                <div class="column">
+                    <h2>Deck</h2>
+                    <ul>
+                        <li>Draw <code>[1-9]</code></li>
+                        <li>Shuffle <code>[s]</code></li>
+                        <li>View top <code>[alt + 1-9]</code></li>
+                        <li>View bottom <code>[ctrl + 1-9]</code></li>
+                        <li>View <code>[v]</code></li>
+                    </ul>
+                </div>
+                <div class="column">
+                    <h2>General</h2>
+                    <ul>
+                        <li>Set up <code>[alt + n]</code></li>
+                        <li>Reset <code>[alt + r]</code></li>
+                        <li>Start turn <code>[alt + t]</code></li>
+                        <li>Flip coin <code>[f]</code></li>
+                        <li>Flip board <code>[alt + f]</code></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
 
 </body>
 </html>

resources/css/index.css

@@ -5,6 +5,54 @@ body {
   height: 100vh;
   overflow: none;
 }
+#keybindModal {
+  display: none;
+  position: fixed;
+  width: 50%;
+  top: 50%;
+  left: 33%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  background-color: rgba(200, 200, 200, 0.873); /* Semi-transparent grey background */
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  font-family: 'Helvetica', sans-serif;
+}
+.sections-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+.section {
+  flex: 1;
+}
+.column {
+  padding: 10px;
+  margin: 10px;
+}
+h1, h2 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  padding: 0;
+}
+ul, li {
+  margin: 0;
+  padding: 0;
+}
+.column ul ul {
+  margin-left: 10px;
+}
+.column ul ul li {
+  margin-bottom: 1px;
+  margin-top: 0;
+  font-size: 13px;
+}
+.column ul li {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+}
 .self {
   position: fixed;
   border: none;

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

@@ -95,14 +95,10 @@ export const viewDeck = (user, viewAmount, top, deckCount, targetOpp, received =
     };
 }
 
-
-
-
 export const switchWithDeckTop = () => {
     moveToDeckTop();
     const deckCount = sCard.user === 'self' ? deck.count : oppDeck.count;
     if (deckCount > 1){
-        moveCard(sCard.user, 'deck', 'deck_html', sCard.locationAsString, sCard.containerId, 1, false, true);
-        socket.emit('moveCard', roomId, sCard.oUser, 'deck', 'deck_html', sCard.locationAsString, sCard.containerId, 0, false, true);
+        moveCard(sCard.user, 'deck', 'deck_html', sCard.locationAsString, sCard.containerId, 1);
     };
 }

resources/js/front-end/actions/counters/reset-ability-counters.js

@@ -0,0 +1,17 @@
+import { oppContainersDocument, p1, selfContainersDocument, socket } from "../../front-end.js";
+
+export const resetCounters = (received = false) => {
+    selfContainersDocument.querySelectorAll('.self-tab, .opp-tab').forEach(element => {
+        element.handleRemove();
+    });
+    oppContainersDocument.querySelectorAll('.self-tab, .opp-tab').forEach(element => {
+        element.handleRemove();
+    });
+    if (!p1[0] && !received){
+        const data = {
+            roomId : roomId,
+            received: true
+        };
+        socket.emit('resetCounters', data);
+    };
+}

resources/js/front-end/actions/general/close-popups.js

@@ -1,4 +1,4 @@
-import { lostzone_html, deck_html, discard_html, sCard, selfContainersDocument, active, bench, stadium_html, oppActive, oppBench, oppContainersDocument, oppDeck_html, oppDiscard_html, oppLostzone_html, cardContextMenu} from '../../front-end.js';
+import { lostzone_html, deck_html, discard_html, sCard, selfContainersDocument, active, bench, stadium_html, oppActive, oppBench, oppContainersDocument, oppDeck_html, oppDiscard_html, oppLostzone_html, cardContextMenu, attachedCardPopup_html, viewCards_html, oppAttachedCardPopup_html, oppViewCards_html} from '../../front-end.js';
 import { containerIdToLocation } from '../../setup/containers/container-reference.js';
 import { stringToVariable, variableToString } from '../../setup/containers/string-to-variable.js';
 import { addAbilityCounter } from '../counters/ability-counter.js';
@@ -10,25 +10,37 @@ export const closeContainerPopups = () => {
         lostzone_html,
         deck_html,
         discard_html,
+        attachedCardPopup_html,
+        viewCards_html,
         oppLostzone_html,
         oppDeck_html,
         oppDiscard_html,
+        oppAttachedCardPopup_html,
+        oppViewCards_html
     ];
 
     elementsToHide.forEach(element => {
         element.style.display = 'none';
     });
 }
+export const hideIfEmpty = () => {
+    const containerArray = ['discard_html', 'lostzone_html', 'deck_html', 'attachedCardPopup_html', 'viewCards_html'];
+    const userArray = ['self', 'opp'];
 
-export const hideIfEmpty = (user, containerId) => {
-    if (['discard_html', 'lostzone_html', 'deck_html', 'attachedCardPopup_html', 'viewCards_html'].includes(containerId)){
-        const location = containerIdToLocation(user, containerId);
-        const location_html = stringToVariable(user, containerId);
-        if (location.count === 0){
-            location_html.style.display = 'none';
-        };
-    };
+    userArray.forEach(user => {
+        containerArray.forEach(containerId =>{
+            const location = containerIdToLocation(user, containerId);
+            const location_html = stringToVariable(user, containerId);
+            if (location.count === 0){
+                location_html.style.display = 'none';
+            } else if (location.count !== 0 && ['attachedCardPopup_html', 'viewCards_html'].includes(containerId)){
+                location_html.style.display = 'block';
+            };
+        });
+    });
 }
+
+
 export const deselectCard = () => {
     if (sCard.card){
         sCard.card.image.classList.remove('highlight');
@@ -50,6 +62,7 @@ export const closePopups = (event) => {
     deselectCard();
     closeFullView(event);
     cardContextMenu.style.display = 'none';
+    hideIfEmpty();
 }
 
 export const closeFullView = (event) => {

resources/js/front-end/actions/general/move-card.js

@@ -463,7 +463,7 @@ export const moveCard = (user, oLocation, oLocation_html, mLocation, mLocation_h
     };
 
     updateCount();
-    hideIfEmpty(user, _oLocation_html);
+    hideIfEmpty();
 
     if (!p1[0] && !received){
         const oUser = user === 'self' ? 'opp' : 'self';

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

@@ -35,10 +35,7 @@ export const reset = (user, clean = false, received = false) => {
     cardArrays.forEach(container => container.cards = []);
     cardContainers.forEach(container => removeImages(container));
 
-    const containers = ['discard_html', 'lostzone_html', 'deck_html', 'attachedCardPopup_html', 'viewCards_html'];
-    for (let container of containers){
-        hideIfEmpty(user, container);
-    };
+    hideIfEmpty();
 
     buildDeck(user);
     const display_html = user === 'self' ? deckDisplay_html : oppDeckDisplay_html;

resources/js/front-end/actions/general/take-turn.js

@@ -1,9 +1,11 @@
 import { POV, deck, oppDeck, p1, roomId, socket, turn } from '../../front-end.js';
 import { appendMessage } from '../../setup/chatbox/messages.js';
 import { determineUsername } from '../../setup/general/determine-username.js';
+import { resetCounters } from '../counters/reset-ability-counters.js';
 import { moveCard } from './move-card.js';
 
 export const takeTurn = (user, received = false) => {
+    resetCounters(true);
     const deckCount = user === 'self' ? deck.count : oppDeck.count;
     if (deckCount > 0){
         turn[0] ++;

resources/js/front-end/event-listeners/context-menu/active-bench-buttons.js

@@ -14,5 +14,9 @@ specialConditionButton.addEventListener('click', () => {
 });
 
 abilityCounterButton.addEventListener('click', () => {
-    addAbilityCounter(sCard.user, variableToString(sCard.user, sCard.location), variableToString(sCard.user, sCard.container), sCard.index)
+    if (sCard.card.image.abilityCounter){
+        sCard.card.image.abilityCounter.handleRemove();
+    } else {
+        addAbilityCounter(sCard.user, variableToString(sCard.user, sCard.location), variableToString(sCard.user, sCard.container), sCard.index);
+    };
 });

resources/js/front-end/event-listeners/context-menu/general-buttons.js

@@ -1,10 +1,12 @@
-import { moveToBoardButton, moveToBottomButton, moveToTopButton, sCard, shuffleIntoDeckButton, socket } from '../../front-end.js';
-import { moveToBoard, moveToDeckBottom, moveToDeckTop, shuffleIntoDeck } from '../../actions/container/deck-actions.js';
+import { moveToBoardButton, moveToBottomButton, moveToTopButton, shuffleIntoDeckButton, switchWithTopButton } from '../../front-end.js';
+import { moveToBoard, moveToDeckBottom, moveToDeckTop, shuffleIntoDeck, switchWithDeckTop } from '../../actions/container/deck-actions.js';
 
 moveToTopButton.addEventListener('click', moveToDeckTop);
 
 moveToBottomButton.addEventListener('click', moveToDeckBottom);
 
+switchWithTopButton.addEventListener('click', switchWithDeckTop);
+
 shuffleIntoDeckButton.addEventListener('click', shuffleIntoDeck);
 
 moveToBoardButton.addEventListener('click', moveToBoard);

resources/js/front-end/event-listeners/p1-chatbox/chat-buttons.js

@@ -1,13 +1,16 @@
+import { resetCounters } from "../../actions/counters/reset-ability-counters.js";
 import { attackButton, POV, passButton} from "../../front-end.js";
 import { appendMessage } from "../../setup/chatbox/messages.js";
 import { determineUsername } from "../../setup/general/determine-username.js";
 
 attackButton.addEventListener('click', () => {
+    resetCounters();
     const user = POV.user;
     const message = determineUsername(user) + ' attacked!';
     appendMessage(user, message, 'announcement');
 });
 passButton.addEventListener('click', () => {
+    resetCounters();
     const user = POV.user;
     const message = determineUsername(user) + ' passed';
     appendMessage(user, message, 'announcement');

resources/js/front-end/event-listeners/p2/chat-buttons.js

@@ -1,14 +1,17 @@
-import { p2AttackButton, POV, p2PassButton, p1, socket, roomId } from "../../front-end.js";
+import { resetCounters } from "../../actions/counters/reset-ability-counters.js";
+import { p2AttackButton, POV, p2PassButton} from "../../front-end.js";
 import { appendMessage } from "../../setup/chatbox/messages.js";
 import { determineUsername } from "../../setup/general/determine-username.js";
 
 p2AttackButton.addEventListener('click', () => {
+    resetCounters();
     const user = POV.user;
     const message = determineUsername(user) + ' attacked!';
     appendMessage(user, message, 'announcement');
 });
 
 p2PassButton.addEventListener('click', () => {
+    resetCounters();
     const user = POV.user;
     const message = determineUsername(user) + ' passed';
     appendMessage(user, message, 'announcement');

resources/js/front-end/event-listeners/table/containers-and-documents.js

@@ -1,12 +1,13 @@
 import { oppContainersDocument, selfContainersDocument } from '../../front-end.js';
 import { closePopups } from '../../actions/general/close-popups.js';
 import { dragLeave, dragOver, drop } from '../../image-logic/drag.js';
-import { keyToggle } from '../../key-toggles/key-toggles.js';
+import { keyDown, keyUp } from '../../key-toggles/key-shortcuts.js';
 
 const addDocumentEventListeners = (document) => {
-    document.addEventListener('click', (event) => {closePopups(event)});
-    document.addEventListener('contextmenu', (event) => {closePopups(event)});
-    document.addEventListener('keydown', (event) => {keyToggle(event)});
+    document.addEventListener('click', (event) => closePopups(event));
+    document.addEventListener('contextmenu', (event) => closePopups(event));
+    document.addEventListener('keydown', (event) => keyDown(event));
+    document.addEventListener('keyup', (event) => keyUp(event));
 }
 
 addDocumentEventListeners(document);