feat(自定义主题): 纯净模式

src/App.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 
 import './App.scss';
-import { PersonalInfo } from './components/PersonalInfo';
+import { BilibiliLink, PersonalInfo } from './components/PersonalInfo';
 import {
     parsePathCustomThemeId,
     parsePathThemeName,
@@ -182,10 +182,16 @@ const Symbol: FC<SymbolProps> = ({ x, y, icon, isCover, status, onClick }) => {
 // 从url初始化主题
 const themeFromPath: string = parsePathThemeName(location.href);
 const customThemeIdFromPath = parsePathCustomThemeId(location.href);
+const CUSTOM_THEME_FAIL_TIP = '查询配置失败';
 
 const App: FC = () => {
-    const [curTheme, setCurTheme] = useState<Theme<any>>(defaultTheme);
+    const [curTheme, setCurTheme] = useState<Theme<any>>(
+        customThemeIdFromPath
+            ? { title: '', icons: [], sounds: [], name: '' }
+            : defaultTheme
+    );
     const [themes, setThemes] = useState<Theme<any>[]>(builtInThemes);
+    const [pureMode, setPureMode] = useState<boolean>(!!customThemeIdFromPath);
 
     const [scene, setScene] = useState<Scene>(makeScene(1, curTheme.icons));
     const [level, setLevel] = useState<number>(1);
@@ -227,13 +233,17 @@ const App: FC = () => {
 
                     try {
                         const customTheme = JSON.parse(content);
-                        setThemes([...themes, customTheme]);
+                        if (!customTheme.pure) {
+                            setPureMode(false);
+                            setThemes([...themes, customTheme]);
+                        }
                         setCurTheme(customTheme);
                     } catch (e) {
                         console.log(e);
                     }
                 })
                 .catch((e) => {
+                    setCurTheme({ ...curTheme, title: CUSTOM_THEME_FAIL_TIP });
                     console.log(e);
                 });
         } else if (themeFromPath) {
@@ -473,32 +483,40 @@ const App: FC = () => {
 
     return (
         <>
-            <h2>{curTheme.title}</h2>
+            <h2>
-            <p>
+                {curTheme.title}{' '}
-                <PersonalInfo />
+                {curTheme.title === CUSTOM_THEME_FAIL_TIP && (
-            </p>
+                    <a href="/">返回首页</a>
-            <h3 className="flex-container flex-center">
+                )}
-                主题:
+            </h2>
-                {/*TODO themes维护方式调整*/}
-                <select
-                    value={themes.findIndex(
-                        (theme) => theme.name === curTheme.name
-                    )}
-                    onChange={(e) =>
-                        setCurTheme(themes[Number(e.target.value)])
-                    }
-                >
-                    {themes.map((t, idx) => (
-                        <option key={t.name} value={idx}>
-                            {t.name}
-                        </option>
-                    ))}
-                </select>
-                Level: {level}
-            </h3>
 
             {curTheme.desc}
 
+            {!pureMode && <PersonalInfo />}
+            <h3 className="flex-container flex-center">
+                {!pureMode && (
+                    <>
+                        主题:
+                        {/*TODO themes维护方式调整*/}
+                        <select
+                            value={themes.findIndex(
+                                (theme) => theme.name === curTheme.name
+                            )}
+                            onChange={(e) =>
+                                setCurTheme(themes[Number(e.target.value)])
+                            }
+                        >
+                            {themes.map((t, idx) => (
+                                <option key={t.name} value={idx}>
+                                    {t.name}
+                                </option>
+                            ))}
+                        </select>
+                    </>
+                )}
+                Level: {level}
+            </h3>
+
             <div className="app">
                 <div className="scene-container">
                     <div className="scene-inner">
@@ -534,20 +552,23 @@ const App: FC = () => {
                 <button className="flex-grow" onClick={levelUp}>
                     下一关
                 </button>
-                {/*<button onClick={test}>测试</button>*/}
             </div>
 
-            <button
+            {!pureMode && (
-                onClick={() => setConfigDialogShow(true)}
+                <button
-                className="zhenghuo-button primary"
+                    onClick={() => setConfigDialogShow(true)}
-            >
+                    className="zhenghuo-button primary"
-                我要整活
+                >
-            </button>
+                    我要整活
+                </button>
+            )}
 
-            <Info />
+            <Info style={{ display: pureMode ? 'none' : 'block' }} />
 
             <BeiAn />
 
+            {pureMode && <BilibiliLink />}
+
             {/*提示弹窗*/}
             {finished && (
                 <div className="modal">

src/components/ConfigDialog.module.scss

@@ -1,6 +1,13 @@
 .dialog {
     text-align: left;
     overflow-y: auto;
+    color: rgb(255 255 255 / 87%);
+    background-color: #242424;
+
+    @media (prefers-color-scheme: light) {
+        color: #213547;
+        background-color: #fff;
+    }
 
     &Wrapper {
         z-index: 10;
@@ -12,7 +19,6 @@
         bottom: 0;
         transform: translateX(-50%) translateY(-100%);
         opacity: 0;
-        background-color: white;
         transition: 0.3s;
         padding: 16px;
         display: flex;
@@ -74,9 +80,16 @@
         transform: translateX(-50%) translateY(-60vh);
         opacity: 0;
         transition: 0.3s;
-        background-color: white;
         border-radius: 8px;
         border: 2px solid #535bf2;
+        color: rgb(255 255 255 / 87%);
+        background-color: #242424;
+
+        // 写冗余了，待优化
+        @media (prefers-color-scheme: light) {
+            color: #213547;
+            background-color: #fff;
+        }
 
         &Show {
             transform: translateX(-50%) translateY(-50%);

src/components/ConfigDialog.tsx

@@ -52,6 +52,7 @@ export const ConfigDialog: FC<{
         error: '',
     });
     const [genLink, setGenLink] = useState<string>('');
+    const [pureCount, setPureCount] = useState<number>(0);
 
     // 初始化
     useEffect(() => {
@@ -63,7 +64,7 @@ export const ConfigDialog: FC<{
                 )
             );
             setIcons(
-                storageTheme.icons.map((icon) => {
+                icons.map((icon) => {
                     if (icon.clickSound === 'button-click')
                         icon.clickSound = '';
                     if (icon.tripleSound === 'triple') icon.tripleSound = '';
@@ -229,6 +230,8 @@ export const ConfigDialog: FC<{
 
         const customTheme: Theme<any> = {
             name: `自定义-${title}`,
+            // 恭喜你发现纯净模式彩蛋🎉，点击文字十次可以开启纯净模式
+            pure: pureCount !== 0 && pureCount % 10 === 0,
             title,
             desc,
             bgm,
@@ -312,9 +315,12 @@ export const ConfigDialog: FC<{
                 'flex-container flex-container'
             )}
         >
-            <p>
+            <p onClick={() => setPureCount(pureCount + 1)}>
                 目前自定义仅支持配置https链接，可网上自行搜索素材复制链接，或者将自己处理好的素材上传第三方存储服务/图床上再复制外链
                 （想白嫖的话自行搜索【免费图床】【免费对象存储】【免费mp3外链】等）
+                {pureCount != 0 &&
+                    pureCount % 10 === 0 &&
+                    '🎉🎉🎉恭喜发现彩蛋！主题分享后将开启纯净模式～'}
             </p>
 
             {/*基本配置*/}

src/components/Info.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
+import React, { CSSProperties, FC } from 'react';
 
-export const Info: FC = () => {
+export const Info: FC<{ style?: CSSProperties }> = ({ style }) => {
     return (
-        <>
+        <div style={style}>
             <p>
                 <span id="busuanzi_container_site_pv">
                     累计访问：<span id="busuanzi_value_site_pv"></span>次
@@ -44,6 +44,6 @@ export const Info: FC = () => {
                     3 Tiles
                 </a>
             </p>
-        </>
+        </div>
     );
 };

src/themes/interface.ts

@@ -20,6 +20,7 @@ export interface Theme<SoundNames> {
     desc?: ReactNode;
     name: string;
     bgm?: string;
+    pure?: boolean;
     icons: Icon<SoundNames>[];
     sounds: Sound<SoundNames>[];
     operateSoundMap?: Record<Operation, SoundNames>;