Improve Vibrator/Toy Support

src/game/GamePage.tsx

@@ -12,7 +12,7 @@ import {
   GameWarmup,
   GameEmergencyStop,
   GameSettings,
-  GameVibrator,
+  GameToyClient,
 } from './components';
 import { GameProvider } from './GameProvider';
 
@@ -89,7 +89,7 @@ export const GamePage = () => {
           <GameIntensity />
           <GamePace />
           <GameSound />
-          <GameVibrator />
+          <GameToyClient />
           <GameEvents />
         </StyledLogicElements>
         <GameImages />

src/game/components/GameToyClient.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { GamePhase, useGameValue } from '../GameProvider';
+import { useAutoRef } from '../../utils';
+import { useToyClientValue } from '../../toy';
+
+export const GameToyClient = () => {
+  const [stroke] = useGameValue('stroke');
+  const [intensity] = useGameValue('intensity');
+  const [pace] = useGameValue('pace');
+  const [phase] = useGameValue('phase');
+  const [devices] = useToyClientValue('devices');
+
+  const data = useAutoRef({
+    intensity,
+    pace,
+    devices,
+  });
+
+  const [currentPhase, setCurrentPhase] = useState(phase);
+
+  useEffect(() => {
+    const { intensity, pace, devices } = data.current;
+    devices.forEach(device => {
+      device.actuate(stroke, intensity, pace);
+    });
+  }, [data, stroke]);
+
+  useEffect(() => {
+    const { devices } = data.current;
+    if (currentPhase == phase) return;
+    switch (phase) {
+      case GamePhase.pause:
+      case GamePhase.break:
+        devices.forEach(device => device.stop());
+        break;
+      case GamePhase.climax:
+        devices.forEach(device => device.climax());
+    }
+    setCurrentPhase(phase);
+  }, [data, currentPhase, phase]);
+
+  return null;
+};

src/game/components/index.ts

@@ -10,5 +10,5 @@ export * from './GameMeter';
 export * from './GamePace';
 export * from './GameSettings';
 export * from './GameSound';
-export * from './GameVibrator';
+export * from './GameToyClient';
 export * from './GameWarmup';

src/index.tsx

@@ -4,19 +4,19 @@ import { App } from './app/App.tsx';
 import './index.css';
 import { SettingsProvider, ImageProvider } from './settings';
 import { E621Provider } from './e621';
-import { VibratorProvider } from './utils';
+import { ToyClientProvider } from './toy';
 import { LocalImageProvider } from './local/LocalProvider.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <SettingsProvider>
       <ImageProvider>
         <LocalImageProvider>
-          <VibratorProvider>
+          <ToyClientProvider>
             <E621Provider>
               <App />
             </E621Provider>
-          </VibratorProvider>
+          </ToyClientProvider>
         </LocalImageProvider>
       </ImageProvider>
     </SettingsProvider>

src/settings/SettingsProvider.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { GameEvent, GameHypnoType, PlayerBody, PlayerGender } from '../types';
-import { createLocalStorageProvider, VibrationMode } from '../utils';
+import { createLocalStorageProvider } from '../utils';
 import { interpolateWith } from '../utils/translate';
 
 export interface Settings {
@@ -18,7 +18,6 @@ export interface Settings {
   body: PlayerBody;
   highRes: boolean;
   videoSound: boolean;
-  vibrations: VibrationMode;
 }
 
 export const defaultSettings: Settings = {
@@ -36,7 +35,6 @@ export const defaultSettings: Settings = {
   body: PlayerBody.penis,
   highRes: false,
   videoSound: false,
-  vibrations: VibrationMode.thump,
 };
 
 const settingsStorageKey = 'settings';

src/settings/components/ToyActuatorSettings.tsx

@@ -0,0 +1,110 @@
+import {
+  ToyActuator,
+  VibrationActuator,
+  ActuatorMode,
+  ActuatorModeLabels,
+} from '../../toy';
+import { PropsWithChildren, useState } from 'react';
+import { SettingsTile } from '../../common';
+import { SettingsDescription } from '../../common/SettingsDescription';
+import { Dropdown } from '../../common/Dropdown';
+import { ActuatorType } from 'buttplug';
+import { Space } from '../../common/Space';
+import { SettingsLabel } from '../../common/SettingsLabel';
+
+export interface ToySettingsProps
+  extends PropsWithChildren<React.HTMLAttributes<HTMLFieldSetElement>> {
+  toyActuator: ToyActuator;
+}
+
+export const ToyActuatorSettings: React.FC<ToySettingsProps> = ({
+  toyActuator,
+}) => {
+  return (
+    <SettingsTile
+      label={`${toyActuator.actuatorType} ${toyActuator.index + 1}`}
+    >
+      {(() => {
+        switch (toyActuator.actuatorType) {
+          case ActuatorType.Vibrate:
+            return <VibratorActuatorSettings toyActuator={toyActuator} />;
+          default:
+            return <UnknownActuatorSettings />;
+        }
+      })()}
+    </SettingsTile>
+  );
+};
+
+export const VibratorActuatorSettings: React.FC<ToySettingsProps> = ({
+  toyActuator,
+}) => {
+  const vibratorActuator = toyActuator as VibrationActuator;
+  const descriptor = `${vibratorActuator.actuatorType}_${vibratorActuator.index}`;
+  const [mode, setMode] = useState(vibratorActuator.mode);
+  const [min, setMin] = useState(vibratorActuator.minIntensity);
+  const [max, setMax] = useState(vibratorActuator.maxIntensity);
+
+  return (
+    <div key={`${descriptor}_settings`}>
+      <SettingsDescription>
+        Select when this component will activate.
+      </SettingsDescription>
+      <Dropdown
+        id={`${descriptor}_mode`}
+        value={mode}
+        onChange={(value: string) => {
+          const newMode = value as ActuatorMode;
+          setMode(newMode);
+          vibratorActuator.setMode(newMode);
+        }}
+        options={Object.values(ActuatorMode).map(value => ({
+          value,
+          label: ActuatorModeLabels[value],
+        }))}
+      />
+      <Space size='medium' />
+      <SettingsDescription>
+        Change the range of intensity for this component.
+      </SettingsDescription>
+      <SettingsLabel>From</SettingsLabel>
+      <Dropdown
+        id={`{${descriptor}_min}`}
+        value={`${min}`}
+        onChange={(value: string) => {
+          const newMin = +value;
+          if (newMin > vibratorActuator.maxIntensity) return;
+          setMin(newMin);
+          vibratorActuator.setMinIntensity(newMin);
+        }}
+        options={vibratorActuator.intensityRange.map(value => ({
+          value: `${value}`,
+          label: `${(value * 100).toFixed(0)}%`,
+        }))}
+      />
+      <SettingsLabel>To</SettingsLabel>
+      <Dropdown
+        id={`{${descriptor}_max}`}
+        value={`${max}`}
+        onChange={(value: string) => {
+          const newMax = +value;
+          if (newMax < vibratorActuator.minIntensity) return;
+          setMax(newMax);
+          vibratorActuator.setMaxIntensity(newMax);
+        }}
+        options={vibratorActuator.intensityRange.map(value => ({
+          value: `${value}`,
+          label: `${(value * 100).toFixed(0)}%`,
+        }))}
+      />
+    </div>
+  );
+};
+
+export const UnknownActuatorSettings = () => {
+  return (
+    <SettingsDescription>
+      This component is not currently supported.
+    </SettingsDescription>
+  );
+};