fix:修复姓名框错误显示并改正角色名称默认样式

1，解决没有角色名称依旧会出现姓名框 2，由于使用角色名称默认样式时改变颜色的拓展文本语法无法生效，因此当使用拓展文本语法时将使用与文本相同的样式 3，目前无法复现角色名称闪烁
OpenWebGAL · Sep 3, 2024 · 9b85b7c · 9b85b7c
1 parent f76b6d1
commit 9b85b7c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 28 deletions.
diff --git a/packages/webgal/src/Stage/TextBox/IMSSTextbox.tsx b/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,15 +40,16 @@ 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;
         console.log(data);
         for (const dataElem of data) {
@@ -65,16 +67,13 @@ export default function IMSSTextbox(props: ITextboxProps) {
           }
         }
       }
-      let prevLength = currentConcatDialogPrev.length;
       const styleClassName = ' ' + css(style);
       const styleAllText = ' ' + css(style_alltext);
-      if (index < prevLength) {
+      if(isEnhanced){
         return (
           <span
-            // data-text={e}
-            className={applyStyle('TextBox_textElement_Settled', styles.TextBox_textElement_Settled)}
-            key={currentDialogKey + index}
-            style={{ animationDuration: `${textDuration}ms` }}
+            key={index}
+            style={{position:'relative'}}
           >
             <span className={styles.zhanwei + styleAllText}>
               {e}
@@ -86,19 +85,16 @@ export default function IMSSTextbox(props: ITextboxProps) {
       }
       return (
         <span
-          // data-text={e}
-          className={`${applyStyle('TextBox_textElement_start', styles.TextBox_textElement_start)} Textelement_start`}
-          key={currentDialogKey + index}
-          style={{ position: 'relative' }}
+          key={index}
+          style={{position:'relative'}}
         >
           <span className={styles.zhanwei + styleAllText}>
             {e}
-            <span className={applyStyle('outer', styles.outer) + styleClassName + styleAllText}>{e}</span>
-            {isUseStroke && <span className={applyStyle('inner', styles.inner) + styleAllText}>{e}</span>}
+            <span className={applyStyle('outerName', styles.outerName) + styleClassName + styleAllText}>{e}</span>
+            {isUseStroke && <span className={applyStyle('innerName', styles.innerName) + styleAllText}>{e}</span>}
           </span>
         </span>
       );
-
     })
     return (
       <div
@@ -231,20 +227,30 @@ export default function IMSSTextbox(props: ITextboxProps) {
                 <img className={applyStyle('miniAvatarImg', styles.miniAvatarImg)} alt="miniAvatar" src={miniAvatar} />
               )}
             </div>
-            {showName !== null && (
-              <div
-                className={
-                  applyStyle('TextBox_showName', styles.TextBox_showName) +
-                  ' ' +
-                  applyStyle('TextBox_ShowName_Background', styles.TextBox_ShowName_Background)
-                }
+            {isHasName && (
+              <>
+                <div
+                  className={
+                    applyStyle('TextBox_showName', styles.TextBox_showName) +
+                    ' ' +
+                    applyStyle('TextBox_ShowName_Background', styles.TextBox_ShowName_Background)
+                  }
+                  style={{
+                    opacity: `${textboxOpacity / 100}`,
+                    fontSize: '200%',
+                  }}
+                >
+                  {nameElementList}
+                </div>
+                <div
+                className={applyStyle('TextBox_showName', styles.TextBox_showName)}
                 style={{
-                  opacity: `${textboxOpacity / 100}`,
                   fontSize: '200%',
                 }}
-              >
-                {nameElementList}
-              </div>
+                >
+                  {nameElementList}
+                </div>
+              </>
             )}
             <div
               className={applyStyle('text', styles.text)}

diff --git a/packages/webgal/src/Stage/TextBox/TextBox.tsx b/packages/webgal/src/Stage/TextBox/TextBox.tsx
@@ -67,6 +67,7 @@ export const TextBox = () => {
     .default(() => 2);
   // 拆字
   const textArray = compileSentence(stageState.showText, lineLimit);
+  const isHasName = stageState.showName !== '';
   const showName = compileSentence(stageState.showName,lineLimit);
   const currentConcatDialogPrev = stageState.currentConcatDialogPrev;
   const currentDialogKey = stageState.currentDialogKey;
@@ -79,6 +80,7 @@ export const TextBox = () => {
       isText={isText}
       textDelay={textDelay}
       showName={showName}
+      isHasName={isHasName}
       currentConcatDialogPrev={currentConcatDialogPrev}
       fontSize={size}
       currentDialogKey={currentDialogKey}

diff --git a/packages/webgal/src/Stage/TextBox/legacy-themes/legacy-standard/StandardTextbox.tsx b/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,
@@ -101,7 +102,6 @@ export default function StandardTextbox(props: ITextboxProps) {
   });
 
   const padding = isHasMiniAvatar ? 500 : undefined;
-  const isHasName = showName !== null;
   let paddingTop = isHasName ? undefined : 15;
   if (textSizeState === textSize.small && !isHasName) {
     paddingTop = 35;
@@ -132,7 +132,7 @@ export default function StandardTextbox(props: ITextboxProps) {
           <div id="miniAvatar" className={styles.miniAvatarContainer}>
             {miniAvatar !== '' && <img className={styles.miniAvatarImg} alt="miniAvatar" src={miniAvatar} />}
           </div>
-          {showName !== null && (
+          {isHasName && (
             <div className={styles.TextBox_showName} style={{ fontSize: '170%', left: padding }}>
               {nameElementList}
             </div>

diff --git a/packages/webgal/src/Stage/TextBox/types.ts b/packages/webgal/src/Stage/TextBox/types.ts
@@ -11,6 +11,7 @@ export interface ITextboxProps {
   fontSize: string;
   miniAvatar: string;
   showName: EnhancedNode[][];
+  isHasName: boolean;
   font: string;
   textDuration: number;
   textSizeState: number;

diff --git a/packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx b/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: compileSentence(t('textPreview.title'),3),
+    isHasName: isHasName,
+    showName: showNameArray,
     currentConcatDialogPrev: '',
     fontSize: size,
     currentDialogKey: '',