fix: 分数缓存逻辑调整

src/App.tsx

@@ -6,6 +6,7 @@ import {
     LAST_SCORE_STORAGE_KEY,
     LAST_TIME_STORAGE_KEY,
     PLAYING_THEME_ID_STORAGE_KEY,
+    resetScoreStorage,
     wrapThemeDefaultSounds,
 } from './utils';
 import { Theme } from './themes/interface';
@@ -18,11 +19,6 @@ const ThemeChanger = React.lazy(() => import('./components/ThemeChanger'));
 const ConfigDialog = React.lazy(() => import('./components/ConfigDialog'));
 const WxQrCode = React.lazy(() => import('./components/WxQrCode'));
 
-// 读取缓存关卡得分
-const initLevel = Number(localStorage.getItem(LAST_LEVEL_STORAGE_KEY) || '1');
-const initScore = Number(localStorage.getItem(LAST_SCORE_STORAGE_KEY) || '0');
-const initTime = Number(localStorage.getItem(LAST_TIME_STORAGE_KEY) || '0');
-
 const App: FC<{ theme: Theme<any> }> = ({ theme: initTheme }) => {
     console.log('initTheme', initTheme);
     // console.log(JSON.stringify(theme));
@@ -30,8 +26,23 @@ const App: FC<{ theme: Theme<any> }> = ({ theme: initTheme }) => {
     const [theme, setTheme] = useState<Theme<any>>(initTheme);
     const [diyDialogShow, setDiyDialogShow] = useState<boolean>(false);
 
+    // 读取缓存关卡得分
+    const [initLevel, setInitLevel] = useState<number>(
+        Number(localStorage.getItem(LAST_LEVEL_STORAGE_KEY) || '1')
+    );
+    const [initScore, setInitScore] = useState<number>(
+        Number(localStorage.getItem(LAST_SCORE_STORAGE_KEY) || '0')
+    );
+    const [initTime, setInitTime] = useState<number>(
+        Number(localStorage.getItem(LAST_TIME_STORAGE_KEY) || '0')
+    );
+
     const changeTheme = (theme: Theme<any>) => {
-        sessionStorage.setItem(PLAYING_THEME_ID_STORAGE_KEY, theme.title);
+        localStorage.setItem(PLAYING_THEME_ID_STORAGE_KEY, theme.title);
+        setInitLevel(1);
+        setInitScore(0);
+        setInitTime(0);
+        resetScoreStorage();
         wrapThemeDefaultSounds(theme);
         domRelatedOptForTheme(theme);
         setTheme({ ...theme });

src/components/Game.tsx

@@ -12,6 +12,7 @@ import {
     LAST_SCORE_STORAGE_KEY,
     LAST_TIME_STORAGE_KEY,
     randomString,
+    resetScoreStorage,
     timestampToUsedTimeString,
     waitTimeout,
 } from '../utils';
@@ -170,7 +171,6 @@ const Game: FC<{
         Record<MySymbol['id'], number>
     >({});
     const [finished, setFinished] = useState<boolean>(false);
-    const [tipText, setTipText] = useState<string>('');
     const [animating, setAnimating] = useState<boolean>(false);
 
     // 音效
@@ -394,14 +394,12 @@ const Game: FC<{
 
         // 输了
         if (updateQueue.length === 7) {
-            setTipText('失败了');
             setFinished(true);
         }
 
         if (!updateScene.find((s) => s.status !== 2)) {
             // 胜利
             if (level === maxLevel) {
-                setTipText('完成挑战');
                 setFinished(true);
                 return;
             }
@@ -428,9 +426,7 @@ const Game: FC<{
     useEffect(() => {
         if (finished) {
             intervalRef.current && clearInterval(intervalRef.current);
-            localStorage.setItem(LAST_LEVEL_STORAGE_KEY, '1');
+            resetScoreStorage();
-            localStorage.setItem(LAST_SCORE_STORAGE_KEY, '0');
-            localStorage.setItem(LAST_TIME_STORAGE_KEY, '0');
         }
     }, [finished]);
     // 更新使用时间

src/components/Score.tsx

@@ -52,7 +52,7 @@ const Score: FC<{
     // 综合评分
     const rating = Math.max(0, score) * 100 - Math.round(time / 1000);
     // 分主题排行
-    const themeId = sessionStorage.getItem(PLAYING_THEME_ID_STORAGE_KEY);
+    const themeId = localStorage.getItem(PLAYING_THEME_ID_STORAGE_KEY);
 
     const uploadRankInfo = (id?: string) => {
         const _userId = localStorage.getItem(USER_ID_STORAGE_KEY);
@@ -93,6 +93,13 @@ const Score: FC<{
             .then((res) => {
                 setRankList(res as any);
                 cb && cb(res as any);
+                const _userId = localStorage.getItem(USER_ID_STORAGE_KEY);
+                if (_userId) {
+                    setTimeout(() => {
+                        const rankEl = document.getElementById(_userId + 'el');
+                        rankEl?.scrollIntoView({ behavior: 'smooth' });
+                    });
+                }
             })
             .catch((e) => {
                 console.log(e);
@@ -219,7 +226,7 @@ const Score: FC<{
                                         <tr>
                                             <th>名次</th>
                                             <th>名称</th>
-                                            {/*<th>通关数</th>*/}
+                                            <th>通关数</th>
                                             {/*<th>用时</th>*/}
                                             {/*<th>得分</th>*/}
                                             <th>综合评分</th>
@@ -227,14 +234,23 @@ const Score: FC<{
                                     </thead>
                                     <tbody>
                                         {rankList.map((rank, idx) => (
-                                            <tr key={idx}>
+                                            <tr
+                                                key={idx}
+                                                id={rank.userId}
+                                                style={{
+                                                    background:
+                                                        rank.userId === userId
+                                                            ? 'rgb(0 0 0 / 20%)'
+                                                            : '',
+                                                }}
+                                            >
                                                 <td>{idx + 1}</td>
                                                 <td>
                                                     {rank.username}
                                                     {rank.userId === userId &&
                                                         '(你)'}
                                                 </td>
-                                                {/*<td>{rank.level}</td>*/}
+                                                <td>{rank.level}</td>
                                                 {/*<td>*/}
                                                 {/*    {timestampToUsedTimeString(*/}
                                                 {/*        rank.time*/}

src/main.tsx

@@ -7,8 +7,12 @@ import Bmob from 'hydrogen-js-sdk';
 import {
     DEFAULT_BGM_STORAGE_KEY,
     domRelatedOptForTheme,
+    LAST_LEVEL_STORAGE_KEY,
+    LAST_SCORE_STORAGE_KEY,
+    LAST_TIME_STORAGE_KEY,
     parsePathCustomThemeId,
     PLAYING_THEME_ID_STORAGE_KEY,
+    resetScoreStorage,
     wrapThemeDefaultSounds,
 } from './utils';
 import { getDefaultTheme } from './themes/default';
@@ -34,7 +38,17 @@ const errorTip = (tip: string) => {
 
 // 加载成功后数据转换（runtime）以及转场
 const successTrans = (theme: Theme<any>) => {
-    sessionStorage.setItem(
+    // 如果上次玩的不是这个主题，清除缓存分数
+    const lastPlayTheme = localStorage.getItem(PLAYING_THEME_ID_STORAGE_KEY);
+    if (
+        !lastPlayTheme ||
+        ![customThemeIdFromPath, theme.title].includes(lastPlayTheme)
+    ) {
+        resetScoreStorage();
+    }
+
+    // 缓存当前主题id
+    localStorage.setItem(
         PLAYING_THEME_ID_STORAGE_KEY,
         customThemeIdFromPath || theme.title
     );

src/themes/default/index.ts

@@ -25,7 +25,7 @@ export const getDefaultTheme: () => Theme<DefaultSoundNames> = () => {
         title: '有解的羊了个羊',
         desc: '真的可以通关~',
         dark: true,
-        maxLevel: 5,
+        maxLevel: 10,
         backgroundColor: '#8dac85',
         icons: icons.map((icon) => ({
             name: icon,

src/utils.ts

@@ -14,11 +14,16 @@ export const DEFAULT_TRIPLE_SOUND_STORAGE_KEY = 'defaultTripleSound';
 export const DEFAULT_CLICK_SOUND_STORAGE_KEY = 'defaultClickSound';
 export const USER_NAME_STORAGE_KEY = 'username';
 export const USER_ID_STORAGE_KEY = 'userId';
-// session
 export const PLAYING_THEME_ID_STORAGE_KEY = 'playingThemeId';
 
 export const linkReg = /^(https|data):+/;
 
+export const resetScoreStorage = () => {
+    localStorage.setItem(LAST_LEVEL_STORAGE_KEY, '1');
+    localStorage.setItem(LAST_SCORE_STORAGE_KEY, '0');
+    localStorage.setItem(LAST_TIME_STORAGE_KEY, '0');
+};
+
 export const randomString: (len: number) => string = (len) => {
     const pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
     let res = '';