format

dearlordylord · Feb 8, 2024 · 4b7de05 · 4b7de05
1 parent cab011f
commit 4b7de05
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 66 deletions.
diff --git a/reference-react/src/lib/reference-react.tsx b/reference-react/src/lib/reference-react.tsx
@@ -6,11 +6,11 @@ import {
   useCallback,
   useEffect,
   useMemo,
-  useState
+  useState,
 } from 'react';
 import * as ui from '@jikan0/ui';
 import { match } from 'ts-pattern';
-import { Action, ModeSelectorSettingsViewActions, ModeSelectorSettingViewModeActions, ViewValue } from '@jikan0/ui';
+import { ModeSelectorSettingViewModeActions, ViewValue } from '@jikan0/ui';
 
 const StyledReferenceReact = styled.div`
   color: pink;
@@ -26,7 +26,8 @@ const runningStages: {
   running: ({ viewValue }) => (
     <div>
       Running: {viewValue.timerStats.round.kind}:{' '}
-      {Number(viewValue.timerStats.round.left)} of {Number(viewValue.timerStats.round.current)}/
+      {Number(viewValue.timerStats.round.left)} of{' '}
+      {Number(viewValue.timerStats.round.current)}/
       {Number(viewValue.timerStats.rounds)}
     </div>
   ),
@@ -70,10 +71,11 @@ const Controls = ({
     setUiState,
     uiState,
   });
-  const makeOnClick = (action: ui.Action) => (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    onAction(action);
-  }
+  const makeOnClick =
+    (action: ui.Action) => (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      onAction(action);
+    };
   return (
     <div>
       {view.startButton.active ? (
@@ -106,21 +108,58 @@ const Settings = ({
     setUiState,
     uiState,
   });
-  const makeOnChange = (makeAction: ModeSelectorSettingViewModeActions<'simple'>[keyof ModeSelectorSettingViewModeActions<'simple'>]) => (e: ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    const v = BigInt(parseInt(e.target.value, 10));
-    onAction(makeAction(v));
-  };
+  const makeOnChange =
+    (
+      makeAction: ModeSelectorSettingViewModeActions<'simple'>[keyof ModeSelectorSettingViewModeActions<'simple'>]
+    ) =>
+    (e: ChangeEvent<HTMLInputElement>) => {
+      e.preventDefault();
+      const v = BigInt(parseInt(e.target.value, 10));
+      onAction(makeAction(v));
+    };
   const mode = view.modeSelector.value.mode;
   return (
     <div>
-      {view.running === 'stopped' ? (
-        ((value, actions) => <div className="settings-stopped">
-          <label>rounds: <input type="number" step="1" min="1" value={Number(value.rounds)} onChange={makeOnChange(actions.setRounds)}/></label>
-          <label>exercise time ms: <input type="number" step="1000" min="1000" value={Number(value.exerciseTimeMs)} onChange={makeOnChange(actions.setExerciseTimeMs)}/></label>
-          <label>rest time ms: <input type="number" step="1000" min="1000" value={Number(value.restTimeMs)} onChange={makeOnChange(actions.setRestTimeMs)}/></label>
-        </div>)(view.modeSelector.value/*TODO move setting values inside mode lock*/, view.modeSelector.actions[mode])
-      ) : null}
+      {view.running === 'stopped'
+        ? ((value, actions) => (
+            <div className="settings-stopped">
+              <label>
+                rounds:{' '}
+                <input
+                  type="number"
+                  step="1"
+                  min="1"
+                  value={Number(value.rounds)}
+                  onChange={makeOnChange(actions.setRounds)}
+                />
+              </label>
+              <label>
+                exercise time ms:{' '}
+                <input
+                  type="number"
+                  step="1000"
+                  min="1000"
+                  value={Number(value.exerciseTimeMs)}
+                  onChange={makeOnChange(actions.setExerciseTimeMs)}
+                />
+              </label>
+              <label>
+                rest time ms:{' '}
+                <input
+                  type="number"
+                  step="1000"
+                  min="1000"
+                  value={Number(value.restTimeMs)}
+                  onChange={makeOnChange(actions.setRestTimeMs)}
+                />
+              </label>
+            </div>
+          ))(
+            view.modeSelector
+              .value /*TODO move setting values inside mode lock*/,
+            view.modeSelector.actions[mode]
+          )
+        : null}
     </div>
   );
 };

diff --git a/ui/package.json b/ui/package.json
@@ -4,7 +4,8 @@
   "dependencies": {
     "tslib": "^2.3.0",
     "@jikan0/fsm": "*",
-    "@jikan0/utils": "*"
+    "@jikan0/utils": "*",
+    "@rimbu/core": "^2.0.0"
   },
   "type": "commonjs",
   "main": "./src/index.js",

diff --git a/ui/src/lib/ui.spec.ts b/ui/src/lib/ui.spec.ts
@@ -1,12 +1,13 @@
 import {
   ContinueClickedEvent,
   PauseClickedEvent,
-  reduce, simpleModeSelectorToProgram,
+  reduce,
+  simpleModeSelectorToProgram,
   StartClickedEvent,
   state0,
   StopClickedEvent,
   TimePassedEvent,
-  view
+  view,
 } from './ui';
 import { pipe } from '@jikan0/utils';
 
@@ -130,12 +131,14 @@ describe('ui', () => {
     });
     describe('simpleModeSelectorToProgram', () => {
       it('creates 20 queue items out of 10 rounds', () => {
-        expect(simpleModeSelectorToProgram({
-          rounds: BigInt(10),
-          exerciseTimeMs: BigInt(1000),
-          restTimeMs: BigInt(500)
-        }).length).toBe(20/* +1 preparation - 1 rest*/);
-      })
+        expect(
+          simpleModeSelectorToProgram({
+            rounds: BigInt(10),
+            exerciseTimeMs: BigInt(1000),
+            restTimeMs: BigInt(500),
+          }).length
+        ).toBe(20 /* +1 preparation - 1 rest*/);
+      });
     });
   });
 });
diff --git a/ui/src/lib/ui.ts b/ui/src/lib/ui.ts
@@ -108,9 +108,11 @@ export type SimpleModeRoundsSelectedEvent = {
   rounds: bigint;
 };
 
-export const MakeSimpleModeRoundsSelectedEvent = (rounds: bigint): SimpleModeRoundsSelectedEvent => ({
+export const MakeSimpleModeRoundsSelectedEvent = (
+  rounds: bigint
+): SimpleModeRoundsSelectedEvent => ({
   _tag: 'SimpleModeRoundsSelected',
-  rounds
+  rounds,
 });
 
 export type Event =
@@ -281,10 +283,10 @@ const simpleModeStateToStats = (
 
 export type ModeSelectorSettingViewModeActions<M extends Mode> = {
   simple: {
-    setRounds: typeof MakeSimpleModeRoundsSelectedEvent,
-    setExerciseTimeMs: typeof MakeSimpleModeExerciseTimeSelectedEvent,
-    setRestTimeMs: typeof MakeSimpleModeRestTimeSelectedEvent,
-  }
+    setRounds: typeof MakeSimpleModeRoundsSelectedEvent;
+    setExerciseTimeMs: typeof MakeSimpleModeExerciseTimeSelectedEvent;
+    setRestTimeMs: typeof MakeSimpleModeRestTimeSelectedEvent;
+  };
 }[M];
 
 export type ModeSelectorSettingsViewValue = ModeSelectorSettingsValue;
@@ -496,47 +498,75 @@ export const reduce =
       }
       case 'ModeSelected': {
         if (state.mode.selected === action.mode) return state;
-        return Deep.patch(state, [{
-          mode: [{
-            selected: action.mode,
-          }],
-        }]);
+        return Deep.patch(state, [
+          {
+            mode: [
+              {
+                selected: action.mode,
+              },
+            ],
+          },
+        ]);
       }
       case 'SimpleModeRoundsSelected': {
         if (state.mode.selected !== SIMPLE_MODE) return state;
-        return Deep.patch(state, [{
-          mode: [{
-            settings: [{
-              simple: [{
-                rounds: action.rounds,
-              }],
-            }],
-          }],
-        }]);
+        return Deep.patch(state, [
+          {
+            mode: [
+              {
+                settings: [
+                  {
+                    simple: [
+                      {
+                        rounds: action.rounds,
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ]);
       }
       case 'SimpleModeExerciseTimeSelected': {
         if (state.mode.selected !== SIMPLE_MODE) return state;
-        return Deep.patch(state, [{
-          mode: [{
-            settings: [{
-              simple: [{
-                exerciseTimeMs: action.exerciseTimeMs,
-              }],
-            }],
-          }],
-        }]);
+        return Deep.patch(state, [
+          {
+            mode: [
+              {
+                settings: [
+                  {
+                    simple: [
+                      {
+                        exerciseTimeMs: action.exerciseTimeMs,
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ]);
       }
       case 'SimpleModeRestTimeSelected': {
         if (state.mode.selected !== SIMPLE_MODE) return state;
-        return Deep.patch(state, [{
-          mode: [{
-            settings: [{
-              simple: [{
-                restTimeMs: action.restTimeMs,
-              }],
-            }],
-          }],
-        }]);
+        return Deep.patch(state, [
+          {
+            mode: [
+              {
+                settings: [
+                  {
+                    simple: [
+                      {
+                        restTimeMs: action.restTimeMs,
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ]);
       }
     }
   };