feat: choose option supports conditions

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

@@ -13,6 +13,25 @@ import { IBacklogItem } from '@/Core/Modules/backlog';
 import { SYSTEM_CONFIG } from '@/config';
 import { WebGAL } from '@/Core/WebGAL';
 
+export const whenChecker = (whenValue: string | undefined): boolean => {
+  if (whenValue === undefined) {
+    return true;
+  }
+  // 先把变量解析出来
+  const valExpArr = whenValue.split(/([+\-*\/()><!]|>=|<=|==)/g);
+  const valExp = valExpArr
+    .map((e) => {
+      if (e.match(/[a-zA-Z]/)) {
+        if (e.match(/true/) || e.match(/false/)) {
+          return e;
+        }
+        return getValueFromState(e).toString();
+      } else return e;
+    })
+    .reduce((pre, curr) => pre + curr, '');
+  return !!strIf(valExp);
+};
+
 /**
  * 语句执行器
  * 执行语句，同步场景状态，并根据情况立即执行下一句或者加入backlog
@@ -64,7 +83,7 @@ export const scriptExecutor = () => {
   variableInterpolation();
 
   // 判断这个脚本要不要执行
-  let runThis: number | boolean = true;
+  let runThis = true;
   let isHasWhenArg = false;
   let whenValue = '';
   currentScript.args.forEach((e) => {
@@ -75,19 +94,7 @@ export const scriptExecutor = () => {
   });
   // 如果语句有 when
   if (isHasWhenArg) {
-    // 先把变量解析出来
-    const valExpArr = whenValue.split(/([+\-*\/()><!]|>=|<=|==)/g);
-    const valExp = valExpArr
-      .map((e) => {
-        if (e.match(/[a-zA-Z]/)) {
-          if (e.match(/true/) || e.match(/false/)) {
-            return e;
-          }
-          return getValueFromState(e).toString();
-        } else return e;
-      })
-      .reduce((pre, curr) => pre + curr, '');
-    runThis = strIf(valExp);
+    runThis = whenChecker(whenValue);
   }
 
   // 执行语句

packages/webgal/src/Core/gameScripts/choose/choose.module.scss

@@ -26,6 +26,22 @@
   transition: background-color 0.5s, border 0.5s, font-weight 0.5s, box-shadow 0.5s;
 }
 
+.Choose_item_disabled {
+  font-family: "WebgalUI", serif;
+  cursor: not-allowed;
+  min-width: 50%;
+  padding: 0.25em 1em 0.25em 1em;
+  font-size: 265%;
+  color: rgba(142, 53, 74, 0.5);
+  text-align: center;
+  border-radius: 4px;
+  border: 3px solid rgba(0, 0, 0, 0);
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
+  background: rgba(255, 255, 255, 0.5);
+  margin: 0.25em 0 0.25em 0;
+  transition: background-color 0.5s, border 0.5s, font-weight 0.5s, box-shadow 0.5s;
+}
+
 .Choose_item:hover {
   //font-weight: bold;
   background: rgba(255, 255, 255, 0.9);

packages/webgal/src/Core/gameScripts/choose/index.tsx

@@ -10,47 +10,97 @@ import { textFont } from '@/store/userDataInterface';
 import { PerformController } from '@/Core/Modules/perform/performController';
 import { useSEByWebgalStore } from '@/hooks/useSoundEffect';
 import { WebGAL } from '@/Core/WebGAL';
+import { whenChecker } from '@/Core/controller/gamePlay/scriptExecutor';
+
+class ChooseOption {
+  /**
+   * 格式：
+   * (showConditionVar>1)[enableConditionVar>2]->text:jump
+   */
+  public static parse(script: string): ChooseOption {
+    const parts = script.split('->');
+    const conditonPart = parts.length > 1 ? parts[0] : null;
+    const mainPart = parts.length > 1 ? parts[1] : parts[0];
+    const mainPartNodes = mainPart.split(':');
+
+    const option = new ChooseOption(mainPartNodes[0], mainPartNodes[1]);
+    if (conditonPart !== null) {
+      const showConditionPart = conditonPart.match(/\((.*)\)/);
+      if (showConditionPart) {
+        option.showCondition = showConditionPart[1];
+      }
+      const enableConditionPart = conditonPart.match(/\[(.*)\]/);
+      if (enableConditionPart) {
+        option.enableCondition = enableConditionPart[1];
+      }
+    }
+    return option;
+  }
+  public text: string;
+  public jump: string;
+  public jumpToScene: boolean;
+  public showCondition?: string;
+  public enableCondition?: string;
+
+  public constructor(text: string, jump: string) {
+    this.text = text;
+    this.jump = jump;
+    this.jumpToScene = jump.match(/\./) !== null;
+  }
+}
 
 /**
  * 显示选择枝
  * @param sentence
  */
 export const choose = (sentence: ISentence): IPerform => {
-  let chooseList = sentence.content.split('|');
-  const chooseListFull = chooseList.map((e) => e.split(':'));
+  const chooseOptionScripts = sentence.content.split('|');
+  const chooseOptions = chooseOptionScripts.map((e) => ChooseOption.parse(e));
   const fontFamily = webgalStore.getState().userData.optionData.textboxFont;
   const font = fontFamily === textFont.song ? '"思源宋体", serif' : '"WebgalUI", serif';
   const { playSeEnterChoose, playSeClickChoose } = useSEByWebgalStore();
-  const chooseElements = chooseListFull.map((e, i) => {
-    return (
-      <div
-        className={styles.Choose_item}
-        style={{ fontFamily: font }}
-        key={e[0] + i}
-        onClick={() => {
-          playSeClickChoose();
-          if (e[1].match(/\./)) {
-            changeScene(e[1], e[0]);
-          } else {
-            jmp(e[1]);
-          }
-          WebGAL.gameplay.performController.unmountPerform('choose');
-        }}
-        onMouseEnter={playSeEnterChoose}
-      >
-        {e[0]}
-      </div>
-    );
-  });
+  // 运行时计算JSX.Element[]
+  const runtimeBuildList = (chooseListFull: ChooseOption[]) => {
+    return chooseListFull
+      .filter((e, i) => whenChecker(e.showCondition))
+      .map((e, i) => {
+        const enable = whenChecker(e.enableCondition);
+        const className = enable ? styles.Choose_item : styles.Choose_item_disabled;
+        const onClick = enable
+          ? () => {
+              playSeClickChoose();
+              if (e.jumpToScene) {
+                changeScene(e.jump, e.text);
+              } else {
+                jmp(e.jump);
+              }
+              WebGAL.gameplay.performController.unmountPerform('choose');
+            }
+          : () => {};
+        return (
+          <div
+            className={className}
+            style={{ fontFamily: font }}
+            key={e.jump + i}
+            onClick={onClick}
+            onMouseEnter={playSeEnterChoose}
+          >
+            {e.text}
+          </div>
+        );
+      });
+  };
+  // eslint-disable-next-line react/no-deprecated
   ReactDOM.render(
-    <div className={styles.Choose_Main}>{chooseElements}</div>,
+    <div className={styles.Choose_Main}>{runtimeBuildList(chooseOptions)}</div>,
     document.getElementById('chooseContainer'),
   );
   return {
     performName: 'choose',
     duration: 1000 * 60 * 60 * 24,
     isHoldOn: false,
     stopFunction: () => {
+      // eslint-disable-next-line react/no-deprecated
       ReactDOM.render(<div />, document.getElementById('chooseContainer'));
     },
     blockingNext: () => true,