feat: global setVar

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

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

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

@@ -7,13 +7,14 @@ 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: boolean = false;
+  let setGlobal = false;
   sentence.args.forEach((e) => {
     if (e.key === 'global') {
       setGlobal = true;
@@ -60,6 +61,7 @@ export const setVar = (sentence: ISentence): IPerform => {
     }
     if (setGlobal) {
       logger.debug('设置全局变量：', { key, value: webgalStore.getState().userData.globalGameVar[key] });
+      syncStorageFast();
     } else {
       logger.debug('设置变量：', { key, value: webgalStore.getState().stage.GameVar[key] });
     }
@@ -75,7 +77,6 @@ export const setVar = (sentence: ISentence): IPerform => {
   };
 };
 
-
 export function getValueFromState(key: string) {
   let ret: number | string | boolean = 0;
   if (webgalStore.getState().stage.GameVar.hasOwnProperty(key)) {

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

@@ -18,9 +18,9 @@ export const showVars = (sentence: ISentence): IPerform => {
   const dispatch = webgalStore.dispatch;
   // 设置文本显示
   const allVar = {
-    'stageGameVar': stageState.GameVar,
-    'globalGameVar': userDataState.globalGameVar
-  }
+    stageGameVar: stageState.GameVar,
+    globalGameVar: userDataState.globalGameVar,
+  };
   dispatch(setStage({ key: 'showText', value: JSON.stringify(allVar) }));
   dispatch(setStage({ key: 'showName', value: '展示变量' }));
   logger.debug('展示变量：', allVar);

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);
-    }
+    },
   };
 }