First commit of os-league-tools-master

2025-10-27 08:36:10 +08:00
parent a5aab68ea4
commit 31ee652bff
528 changed files with 114970 additions and 0 deletions
--- a/os-league-tools-master/src/pages/CalculatorsPanel.js
+++ b/os-league-tools-master/src/pages/CalculatorsPanel.js
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import useBreakpoint, { MEDIA_QUERIES, MODE } from '../hooks/useBreakpoint';
+import CalculatorSettings from '../components/CalculatorSettings';
+import CalculatorTable from '../components/CalculatorTable';
+import useMultipliers from '../hooks/useMultipliers';
+import useEquilibrium from '../hooks/useEquilibrium';
+
+export default function CalculatorsPanel() {
+  const {
+    calculators: { skill, expValues, baseMultiplier },
+  } = useSelector(state => ({ calculators: state.calculators, tasks: state.tasks }));
+  const isSmViewport = useBreakpoint(MEDIA_QUERIES.SM, MODE.LESS_OR_EQ);
+  const isXlViewport = useBreakpoint(MEDIA_QUERIES.XL);
+  const [showSidebar, setShowSidebar] = useState(isXlViewport);
+  const multipliersState = useMultipliers();
+  const equilibriumState = useEquilibrium();
+
+  return (
+    <section className='flex flex-col xl:flex-row w-full bg-secondary-alt xl:bg-primary'>
+      {isSmViewport && showSidebar && (
+        <div className='mt-3 bg-hover cursor-pointer' onClick={() => setShowSidebar(!showSidebar)}>
+          <span className='icon-xl align-middle'>keyboard_double_arrow_up</span>
+          <span className='text-sm italic ml-1'>Hide settings</span>
+        </div>
+      )}
+      {showSidebar && (
+        <div className='basis-[23%] p-2'>
+          <CalculatorSettings skill={skill} multipliersState={multipliersState} equilibriumState={equilibriumState} />
+        </div>
+      )}
+      <div className='mt-3 mb-3 bg-hover cursor-pointer' onClick={() => setShowSidebar(!showSidebar)}>
+        {isXlViewport ? (
+          <span className='icon-xl align-middle'>
+            {showSidebar ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'}
+          </span>
+        ) : (
+          <p className='text-sm italic ml-1'>
+            <span className='icon-xl align-middle'>
+              {showSidebar ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down'}
+            </span>
+            {showSidebar ? 'Hide settings' : 'Show settings'}
+          </p>
+        )}
+      </div>
+      <CalculatorTable
+        skill={skill}
+        expValues={expValues}
+        baseMultiplier={baseMultiplier}
+        multipliersState={multipliersState}
+        equilibriumState={equilibriumState}
+      />
+    </section>
+  );
+}