Merge pull request #874 from xiaoxustudio/fix/fast-button-state

fix: fast button state error

Author: MakinoharaShoko

packages/webgal/src/Core/Modules/gamePlay.ts

@@ -1,17 +1,36 @@
 import PixiStage from '@/Core/controller/stage/pixi/PixiController';
 import { PerformController } from '@/Core/Modules/perform/performController';
+import { setFastButton } from '../controller/gamePlay/fastSkip';
+import { setAutoButton } from '../controller/gamePlay/autoPlay';
 
 /**
  * 游戏运行时变量
  */
 export class Gameplay {
-  public isAuto = false;
-  public isFast = false;
   public autoInterval: ReturnType<typeof setInterval> | null = null;
   public fastInterval: ReturnType<typeof setInterval> | null = null;
   public autoTimeout: ReturnType<typeof setTimeout> | null = null;
   public pixiStage: PixiStage | null = null;
   public performController = new PerformController();
+
+  /* 有图标状态需求 */
+  private _isAuto = false;
+  public get isAuto() {
+    return this._isAuto;
+  }
+  public set isAuto(value: boolean) {
+    this._isAuto = value;
+    setAutoButton(value);
+  }
+  private _isFast = false;
+  public get isFast() {
+    return this._isFast;
+  }
+  public set isFast(value: boolean) {
+    this._isFast = value;
+    setFastButton(value);
+  }
+
   public resetGamePlay() {
     this.isAuto = false;
     this.isFast = false;

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

@@ -9,7 +9,7 @@ import { WebGAL } from '@/Core/WebGAL';
  * 设置 autoplay 按钮的激活与否
  * @param on
  */
-const setButton = (on: boolean) => {
+export const setAutoButton = (on: boolean) => {
   const autoIcon = document.getElementById('Button_ControlPanel_auto');
   if (autoIcon) {
     if (on) {
@@ -23,7 +23,6 @@ const setButton = (on: boolean) => {
  */
 export const stopAuto = () => {
   WebGAL.gameplay.isAuto = false;
-  setButton(false);
   if (WebGAL.gameplay.autoInterval !== null) {
     clearInterval(WebGAL.gameplay.autoInterval);
     WebGAL.gameplay.autoInterval = null;
@@ -44,7 +43,6 @@ export const switchAuto = () => {
   } else {
     // 当前不在自动播放
     WebGAL.gameplay.isAuto = true;
-    setButton(true);
     WebGAL.gameplay.autoInterval = setInterval(autoPlay, 100);
   }
 };

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

@@ -10,7 +10,7 @@ import { SYSTEM_CONFIG } from '@/config';
  * 设置 fast 按钮的激活与否
  * @param on
  */
-const setButton = (on: boolean) => {
+export const setFastButton = (on: boolean) => {
   const autoIcon = document.getElementById('Button_ControlPanel_fast');
   if (autoIcon) {
     if (on) {
@@ -19,8 +19,6 @@ const setButton = (on: boolean) => {
   }
 };
 
-export { setButton as setFastButton };
-
 /**
  * 停止快进模式
  */
@@ -29,7 +27,6 @@ export const stopFast = () => {
     return;
   }
   WebGAL.gameplay.isFast = false;
-  setButton(false);
   if (WebGAL.gameplay.fastInterval !== null) {
     clearInterval(WebGAL.gameplay.fastInterval);
     WebGAL.gameplay.fastInterval = null;
@@ -44,7 +41,6 @@ export const startFast = () => {
     return;
   }
   WebGAL.gameplay.isFast = true;
-  setButton(true);
   WebGAL.gameplay.fastInterval = setInterval(() => {
     nextSentence();
   }, SYSTEM_CONFIG.fast_timeout);

packages/webgal/src/hooks/useHotkey.tsx

@@ -143,14 +143,13 @@ export function useMouseWheel() {
       if (WebGAL.gameplay.isFast) stopFast();
       WebGAL.gameplay.isFast = true;
       // 滚轮视作快进
-      setFastButton(true);
       setTimeout(() => {
         WebGAL.gameplay.isFast = false;
-        setFastButton(false);
       }, 150);
       next();
     }
   }, []);
+
   useMounted(() => {
     document.addEventListener('wheel', handleMouseWheel);
   });