Merge pull request OpenWebGAL#442 from hundun000/dev-hundun/globalSetVar

feat: global setVar

Author: MakinoharaShoko

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

@@ -135,7 +135,11 @@ export const scriptExecutor = () => {
   setTimeout(() => {
     // 同步当前舞台数据
     currentStageState = webgalStore.getState().stage;
-    logger.debug('本条语句执行结果', currentStageState);
+    const allState = {
+      currentStageState: currentStageState,
+      globalGameVar: webgalStore.getState().userData.globalGameVar,
+    };
+    logger.debug('本条语句执行结果', allState);
     // 保存 backlog
     if (isSaveBacklog) {
       // WebGAL.backlogManager.isSaveBacklogNext = true;

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

@@ -4,18 +4,34 @@ import { webgalStore } from '@/store/store';
 import { setStageVar } from '@/store/stageReducer';
 import { logger } from '@/Core/util/logger';
 import { compile } from 'angular-expressions';
+import { setGlobalVar } from '@/store/userDataReducer';
+import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
+import { ISetGameVar } from '@/store/stageInterface';
+import { syncStorageFast } from '@/Core/controller/storage/storageController';
 
 /**
  * 设置变量
  * @param sentence
  */
 export const setVar = (sentence: ISentence): IPerform => {
+  let setGlobal = false;
+  sentence.args.forEach((e) => {
+    if (e.key === 'global') {
+      setGlobal = true;
+    }
+  });
+  let targetReducerFunction: ActionCreatorWithPayload<ISetGameVar, string>;
+  if (setGlobal) {
+    targetReducerFunction = setGlobalVar;
+  } else {
+    targetReducerFunction = setStageVar;
+  }
   // 先把表达式拆分为变量名和赋值语句
   if (sentence.content.match(/=/)) {
     const key = sentence.content.split(/=/)[0];
     const valExp = sentence.content.split(/=/)[1];
     if (valExp === 'random()') {
-      webgalStore.dispatch(setStageVar({ key, value: Math.random() }));
+      webgalStore.dispatch(targetReducerFunction({ key, value: Math.random() }));
     } else if (valExp.match(/[+\-*\/()]/)) {
       // 如果包含加减乘除号，则运算
       // 先取出运算表达式中的变量
@@ -30,20 +46,25 @@ export const setVar = (sentence: ISentence): IPerform => {
         .reduce((pre, curr) => pre + curr, '');
       const exp = compile(valExp2);
       const result = exp();
-      webgalStore.dispatch(setStageVar({ key, value: result }));
+      webgalStore.dispatch(targetReducerFunction({ key, value: result }));
     } else if (valExp.match(/true|false/)) {
       if (valExp.match(/true/)) {
-        webgalStore.dispatch(setStageVar({ key, value: true }));
+        webgalStore.dispatch(targetReducerFunction({ key, value: true }));
       }
       if (valExp.match(/false/)) {
-        webgalStore.dispatch(setStageVar({ key, value: false }));
+        webgalStore.dispatch(targetReducerFunction({ key, value: false }));
       }
     } else {
       if (!isNaN(Number(valExp))) {
-        webgalStore.dispatch(setStageVar({ key, value: Number(valExp) }));
-      } else webgalStore.dispatch(setStageVar({ key, value: valExp }));
+        webgalStore.dispatch(targetReducerFunction({ key, value: Number(valExp) }));
+      } else webgalStore.dispatch(targetReducerFunction({ key, value: valExp }));
+    }
+    if (setGlobal) {
+      logger.debug('设置全局变量：', { key, value: webgalStore.getState().userData.globalGameVar[key] });
+      syncStorageFast();
+    } else {
+      logger.debug('设置变量：', { key, value: webgalStore.getState().stage.GameVar[key] });
     }
-    logger.debug('设置变量：', { key, value: webgalStore.getState().stage.GameVar[key] });
   }
   return {
     performName: 'none',
@@ -60,6 +81,8 @@ export function getValueFromState(key: string) {
   let ret: number | string | boolean = 0;
   if (webgalStore.getState().stage.GameVar.hasOwnProperty(key)) {
     ret = webgalStore.getState().stage.GameVar[key];
+  } else if (webgalStore.getState().userData.globalGameVar.hasOwnProperty(key)) {
+    ret = webgalStore.getState().userData.globalGameVar[key];
   }
   return ret;
 }

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

@@ -17,18 +17,21 @@ export const showVars = (sentence: ISentence): IPerform => {
   const userDataState = webgalStore.getState().userData;
   const dispatch = webgalStore.dispatch;
   // 设置文本显示
-  dispatch(setStage({ key: 'showText', value: JSON.stringify(stageState.GameVar) }));
+  const allVar = {
+    stageGameVar: stageState.GameVar,
+    globalGameVar: userDataState.globalGameVar,
+  };
+  dispatch(setStage({ key: 'showText', value: JSON.stringify(allVar) }));
   dispatch(setStage({ key: 'showName', value: '展示变量' }));
-  logger.debug('展示变量：', stageState.GameVar);
+  logger.debug('展示变量：', allVar);
   setTimeout(() => {
     WebGAL.eventBus.emit('text-settle');
   }, 0);
   const performInitName: string = getRandomPerformName();
-  const textDelay = PERFORM_CONFIG.textInitialDelay - 20 * userDataState.optionData.textSpeed;
   const endDelay = 750 - userDataState.optionData.textSpeed * 250;
   return {
     performName: performInitName,
-    duration: sentence.content.length * textDelay + endDelay,
+    duration: endDelay,
     isHoldOn: false,
     stopFunction: () => {
       WebGAL.eventBus.emit('text-settle');

packages/webgal/src/Core/util/pixiPerformManager/initRegister.ts

@@ -1,3 +1,3 @@
 import '../../gameScripts/pixi/performs/cherryBlossoms';
 import '../../gameScripts/pixi/performs/rain';
-import '../../gameScripts/pixi/performs/snow';
+import '../../gameScripts/pixi/performs/snow';

packages/webgal/src/Stage/Stage.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import styles from './stage.module.scss';
 import { TextBox } from './TextBox/TextBox';
 import { AudioContainer } from './AudioContainer/AudioContainer';
@@ -17,15 +17,17 @@ import { WebGAL } from '@/Core/WebGAL';
 // import OldStage from '@/Components/Stage/OldStage/OldStage';
 
 function inTextBox(event: React.MouseEvent) {
-  const tb = document.getElementById("textBoxMain")
+  const tb = document.getElementById('textBoxMain');
   if (!tb) {
-    return false
+    return false;
   }
-  var bounds = tb.getBoundingClientRect();
-  return event.clientX > bounds.left &&
+  let bounds = tb.getBoundingClientRect();
+  return (
+    event.clientX > bounds.left &&
     event.clientX < bounds.right &&
     event.clientY > bounds.top &&
     event.clientY < bounds.bottom
+  );
 }
 
 export const Stage: FC = () => {
@@ -37,12 +39,12 @@ export const Stage: FC = () => {
 
   const checkPosition = (event: React.MouseEvent) => {
     if (!GUIState.controlsVisibility && inTextBox(event)) {
-      dispatch(setVisibility({ component: 'controlsVisibility', visibility: true }))
+      dispatch(setVisibility({ component: 'controlsVisibility', visibility: true }));
     }
     if (GUIState.controlsVisibility && !inTextBox(event)) {
-      dispatch(setVisibility({ component: 'controlsVisibility', visibility: false }))
+      dispatch(setVisibility({ component: 'controlsVisibility', visibility: false }));
     }
-  }
+  };
 
   return (
     <div className={styles.MainStage_main}>
@@ -70,9 +72,7 @@ export const Stage: FC = () => {
         }}
         id="FullScreenClick"
         style={{ width: '100%', height: '100%', position: 'absolute', zIndex: '12', top: '0' }}
-        onMouseMove={
-          (e) => !GUIState.showControls && checkPosition(e)
-        }
+        onMouseMove={(e) => !GUIState.showControls && checkPosition(e)}
       />
       <IntroContainer />
     </div>

packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx

@@ -12,7 +12,7 @@ import {
   DoubleDown,
   DoubleUp,
   Lock,
-  Unlock
+  Unlock,
 } from '@icon-park/react';
 import styles from './bottomControlPanel.module.scss';
 import { switchAuto } from '@/Core/controller/gamePlay/autoPlay';
@@ -77,10 +77,7 @@ export const BottomControlPanel = () => {
     // <div className={styles.ToCenter}>
     <>
       {GUIStore.showTextBox && stageState.enableFilm === '' && (
-        <div
-          className={styles.main}
-          style={{visibility: GUIStore.controlsVisibility ? "visible" : "hidden"}}
-        >
+        <div className={styles.main} style={{ visibility: GUIStore.controlsVisibility ? 'visible' : 'hidden' }}>
           {GUIStore.showTextBox && (
             <span
               className={styles.singleButton}
@@ -307,11 +304,11 @@ export const BottomControlPanel = () => {
             }}
             onMouseEnter={playSeEnter}
           >
-            {
-              GUIStore.showControls ?
-                (<Lock className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />) :
-                (<Unlock className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />)
-            }
+            {GUIStore.showControls ? (
+              <Lock className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />
+            ) : (
+              <Unlock className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />
+            )}
           </span>
         </div>
       )}

packages/webgal/src/hooks/useValue.ts

@@ -1,4 +1,4 @@
-import {useState} from "react";
+import { useState } from 'react';
 
 export function useValue<T>(initialState: T) {
   const [value, setValue] = useState<T>(initialState);
@@ -13,6 +13,6 @@ export function useValue<T>(initialState: T) {
     },
     set value(newValue) {
       this.set(newValue);
-    }
+    },
   };
 }

packages/webgal/src/store/userDataInterface.ts

@@ -1,4 +1,4 @@
-import { IStageState } from './stageInterface';
+import { IGameVar, IStageState } from './stageInterface';
 import { language } from '@/config/language';
 import { IBacklogItem } from '@/Core/Modules/backlog';
 import { ISceneEntry } from '@/Core/Modules/scene';
@@ -88,6 +88,7 @@ export interface IAppreciation {
 export interface IUserData {
   saveData: Array<ISaveData>; // 用户存档数据
   quickSaveData: ISaveData | null;
+  globalGameVar: IGameVar; // 不跟随存档的全局变量
   optionData: IOptionData; // 用户设置选项数据
   appreciationData: IAppreciation;
 }

packages/webgal/src/store/userDataReducer.ts

@@ -18,6 +18,7 @@ import {
 } from '@/store/userDataInterface';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import cloneDeep from 'lodash/cloneDeep';
+import { ISetGameVar } from './stageInterface';
 
 const initialOptionSet: IOptionData = {
   slPage: 1,
@@ -39,6 +40,7 @@ const initialOptionSet: IOptionData = {
 export const initState: IUserData = {
   saveData: [],
   optionData: initialOptionSet,
+  globalGameVar: {},
   appreciationData: {
     bgm: [],
     cg: [],
@@ -106,6 +108,14 @@ const userDataSlice = createSlice({
       const { key, value } = action.payload;
       (state.optionData as any)[key] = value;
     },
+    /**
+     * 修改不跟随存档的全局变量
+     * @param state 当前状态
+     * @param action 要改变或添加的变量
+     */
+    setGlobalVar: (state, action: PayloadAction<ISetGameVar>) => {
+      state.globalGameVar[action.payload.key] = action.payload.value;
+    },
     /**
      * 设置存档/读档页面
      * @param state
@@ -133,6 +143,7 @@ export const {
   setUserData,
   resetUserData,
   setOptionData,
+  setGlobalVar,
   setSlPage,
   unlockCgInUserData,
   unlockBgmInUserData,