Merge pull request #608 from ClodLingxi/feat-custom-text-speed-new

feat: slide text speed and autoplay speed

Author: MakinoharaShoko

packages/webgal/src/Core/controller/gamePlay/autoPlay.ts

@@ -58,8 +58,9 @@ export const autoNextSentence = () => {
  * 自动播放的执行函数
  */
 const autoPlay = () => {
-  const delay = webgalStore.getState().userData.optionData.autoSpeed;
-  const autoPlayDelay = 750 - 250 * delay;
+  const data = webgalStore.getState().userData.optionData.autoSpeed;
+  // 范围为 [250, 1750]
+  const autoPlayDelay = 250 + (100 - data) * 15;
   let isBlockingAuto = false;
   WebGAL.gameplay.performController.performList.forEach((e) => {
     if (e.blockingAuto())

packages/webgal/src/Core/gameScripts/say.ts

@@ -3,7 +3,7 @@ import { IPerform } from '@/Core/Modules/perform/performInterface';
 import { playVocal } from './vocal';
 import { webgalStore } from '@/store/store';
 import { setStage } from '@/store/stageReducer';
-import { useTextDelay } from '@/hooks/useTextOptions';
+import { useTextAnimationDuration, useTextDelay } from '@/hooks/useTextOptions';
 import { getRandomPerformName, PerformController } from '@/Core/Modules/perform/performController';
 import { getSentenceArgByKey } from '@/Core/util/getSentenceArg';
 import { textSize, voiceOption } from '@/store/userDataInterface';
@@ -148,7 +148,7 @@ export const say = (sentence: ISentence): IPerform => {
   }
 
   const performInitName: string = getRandomPerformName();
-  let endDelay = 750 - userDataState.optionData.textSpeed * 250;
+  let endDelay = useTextAnimationDuration(userDataState.optionData.textSpeed) / 2;
   // 如果有 notend 参数，那么就不需要等待
   if (isNotend) {
     endDelay = 0;

packages/webgal/src/UI/Menu/Options/Display/Display.tsx

@@ -33,26 +33,6 @@ export function Display() {
           currentChecked={userDataState.optionData.fullScreen}
         />
       </NormalOption>
-      <NormalOption key="textSpeed" title={t('textSpeed.title')}>
-        <NormalButton
-          textList={t('textSpeed.options.slow', 'textSpeed.options.medium', 'textSpeed.options.fast')}
-          functionList={[
-            () => {
-              dispatch(setOptionData({ key: 'textSpeed', value: playSpeed.slow }));
-              setStorage();
-            },
-            () => {
-              dispatch(setOptionData({ key: 'textSpeed', value: playSpeed.normal }));
-              setStorage();
-            },
-            () => {
-              dispatch(setOptionData({ key: 'textSpeed', value: playSpeed.fast }));
-              setStorage();
-            },
-          ]}
-          currentChecked={userDataState.optionData.textSpeed}
-        />
-      </NormalOption>
       <NormalOption key="textSize" title={t('textSize.title')}>
         <NormalButton
           textList={t('textSize.options.small', 'textSize.options.medium', 'textSize.options.large')}
@@ -93,6 +73,17 @@ export function Display() {
           currentChecked={userDataState.optionData.textboxFont}
         />
       </NormalOption>
+      <NormalOption key="textSpeed" title={t('textSpeed.title')}>
+        <OptionSlider
+          initValue={userDataState.optionData.textSpeed}
+          uniqueID={t('textSpeed.title')}
+          onChange={(event) => {
+            const newValue = event.target.value;
+            dispatch(setOptionData({ key: 'textSpeed', value: Number(newValue) }));
+            setStorage();
+          }}
+        />
+      </NormalOption>
       <NormalOption key="textboxOpacity" title={t('textboxOpacity.title')}>
         <OptionSlider
           initValue={userDataState.optionData.textboxOpacity}

packages/webgal/src/UI/Menu/Options/System/System.tsx

@@ -18,6 +18,7 @@ import { WebGAL } from '@/Core/WebGAL';
 import useSoundEffect from '@/hooks/useSoundEffect';
 import savesReducer, { ISavesData, saveActions } from '@/store/savesReducer';
 import { dumpFastSaveToStorage, dumpSavesToStorage } from '@/Core/controller/storage/savesController';
+import { OptionSlider } from '@/UI/Menu/Options/OptionSlider';
 
 interface IExportGameData {
   userData: IUserData;
@@ -104,23 +105,14 @@ export function System() {
       {!showAbout && (
         <>
           <NormalOption key="option1" title={t('autoSpeed.title')}>
-            <NormalButton
-              textList={t('autoSpeed.options.slow', 'autoSpeed.options.medium', 'autoSpeed.options.fast')}
-              functionList={[
-                () => {
-                  dispatch(setOptionData({ key: 'autoSpeed', value: playSpeed.slow }));
-                  setStorage();
-                },
-                () => {
-                  dispatch(setOptionData({ key: 'autoSpeed', value: playSpeed.normal }));
-                  setStorage();
-                },
-                () => {
-                  dispatch(setOptionData({ key: 'autoSpeed', value: playSpeed.fast }));
-                  setStorage();
-                },
-              ]}
-              currentChecked={userDataState.optionData.autoSpeed}
+            <OptionSlider
+              initValue={userDataState.optionData.autoSpeed}
+              uniqueID={t('autoSpeed.title')}
+              onChange={(event) => {
+                const newValue = event.target.value;
+                dispatch(setOptionData({ key: 'autoSpeed', value: Number(newValue) }));
+                setStorage();
+              }}
             />
           </NormalOption>
           <NormalOption key="option7" title={t('language.title')}>

packages/webgal/src/hooks/useTextOptions.ts

@@ -1,23 +1,15 @@
 import { playSpeed } from '@/store/userDataInterface';
 
-export function useTextDelay(type: playSpeed) {
-  switch (type) {
-    case playSpeed.slow:
-      return 80;
-    case playSpeed.normal:
-      return 35;
-    case playSpeed.fast:
-      return 3;
-  }
+// 范围为 [startRange, step * 100 + startRange]
+export function useTextDelay(data: number) {
+  const startRange = 3;
+  const step = 1.5;
+  return startRange + (100 - data) * step;
 }
 
-export function useTextAnimationDuration(type: playSpeed) {
-  switch (type) {
-    case playSpeed.slow:
-      return 800;
-    case playSpeed.normal:
-      return 350;
-    case playSpeed.fast:
-      return 200;
-  }
+// 范围为 [startRange, step * 100 + startRange]
+export function useTextAnimationDuration(data: number) {
+  const startRange = 200;
+  const step = 15;
+  return startRange + (100 - data) * step;
 }

packages/webgal/src/store/userDataInterface.ts

@@ -39,8 +39,8 @@ export enum fullScreenOption {
  */
 export interface IOptionData {
   volumeMain: number; // 主音量
-  textSpeed: playSpeed; // 文字速度
-  autoSpeed: playSpeed; // 自动播放速度
+  textSpeed: number; // 文字速度
+  autoSpeed: number; // 自动播放速度
   textSize: textSize;
   vocalVolume: number; // 语音音量
   bgmVolume: number; // 背景音乐音量

packages/webgal/src/store/userDataReducer.ts

@@ -24,8 +24,8 @@ import { ISetGameVar } from './stageInterface';
 const initialOptionSet: IOptionData = {
   slPage: 1,
   volumeMain: 100, // 主音量
-  textSpeed: playSpeed.normal, // 文字速度
-  autoSpeed: playSpeed.normal, // 自动播放速度
+  textSpeed: 50, // 文字速度
+  autoSpeed: 50, // 自动播放速度
   textSize: textSize.medium,
   vocalVolume: 100, // 语音音量
   bgmVolume: 25, // 背景音乐音量