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/GameSettings.tsx

@@ -9,7 +9,7 @@ import {
   ImageSettings,
   PaceSettings,
   PlayerSettings,
-  VibratorSettings,
+  ToyListSettings,
 } from '../../settings';
 import { GamePhase, useGameValue, useSendMessage } from '../GameProvider';
 import { useFullscreen, useLooping } from '../../utils';
@@ -63,7 +63,7 @@ const GameSettingsDialogContent = memo(() => (
     <HypnoSettings />
     <ClimaxSettings />
     <BoardSettings />
-    <VibratorSettings />
+    <ToyListSettings />
     <ImageSettings />
   </StyledGameSettingsDialog>
 ));

src/game/components/GameToyClient.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { GamePhase, useGameValue } from '../GameProvider';
+import { useAutoRef } from '../../utils';
+import { useToyClientValue } from '../../toy';
+import { useSetting } from '../../settings';
+
+export const GameToyClient = () => {
+  const [stroke] = useGameValue('stroke');
+  const [intensity] = useGameValue('intensity');
+  const [pace] = useGameValue('pace');
+  const [maxPace] = useSetting('maxPace');
+  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, maxPace);
+    });
+  }, [data, stroke, maxPace]);
+
+  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

@@ -7,7 +7,7 @@ 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';
 import { registerServiceWorker } from './utils/serviceWorker.ts';
 
@@ -18,11 +18,11 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <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;
   imageDuration: number;
   intenseImages: boolean;
 }
@@ -38,7 +37,6 @@ export const defaultSettings: Settings = {
   body: PlayerBody.penis,
   highRes: false,
   videoSound: false,
-  vibrations: VibrationMode.thump,
   imageDuration: 20,
   intenseImages: true,
 };

src/settings/SettingsSection.tsx

@@ -9,7 +9,7 @@ import {
   ServiceSettings,
   ImageSettings,
   BoardSettings,
-  VibratorSettings,
+  ToyListSettings,
   TradeSettings,
 } from './components';
 import { ContentSection } from '../common';
@@ -36,7 +36,7 @@ export const SettingsSection = () => {
       <BoardSettings />
       <ServiceSettings />
       <ImageSettings />
-      <VibratorSettings />
+      <ToyListSettings />
       <TradeSettings />
     </StyledSettingsSection>
   );