From 5b0af32334eb213db6fb47c196abc30ed12302c3 Mon Sep 17 00:00:00 2001 From: Mahiru Date: Thu, 14 Nov 2024 22:19:27 +0800 Subject: [PATCH] fix: English text split and layout problem #587 --- packages/webgal/public/game/scene/demo_en.txt | 2 +- packages/webgal/src/Core/gameScripts/say.ts | 2 +- packages/webgal/src/Stage/TextBox/TextBox.tsx | 19 ++++++++++++++----- packages/webgal/src/UI/Backlog/Backlog.tsx | 10 +++++----- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/webgal/public/game/scene/demo_en.txt b/packages/webgal/public/game/scene/demo_en.txt index 55c8918a8..103e0d2b2 100644 --- a/packages/webgal/public/game/scene/demo_en.txt +++ b/packages/webgal/public/game/scene/demo_en.txt @@ -11,7 +11,7 @@ Welcome to WebGAL! -e002_Welcome_to_WebGAL.mp3; WebGAL is a completely new web visual engine never seen before. -e003_WebGAL_is_a_completely_new_web.mp3; changeFigure:stand2.png -right -next; It is an engine developed using web technology, so it performs well on web pages. -e004_It_is_an_engine_developedusing_web.mp3; -Thanks to this feature, once published on your website's platform,|players can simply click a link to play your game on your website anytime, anywhere! -e005_Thanks_to_this_ feature_once.mp3; +Thanks to this feature, once published on your website's platform, players can simply click a link to play your game on your website anytime, anywhere! -e005_Thanks_to_this_ feature_once.mp3; setAnimation:move-front-and-back -target=fig-left -next; Very attractive, don't you think? -e006_Very attractive.mp3; changeFigure:none -right -next; diff --git a/packages/webgal/src/Core/gameScripts/say.ts b/packages/webgal/src/Core/gameScripts/say.ts index 95fb97cfa..27c016ff5 100644 --- a/packages/webgal/src/Core/gameScripts/say.ts +++ b/packages/webgal/src/Core/gameScripts/say.ts @@ -24,7 +24,7 @@ export const say = (sentence: ISentence): IPerform => { let dialogKey = Math.random().toString(); // 生成一个随机的key let dialogToShow = sentence.content; // 获取对话内容 if (dialogToShow) { - dialogToShow = String(dialogToShow).replace(/ /g, '\u00a0'); // 替换空格 + dialogToShow = String(dialogToShow).replace(/ {2,}/g, (match) => '\u00a0'.repeat(match.length)); // 替换连续两个或更多空格 } const isConcat = getSentenceArgByKey(sentence, 'concat'); // 是否是继承语句 const isNotend = getSentenceArgByKey(sentence, 'notend') as boolean; // 是否有 notend 参数 diff --git a/packages/webgal/src/Stage/TextBox/TextBox.tsx b/packages/webgal/src/Stage/TextBox/TextBox.tsx index 9e33b072d..9e28cac09 100644 --- a/packages/webgal/src/Stage/TextBox/TextBox.tsx +++ b/packages/webgal/src/Stage/TextBox/TextBox.tsx @@ -101,7 +101,13 @@ function isCJK(character: string) { return !!character.match(/[\u4e00-\u9fa5]|[\u0800-\u4e00]|[\uac00-\ud7ff]/); } -export function compileSentence(sentence: string, lineLimit: number, ignoreLineLimit?: boolean): EnhancedNode[][] { +// eslint-disable-next-line max-params +export function compileSentence( + sentence: string, + lineLimit: number, + ignoreLineLimit?: boolean, + replace_space_with_nbsp = true, +): EnhancedNode[][] { // 先拆行 const lines = sentence.split(/(? useEscape(val)); // 对每一行进行注音处理 @@ -111,7 +117,7 @@ export function compileSentence(sentence: string, lineLimit: number, ignoreLineL line.forEach((node, index) => { match(node.type) .with(SegmentType.String, () => { - const chars = splitChars(node.value as string); + const chars = splitChars(node.value as string, replace_space_with_nbsp); // eslint-disable-next-line max-nested-callbacks ln.push(...chars.map((c) => ({ reactNode: c }))); }) @@ -135,8 +141,9 @@ export function compileSentence(sentence: string, lineLimit: number, ignoreLineL /** * @param sentence + * @param replace_space_with_nbsp */ -export function splitChars(sentence: string) { +export function splitChars(sentence: string, replace_space_with_nbsp = true) { if (!sentence) return ['']; const words: string[] = []; let word = ''; @@ -157,13 +164,15 @@ export function splitChars(sentence: string) { // cjkFlag = false; // continue; // } - if (character === ' ') { + if (character === ' ' || character === '\u00a0') { // Space if (word) { words.push(word); word = ''; } - words.push('\u00a0'); + if (replace_space_with_nbsp) { + words.push('\u00a0'); + } else words.push(character); cjkFlag = false; } else if (isCJK(character) && !isPunctuation(character)) { if (!cjkFlag && word) { diff --git a/packages/webgal/src/UI/Backlog/Backlog.tsx b/packages/webgal/src/UI/Backlog/Backlog.tsx index c79093eaa..86d00e657 100644 --- a/packages/webgal/src/UI/Backlog/Backlog.tsx +++ b/packages/webgal/src/UI/Backlog/Backlog.tsx @@ -7,7 +7,7 @@ import { setVisibility } from '@/store/GUIReducer'; import { logger } from '@/Core/util/logger'; import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'; import useTrans from '@/hooks/useTrans'; -import { compileSentence, EnhancedNode, splitChars } from '@/Stage/TextBox/TextBox'; +import { compileSentence, EnhancedNode } from '@/Stage/TextBox/TextBox'; import useSoundEffect from '@/hooks/useSoundEffect'; import { WebGAL } from '@/Core/WebGAL'; @@ -27,7 +27,7 @@ export const Backlog = () => { // logger.info('backlogList render'); for (let i = 0; i < WebGAL.backlogManager.getBacklog().length; i++) { const backlogItem = WebGAL.backlogManager.getBacklog()[i]; - const showTextArray = compileSentence(backlogItem.currentStageState.showText, 3, true); + const showTextArray = compileSentence(backlogItem.currentStageState.showText, 3, true, false); const showTextArray2 = showTextArray.map((line) => { return line.map((c) => { return c.reactNode; @@ -48,13 +48,13 @@ export const Backlog = () => { ); }); const showNameArray = compileSentence(backlogItem.currentStageState.showName, 3, true); - const showNameArray2 = showNameArray.map((line)=>{ + const showNameArray2 = showNameArray.map((line) => { return line.map((c) => { - return c.reactNode; + return c.reactNode; }); }); const showNameArrayReduced = mergeStringsAndKeepObjects(showNameArray2); - const nameElementList = showNameArrayReduced.map((line,index)=>{ + const nameElementList = showNameArrayReduced.map((line, index) => { return (
{line.map((e, index) => {