feat:使得文本拓展语法对角色名称生效

packages/webgal/src/Stage/TextBox/IMSSTextbox.tsx

@@ -16,6 +16,7 @@ export default function IMSSTextbox(props: ITextboxProps) {
     isFirefox: boolean,
     fontSize,
     miniAvatar,
+    isHasName,
     showName,
     font,
     textDuration,
@@ -39,8 +40,68 @@ export default function IMSSTextbox(props: ITextboxProps) {
       WebGAL.events.textSettle.off(settleText);
     };
   }, []);
-
   let allTextIndex = 0;
+  const nameElementList = showName.map((line, index) => {
+    const textline = line.map((en, index) => {
+      const e = en.reactNode;
+      let style = '';
+      let tips = '';
+      let style_alltext = '';
+      let isEnhanced = false;
+      if (en.enhancedValue) {
+        isEnhanced = true;
+        const data = en.enhancedValue;
+        for (const dataElem of data) {
+          const { key, value } = dataElem;
+          switch (key) {
+            case 'style':
+              style = value;
+              break;
+            case 'tips':
+              tips = value;
+              break;
+            case 'style-alltext':
+              style_alltext = value;
+              break;
+          }
+        }
+      }
+      const styleClassName = ' ' + css(style, { label: 'showname' });
+      const styleAllText = ' ' + css(style_alltext, { label: 'showname' });
+      if (isEnhanced) {
+        return (
+          <span key={index} style={{ position: 'relative' }}>
+            <span className={styles.zhanwei + styleAllText}>
+              {e}
+              <span className={applyStyle('outerName', styles.outerName) + styleClassName + styleAllText}>{e}</span>
+              {isUseStroke && <span className={applyStyle('innerName', styles.innerName) + styleAllText}>{e}</span>}
+            </span>
+          </span>
+        );
+      }
+      return (
+        <span key={index} style={{ position: 'relative' }}>
+          <span className={styles.zhanwei + styleAllText}>
+            {e}
+            <span className={applyStyle('outerName', styles.outerName) + styleClassName + styleAllText}>{e}</span>
+            {isUseStroke && <span className={applyStyle('innerName', styles.innerName) + styleAllText}>{e}</span>}
+          </span>
+        </span>
+      );
+    });
+    return (
+      <div
+        style={{
+          wordBreak: isSafari || props.isFirefox ? 'break-all' : undefined,
+          display: isSafari ? 'flex' : undefined,
+          flexWrap: isSafari ? 'wrap' : undefined,
+        }}
+        key={`text-line-${index}`}
+      >
+        {textline}
+      </div>
+    );
+  });
   const textElementList = textArray.map((line, index) => {
     const textLine = line.map((en, index) => {
       const e = en.reactNode;
@@ -49,7 +110,6 @@ export default function IMSSTextbox(props: ITextboxProps) {
       let style_alltext = '';
       if (en.enhancedValue) {
         const data = en.enhancedValue;
-        console.log(data);
         for (const dataElem of data) {
           const { key, value } = dataElem;
           switch (key) {
@@ -159,7 +219,7 @@ export default function IMSSTextbox(props: ITextboxProps) {
                 <img className={applyStyle('miniAvatarImg', styles.miniAvatarImg)} alt="miniAvatar" src={miniAvatar} />
               )}
             </div>
-            {showName !== '' && (
+            {isHasName && (
               <>
                 <div
                   className={
@@ -172,38 +232,15 @@ export default function IMSSTextbox(props: ITextboxProps) {
                     fontSize: '200%',
                   }}
                 >
-                  <div style={{ opacity: 0 }}>
-                    {showName.split('').map((e, i) => {
-                      return (
-                        <span key={e + i} style={{ position: 'relative' }}>
-                          <span className={styles.zhanwei}>
-                            {e}
-                            <span className={applyStyle('outerName', styles.outerName)}>{e}</span>
-                            {isUseStroke && <span className={applyStyle('innerName', styles.innerName)}>{e}</span>}
-                          </span>
-                        </span>
-                      );
-                    })}
-                  </div>
+                  <span style={{ opacity: 0 }}>{nameElementList}</span>
                 </div>
                 <div
-                  key={showName}
                   className={applyStyle('TextBox_showName', styles.TextBox_showName)}
                   style={{
                     fontSize: '200%',
                   }}
                 >
-                  {showName.split('').map((e, i) => {
-                    return (
-                      <span key={e + i} style={{ position: 'relative' }}>
-                        <span className={styles.zhanwei}>
-                          {e}
-                          <span className={applyStyle('outerName', styles.outerName)}>{e}</span>
-                          {isUseStroke && <span className={applyStyle('innerName', styles.innerName)}>{e}</span>}
-                        </span>
-                      </span>
-                    );
-                  })}
+                  {nameElementList}
                 </div>
               </>
             )}

packages/webgal/src/Stage/TextBox/TextBox.tsx

@@ -67,7 +67,8 @@ export const TextBox = () => {
     .default(() => 2);
   // 拆字
   const textArray = compileSentence(stageState.showText, lineLimit);
-  const showName = stageState.showName;
+  const isHasName = stageState.showName !== '';
+  const showName = compileSentence(stageState.showName, lineLimit);
   const currentConcatDialogPrev = stageState.currentConcatDialogPrev;
   const currentDialogKey = stageState.currentDialogKey;
   const miniAvatar = stageState.miniAvatar;
@@ -79,6 +80,7 @@ export const TextBox = () => {
       isText={isText}
       textDelay={textDelay}
       showName={showName}
+      isHasName={isHasName}
       currentConcatDialogPrev={currentConcatDialogPrev}
       fontSize={size}
       currentDialogKey={currentDialogKey}
@@ -135,7 +137,7 @@ export function compileSentence(sentence: string, lineLimit: number, ignoreLineL
  * @param sentence
  */
 export function splitChars(sentence: string) {
-  if (!sentence) return [];
+  if (!sentence) return [''];
   const words: string[] = [];
   let word = '';
   let cjkFlag = isCJK(sentence[0]);
@@ -248,6 +250,9 @@ function parseString(input: string): Segment[] {
     }
   }
 
+  // 我也不知道为什么，不加这个就会导致在 Enhanced Value 处于行首时故障
+  // 你可以认为这个代码不明所以，但是不要删除
+  result.unshift({ type: SegmentType.String, value: '' });
   return result;
 }
 
@@ -264,7 +269,7 @@ function parseEnhancedString(enhanced: string): KeyValuePair[] {
   while ((match = regex.exec(enhanced)) !== null) {
     result.push({
       key: match[1],
-      value: match[2].trim(),
+      value: match[2].replace(/~/g, ':').trim(),
     });
   }
 

packages/webgal/src/Stage/TextBox/legacy-themes/legacy-standard/StandardTextbox.tsx

@@ -15,6 +15,7 @@ export default function StandardTextbox(props: ITextboxProps) {
     isFirefox,
     fontSize,
     miniAvatar,
+    isHasName,
     showName,
     font,
     textDuration,
@@ -38,7 +39,25 @@ export default function StandardTextbox(props: ITextboxProps) {
       WebGAL.events.textSettle.off(settleText);
     };
   }, []);
-
+  const nameElementList = showName.map((e,index)=>{
+    let prevLength = currentConcatDialogPrev.length;
+    if (index < prevLength) {
+      return (
+        <span className={styles.zhanwei}>
+          {e}
+          <span className={styles.outer}>{e}</span>
+          {isUseStroke && <span className={styles.inner}>{e}</span>}
+        </span>
+      );
+    }
+    return (
+      <span className={styles.zhanwei}>
+        {e}
+        <span className={styles.outer}>{e}</span>
+        {isUseStroke && <span className={styles.inner}>{e}</span>}
+      </span>
+    );
+  });
   const textElementList = textArray.map((e, index) => {
     // if (e === '<br />') {
     //   return <br key={`br${index}`} />;
@@ -83,7 +102,6 @@ export default function StandardTextbox(props: ITextboxProps) {
   });
 
   const padding = isHasMiniAvatar ? 500 : undefined;
-  const isHasName = showName !== '';
   let paddingTop = isHasName ? undefined : 15;
   if (textSizeState === textSize.small && !isHasName) {
     paddingTop = 35;
@@ -114,19 +132,9 @@ export default function StandardTextbox(props: ITextboxProps) {
           <div id="miniAvatar" className={styles.miniAvatarContainer}>
             {miniAvatar !== '' && <img className={styles.miniAvatarImg} alt="miniAvatar" src={miniAvatar} />}
           </div>
-          {showName !== '' && (
-            <div key={showName} className={styles.TextBox_showName} style={{ fontSize: '170%', left: padding }}>
-              {showName.split('').map((e, i) => {
-                return (
-                  <span key={e + i} style={{ position: 'relative' }}>
-                    <span className={styles.zhanwei}>
-                      {e}
-                      <span className={styles.outer}>{e}</span>
-                      {isUseStroke && <span className={styles.inner}>{e}</span>}
-                    </span>
-                  </span>
-                );
-              })}
+          {isHasName && (
+            <div className={styles.TextBox_showName} style={{ fontSize: '170%', left: padding }}>
+              {nameElementList}
             </div>
           )}
           <div

packages/webgal/src/Stage/TextBox/types.ts

@@ -10,7 +10,8 @@ export interface ITextboxProps {
   isFirefox: boolean;
   fontSize: string;
   miniAvatar: string;
-  showName: string;
+  showName: EnhancedNode[][];
+  isHasName: boolean;
   font: string;
   textDuration: number;
   textSizeState: number;

packages/webgal/src/UI/Backlog/Backlog.tsx

@@ -47,6 +47,26 @@ export const Backlog = () => {
           </div>
         );
       });
+      const showNameArray = compileSentence(backlogItem.currentStageState.showName, 3, true);
+      const showNameArray2 = showNameArray.map((line)=>{
+        return line.map((c) => {
+            return c.reactNode;
+        });
+      });
+      const showNameArrayReduced = mergeStringsAndKeepObjects(showNameArray2);
+      const nameElementList = showNameArrayReduced.map((line,index)=>{
+        return (
+          <div key={`backlog-line-${index}`}>
+            {line.map((e, index) => {
+              if (e === '<br />') {
+                return <br key={`br${index}`} />;
+              } else {
+                return e;
+              }
+            })}
+          </div>
+        );
+      });
       const singleBacklogView = (
         <div
           className={styles.backlog_item}
@@ -88,7 +108,7 @@ export const Backlog = () => {
                 </div>
               ) : null}
             </div>
-            <div className={styles.backlog_item_content_name}>{backlogItem.currentStageState.showName}</div>
+            <div className={styles.backlog_item_content_name}>{nameElementList}</div>
           </div>
           <div className={styles.backlog_item_content}>
             <span className={styles.backlog_item_content_text}>{showTextElementList}</span>

packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx

@@ -23,14 +23,18 @@ export const TextPreview = (props: any) => {
   const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
   const previewText = t('textPreview.text');
   const previewTextArray = compileSentence(previewText, 3);
+  const showNameText = t('textPreview.title');
+  const showNameArray = compileSentence(showNameText, 3);
+  const isHasName = showNameText !== '';
 
   const Textbox = IMSSTextbox;
 
   const textboxProps = {
     textArray: previewTextArray,
     isText: true,
     textDelay: textDelay,
-    showName: t('textPreview.title'),
+    isHasName: isHasName,
+    showName: showNameArray,
     currentConcatDialogPrev: '',
     fontSize: size,
     currentDialogKey: '',