sorted decklist, random decklist generator

iframe-containers/opp-containers.html

@@ -11,6 +11,8 @@
     <div class="stack-button-container">
         <button id="oppShuffleDeckButton" class="action-button">Shuffle</button>
         <button id="closeDeckDisplayButton" class="action-button">Close</button>
+        <input type="checkbox" id="sortCheckBox">
+        <label for="sortCheckBox">Sort</label>
     </div>
 </div>
 <div id="discardText" class="opp-text">(<span id="discardCount">0</span>)</div>

iframe-containers/self-containers.html

@@ -10,6 +10,8 @@
     <div class="stack-button-container">
         <button id="selfShuffleDeckButton" class="action-button">Shuffle</button>
         <button id="closeDeckDisplayButton" class="action-button">Close</button>
+        <input type="checkbox" id="sortCheckBox">
+        <label for="sortCheckBox">Sort</label>
     </div>
 </div>
 <div id="discardText" class="self-text">(<span id="discardCount">0</span>)</div>

index.html

@@ -25,7 +25,7 @@
     <div id="topButtonContainer">
         <button id="p1Button" class="selected-page">1P</button>
         <button id="p2Button" class="not-selected-page">2P</button>
-        <button id="deckImportButton" class="not-selected-page">Import Deck</button>
+        <button id="deckImportButton" class="not-selected-page">Import</button>
         <button id="settingsButton" class="not-selected-page">Settings</button>
     </div>
 
@@ -36,7 +36,7 @@
         <div id="chatboxButtonContainer" class="chat-button-container">
             <button id="attackButton" class="selfColour">Attack</button>
             <button id="passButton" class="selfColour">Pass</button>
-            <button id="FREEBUTTON" class="selfColour">🥳</button>
+            <button id="FREEBUTTON" class="selfColour">🎅</button>
         </div>
         <input id="messageInput" type="text" placeholder="Type your message here...">
         <div id="bottomP1ButtonContainer" class="sidebox-button-container">
@@ -65,7 +65,7 @@
             <div id="p2ChatboxButtonContainer" class="chat-button-container">
                 <button id="p2AttackButton" class="selfColour">Attack</button>
                 <button id="p2PassButton" class="selfColour">Pass</button>
-                <button id="p2FREEBUTTON" class="selfColour">🥳</button>
+                <button id="p2FREEBUTTON" class="selfColour">🎅</button>
             </div>
             <input id="p2MessageInput" type="text" placeholder="Type your message here...">
             <div id="p2BottomButtonContainer" class="sidebox-button-container">
@@ -84,7 +84,7 @@
         <textarea id="mainDeckImportInput" placeholder="Import your decklist here" spellcheck="false"></textarea>
         <textarea id="altDeckImportInput" placeholder="Import your decklist here" spellcheck="false"></textarea>        
         <div id="importBottom">
-            <button id="importButton">Import</button>
+            <button id="importButton">Import</button><button id="randomButton">🪄</button>
             <div id="success">Success!</div><div id="failed">Error!</div><div id="loading"></div>
         </div>
     </div>

resources/css/index.css

@@ -179,17 +179,18 @@ ul, li {
 #topButtonContainer {
   position: fixed;
   right: 0;
-  top: 0;
+  bottom: 95vh;
+  height: 5vh;
   width: 24%;
-  height: 5%;
   display: flex;
   overflow: hidden; /* Ensure buttons don't exceed container width */
   background: rgb(145, 145, 145);
+  align-items: flex-end; /* Align items at the bottom of the container */
 }
 #topButtonContainer button {
-  padding: 7px 0; /* Adjust padding for button size */
+  padding: 1vh; /* Adjust padding for button size */
   width: 30%; /* Adjust width to distribute evenly */
-  font-size: 1vw; /* Adjust font size as needed */
+  font-size: 1.75vh; /* Adjust font size as needed */
   cursor: pointer;
   border: none;
 }
@@ -208,9 +209,9 @@ ul, li {
   background: rgb(231, 228, 228);
   position: fixed;
   right: 0;
-  top: 5%;
+  top: 5vh;
   width: 24%;
-  height: 95%;
+  height: 95vh;
   padding: 0.5%;
   box-sizing: border-box;
   display: flex;
@@ -436,21 +437,21 @@ ul, li {
   display: none;
 }
 #importButtonContainer {
-  box-sizing: border-box;
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 5%;
-  height: 8%;
+  height: 5%;
   padding-top: 1vh;
   padding-bottom: 1vh;
+  align-items: center;
 }
 #importButtonContainer button {
   width: 50%;
-  height: 100%;
   border-radius: .5rem;
   padding: 1vh;
   border: none;
+  font-size: 1.5vh;
   background-color: rgba(171, 171, 171, 0.864);
 }
 .main-select {
@@ -501,6 +502,14 @@ ul, li {
 #importButton:hover {
   background-color: #95c6b4;
 }
+#randomButton {
+  position: absolute;
+  right: 5%;
+  background-color: transparent;
+  border: none;
+  font-size: x-large;
+  cursor: pointer;
+}
 #success, #failed, #loading {
   display: none;
 }

resources/css/opp-containers.css

@@ -15,6 +15,7 @@
 }
 .dark-mode-4 {
   background-color: #141414 !important;
+  color: white;
 }
 body, input, textarea, button {
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
@@ -438,6 +439,10 @@ body, input, textarea, button {
   overflow-y: auto;
   z-index: 3;
 }
+#deck_html label {
+  position: relative;
+  cursor: pointer;
+}
 #deck_html img {
   display: inline-block;
   width: 8%;

resources/css/self-containers.css

@@ -14,6 +14,7 @@
 }
 .dark-mode-4 {
   background-color: #141414 !important;
+  color: white;
 }
 .dark-mode-5 {
   background-color: rgb(59 59 59 / 87%) !important;
@@ -440,6 +441,10 @@ body, input, textarea, button {
   overflow-y: auto;
   z-index: 3;
 }
+#deck_html label {
+  position: relative;
+  cursor: pointer;
+}
 #deck_html img {
   display: inline-block;
   width: 8%;

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

@@ -2,6 +2,7 @@ import { rearrangeArray, shuffleIndices } from '../../setup/general/shuffle.js'
 import { removeImages } from '../../image-logic/remove-images.js';
 import { stringToVariable } from '../../setup/containers/string-to-variable.js';
 import { p1, roomId, socket } from '../../front-end.js';
+import { sort } from '../general/sort.js';
 
 export const shuffleContainer = (user, location, location_html, indices, received = false) => {
     const _location = location;
@@ -26,4 +27,5 @@ export const shuffleContainer = (user, location, location_html, indices, receive
         };
         socket.emit('shuffleContainer', data);
     };
+    sort(user);
 }

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

@@ -11,6 +11,7 @@ import { stringToVariable } from '../../setup/containers/string-to-variable.js';
 import { addDamageCounter } from '../counters/damage-counter.js';
 import { addSpecialCondition } from '../counters/special-condition.js';
 import { addAbilityCounter } from '../counters/ability-counter.js';
+import { sort } from './sort.js';
 
 export const moveCard = (user, oLocation, oLocation_html, mLocation, mLocation_html, index, targetIndex, received = false) => {
     deselectCard(); //remove highlight from all images before it's moved
@@ -484,4 +485,5 @@ export const moveCard = (user, oLocation, oLocation_html, mLocation, mLocation_h
         socket.emit('moveCard', moveCardData);
         // socket.emit('appendMessage', appendMessageData);
     };
+    sort(user);
 }

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

@@ -0,0 +1,27 @@
+import { oppSortCheckBox, selfSortCheckBox } from "../../front-end.js";
+import { removeImages } from "../../image-logic/remove-images.js";
+import { stringToVariable } from "../../setup/containers/string-to-variable.js";
+import { determineDeckData } from "../../setup/general/determine-deckdata.js";
+
+export const sort = (user) => {
+    const checkbox = user === 'self' ? selfSortCheckBox : oppSortCheckBox;
+    const deckData = determineDeckData(user);
+    const deck = stringToVariable(user, 'deck');
+    const deck_html = stringToVariable(user, 'deck_html');
+
+    removeImages(deck_html);
+
+    if (checkbox.checked){
+        deckData.forEach(entry => {
+            const cardAttributes = JSON.parse(entry[1]);
+            const name = cardAttributes.name;
+            deck.cards.forEach(card => {
+                if (card.name === name){
+                    deck_html.appendChild(card.image);
+                };
+            });
+        });
+    } else {
+        deck.cards.forEach(card => deck_html.appendChild(card.image));
+    };
+}

resources/js/front-end/event-listeners/sidebox/import-deck.js

@@ -1,10 +1,6 @@
-import { altDeckImportInput, altImportHeaderButton, failedText, importButton, mainDeckImportInput, mainImportHeaderButton, successText } from "../../front-end.js";
+import { altDeckImportInput, altImportHeaderButton, failedText, importButton, mainDeckImportInput, mainImportHeaderButton, randomButton, successText } from "../../front-end.js";
 import { importDecklist } from "../../setup/deck-constructor/import.js";
-
-importButton.addEventListener('click', () => {
-    const user = mainDeckImportInput.style.display !== 'none' ? 'self' : 'opp';
-    importDecklist(user);
-});
+import { sampleLists } from "../../setup/deck-constructor/sample.decklists.js";
 
 mainImportHeaderButton.addEventListener('click', () => {
     if (mainImportHeaderButton.classList.contains('main-select')){
@@ -30,4 +26,19 @@ altImportHeaderButton.addEventListener('click', () => {
         successText.style.display = 'none';
         failedText.style.display = 'none';
     };
+});
+
+importButton.addEventListener('click', () => {
+    const user = mainDeckImportInput.style.display !== 'none' ? 'self' : 'opp';
+    importDecklist(user);
+});
+
+randomButton.addEventListener('click', () => {
+    const input = mainDeckImportInput.style.display !== 'none' ? mainDeckImportInput : altDeckImportInput;
+
+    input.value = '';
+
+    const randomList = sampleLists[Math.floor(Math.random() * sampleLists.length)];
+
+    input.value = randomList;
 });

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

@@ -1,4 +1,5 @@
 import { resetCounters } from "../../../actions/counters/reset-ability-counters.js";
+import { sort } from "../../../actions/general/sort.js";
 import { attackButton, POV, passButton, messageInput, FREEBUTTON} from "../../../front-end.js";
 import { appendMessage } from "../../../setup/chatbox/messages.js";
 import { determineUsername } from "../../../setup/general/determine-username.js";
@@ -27,5 +28,6 @@ messageInput.addEventListener('keydown', (event) => {
 });
 
 FREEBUTTON.addEventListener('click', () => {
-    appendMessage(POV.user, '🥳', 'player');
+    appendMessage(POV.user, FREEBUTTON.textContent, 'player');
+    sort('self');
 });

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

@@ -28,5 +28,5 @@ p2MessageInput.addEventListener('keydown', (event) => {
 });
 
 p2FREEBUTTON.addEventListener('click', () => {
-    appendMessage(POV.user, '🥳', 'player');
+    appendMessage(POV.user, p2FREEBUTTON.textContent, 'player');
 });

resources/js/front-end/event-listeners/table/container-buttons.js

@@ -1,5 +1,6 @@
 import { closeDisplay, discardAll, handAll, lostzoneAll, shuffleAll } from '../../actions/container/general.js';
-import { oppAttachedCardDiscardButton, oppAttachedCardHandButton, oppAttachedCardLostzoneButton, oppAttachedCardShuffleButton, oppCloseDeckDisplayButton, oppCloseDiscardDisplayButton, oppCloseLostzoneDisplayButton, oppDiscardShuffleButton, oppShuffleDeckButton, oppViewCardsDiscardButton, oppViewCardsHandButton, oppViewCardsLostzoneButton, oppViewCardsShuffleButton, selfAttachedCardDiscardButton, selfAttachedCardHandButton, selfAttachedCardLostzoneButton, selfAttachedCardShuffleButton, selfCloseDeckDisplayButton, selfCloseDiscardDisplayButton, selfCloseLostzoneDisplayButton, selfDiscardShuffleButton, selfShuffleDeckButton, selfViewCardsDiscardButton, selfViewCardsHandButton, selfViewCardsLostzoneButton, selfViewCardsShuffleButton } from '../../front-end.js';
+import { sort } from '../../actions/general/sort.js';
+import { oppAttachedCardDiscardButton, oppAttachedCardHandButton, oppAttachedCardLostzoneButton, oppAttachedCardShuffleButton, oppCloseDeckDisplayButton, oppCloseDiscardDisplayButton, oppCloseLostzoneDisplayButton, oppDiscardShuffleButton, oppShuffleDeckButton, oppSortCheckBox, oppViewCardsDiscardButton, oppViewCardsHandButton, oppViewCardsLostzoneButton, oppViewCardsShuffleButton, selfAttachedCardDiscardButton, selfAttachedCardHandButton, selfAttachedCardLostzoneButton, selfAttachedCardShuffleButton, selfCloseDeckDisplayButton, selfCloseDiscardDisplayButton, selfCloseLostzoneDisplayButton, selfDiscardShuffleButton, selfShuffleDeckButton, selfSortCheckBox, selfViewCardsDiscardButton, selfViewCardsHandButton, selfViewCardsLostzoneButton, selfViewCardsShuffleButton } from '../../front-end.js';
 
 //self buttons
 selfShuffleDeckButton.addEventListener('click', (event) => shuffleAll(event));
@@ -28,6 +29,8 @@ selfCloseDiscardDisplayButton.addEventListener('click', (event) => closeDisplay(
 
 selfCloseLostzoneDisplayButton.addEventListener('click', (event) => closeDisplay(event));
 
+selfSortCheckBox.addEventListener('change', () => sort('self'));
+
 //opp buttons
 oppShuffleDeckButton.addEventListener('click', (event) => shuffleAll(event));
 
@@ -55,3 +58,5 @@ oppCloseDiscardDisplayButton.addEventListener('click', (event) => closeDisplay(e
 
 oppCloseLostzoneDisplayButton.addEventListener('click', (event) => closeDisplay(event));
 
+oppSortCheckBox.addEventListener('change', () => sort('opp'));
+

resources/js/front-end/initialization/containers/self-containers.js

@@ -117,5 +117,10 @@ export const target = {
     location: '',
     container: '',
     containerId: '',
-    locationAsString: ''
+    locationAsString: '',
+    get card(){
+        if (this.location){
+            return this.location.cards[this.index];
+        };
+    }
 };

resources/js/front-end/initialization/html-elements/buttons.js

@@ -43,6 +43,7 @@ export const leaveRoomButton = document.getElementById('leaveRoomButton');
 export const mainImportHeaderButton = document.getElementById('mainImportHeaderButton');
 export const altImportHeaderButton = document.getElementById('altImportHeaderButton');
 export const importButton = document.getElementById('importButton');
+export const randomButton = document.getElementById('randomButton');
 
 //selfContainers
 export const selfShuffleDeckButton = selfContainersDocument.getElementById('selfShuffleDeckButton');
@@ -63,6 +64,8 @@ export const selfCloseLostzoneDisplayButton = selfContainersDocument.getElementB
 export const selfVSTARButton = selfContainersDocument.getElementById('vSTARButton');
 export const selfGXButton = selfContainersDocument.getElementById('GXButton');
 
+export const selfSortCheckBox = selfContainersDocument.getElementById('sortCheckBox');
+
 //oppContainers
 export const oppShuffleDeckButton = oppContainersDocument.getElementById('oppShuffleDeckButton')
 export const oppDiscardShuffleButton = oppContainersDocument.getElementById('discardShuffleButton');
@@ -80,4 +83,6 @@ export const oppCloseDiscardDisplayButton = oppContainersDocument.getElementById
 export const oppCloseLostzoneDisplayButton = oppContainersDocument.getElementById('closeLostzoneDisplayButton');
 
 export const oppVSTARButton = oppContainersDocument.getElementById('vSTARButton');
-export const oppGXButton = oppContainersDocument.getElementById('GXButton');
+export const oppGXButton = oppContainersDocument.getElementById('GXButton');
+
+export const oppSortCheckBox = oppContainersDocument.getElementById('sortCheckBox');