fix: textbox offset left can not modify when miniavatar on

ClodLingxi · Jun 2, 2024 · 4f592f2 · 4f592f2
1 parent c1d9ea6
commit 4f592f2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss
@@ -19,6 +19,10 @@
   transition: left 0.33s;
 }
 
+.TextBox_main_miniavatarOff {
+  left: 25px;
+}
+
 .TextBox_Background {
   z-index: 2;
   background: linear-gradient(rgba(245, 247, 250, 1) 0%, rgba(189, 198, 222, 1) 100%);

diff --git a/packages/webgal/src/Stage/TextBox/IMSSTextbox.tsx b/packages/webgal/src/Stage/TextBox/IMSSTextbox.tsx
@@ -32,6 +32,7 @@ export default function IMSSTextbox(props: ITextboxProps) {
         e.className = applyStyle('TextBox_textElement_Settled', styles.TextBox_textElement_Settled);
       });
     }
+
     WebGAL.events.textSettle.on(settleText);
     return () => {
       WebGAL.events.textSettle.off(settleText);
@@ -107,19 +108,27 @@ export default function IMSSTextbox(props: ITextboxProps) {
             className={
               applyStyle('TextBox_main', styles.TextBox_main) +
               ' ' +
-              applyStyle('TextBox_Background', styles.TextBox_Background)
+              applyStyle('TextBox_Background', styles.TextBox_Background) +
+              ' ' +
+              (miniAvatar === ''
+                ? applyStyle('TextBox_main_miniavatarOff', styles.TextBox_main_miniavatarOff)
+                : undefined)
             }
             style={{
               opacity: `${textboxOpacity / 100}`,
-              left: miniAvatar === '' ? 25 : undefined,
             }}
           />
           <div
             id="textBoxMain"
-            className={applyStyle('TextBox_main', styles.TextBox_main)}
+            className={
+              applyStyle('TextBox_main', styles.TextBox_main) +
+              ' ' +
+              (miniAvatar === ''
+                ? applyStyle('TextBox_main_miniavatarOff', styles.TextBox_main_miniavatarOff)
+                : undefined)
+            }
             style={{
               fontFamily: font,
-              left: miniAvatar === '' ? 25 : undefined,
             }}
           >
             <div id="miniAvatar" className={applyStyle('miniAvatarContainer', styles.miniAvatarContainer)}>

diff --git a/packages/webgal/src/Stage/TextBox/textbox.module.scss b/packages/webgal/src/Stage/TextBox/textbox.module.scss
@@ -41,6 +41,10 @@ $height: 330px;
   transition: left 0.33s;
 }
 
+.TextBox_main_miniavatarOff {
+  left: 25px;
+}
+
 .TextBox_Background {
   z-index: 2;
   background: linear-gradient(rgba(245, 247, 250, 1) 0%, rgba(189, 198, 222, 1) 100%);