fix #304: add % option to multiplayer

qbreader · Oct 28, 2024 · 5db319a · 5db319a
1 parent 52e94c7
commit 5db319a
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 92 deletions.
diff --git a/client/multiplayer/room.jsx b/client/multiplayer/room.jsx
@@ -11,6 +11,7 @@ import DifficultyDropdown from '../scripts/components/DifficultyDropdown.min.js'
 
 const categoryManager = new CategoryManager();
 let oldCategories = JSON.stringify(categoryManager.export());
+let startingDifficulties = [];
 
 let maxPacketNumber = 24;
 
@@ -232,10 +233,11 @@ async function connectionAcknowledgedQuery ({
   standardOnly,
   alternateSubcategories,
   categories,
-  subcategories
+  subcategories,
+  percentView,
+  categoryPercents
 }) {
   setDifficulties({ difficulties });
-
   $('#slider').slider('values', 0, minYear);
   $('#slider').slider('values', 1, maxYear);
   document.getElementById('year-range-a').textContent = minYear;
@@ -259,7 +261,7 @@ async function connectionAcknowledgedQuery ({
 
   document.getElementById('toggle-standard-only').checked = standardOnly;
 
-  categoryManager.import(categories, subcategories, alternateSubcategories);
+  categoryManager.import({ categories, subcategories, alternateSubcategories, percentView, categoryPercents });
   categoryManager.loadCategoryModal();
 }
 
@@ -543,15 +545,20 @@ function sortPlayerListGroup (descending = true) {
   });
 }
 
-function setCategories ({ alternateSubcategories, categories, subcategories, username }) {
+function setCategories ({ alternateSubcategories, categories, subcategories, percentView, categoryPercents, username }) {
   logEvent(username, 'updated the categories');
-  categoryManager.import(categories, subcategories, alternateSubcategories);
+  categoryManager.import({ categories, subcategories, alternateSubcategories, percentView, categoryPercents });
   categoryManager.loadCategoryModal();
 }
 
 function setDifficulties ({ difficulties, username = undefined }) {
   if (username) { logEvent(username, difficulties.length > 0 ? `set the difficulties to ${difficulties}` : 'cleared the difficulties'); }
 
+  if (!document.getElementById('difficulties')) {
+    startingDifficulties = difficulties;
+    return;
+  }
+
   Array.from(document.getElementById('difficulties').children).forEach(li => {
     const input = li.querySelector('input');
     if (difficulties.includes(parseInt(input.value))) {
@@ -997,7 +1004,6 @@ document.getElementById('username').value = username;
 ReactDOM.createRoot(document.getElementById('category-modal-root')).render(
   <CategoryModal
     categoryManager={categoryManager}
-    disablePercentView
     onClose={() => {
       if (oldCategories !== JSON.stringify(categoryManager.export())) {
         socket.send(JSON.stringify({ type: 'set-categories', ...categoryManager.export() }));
@@ -1009,6 +1015,7 @@ ReactDOM.createRoot(document.getElementById('category-modal-root')).render(
 
 ReactDOM.createRoot(document.getElementById('difficulty-dropdown-root')).render(
   <DifficultyDropdown
+    startingDifficulties={startingDifficulties}
     onChange={() => socket.send(JSON.stringify({ type: 'set-difficulties', difficulties: getDropdownValues('difficulties') }))}
   />
 );
diff --git a/client/multiplayer/room.min.js b/client/multiplayer/room.min.js
diff --git a/client/scripts/components/CategoryModal.jsx b/client/scripts/components/CategoryModal.jsx
@@ -62,9 +62,6 @@ const ALTERNATE_SUBCATEGORY_BUTTONS = [
 ];
 
 function CategoryModal ({ categoryManager, disablePercentView = false, onClose = () => {} }) {
-  const [percents, setPercents] = React.useState(CATEGORY_BUTTONS.map(element => 0));
-  const [percentView, setPercentView] = React.useState(false);
-
   React.useEffect(() => {
     categoryManager.loadCategoryModal();
     document.getElementById('category-modal').addEventListener('hidden.bs.modal', onClose);
@@ -74,24 +71,26 @@ function CategoryModal ({ categoryManager, disablePercentView = false, onClose =
     function handleClick () {
       if (categoryManager.categories.length === 0) {
         categoryManager.import(
-          CATEGORY_BUTTONS.map(element => element[0]),
-          SUBCATEGORY_BUTTONS.map(element => element[0]),
-          ALTERNATE_SUBCATEGORY_BUTTONS.map(element => element[0])
+          {
+            categories: CATEGORY_BUTTONS.map(element => element[0]),
+            subcategories: SUBCATEGORY_BUTTONS.map(element => element[0]),
+            alternateSubcategories: ALTERNATE_SUBCATEGORY_BUTTONS.map(element => element[0])
+          }
         );
       } else {
-        categoryManager.import([], [], []);
+        categoryManager.import();
       }
       categoryManager.loadCategoryModal();
     }
     return (
-      <button className='btn btn-primary me-1' onClick={handleClick} disabled={percentView}>Toggle all</button>
+      <button className='btn btn-primary me-1' id='toggle-all' onClick={handleClick}>Toggle all</button>
     );
   }
 
   function TogglePercentView () {
     function handleClick () {
-      categoryManager.percentView = !percentView;
-      setPercentView(!percentView);
+      categoryManager.percentView = !categoryManager.percentView;
+      categoryManager.loadCategoryModal();
     }
     return (
       <button className='btn btn-primary' onClick={handleClick}>% view</button>
@@ -101,27 +100,29 @@ function CategoryModal ({ categoryManager, disablePercentView = false, onClose =
   function PercentButtonRow ({ category, index }) {
     function adjustPercent (amount) {
       // clamp the percent between 0 and 100
-      const percent = Math.min(100, Math.max(0, percents[index] + amount));
-      setPercents([...percents.slice(0, index), percent, ...percents.slice(index + 1)]);
+      const percent = Math.min(100, Math.max(0, categoryManager.categoryPercents[index] + amount));
       categoryManager.categoryPercents[index] = percent;
+      categoryManager.loadCategoryModal();
     }
 
     return (
       <tr>
         <th style={{ width: '50%' }}>{category}</th>
         <td style={{ width: '50%' }}>
-          <span className='font-monospace me-1'>{String(percents[index]).padStart(3, '\u00A0')}%</span>
+          <span className='font-monospace me-1 category-percent'>
+            {/* set by categoryManager.loadCategoryModal */}
+          </span>
           <div class='btn-group btn-group-sm me-1' role='group'>
             <button type='button' className='btn btn-outline-secondary' onClick={() => adjustPercent(-5)}>-</button>
             <button type='button' className='btn btn-outline-secondary' onClick={() => adjustPercent(5)}>+</button>
           </div>
           <div class='btn-group btn-group-sm' role='group'>
             <button type='button' className='btn btn-outline-secondary' onClick={() => adjustPercent(-100)}>Min</button>
-            <button type='button' className='btn btn-outline-secondary' onClick={() => adjustPercent(50 - percents[index])}>50%</button>
+            <button type='button' className='btn btn-outline-secondary' onClick={() => adjustPercent(50 - categoryManager.categoryPercents[index])}>50%</button>
             <button
               type='button'
               className='btn btn-outline-secondary'
-              onClick={() => adjustPercent(100 - percents.reduce((a, b) => a + b))}
+              onClick={() => adjustPercent(100 - categoryManager.categoryPercents.reduce((a, b) => a + b))}
             >
               Max
             </button>
@@ -184,7 +185,7 @@ function CategoryModal ({ categoryManager, disablePercentView = false, onClose =
             <button type='button' className='btn-close' data-bs-dismiss='modal' aria-label='Close' />
           </div>
           <div className='modal-body'>
-            <div className={percentView ? 'd-none' : 'row'} id='non-percent-view'>
+            <div className='row' id='non-percent-view'>
               <div className='col-4' id='categories'>
                 <h5 className='text-center'>Category</h5>
                 {CATEGORY_BUTTONS.map((element) => <CategoryButton key={element[0]} category={element[0]} color={element[1]} />)}
@@ -201,16 +202,22 @@ function CategoryModal ({ categoryManager, disablePercentView = false, onClose =
                 {ALTERNATE_SUBCATEGORY_BUTTONS.map((element) => <AlternateSubcategoryButton key={element[0]} subcategory={element[0]} color={element[1]} hidden />)}
               </div>
             </div>
-            <div className={!percentView && 'd-none'} id='percent-view'>
+            <div className='d-none' id='percent-view'>
               <table className='table'>
                 <tbody>
                   {CATEGORY_BUTTONS.map((element, index) => <PercentButtonRow key={element[0]} category={element[0]} index={index} />)}
                   <tr>
                     <th>Total Percent:</th>
                     <td className='font-monospace'>
                       {/* '\u00A0' === &nbsp; */}
-                      <span className='me-1'>{String(percents.reduce((a, b) => a + b, 0)).padStart(3, '\u00A0')}%</span>
-                      <button type='button' className='btn btn-sm btn-outline-secondary' onClick={() => setPercents(percents.map(_ => 0))}>Reset</button>
+                      <span className='me-1'>{String(categoryManager.categoryPercents.reduce((a, b) => a + b, 0)).padStart(3, '\u00A0')}%</span>
+                      <button
+                        type='button'
+                        className='btn btn-sm btn-outline-secondary'
+                        onClick={() => { categoryManager.categoryPercents = categoryManager.categoryPercents.map(() => 0); categoryManager.loadCategoryModal(); }}
+                      >
+                        Reset
+                      </button>
                     </td>
                   </tr>
                 </tbody>