mirror of
https://ghproxy.com/https://github.com/StreakingMan/solvable-sheep-game
synced 2025-07-07 20:39:46 +08:00
chore: 组件拆分动态引入
This commit is contained in:
parent
657422eb4f
commit
e6449f9d8c
40
src/App.tsx
40
src/App.tsx
|
@ -1,4 +1,4 @@
|
||||||
import React, { FC, useEffect, useState } from 'react';
|
import React, { FC, useEffect, useState, Suspense } from 'react';
|
||||||
import './App.scss';
|
import './App.scss';
|
||||||
import {
|
import {
|
||||||
domRelatedOptForTheme,
|
domRelatedOptForTheme,
|
||||||
|
@ -12,8 +12,8 @@ import { BeiAn } from './components/BeiAn';
|
||||||
import { Title } from './components/Title';
|
import { Title } from './components/Title';
|
||||||
import { PersonalInfo } from './components/PersonalInfo';
|
import { PersonalInfo } from './components/PersonalInfo';
|
||||||
import { Info } from './components/Info';
|
import { Info } from './components/Info';
|
||||||
import { ThemeChanger } from './components/ThemeChanger';
|
const ThemeChanger = React.lazy(() => import('./components/ThemeChanger'));
|
||||||
import { ConfigDialog } from './components/ConfigDialog';
|
const ConfigDialog = React.lazy(() => import('./components/ConfigDialog'));
|
||||||
|
|
||||||
// 读取缓存关卡得分
|
// 读取缓存关卡得分
|
||||||
const initLevel = Number(localStorage.getItem(LAST_LEVEL_STORAGE_KEY) || '1');
|
const initLevel = Number(localStorage.getItem(LAST_LEVEL_STORAGE_KEY) || '1');
|
||||||
|
@ -63,37 +63,39 @@ const App: FC<{ theme: Theme<any> }> = ({ theme: initTheme }) => {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<Title title={theme.title} desc={theme.desc} />
|
<Title title={theme.title} desc={theme.desc} />
|
||||||
<PersonalInfo />
|
|
||||||
<Game
|
<Game
|
||||||
key={theme.title}
|
key={theme.title}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
initLevel={initLevel}
|
initLevel={initLevel}
|
||||||
initScore={initScore}
|
initScore={initScore}
|
||||||
/>
|
/>
|
||||||
|
<PersonalInfo />
|
||||||
<div className={'flex-spacer'} />
|
<div className={'flex-spacer'} />
|
||||||
<p style={{ textAlign: 'center', fontSize: 10, opacity: 0.5 }}>
|
<p style={{ textAlign: 'center', fontSize: 10, opacity: 0.5 }}>
|
||||||
<span id="busuanzi_container_site_pv">
|
<span id="busuanzi_container_site_pv">
|
||||||
{' '}
|
|
||||||
累计访问:
|
累计访问:
|
||||||
<span id="busuanzi_value_site_pv" />次
|
<span id="busuanzi_value_site_pv" />次
|
||||||
</span>
|
</span>
|
||||||
<br />
|
<br />
|
||||||
<BeiAn />
|
<BeiAn />
|
||||||
</p>
|
</p>
|
||||||
<Info />
|
<Suspense fallback={<span>Loading</span>}>
|
||||||
{!theme.pure && (
|
{!theme.pure && (
|
||||||
<>
|
<>
|
||||||
<ThemeChanger
|
<Info />
|
||||||
changeTheme={changeTheme}
|
<ThemeChanger
|
||||||
onDiyClick={() => setDiyDialogShow(true)}
|
changeTheme={changeTheme}
|
||||||
/>
|
onDiyClick={() => setDiyDialogShow(true)}
|
||||||
<ConfigDialog
|
/>
|
||||||
show={diyDialogShow}
|
{diyDialogShow && (
|
||||||
closeMethod={() => setDiyDialogShow(false)}
|
<ConfigDialog
|
||||||
previewMethod={previewTheme}
|
closeMethod={() => setDiyDialogShow(false)}
|
||||||
/>
|
previewMethod={previewTheme}
|
||||||
</>
|
/>
|
||||||
)}
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Suspense>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,3 +1,15 @@
|
||||||
|
@keyframes show {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-50%) translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(-50%) translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dialog {
|
.dialog {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -17,8 +29,7 @@
|
||||||
width: calc(100% - 32px);
|
width: calc(100% - 32px);
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
transform: translateX(-50%) translateY(-100%);
|
animation: ease-in-out show 0.3s both;
|
||||||
opacity: 0;
|
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -32,11 +43,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&Show {
|
|
||||||
transform: translateX(-50%) translateY(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
color: crimson;
|
color: crimson;
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,22 +8,11 @@ import { captureElement, LAST_UPLOAD_TIME_STORAGE_KEY } from '../utils';
|
||||||
import { copy } from 'clipboard';
|
import { copy } from 'clipboard';
|
||||||
|
|
||||||
const STORAGEKEY = 'customTheme';
|
const STORAGEKEY = 'customTheme';
|
||||||
let storageTheme: Theme<any>;
|
|
||||||
try {
|
|
||||||
const configString = localStorage.getItem(STORAGEKEY);
|
|
||||||
if (configString) {
|
|
||||||
const parseRes = JSON.parse(configString);
|
|
||||||
if (typeof parseRes === 'object') storageTheme = parseRes;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ConfigDialog: FC<{
|
const ConfigDialog: FC<{
|
||||||
show: boolean;
|
|
||||||
closeMethod: () => void;
|
closeMethod: () => void;
|
||||||
previewMethod: (theme: Theme<string>) => void;
|
previewMethod: (theme: Theme<string>) => void;
|
||||||
}> = ({ show, closeMethod, previewMethod }) => {
|
}> = ({ closeMethod, previewMethod }) => {
|
||||||
const [sounds, setSounds] = useState<Sound[]>([]);
|
const [sounds, setSounds] = useState<Sound[]>([]);
|
||||||
const [icons, setIcons] = useState<Icon[]>([]);
|
const [icons, setIcons] = useState<Icon[]>([]);
|
||||||
const inputRefMap = useRef<
|
const inputRefMap = useRef<
|
||||||
|
@ -57,38 +46,44 @@ export const ConfigDialog: FC<{
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (storageTheme) {
|
let storageTheme: Theme<any> | undefined = undefined;
|
||||||
const {
|
try {
|
||||||
title,
|
const configString = localStorage.getItem(STORAGEKEY);
|
||||||
desc = '',
|
if (configString) {
|
||||||
bgm = '',
|
const parseRes = JSON.parse(configString);
|
||||||
sounds,
|
if (typeof parseRes === 'object') storageTheme = parseRes;
|
||||||
icons,
|
}
|
||||||
background = '',
|
} catch (e) {
|
||||||
backgroundBlur = false,
|
//
|
||||||
} = storageTheme;
|
|
||||||
setSounds(
|
|
||||||
sounds.filter(
|
|
||||||
(s) => !['triple', 'button-click'].includes(s.name)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
setIcons(
|
|
||||||
icons.map((icon) => {
|
|
||||||
if (icon.clickSound === 'button-click')
|
|
||||||
icon.clickSound = '';
|
|
||||||
if (icon.tripleSound === 'triple') icon.tripleSound = '';
|
|
||||||
return icon;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
setCustomThemeInfo({
|
|
||||||
title,
|
|
||||||
// @ts-ignore
|
|
||||||
desc,
|
|
||||||
bgm,
|
|
||||||
background,
|
|
||||||
backgroundBlur,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
if (!storageTheme) return;
|
||||||
|
const {
|
||||||
|
title,
|
||||||
|
desc = '',
|
||||||
|
bgm = '',
|
||||||
|
sounds,
|
||||||
|
icons,
|
||||||
|
background = '',
|
||||||
|
backgroundBlur = false,
|
||||||
|
} = storageTheme;
|
||||||
|
setSounds(
|
||||||
|
sounds.filter((s) => !['triple', 'button-click'].includes(s.name))
|
||||||
|
);
|
||||||
|
setIcons(
|
||||||
|
icons.map((icon) => {
|
||||||
|
if (icon.clickSound === 'button-click') icon.clickSound = '';
|
||||||
|
if (icon.tripleSound === 'triple') icon.tripleSound = '';
|
||||||
|
return icon;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
setCustomThemeInfo({
|
||||||
|
title,
|
||||||
|
// @ts-ignore
|
||||||
|
desc,
|
||||||
|
bgm,
|
||||||
|
background,
|
||||||
|
backgroundBlur,
|
||||||
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// 音效保存
|
// 音效保存
|
||||||
|
@ -340,7 +335,6 @@ export const ConfigDialog: FC<{
|
||||||
className={classNames(
|
className={classNames(
|
||||||
style.dialog,
|
style.dialog,
|
||||||
style.dialogWrapper,
|
style.dialogWrapper,
|
||||||
show && style.dialogShow,
|
|
||||||
'flex-container flex-container'
|
'flex-container flex-container'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
@ -646,3 +640,5 @@ export const ConfigDialog: FC<{
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default ConfigDialog;
|
||||||
|
|
|
@ -16,7 +16,7 @@ const BuiltinThemes = [
|
||||||
pddTheme,
|
pddTheme,
|
||||||
];
|
];
|
||||||
|
|
||||||
export const ThemeChanger: FC<{
|
const ThemeChanger: FC<{
|
||||||
changeTheme: (theme: Theme<any>) => void;
|
changeTheme: (theme: Theme<any>) => void;
|
||||||
onDiyClick: () => void;
|
onDiyClick: () => void;
|
||||||
}> = ({ changeTheme, onDiyClick }) => {
|
}> = ({ changeTheme, onDiyClick }) => {
|
||||||
|
@ -75,3 +75,5 @@ export const ThemeChanger: FC<{
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default ThemeChanger;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user