fix: English text split and layout problem #587

Author: MakinoharaShoko

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;

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 参数

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(/(?<!\\)\|/).map((val: string) => 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) {

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 (
           <div key={`backlog-line-${index}`}>
             {line.map((e, index) => {