extra race options

jacob-medina · Sep 5, 2023 · bf4ff3b · bf4ff3b
1 parent 6ce6a0d
commit bf4ff3b
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 16 deletions.
diff --git a/public/assets/modules/options.js b/public/assets/modules/options.js
@@ -8,6 +8,7 @@ const defaultDiffMultiplier = 1.0;
 
 let boardSize = defaultBoardSize;
 let diffMultiplier = defaultDiffMultiplier;
+let excludeItems = [];
 
 
 function handleRandomSeedBtn(reload=true) {
@@ -92,6 +93,33 @@ function setDifficultyValue(val) {
     $('.difficulty').text(diffMultiplier);
 }
 
+function getExcludeArray(searchParams, spaces=false) {
+    const exclude = searchParams.get("exclude");
+    let excludeTypes = [];
+    if (exclude) {
+        excludeTypes = exclude.split(',');
+        if (spaces) excludeTypes = excludeTypes.map(item => item.split('-').join(' '));
+    }
+    return excludeTypes;
+}
+
+
+function setExclude(items) {
+    excludeItems = items;
+    const excludeUl = $('.exclude-items');
+    excludeUl.text('');
+
+    if (items.length === 0) {
+        $('.exclude-items-container').text('Include all challenge types');
+        return;
+    }
+
+    items.forEach(item => {
+        item = titleCase(item);
+        excludeUl.append(`<li>${item}</li>`);
+    });
+}
+
 
 function generateChallengeOptions() {
     const params = new URLSearchParams(new URL(location.href).search);
@@ -115,4 +143,4 @@ function generateChallengeOptions() {
     optionsContainer.append(html);
 }
 
-export { boardSize, diffMultiplier, defaultBoardSize, defaultDiffMultiplier, newBoard, handleRandomSeedBtn, handleOptionsFormSubmit, resetOptions, setBoardSize, setDifficulty, setBoardSizeValue, setDifficultyValue, generateChallengeOptions };
+export { boardSize, diffMultiplier, getExcludeArray, defaultBoardSize, defaultDiffMultiplier, newBoard, handleRandomSeedBtn, handleOptionsFormSubmit, resetOptions, setBoardSize, setDifficulty, setBoardSizeValue, setDifficultyValue, setExclude, generateChallengeOptions };
diff --git a/public/assets/modules/race.js b/public/assets/modules/race.js
@@ -9,7 +9,7 @@ let room = null;
 
 function onConnect(socket) {
     socket.on('connect', () => {
-        console.log(`You connected with ID: ${socket.id}`);
+        // console.log(`You connected with ID: ${socket.id}`);
 
         socket.on('client-joined-room', clientNum => {
             // $('.ready-btn').prop('disabled', false);
@@ -91,7 +91,9 @@ function createRoom(event, socket, urlSearchParams) {
 }
 
 
-function joinRoom(socket, urlSearchParams) {
+function joinRoom(event, socket, urlSearchParams) {
+    event.preventDefault();
+
     const roomName = $('#join-room-name').val();
     socket.emit('join-room', roomName);
 
@@ -112,7 +114,7 @@ function joinRoom(socket, urlSearchParams) {
             generatePlayerMenu(clients)
         );
 
-        console.log(res.message);
+        // console.log(res.message);
 
         urlSearchParams = new URLSearchParams(res.params);
         const seed = urlSearchParams.get("seed");

diff --git a/public/index.html b/public/index.html
@@ -157,8 +157,8 @@ <h4 class="offcanvas-title" id="race-label">Race</h4>
         </div>
 
         <div class="offcanvas-body">
-            <form class="create-room-options">
-                <p class="mb-2">Create a room:</p>
+            <h5 class="options-header">Create a Room</h5>
+            <form class="create-room-options options-section">
                 <div class="justify-start align-center gap-3">
                     <input type="text" id="create-room-name" placeholder="Room Name" minlength="1" maxlength="25" autocomplete="off">
                     <button type="submit" class="create-room-btn text-icon-btn outlined-btn justify-start align-center">
@@ -167,21 +167,34 @@ <h4 class="offcanvas-title" id="race-label">Race</h4>
                     </button>
                 </div>
                 <small class="error hide">Room name taken!</small>
+
+                <br/>
+
+                <p class="mb-0">Board parameters:</p>
+                <ul class="board-params mt-2">
+                    <li>Board Size: <span class="board-size">5x5</span></li>
+                    <li>Difficulty: <span class="difficulty">1.0</span></li>
+                    <li class="exclude-items-container">
+                        <span>Exclude...</span>
+                        <ul class="exclude-items">
+                            <li>Main Quests</li>
+                            <li>Korok Seeds</li>
+                        </ul>
+                    </li>
+                </ul>
             </form>
 
-            <br/>
-            <br/>
-            <div class="join-room-options">
-                <p class="mb-2">Join a room:</p>
+            <h5 class="options-header">Join a Room</h5>
+            <form class="join-room-options options-section">
                 <div class="justify-start align-center gap-3">
                     <input type="text" id="join-room-name" placeholder="Room Name" minlength="1" maxlength="25" autocomplete="off">
-                    <button type="button" class="join-room-btn text-icon-btn outlined-btn justify-start align-center">
+                    <button type="submit" class="join-room-btn text-icon-btn outlined-btn justify-start align-center">
                         <span>Join</span>
                         <span class="material-symbols-outlined">meeting_room</span>
                     </button>
                 </div>
                 <small class="error hide">Room name does not exist!</small>
-            </div>
+            </form>
         </div>
     </div>
 
@@ -204,6 +217,8 @@ <h3 id="room-name-title" class="text-center"></h3>
                         <span class="material-symbols-outlined">done</span>
                     </button>
 
+                    <p id="wait">Wait for others to be ready.</p>
+
                     <!-- Exit room button -->
                     <button class="exit-room-btn text-icon-btn justify-start align-center mt-5">
                         <span>Exit Room</span>

diff --git a/public/main.js b/public/main.js
@@ -1,7 +1,7 @@
 import { SeededRandom, getRandSeed } from "./assets/modules/SeededRandom.js";
 import { challengeTypes } from "./assets/modules/ChallengeType.js";
 
-import { handleRandomSeedBtn, newBoard, handleOptionsFormSubmit, setBoardSizeValue, setDifficultyValue, generateChallengeOptions, boardSize, defaultBoardSize, diffMultiplier, defaultDiffMultiplier, resetOptions } from "./assets/modules/options.js";
+import { handleRandomSeedBtn, newBoard, handleOptionsFormSubmit, getExcludeArray, setBoardSizeValue, setDifficultyValue, setExclude, generateChallengeOptions, boardSize, defaultBoardSize, diffMultiplier, defaultDiffMultiplier, resetOptions } from "./assets/modules/options.js";
 import { hideElement, showElement } from "./assets/modules/helper.js";
 import { updateShareURL, copyShareURL } from "./assets/modules/share.js";
 import { fetchAndGenerateBoard } from "./assets/modules/board.js";
@@ -32,7 +32,9 @@ function init() {
     $('#seed-input').val(seed);
 
     setBoardSizeValue(searchParams.get('boardSize') ?? defaultBoardSize);
-    setDifficultyValue(searchParams.get('difficulty') ?? defaultDiffMultiplier)
+    setDifficultyValue(searchParams.get('difficulty') ?? defaultDiffMultiplier);
+    setExclude(getExcludeArray(searchParams, true));
+
     updateShareURL();
 
     setColorMode(getColorMode());
@@ -53,9 +55,10 @@ function init() {
     $('.copy-link-btn').on('click', copyShareURL);
 
     // race
-    $('.create-room-options').on('submit', (e) => createRoom(e, socket, searchParams))
+    $('.create-room-options').on('submit', (e) => createRoom(e, socket, searchParams));
+    $('.join-room-options').on('submit', (e) => joinRoom(e, socket, searchParams))
     // $('.create-room-btn').on('click', () => createRoom(socket, searchParams));
-    $('.join-room-btn').on('click', () => joinRoom(socket, searchParams));
+    // $('.join-room-btn').on('click', () => joinRoom(socket, searchParams));
     document.getElementById('race-sidebar').addEventListener('hidden.bs.offcanvas', e => {
         $('#race-sidebar .error').addClass('hide');
     });