Merge pull request #10 from StreakingMan/themes/pdd

Themes/pdd

README.md

@@ -27,7 +27,7 @@
 -   撤销：撤销上一次操作，无限次数
 -   洗牌：哗啦哗啦，无限次数
 -   关卡：50 关玩到爽，可直接跳
--   主题：金轮<img style="width:36px" src="src/themes/jinlun/images/肌肉金轮1.png" />、ikun<img style="width:36px" src="src/themes/ikun/images/kun.png" /> 主题等（露出黑脚）
+-   主题：金轮<img style="width:36px" src="src/themes/jinlun/images/肌肉金轮1.png" />、骚猪<img style="width:36px" src="src/themes/pdd/images/1.png" />、ikun<img style="width:36px" src="src/themes/ikun/images/kun.png" /> 主题等（露出黑脚）
 
 开心就好 😄
 

src/App.tsx

@@ -14,10 +14,11 @@ import { Icon, Theme } from './themes/interface';
 import { fishermanTheme } from './themes/fisherman';
 import { jinlunTheme } from './themes/jinlun';
 import { ikunTheme } from './themes/ikun';
+import { pddTheme } from './themes/pdd';
 import { BeiAn } from './themes/BeiAn';
 
 // 主题
-const themes = [defaultTheme, fishermanTheme, jinlunTheme, ikunTheme];
+const themes = [defaultTheme, fishermanTheme, jinlunTheme, ikunTheme, pddTheme];
 
 // 最大关卡
 const maxLevel = 50;
@@ -266,6 +267,11 @@ const App: FC = () => {
             find.x = 100 * Math.floor(8 * Math.random());
             find.y = 700;
             checkCover(scene);
+            // 音效
+            if (soundRefMap.current?.['sound-shift']) {
+                soundRefMap.current['sound-shift'].currentTime = 0;
+                soundRefMap.current['sound-shift'].play();
+            }
         }
     };
 
@@ -280,12 +286,22 @@ const App: FC = () => {
             setQueue(updateQueue);
             find.status = 0;
             checkCover(scene);
+            // 音效
+            if (soundRefMap.current?.['sound-undo']) {
+                soundRefMap.current['sound-undo'].currentTime = 0;
+                soundRefMap.current['sound-undo'].play();
+            }
         }
     };
 
     // 洗牌
     const wash = () => {
         checkCover(washScene(level, scene));
+        // 音效
+        if (soundRefMap.current?.['sound-wash']) {
+            soundRefMap.current['sound-wash'].currentTime = 0;
+            soundRefMap.current['sound-wash'].play();
+        }
     };
 
     // 加大难度
@@ -323,7 +339,6 @@ const App: FC = () => {
 
         // 点击音效
         if (soundRefMap.current) {
-            console.log(soundRefMap.current, symbol.icon);
             soundRefMap.current[symbol.icon.clickSound].currentTime = 0;
             soundRefMap.current[symbol.icon.clickSound].play();
         }
@@ -384,7 +399,7 @@ const App: FC = () => {
 
     return (
         <>
-            <h2>有解的羊了个羊(DEMO)</h2>
+            <h2>{curTheme.title}</h2>
             <h6>
                 <GithubIcon />
             </h6>
@@ -404,6 +419,8 @@ const App: FC = () => {
                 Level: {level}
             </h3>
 
+            {curTheme.desc}
+
             <div className="app">
                 <div className="scene-container">
                     <div className="scene-inner">

src/themes/default/index.ts

@@ -29,6 +29,7 @@ export const defaultSounds: Theme<DefaultSoundNames>['sounds'] = [
 ];
 
 export const defaultTheme: Theme<DefaultSoundNames> = {
+    title: '有解的羊了个羊(DEMO)',
     name: '默认',
     icons: icons.map((icon) => ({
         name: icon,

src/themes/fisherman/index.tsx

@@ -16,6 +16,7 @@ const fishes = Object.entries(imagesUrls).map(([key, value]) => ({
 }));
 
 export const fishermanTheme: Theme<DefaultSoundNames> = {
+    title: '🐟鱼了个鱼🐟',
     name: '钓鱼佬',
     icons: fishes.map(({ name, content }) => ({
         name,

src/themes/ikun/index.tsx

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

src/themes/interface.ts

@@ -12,9 +12,14 @@ interface Sound<T = string> {
     src: string;
 }
 
+type Operation = 'shift' | 'undo' | 'wash';
+
 export interface Theme<SoundNames> {
+    title: string;
+    desc?: ReactNode;
     name: string;
     bgm?: string;
     icons: Icon<SoundNames>[];
     sounds: Sound<SoundNames>[];
+    operateSoundMap?: Record<Operation, SoundNames>;
 }

src/themes/jinlun/index.tsx

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

src/themes/pdd/index.tsx

@@ -0,0 +1,53 @@
+// 骚猪主题
+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', {
+    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 images = 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 pddTheme: Theme<string> = {
+    title: '🐷猪了个猪🐷',
+    desc: (
+        <p>
+            感谢
+            <a
+                href="https://space.bilibili.com/81966051"
+                target="_blank"
+                rel="noreferrer"
+            >
+                猪酱的日常
+            </a>
+            提供素材
+        </p>
+    ),
+    name: '骚猪',
+    bgm: bgm,
+    icons: images.map(({ name, content }) => ({
+        name,
+        content,
+        clickSound: 'button-click',
+        tripleSound: name,
+    })),
+    sounds: [defaultSounds[0], ...sounds],
+};