Merge pull request #820 from xiaoxustudio/feat/getUserInput-rules

feat: add rules argument for getUserInput

Author: MakinoharaShoko

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

@@ -13,6 +13,9 @@ import { getStringArgByKey } from '@/Core/util/getSentenceArg';
 import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
 import { setStageVar } from '@/store/stageReducer';
 import { getCurrentFontFamily } from '@/hooks/useFontFamily';
+import { logger } from '@/Core/util/logger';
+import { tryToRegex } from '@/Core/util/global';
+import { showGlogalDialog } from '@/UI/GlobalDialog/GlobalDialog';
 
 /**
  * 显示选择枝
@@ -26,6 +29,10 @@ export const getUserInput = (sentence: ISentence): IPerform => {
   let buttonText = getStringArgByKey(sentence, 'buttonText') ?? '';
   buttonText = buttonText === '' ? 'OK' : buttonText;
   const defaultValue = getStringArgByKey(sentence, 'defaultValue');
+  const rule = getStringArgByKey(sentence, 'rule');
+  const ruleFlag = getStringArgByKey(sentence, 'ruleFlag');
+  const ruleText = getStringArgByKey(sentence, 'ruleText');
+  const ruleButtonText = getStringArgByKey(sentence, 'ruleButtonText') ?? 'OK';
 
   const font = getCurrentFontFamily();
 
@@ -39,6 +46,20 @@ export const getUserInput = (sentence: ISentence): IPerform => {
           onMouseEnter={playSeEnter}
           onClick={() => {
             const userInput: HTMLInputElement = document.getElementById('user-input') as HTMLInputElement;
+            if (rule) {
+              const reg = tryToRegex(rule, ruleFlag);
+              if (reg && !reg.test(userInput.value)) {
+                if (ruleText)
+                  showGlogalDialog({
+                    title: ruleText.replaceAll(/\$0/g, userInput.value),
+                    leftText: ruleButtonText,
+                  });
+                return;
+              }
+              if (!reg) {
+                logger.warn(`getUserInput: rule ${rule} is not a valid regex`);
+              }
+            }
             if (userInput) {
               webgalStore.dispatch(
                 setStageVar({

packages/webgal/src/Core/util/global.ts

@@ -0,0 +1,7 @@
+export function tryToRegex(str: string, flag: string | null): RegExp | false {
+  try {
+    return new RegExp(str, flag || '');
+  } catch (e) {
+    return false;
+  }
+}

packages/webgal/src/UI/GlobalDialog/GlobalDialog.tsx

@@ -13,22 +13,22 @@ export default function GlobalDialog() {
 interface IShowGlobalDialogProps {
   title: string;
   leftText: string;
-  rightText: string;
-  leftFunc: Function;
-  rightFunc: Function;
+  rightText?: string;
+  leftFunc?: Function;
+  rightFunc?: Function;
 }
 
 export function showGlogalDialog(props: IShowGlobalDialogProps) {
   const { playSeClick, playSeEnter } = useSEByWebgalStore();
   webgalStore.dispatch(setVisibility({ component: 'showGlobalDialog', visibility: true }));
   const handleLeft = () => {
     playSeClick();
-    props.leftFunc();
+    props.leftFunc?.();
     hideGlobalDialog();
   };
   const handleRight = () => {
     playSeClick();
-    props.rightFunc();
+    props.rightFunc?.();
     hideGlobalDialog();
   };
   const renderElement = (
@@ -37,12 +37,16 @@ export function showGlogalDialog(props: IShowGlobalDialogProps) {
         <div className={styles.glabalDialog_container_inner}>
           <div className={styles.title}>{props.title}</div>
           <div className={styles.button_list}>
-            <div className={styles.button} onClick={handleLeft} onMouseEnter={playSeEnter}>
-              {props.leftText}
-            </div>
-            <div className={styles.button} onClick={handleRight} onMouseEnter={playSeEnter}>
-              {props.rightText}
-            </div>
+            {props.leftText && (
+              <div className={styles.button} onClick={handleLeft} onMouseEnter={playSeEnter}>
+                {props.leftText}
+              </div>
+            )}
+            {props.rightText && (
+              <div className={styles.button} onClick={handleRight} onMouseEnter={playSeEnter}>
+                {props.rightText}
+              </div>
+            )}
           </div>
         </div>
       </div>