From 639b1a3db11d3f21d88e39e8408fadab7dfa4121 Mon Sep 17 00:00:00 2001
From: streakingman <z_max_y@163.com>
Date: Wed, 12 Oct 2022 23:44:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8E=92=E8=A1=8C=E6=A6=9C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Score.module.scss |  4 ++++
 src/components/Score.tsx         | 15 ++++++++++-----
 src/themes/default/index.ts      |  2 +-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/Score.module.scss b/src/components/Score.module.scss
index 6f06791..d2bb4f6 100644
--- a/src/components/Score.module.scss
+++ b/src/components/Score.module.scss
@@ -71,6 +71,10 @@
             top: 0;
             background-color: gray;
         }
+
+        td.username {
+            word-break: break-all;
+        }
     }
 }
 
diff --git a/src/components/Score.tsx b/src/components/Score.tsx
index 09cf086..ca752d9 100644
--- a/src/components/Score.tsx
+++ b/src/components/Score.tsx
@@ -98,7 +98,7 @@ const Score: FC<{
                     setTimeout(() => {
                         const rankEl = document.getElementById(_userId + 'el');
                         rankEl?.scrollIntoView({ behavior: 'smooth' });
-                    });
+                    }, 1000);
                 }
             })
             .catch((e) => {
@@ -107,7 +107,7 @@ const Score: FC<{
     };
 
     const onConfirmNameClick = () => {
-        const inputUsername = usernameInputRef.current?.value;
+        const inputUsername = usernameInputRef.current?.value.trim();
         if (!inputUsername) return;
         const newUserId = randomString(8);
         setUsername(inputUsername);
@@ -174,7 +174,11 @@ const Score: FC<{
 
     return (
         <div className={style.modal}>
-            <Suspense fallback={<span>fireworks</span>}>
+            <Suspense
+                fallback={
+                    <span style={{ position: 'absolute' }}>🎆fireworks🎆</span>
+                }
+            >
                 {success && <Fireworks />}
             </Suspense>
             <div className={style.inner}>
@@ -203,6 +207,7 @@ const Score: FC<{
                         <input
                             className={style.nameInput}
                             ref={usernameInputRef}
+                            maxLength={12}
                             placeholder={'留下大名进行排行榜pk!'}
                         />
                         <button
@@ -236,7 +241,7 @@ const Score: FC<{
                                         {rankList.map((rank, idx) => (
                                             <tr
                                                 key={idx}
-                                                id={rank.userId}
+                                                id={rank.userId + 'el'}
                                                 style={{
                                                     background:
                                                         rank.userId === userId
@@ -245,7 +250,7 @@ const Score: FC<{
                                                 }}
                                             >
                                                 <td>{idx + 1}</td>
-                                                <td>
+                                                <td className={style.username}>
                                                     {rank.username}
                                                     {rank.userId === userId &&
                                                         '(你)'}
diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts
index 1b2f31f..451a3ee 100644
--- a/src/themes/default/index.ts
+++ b/src/themes/default/index.ts
@@ -25,7 +25,7 @@ export const getDefaultTheme: () => Theme<DefaultSoundNames> = () => {
         title: '有解的羊了个羊',
         desc: '真的可以通关~',
         dark: true,
-        maxLevel: 10,
+        maxLevel: 20,
         backgroundColor: '#8dac85',
         icons: icons.map((icon) => ({
             name: icon,