refactor: 主题初始化、资源缓存、UI交互等重构

src/themes/default/index.ts

@@ -1,4 +1,9 @@
 import { Theme } from '../interface';
+import {
+    DEFAULT_BGM_STORAGE_KEY,
+    DEFAULT_CLICK_SOUND_STORAGE_KEY,
+    DEFAULT_TRIPLE_SOUND_STORAGE_KEY,
+} from '../../utils';
 
 const icons = <const>[
     `🎨`,
@@ -15,27 +20,31 @@ const icons = <const>[
 
 export type DefaultSoundNames = 'button-click' | 'triple';
 
-import soundButtonClickUrl from './sounds/sound-button-click.mp3';
-import soundTripleUrl from './sounds/sound-triple.mp3';
-export const defaultSounds: Theme<DefaultSoundNames>['sounds'] = [
-    {
-        name: 'button-click',
-        src: soundButtonClickUrl,
-    },
-    {
-        name: 'triple',
-        src: soundTripleUrl,
-    },
-];
-
-export const defaultTheme: Theme<DefaultSoundNames> = {
-    title: '有解的羊了个羊(DEMO)',
-    name: '默认',
-    icons: icons.map((icon) => ({
-        name: icon,
-        content: icon,
-        clickSound: 'button-click',
-        tripleSound: 'triple',
-    })),
-    sounds: defaultSounds,
+export const getDefaultTheme: () => Theme<DefaultSoundNames> = () => {
+    return {
+        title: '有解的羊了个羊',
+        desc: '真的可以通关~',
+        dark: true,
+        backgroundColor: '#8dac85',
+        icons: icons.map((icon) => ({
+            name: icon,
+            content: icon,
+            clickSound: 'button-click',
+            tripleSound: 'triple',
+        })),
+        sounds: [
+            {
+                name: 'button-click',
+                src:
+                    localStorage.getItem(DEFAULT_CLICK_SOUND_STORAGE_KEY) || '',
+            },
+            {
+                name: 'triple',
+                src:
+                    localStorage.getItem(DEFAULT_TRIPLE_SOUND_STORAGE_KEY) ||
+                    '',
+            },
+        ],
+        bgm: localStorage.getItem(DEFAULT_BGM_STORAGE_KEY) || '',
+    };
 };

src/themes/fisherman/index.tsx

@@ -1,7 +1,7 @@
 // 钓鱼佬主题
 import React from 'react';
 import { Theme } from '../interface';
-import { DefaultSoundNames, defaultSounds } from '../default';
+import { DefaultSoundNames } from '../default';
 
 const imagesUrls = import.meta.glob('./images/*.png', {
     import: 'default',
@@ -17,12 +17,11 @@ const fishes = Object.entries(imagesUrls).map(([key, value]) => ({
 
 export const fishermanTheme: Theme<DefaultSoundNames> = {
     title: '🐟鱼了个鱼🐟',
-    name: '钓鱼佬',
     icons: fishes.map(({ name, content }) => ({
         name,
         content,
         clickSound: 'button-click',
         tripleSound: 'triple',
     })),
-    sounds: defaultSounds,
+    sounds: [],
 };

src/themes/ikun/index.tsx

@@ -53,7 +53,6 @@ const icons = Object.entries(imagesUrls).map(([key, value]) => ({
 
 export const ikunTheme: Theme<SoundNames> = {
     title: '🐔鸡了个鸡🐔',
-    name: 'iKun',
     bgm,
     icons: icons.map(({ name, content }) => ({
         name,

src/themes/interface.ts

@@ -14,14 +14,14 @@ export interface Sound<T = string> {
 
 type Operation = 'shift' | 'undo' | 'wash';
 
-// TODO title name 冗余
 export interface Theme<SoundNames> {
     title: string;
-    desc?: ReactNode;
-    name: string;
+    desc?: string;
     bgm?: string;
     background?: string;
+    backgroundColor?: string;
     backgroundBlur?: boolean;
+    dark?: boolean;
     pure?: boolean;
     icons: Icon<SoundNames>[];
     sounds: Sound<SoundNames>[];

src/themes/jinlun/index.tsx

@@ -25,7 +25,6 @@ const icons = Object.entries(imagesUrls).map(([key, value]) => ({
 
 export const jinlunTheme: Theme<string> = {
     title: '🐎马了个马🐎',
-    name: '金轮',
     icons: icons.map(({ name, content }) => ({
         name,
         content,

src/themes/ow/index.tsx

@@ -1,50 +0,0 @@
-import { Theme } from '../interface';
-import React from 'react';
-import { defaultSounds } from '../default';
-
-const soundUrls = import.meta.glob('./sounds/*.mp3', {
-    import: 'default',
-    eager: true,
-});
-
-const sounds = Object.entries(soundUrls).map(([key, value]) => ({
-    name: key.slice(9, -4),
-    src: value,
-})) as Theme<string>['sounds'];
-
-const imagesUrls = import.meta.glob('./images/*.png', {
-    import: 'default',
-    eager: true,
-});
-
-const icons = Object.entries(imagesUrls).map(([key, value]) => ({
-    name: key.slice(9, -4),
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    content: <img src={value} alt="" />,
-}));
-
-export const owTheme: Theme<string> = {
-    title: '守望先锋',
-    desc: (
-        <p>
-            感谢
-            <a
-                href="https://space.bilibili.com/228122468"
-                target="_blank"
-                rel="noreferrer"
-            >
-                白板特工华南虎
-            </a>
-            提供素材
-        </p>
-    ),
-    name: 'OW',
-    icons: icons.map(({ name, content }) => ({
-        name,
-        content,
-        clickSound: 'button-click',
-        tripleSound: name === 'ow' ? 'triple' : name,
-    })),
-    sounds: [...defaultSounds, ...sounds],
-};

src/themes/pdd/index.tsx

@@ -1,7 +1,6 @@
 // 骚猪主题
 import React from 'react';
 import { Theme } from '../interface';
-import { defaultSounds } from '../default';
 import bgm from './sounds/bgm.mp3';
 
 const soundUrls = import.meta.glob('./sounds/*.mp3', {
@@ -28,20 +27,7 @@ const images = Object.entries(imagesUrls).map(([key, value]) => ({
 
 export const pddTheme: Theme<string> = {
     title: '🐷猪了个猪🐷',
-    desc: (
-        <p>
-            感谢
-            <a
-                href="https://space.bilibili.com/81966051"
-                target="_blank"
-                rel="noreferrer"
-            >
-                猪酱的日常
-            </a>
-            提供素材
-        </p>
-    ),
-    name: '骚猪',
+    desc: '感谢 @猪酱的日常 提供素材',
     bgm: bgm,
     icons: images.map(({ name, content }) => ({
         name,
@@ -49,5 +35,5 @@ export const pddTheme: Theme<string> = {
         clickSound: 'button-click',
         tripleSound: name,
     })),
-    sounds: [defaultSounds[0], ...sounds],
+    sounds,
 };