finish implementation

qbreader · Oct 28, 2024 · 4c0450d · 4c0450d
1 parent 2dda3db
commit 4c0450d
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 73 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;
 
@@ -237,7 +238,6 @@ async function connectionAcknowledgedQuery ({
   categoryPercents
 }) {
   setDifficulties({ difficulties });
-
   $('#slider').slider('values', 0, minYear);
   $('#slider').slider('values', 1, maxYear);
   document.getElementById('year-range-a').textContent = minYear;
@@ -261,7 +261,7 @@ async function connectionAcknowledgedQuery ({
 
   document.getElementById('toggle-standard-only').checked = standardOnly;
 
-  categoryManager.import(categories, subcategories, alternateSubcategories, percentView, categoryPercents);
+  categoryManager.import({ categories, subcategories, alternateSubcategories, percentView, categoryPercents });
   categoryManager.loadCategoryModal();
 }
 
@@ -547,13 +547,18 @@ function sortPlayerListGroup (descending = true) {
 
 function setCategories ({ alternateSubcategories, categories, subcategories, percentView, categoryPercents, username }) {
   logEvent(username, 'updated the categories');
-  categoryManager.import(categories, subcategories, alternateSubcategories, percentView, categoryPercents);
+  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))) {
@@ -1001,7 +1006,6 @@ ReactDOM.createRoot(document.getElementById('category-modal-root')).render(
     categoryManager={categoryManager}
     onClose={() => {
       if (oldCategories !== JSON.stringify(categoryManager.export())) {
-        console.log(JSON.stringify({ type: 'set-categories', ...categoryManager.export() }));
         socket.send(JSON.stringify({ type: 'set-categories', ...categoryManager.export() }));
       }
       oldCategories = JSON.stringify(categoryManager.export());
@@ -1011,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,8 +62,6 @@ const ALTERNATE_SUBCATEGORY_BUTTONS = [
 ];
 
 function CategoryModal ({ categoryManager, disablePercentView = false, onClose = () => {} }) {
-  const [percents, setPercents] = React.useState(CATEGORY_BUTTONS.map(element => 0));
-
   React.useEffect(() => {
     categoryManager.loadCategoryModal();
     document.getElementById('category-modal').addEventListener('hidden.bs.modal', onClose);
@@ -73,12 +71,14 @@ 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();
     }
@@ -100,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>
@@ -208,8 +210,14 @@ function CategoryModal ({ categoryManager, disablePercentView = false, onClose =
                     <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>