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

chore: 组件拆分动态引入

Browse Source
This commit is contained in:
streakingman 2022-10-08 21:01:01 +08:00
parent 657422eb4f
commit e6449f9d8c
4 changed files with 78 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.tsx
View File

@ -1,4 +1,4 @@
import React, { FC, useEffect, useState } from 'react';
import React, { FC, useEffect, useState, Suspense } from 'react';
import './App.scss';
import {
domRelatedOptForTheme,
@ -12,8 +12,8 @@ import { BeiAn } from './components/BeiAn';
import { Title } from './components/Title';
import { PersonalInfo } from './components/PersonalInfo';
import { Info } from './components/Info';
import { ThemeChanger } from './components/ThemeChanger';
import { ConfigDialog } from './components/ConfigDialog';
const ThemeChanger = React.lazy(() => import('./components/ThemeChanger'));
const ConfigDialog = React.lazy(() => import('./components/ConfigDialog'));
// 读取缓存关卡得分
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} />
<PersonalInfo />
<Game
key={theme.title}
theme={theme}
initLevel={initLevel}
initScore={initScore}
/>
<PersonalInfo />
<div className={'flex-spacer'} />
<p style={{ textAlign: 'center', fontSize: 10, opacity: 0.5 }}>
<span id="busuanzi_container_site_pv">
{' '}
累计访问：
<span id="busuanzi_value_site_pv" />次
</span>
<br />
<BeiAn />
</p>
<Info />
{!theme.pure && (
<>
<ThemeChanger
changeTheme={changeTheme}
onDiyClick={() => setDiyDialogShow(true)}
/>
<ConfigDialog
show={diyDialogShow}
closeMethod={() => setDiyDialogShow(false)}
previewMethod={previewTheme}
/>
</>
)}
<Suspense fallback={<span>Loading</span>}>
{!theme.pure && (
<>
<Info />
<ThemeChanger
changeTheme={changeTheme}
onDiyClick={() => setDiyDialogShow(true)}
/>
{diyDialogShow && (
<ConfigDialog
closeMethod={() => setDiyDialogShow(false)}
previewMethod={previewTheme}
/>
)}
</>
)}
</Suspense>
</>
);
};

20
src/components/ConfigDialog.module.scss
View File

@ -1,3 +1,15 @@
@keyframes show {
0% {
transform: translateX(-50%) translateY(-100%);
opacity: 0;
}
100% {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
}
.dialog {
text-align: left;
overflow-y: auto;
@ -17,8 +29,7 @@
width: calc(100% - 32px);
max-width: 500px;
bottom: 0;
transform: translateX(-50%) translateY(-100%);
opacity: 0;
animation: ease-in-out show 0.3s both;
transition: 0.3s;
padding: 16px;
display: flex;
@ -32,11 +43,6 @@
}
}
&Show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.error {
color: crimson;
}

86
src/components/ConfigDialog.tsx
View File

@ -8,22 +8,11 @@ import { captureElement, LAST_UPLOAD_TIME_STORAGE_KEY } from '../utils';
import { copy } from 'clipboard';
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<{
show: boolean;
const ConfigDialog: FC<{
closeMethod: () => void;
previewMethod: (theme: Theme<string>) => void;
}> = ({ show, closeMethod, previewMethod }) => {
}> = ({ closeMethod, previewMethod }) => {
const [sounds, setSounds] = useState<Sound[]>([]);
const [icons, setIcons] = useState<Icon[]>([]);
const inputRefMap = useRef<
@ -57,38 +46,44 @@ export const ConfigDialog: FC<{
// 初始化
useEffect(() => {
if (storageTheme) {
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,
});
let storageTheme: Theme<any> | undefined = undefined;
try {
const configString = localStorage.getItem(STORAGEKEY);
if (configString) {
const parseRes = JSON.parse(configString);
if (typeof parseRes === 'object') storageTheme = parseRes;
}
} catch (e) {
//
}
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(
style.dialog,
style.dialogWrapper,
show && style.dialogShow,
'flex-container flex-container'
)}
>
@ -646,3 +640,5 @@ export const ConfigDialog: FC<{
</div>
);
};
export default ConfigDialog;

4
src/components/ThemeChanger.tsx
View File

@ -16,7 +16,7 @@ const BuiltinThemes = [
pddTheme,
];
export const ThemeChanger: FC<{
const ThemeChanger: FC<{
changeTheme: (theme: Theme<any>) => void;
onDiyClick: () => void;
}> = ({ changeTheme, onDiyClick }) => {
@ -75,3 +75,5 @@ export const ThemeChanger: FC<{
</div>
);
};
export default ThemeChanger;