Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions packages/webgal/src/Core/gameScripts/getUserInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ 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';

/**
* 显示选择枝
Expand All @@ -26,6 +28,9 @@ 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 font = getCurrentFontFamily();

Expand All @@ -39,6 +44,16 @@ 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) alert(ruleText.replaceAll(/\$0/g, userInput.value));

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

使用 alert() 会阻塞浏览器主线程,并且其样式是浏览器默认的,无法与游戏的 UI 风格统一,可能会给用户带来突兀的体验。建议考虑使用游戏内的 UI 组件来展示错误信息,例如在输入框下方显示一段红色的提示文字。这可能需要将此组件转换为一个有状态的组件来管理错误信息,但能显著提升用户体验。

return;
}
if (!reg) {
logger.warn(`getUserInput: rule ${rule} is not a valid regex`);
}
}
if (userInput) {
webgalStore.dispatch(
setStageVar({
Expand Down
7 changes: 7 additions & 0 deletions packages/webgal/src/Core/util/global.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export function tryToRegex(str: string, flag: string | null): RegExp | false {
try {
return new RegExp(str, flag || '');
} catch (e) {
return false;
}
}