docs: diy指南

README.md

@@ -29,8 +29,7 @@
 -   关卡：50 关玩到爽，可直接跳
 -   内置主题：金轮<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" />（露出黑脚）、
+    ikun<img style="width:36px" src="src/themes/ikun/images/kun.png" />（露出黑脚）等
-    OW<img style="width:36px" src="src/themes/ow/images/ow.png" />主题等
 -   自定义主题：自定义图片和音效，快速整活
 
 开心就好 😄
@@ -69,36 +68,8 @@ vite+react 实现，欢迎 star、issue、pr、fork（尽量标注原仓库地
 
 ## 二次开发
 
-### 环境准备
+项目的自定义主题功能设计到后台存储（Bmob 懒人数据库），如果您只是简单的整活，可能并不需要相关的逻辑。
-
+详细的二次开发说面移步这里[DIY 指南](/diy/README.md)
-安装以下内容
-
--   [git](https://git-scm.com/)
--   [node](https://nodejs.org/en/)
-
-### 克隆仓库
-
-直接克隆本仓库或者 fork
-
-```shell
-git clone https://github.com/StreakingMan/solvable-sheep-game.git
-```
-
-### 依赖安装
-
-克隆到本地后，在项目内敲命令
-
-```shell
-npm install -g yarn
-
-yarn install
-```
-
-### 调试运行
-
-```shell
-yarn dev
-```
 
 ## License
 

diy/README.md

@@ -0,0 +1,87 @@
+# DIY 指南
+
+游戏的核心逻辑已经封装到了 [`src/components/Game.tsx`](src/components/Game.tsx) ，方便大家魔改，
+主题配置的类型声明见 [`src/themes/interface.ts`](src/themes/interface.ts)
+
+## 准备工作
+
+### 环境准备
+
+安装以下内容
+
+-   [git](https://git-scm.com/)
+-   [node](https://nodejs.org/en/)
+
+### 克隆仓库
+
+直接克隆本仓库或者 fork 后，安装项目依赖
+
+```shell
+git clone https://github.com/StreakingMan/solvable-sheep-game.git
+cd solvable-sheep-game
+npm install -g yarn
+yarn install
+```
+
+## 素材配置
+
+原项目的自定义后台使用了 Bmob 后台，DIY 时并不需要相关的逻辑，您只需要改动 `diy` 文件下的文件即可： 图片以及音频素材复制到 `diy/public` 下，并配置 `diy/diy.theme.json`
+文件即可，配置格式见[`src/themes/interface.ts`](src/themes/interface.ts)，以下是配置字段的说明：
+
+-   title 标题
+-   desc 描述
+-   bgm 背景音乐文件相对于 `diy/public` 的路径
+-   dark 深色模式（标题为亮色）
+-   background 背景图片文件相对于 `diy/public` 的路径
+-   backgroundBlur 背景图片是否添加毛玻璃效果
+-   backgroundColor 背景颜色 CSS 色值
+-   pure 纯净模式，DIY 时已开启
+-   sounds 音效数组
+    -   name 名称
+    -   src 音效文件相对于 `diy/public` 的路径
+-   icons 图标数组
+    -   name 名称，三连判断的依据
+    -   content 图片文件相对于 `diy/public` 的路径
+    -   clickSound 点击音效的 `name`
+    -   triple 三连音效的 `name`
+-   operateSoundMap 操作音效
+    -   shift 弹出音效的 `name`
+    -   undo 撤销音效的 `name`
+    -   wash 洗牌音效的 `name`
+
+配置完成后调试运行，点击链接即可
+
+```shell
+yarn dev:diy
+
+#   ➜  Local:   http://localhost:5556/
+```
+
+## 构建发布
+
+运行命令
+
+```shell
+yarn build:diy
+```
+
+会在 `diy/diy-dist` 下，生成静态资源，直接将这些文件复制服务器上代理即可。如果嫌麻烦，推荐使用 [vercel](https://vercel.com/) 一键部署（每月免费 100G 流量），
+将更改后的项目推到自己的 github（gitlab，bitbucket 同样支持）仓库， 使用 github 账号登录 vercel 后导入该项目，构建模版选择 vite，
+构建命令更改为 `yarn build:diy` 即可 。
+
+<img src="./vercel.png" alt="" style="width: 400px"/>
+
+导入后项目有更新会自动构建，并且会生成vercel的二级链接（也可以自定义域名）。
+
+## 其他
+
+如果您想体验项目的完整功能，只需要注册一个 [Bmob](https://www.bmobapp.com/) 账号即可，
+注册后新建应用（有一年的白嫖版，免费请求数虽然很客观，但并发数有限制，请根据自己的实际流量
+选择升级套餐，或者其他存储方案）
+
+新建应用后，去到设置页面拷贝密钥和安全码到项目的 `.env` 文件中
+
+- VITE_BMOB_SECRETKEY=设置->应用密钥->SecretKey
+- VITE_BMOB_SECCODE=设置->安全验证->Api安全码
+
+ps: 如果您的项目托管在公共仓库中，请注意保护密钥，本地使用 `.env.local` 进行配置

diy/diy.theme.json

@@ -3,9 +3,10 @@
     "desc": "描述",
     "bgm": "/sound-disco.mp3",
     "dark": true,
+    "background": "",
+    "backgroundBlur": false,
     "backgroundColor": "#8dac85",
     "pure": true,
-    "backgroundBlur": false,
     "icons": [
         {
             "name": "1",

src/main.tsx

@@ -57,8 +57,6 @@ Bmob.initialize(
     import.meta.env.VITE_BMOB_SECCODE
 );
 
-console.log(import.meta.env);
-
 const loadTheme = () => {
     // 请求主题
     if (customThemeIdFromPath) {