From a8a6312e2a5d67639f50e185407915d554d28127 Mon Sep 17 00:00:00 2001 From: streakingman Date: Wed, 12 Oct 2022 23:02:30 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=86=E6=95=B0=E7=BC=93=E5=AD=98?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 23 +++++++++++++++++------ src/components/Game.tsx | 8 ++------ src/components/Score.tsx | 24 ++++++++++++++++++++---- src/main.tsx | 16 +++++++++++++++- src/themes/default/index.ts | 2 +- src/utils.ts | 7 ++++++- 6 files changed, 61 insertions(+), 19 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 7e0f682..efae0f0 100644 --- a/src/App.tsx +++ b/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 }> = ({ theme: initTheme }) => { console.log('initTheme', initTheme); // console.log(JSON.stringify(theme)); @@ -30,8 +26,23 @@ const App: FC<{ theme: Theme }> = ({ theme: initTheme }) => { const [theme, setTheme] = useState>(initTheme); const [diyDialogShow, setDiyDialogShow] = useState(false); + // 读取缓存关卡得分 + const [initLevel, setInitLevel] = useState( + Number(localStorage.getItem(LAST_LEVEL_STORAGE_KEY) || '1') + ); + const [initScore, setInitScore] = useState( + Number(localStorage.getItem(LAST_SCORE_STORAGE_KEY) || '0') + ); + const [initTime, setInitTime] = useState( + Number(localStorage.getItem(LAST_TIME_STORAGE_KEY) || '0') + ); + const changeTheme = (theme: Theme) => { - 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 }); diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 62b4e85..00245e7 100644 --- a/src/components/Game.tsx +++ b/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 >({}); const [finished, setFinished] = useState(false); - const [tipText, setTipText] = useState(''); const [animating, setAnimating] = useState(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'); - localStorage.setItem(LAST_SCORE_STORAGE_KEY, '0'); - localStorage.setItem(LAST_TIME_STORAGE_KEY, '0'); + resetScoreStorage(); } }, [finished]); // 更新使用时间 diff --git a/src/components/Score.tsx b/src/components/Score.tsx index d398805..09cf086 100644 --- a/src/components/Score.tsx +++ b/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<{ 名次 名称 - {/*通关数*/} + 通关数 {/*用时*/} {/*得分*/} 综合评分 @@ -227,14 +234,23 @@ const Score: FC<{ {rankList.map((rank, idx) => ( - + {idx + 1} {rank.username} {rank.userId === userId && '(你)'} - {/*{rank.level}*/} + {rank.level} {/**/} {/* {timestampToUsedTimeString(*/} {/* rank.time*/} diff --git a/src/main.tsx b/src/main.tsx index b266524..ca807ee 100644 --- a/src/main.tsx +++ b/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) => { - 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 ); diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts index 5b73025..1b2f31f 100644 --- a/src/themes/default/index.ts +++ b/src/themes/default/index.ts @@ -25,7 +25,7 @@ export const getDefaultTheme: () => Theme = () => { title: '有解的羊了个羊', desc: '真的可以通关~', dark: true, - maxLevel: 5, + maxLevel: 10, backgroundColor: '#8dac85', icons: icons.map((icon) => ({ name: icon, diff --git a/src/utils.ts b/src/utils.ts index 1846256..c5b69ea 100644 --- a/src/utils.ts +++ b/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 = '';