open-source/solvable-sheep-game
1
0
Fork 0
mirror of https://ghproxy.com/https://github.com/StreakingMan/solvable-sheep-game synced 2025-05-23 20:06:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 分数缓存逻辑调整

Browse Source
This commit is contained in:
streakingman 2022-10-12 23:02:30 +08:00
parent 9682d31c49
commit a8a6312e2a
6 changed files with 61 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/App.tsx
View File

@ -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 });

8
src/components/Game.tsx
View File

@ -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');
localStorage.setItem(LAST_SCORE_STORAGE_KEY, '0');
localStorage.setItem(LAST_TIME_STORAGE_KEY, '0');
resetScoreStorage();
}
}, [finished]);
// 更新使用时间

24
src/components/Score.tsx
View File

@ -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*/}

16
src/main.tsx
View File

@ -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
);

2
src/themes/default/index.ts
View File

@ -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,

7
src/utils.ts
View File

@ -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 = '';