chore(release): 1.1.0

# Conflicts:
#	src/App.tsx

.env

@@ -0,0 +1,2 @@
+VITE_BMOB_SECRETKEY=yourBmobAppSecretKey
+VITE_BMOB_SECCODE=youBmobAppSecurityCode

.eslintrc.cjs

@@ -25,5 +25,7 @@ module.exports = {
     rules: {
         'prettier/prettier': 'error',
         '@typescript-eslint/no-explicit-any': 0,
+        '@typescript-eslint/ban-ts-comment': 0,
+        '@typescript-eslint/no-non-null-assertion': 0,
     },
 };

.gitignore

@@ -8,7 +8,8 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-# dist
+dist
+diy-dist
 dist-ssr
 *.local
 

.stylelintrc.cjs

@@ -9,4 +9,8 @@ module.exports = {
         'stylelint-config-standard-scss',
         'stylelint-config-prettier-scss',
     ],
+    rules: {
+        // 后续统一
+        'selector-class-pattern': '^[a-zA-Z0-9-_]+$',
+    },
 };

.versionrc.cjs

@@ -1,5 +1,5 @@
 module.exports = {
     scripts: {
-        postbump: 'yarn build && git add dist/*',
+        // postbump: 'yarn build && git add dist/*',
     },
 };

CHANGELOG.md

@@ -2,6 +2,105 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.1.0](https://github.com/StreakingMan/solvable-sheep-game/compare/v1.0.1...v1.1.0) (2023-05-04)
+
+
+### Features
+
+* 本地图片文件压缩 ([ffbb384](https://github.com/StreakingMan/solvable-sheep-game/commit/ffbb38495f2c8c124f6039496f613e6c416d9db4))
+
+
+### Bug Fixes
+
+* 图片文件大小校验逻辑 ([be0faff](https://github.com/StreakingMan/solvable-sheep-game/commit/be0faff9fdf4aea6a2659325520d68b2f348c656))
+* 自定义主题编辑回显 ([ffabf68](https://github.com/StreakingMan/solvable-sheep-game/commit/ffabf6805f81dd03bd070dd09a32e51a51d1138f))
+* 音频文件切换为minio外链 ([680811c](https://github.com/StreakingMan/solvable-sheep-game/commit/680811c50cbef3fec80b73407daddcf48847f3bd))
+
+### [1.0.1](https://github.com/StreakingMan/solvable-sheep-game/compare/v1.0.0...v1.0.1) (2022-10-19)
+
+
+### Bug Fixes
+
+* diy模式得分页再来一次按钮显示 ([c667103](https://github.com/StreakingMan/solvable-sheep-game/commit/c6671038a831fd069b930303aa3bc841b5317571))
+* 主题配置表单样式优化 ([5579d5a](https://github.com/StreakingMan/solvable-sheep-game/commit/5579d5a32e87a37c50d33621551dd39f7a0c74e5))
+* 主题配置表单样式优化 ([8dec5b6](https://github.com/StreakingMan/solvable-sheep-game/commit/8dec5b6420b256ee6d87689d6790d4da81171913))
+* 排行榜滚动定位 ([5353a40](https://github.com/StreakingMan/solvable-sheep-game/commit/5353a4041615589ac57d0cd8ce1ebca49372211c))
+* 纯净模式隐藏二维码 ([3913982](https://github.com/StreakingMan/solvable-sheep-game/commit/3913982716d570d11afbeacdad8dd5d6d522eb37))
+* 通关成功状态判断，完成游戏后无法点击问题 ([331b96c](https://github.com/StreakingMan/solvable-sheep-game/commit/331b96c8f0717bbb7912984b38cfde8622ea9bc6))
+
+## [1.0.0](https://github.com/StreakingMan/solvable-sheep-game/compare/v0.0.10...v1.0.0) (2022-10-12)
+
+
+### Features
+
+* 排行榜 ([9682d31](https://github.com/StreakingMan/solvable-sheep-game/commit/9682d31c495d8c7229003e68b79a15430a4ecb68))
+
+
+### Bug Fixes
+
+* wxQrcode路径 ([cc06bb1](https://github.com/StreakingMan/solvable-sheep-game/commit/cc06bb14e3a89411478dc32e880a49ef692b2e3c))
+* 主题ID恢复为一次性，交互优化 ([d070c67](https://github.com/StreakingMan/solvable-sheep-game/commit/d070c67d3f49d8dbf89d420b72d02896a2d49508))
+* 分数缓存逻辑调整 ([a8a6312](https://github.com/StreakingMan/solvable-sheep-game/commit/a8a6312e2a5d67639f50e185407915d554d28127))
+* 图标路径判断问题 ([fc7a880](https://github.com/StreakingMan/solvable-sheep-game/commit/fc7a8806078cf0c1c343830cb3c0a3ba3aa7cbf0))
+* 排行榜样式调整 ([639b1a3](https://github.com/StreakingMan/solvable-sheep-game/commit/639b1a3db11d3f21d88e39e8408fadab7dfa4121))
+* 自定义主题icons完成度校验 ([01d8561](https://github.com/StreakingMan/solvable-sheep-game/commit/01d85610ebb2f3dcc7da7b2fa038c168414fc49a))
+
+### [0.0.10](https://github.com/StreakingMan/solvable-sheep-game/compare/v0.0.9...v0.0.10) (2022-10-11)
+
+
+### Features
+
+* diy模式区分入口 ([34e89fe](https://github.com/StreakingMan/solvable-sheep-game/commit/34e89fe2328637fea5dc8b1f7f388defe720ebc9))
+* 暂时关闭二维码生成功能 ([eaa56b0](https://github.com/StreakingMan/solvable-sheep-game/commit/eaa56b00700c4f50efe0e2a4536240dffc73f33f))
+* 本地文件配置存储 ([2d7de33](https://github.com/StreakingMan/solvable-sheep-game/commit/2d7de338faafc76c55cf9f90b84f2b6672460255))
+* 计时、最大关卡配置 ([b7482fa](https://github.com/StreakingMan/solvable-sheep-game/commit/b7482fa209db447a92772644579aca75dfc6de79))
+* 配置上传时间间隔限制 ([c9cc911](https://github.com/StreakingMan/solvable-sheep-game/commit/c9cc9114c32a5f1bd9e66aa089d9309a07588d54))
+
+
+### Bug Fixes
+
+* diy按钮位置调整 ([657422e](https://github.com/StreakingMan/solvable-sheep-game/commit/657422eb4fce3d169e594578e890cb15dbdc2e4c))
+* diy模式的图片路径 ([0f00725](https://github.com/StreakingMan/solvable-sheep-game/commit/0f0072585b9af704c92fcef3e1ef5faef477f2e6))
+* 交互优化 ([89eab21](https://github.com/StreakingMan/solvable-sheep-game/commit/89eab211e49652198e1a54f288aeb378728e3a87))
+
+### [0.0.9](https://github.com/StreakingMan/solvable-sheep-game/compare/v0.0.8...v0.0.9) (2022-10-04)
+
+
+### Features
+
+* 关卡进度缓存 ([0afeac0](https://github.com/StreakingMan/solvable-sheep-game/commit/0afeac0f8716bef43d67dfb999de31ac4fed8f01))
+* 缓存自定义主题 ([c0de917](https://github.com/StreakingMan/solvable-sheep-game/commit/c0de917641bd8ed08a5a4f1fda9c774770d879ec))
+
+
+### Bug Fixes
+
+* 防止音频配置错误时阻塞主流程 ([ad01eb2](https://github.com/StreakingMan/solvable-sheep-game/commit/ad01eb2dbb3519388c64ffe0cda8dddc457f0ce7))
+* 禁止图片拖动 ([e7ae319](https://github.com/StreakingMan/solvable-sheep-game/commit/e7ae319ecfddb4f0726355e9003d9f9f5e0c304a))
+* 默认音效填充 ([e4c6a2d](https://github.com/StreakingMan/solvable-sheep-game/commit/e4c6a2d584648b35735ede614a6f8683521e012e))
+* 项目链接 ([e867a92](https://github.com/StreakingMan/solvable-sheep-game/commit/e867a927b3e2faa831f8c462af059874bb59db5b))
+
+### [0.0.8](https://github.com/StreakingMan/solvable-sheep-game/compare/v0.0.7...v0.0.8) (2022-09-26)
+
+
+### Features
+
+* **自定义主题:** 纯净模式 ([0127253](https://github.com/StreakingMan/solvable-sheep-game/commit/0127253fddaa4236b14e6ff7306a7b9f5c840c49))
+* **自定义主题:** 背景图片配置 ([ae7dab7](https://github.com/StreakingMan/solvable-sheep-game/commit/ae7dab752c067641b92890e3ec547e6ecd2f6b0c))
+
+
+### Bug Fixes
+
+* **自定义主题:** bgm链接判断 ([f694d9a](https://github.com/StreakingMan/solvable-sheep-game/commit/f694d9af726337360cffa348e1079c56ef6b15f5))
+
+### [0.0.7](https://github.com/StreakingMan/solvable-sheep-game/compare/v0.0.6...v0.0.7) (2022-09-24)
+
+
+### Features
+
+* 接入Bmob储存自定义配置 ([f6681ca](https://github.com/StreakingMan/solvable-sheep-game/commit/f6681cabb0a6090848456352facd2f36772e506e))
+* 生成二维码 ([f36c99b](https://github.com/StreakingMan/solvable-sheep-game/commit/f36c99b3858a2913b4383ba4dd58d144405f79ac))
+* 自定义主题 ([e35ddfa](https://github.com/StreakingMan/solvable-sheep-game/commit/e35ddfa44e0e7ef87f5cec48b9c1404109c14584))
+
 ### [0.0.6](https://github.com/StreakingMan/solvable-sheep-game/compare/v0.0.5...v0.0.6) (2022-09-23)
 
 

README.md

@@ -19,77 +19,66 @@
 **声明：本项目仅供交流，禁止商用！否则后果自负。基于此项目的二创都是欢迎的，但非二创请不要删除原仓库地址
 （啥都不改唯独删除来源我真的会谢 🙄️，请尊重他人劳动成果）**
 
-![qrcode.png](qrcode.png)
+<img src="qrcode.png" style="width: 250px;" alt="体验地址二维码">
 
 ## Feature
 
 -   弹出：弹出队列左侧第一个，无限次数
 -   撤销：撤销上一次操作，无限次数
 -   洗牌：哗啦哗啦，无限次数
--   关卡：50 关玩到爽，可直接跳
--   主题：金轮<img style="width:36px" src="src/themes/jinlun/images/肌肉金轮1.png" />、
+-   关卡：20 关玩到爽，可直接跳
+-   内置主题：金轮<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" />（露出黑脚）、
-    OW<img style="width:36px" src="src/themes/ow/images/ow.png" />主题等
+    ikun<img style="width:36px" src="src/themes/ikun/images/kun.png" />（露出黑脚）等
+-   自定义主题：自定义图片和音效，快速整活
+-   排行榜：皇城 pk
 
 开心就好 😄
 
-![preview.png](preview.png)
+![previews.png](previews.png)
 
 ## Contribution
 
 vite+react 实现，欢迎 star、issue、pr、fork（尽量标注原仓库地址）
 
-切换主题参考 `src/themes` 下的代码，欢迎整活
+## Related Repo
+
+<a href="https://github.com/opendilab" target="_blank">opendilab</a> 的 AI 整活！移步
+<a href="https://github.com/opendilab/DI-sheep" target="_blank">DI-sheep：深度强化学习 + 羊了个羊</a>
+
+<img style="width:250px" src="https://github.com/opendilab/DI-sheep/raw/master/ui/public/demo.gif" alt="" />
 
 ## Todo List
 
 -   [x] 基础操作
 -   [x] 关卡生成
--   [ ] UI/UX 优化
+-   [x] UI/UX 优化
 -   [x] 多主题
--   [ ] 计时
+-   [x] 计时、得分、保存进度机制
+-   [x] 排行榜
 -   [ ] 性能优化
 -   [x] BGM/音效
 -   [ ] ~~点击时的缓冲队列，优化交互动画效果~~
 -   [x] 该游戏似乎涉嫌抄袭，考证后补充来源说明
--   [ ] 桌面应用
+-   [ ] ~~桌面应用~~
 -   [x] 路径区分主题
--   [ ] 主题自定义
+-   [x] 主题自定义
+-   [x] 本地图片、音频配置
 
 ## 二次开发
 
-### 环境准备
-
-安装以下内容
-
--   [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
-```
+项目的自定义主题功能涉及到后台存储（Bmob 懒人数据库），如果您只是简单的整活，可能并不需要相关的逻辑。
+详细的二次开发说明请移步这里[DIY 指南](/diy/README.md)
 
 ## License
 
 [GNU GENERAL PUBLIC LICENSE Version 3](LICENSE.md)
+
+## 资助
+
+~~由于各种白嫖的静态资源托管、后台服务的免费额度都已用完，目前自费升级了相关套餐。~~
+如果您喜欢这个项目，觉得本项目对你有帮助的话，可以扫描下方付款码请我喝杯咖啡 ☕️/~~分摊后台服务费用~~～ 😘
+
+2023.5.5 更新：Bmob 服务到期，后台服务已下线，相关功能暂时无法使用，如有需要请自行搭建后台服务
+
+![wxQrCodes.png](wxQrCodes.png)

dist/assets/index.15f870d5.css

@@ -1 +0,0 @@
-#root{text-align:center;width:100%;max-width:500px;margin:0 auto}.app{width:100%;margin:0 auto}.scene-container{width:100%;padding-bottom:100%;position:relative;margin:10% 0}.scene-inner{position:absolute;left:0;right:0;bottom:0;top:0;overflow:visible;font-size:28px}.symbol{width:12.5%;padding-bottom:12.5%;position:absolute;transition:.15s;left:0;top:0;border-radius:8px}.symbol-inner{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;justify-content:center;align-items:center;border-radius:8px;border:2px solid #444;transition:.3s;overflow:hidden;user-select:none}.symbol-inner img{width:100%;height:100%;object-fit:cover}.queue-container{border-radius:8px;width:100%;padding-bottom:15%;border:2px solid gray;margin-bottom:16px}.flex-container{display:flex;gap:8px}.flex-center{justify-content:center;align-items:center}.flex-grow{flex-grow:1}.flex-between{justify-content:space-between;align-items:center}.modal{position:fixed;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(10px);background-color:#0000001a;top:0;left:0}.bgm-button{position:fixed;left:0;top:0;padding:4px;width:36px;height:36px}:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0 32px}h1{font-size:3.2em;line-height:1.1}select{border:2px solid gray;border-radius:4px;padding:4px 8px}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s;word-break:keep-all;outline:none}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}

dist/github.svg

@@ -1,5 +0,0 @@
-<svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true"
-     class="octicon octicon-mark-github v-align-middle">
-    <path fill-rule="evenodd"
-          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-</svg>

dist/index.html

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta
-            name="description"
-            content="无限道具版羊了个羊、可以通关的羊了个羊"
-        />
-        <title>有解的羊了个羊</title>
-        <script>
-            var _hmt = _hmt || [];
-            (function () {
-                var hm = document.createElement('script');
-                hm.src =
-                    'https://hm.baidu.com/hm.js?0a5701b62c5da53aa10f9096fccb377c';
-                var s = document.getElementsByTagName('script')[0];
-                s.parentNode.insertBefore(hm, s);
-            })();
-        </script>
-      <script type="module" crossorigin src="/assets/index.b678e54a.js"></script>
-      <link rel="stylesheet" href="/assets/index.15f870d5.css">
-    </head>
-    <body>
-        <div id="root"></div>
-        
-        <script
-            async
-            src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
-        ></script>
-        <script async>
-            // 如果您基于此项目二创，可以删除以下代码
-            // 否则请标明原仓库地址
-            setTimeout(()=>{
-                const {hostname} = location
-                if(hostname!=='localhost'&&!hostname.endsWith('streakingman.com')){
-                    const a = document.createElement('a')
-                    a.setAttribute('href','https://github.com/StreakingMan/solvable-sheep-game')
-                    a.setAttribute('target','_blank')
-                    a.innerText='本项目仅供交流，禁止商业用途，点击查看原github仓库'
-                    const p = document.createElement('p')
-                    p.style.textAlign = 'center'
-                    p.append(a)
-                    document.body.prepend(p)
-                }
-            },5000)
-        </script>
-    </body>
-</html>

diy/README.md

@@ -0,0 +1,103 @@
+# DIY 指南
+
+游戏的核心逻辑已经封装到了 `src/components/Game.tsx` ，方便大家魔改， 主题配置的类型声明见 `src/themes/interface.ts`
+
+你可以先通过超酷的[stackblitz](https://stackblitz.com/edit/solvable-sheep-game?file=diy%2Fdiy.theme.json&terminal=dev:diy)
+在线体验一番（等待依赖安装完成后，编辑配置将实时更新）再回来看这里的指南。
+
+## 准备工作
+
+### 环境准备
+
+安装以下内容
+
+-   [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` ，
+
+以下是`diy.theme.json`配置字段的说明：
+
+-   title 标题
+-   desc 描述
+-   bgm 背景音乐文件相对于 `diy/public` 的路径
+-   dark 深色模式（标题为亮色）
+-   background 背景图片文件相对于 `diy/public` 的路径
+-   backgroundBlur 背景图片是否添加毛玻璃效果
+-   backgroundColor 背景颜色 CSS 色值
+-   pure 纯净模式，DIY 时已开启
+-   maxLevel 最大关卡数，默认 50
+-   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` 输出地址改为 `diy/diy-dist` 即可 。见下图：
+
+<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` 进行配置
+
+应用创建后，点击【云数据库】，创建两个表 `config` 和 `file`
+
+`config` 表用来存储自定义配置的 json 字符串，需要新增 `content` 列
+
+`rank` 表，储存排名信息
+![img.png](datebase-rank.png)
+
+最后，开发和打包命令分别使用 `yarn dev` 和 `yarn build` 即可

diy/diy.theme.json

@@ -0,0 +1,100 @@
+{
+    "title": "标题",
+    "desc": "描述",
+    "bgm": "/sound-disco.mp3",
+    "dark": true,
+    "background": "",
+    "backgroundBlur": false,
+    "backgroundColor": "#8dac85",
+    "pure": true,
+    "maxLevel": 50,
+    "icons": [
+        {
+            "name": "1",
+            "content": "/1.png",
+            "clickSound": "button-click",
+            "tripleSound": "triple"
+        },
+        {
+            "name": "2",
+            "content": "/2.png",
+            "clickSound": "button-click",
+            "tripleSound": "triple"
+        },
+        {
+            "name": "3",
+            "content": "/3.png",
+            "clickSound": "button-click",
+            "tripleSound": "triple"
+        },
+        {
+            "name": "4",
+            "content": "/4.png",
+            "clickSound": "button-click",
+            "tripleSound": "triple"
+        },
+        {
+            "name": "5",
+            "content": "/5.png",
+            "clickSound": "button-click",
+            "tripleSound": "triple"
+        },
+        {
+            "name": "6",
+            "content": "/6.png",
+            "clickSound": "button-click",
+            "tripleSound": "triple"
+        },
+        {
+            "name": "7",
+            "content": "/7.png",
+            "clickSound": "button-click",
+            "tripleSound": "triple"
+        },
+        {
+            "name": "8",
+            "content": "/8.png",
+            "clickSound": "button-click",
+            "tripleSound": "triple"
+        },
+        {
+            "name": "9",
+            "content": "/9.png",
+            "clickSound": "button-click",
+            "tripleSound": "triple"
+        },
+        {
+            "name": "10",
+            "content": "/10.png",
+            "clickSound": "button-click",
+            "tripleSound": "triple"
+        }
+    ],
+    "sounds": [
+        {
+            "name": "sound-undo",
+            "src": "/sound-undo.mp3"
+        },
+        {
+            "name": "sound-shift",
+            "src": "/sound-shift.mp3"
+        },
+        {
+            "name": "sound-wash",
+            "src": "/sound-wash.mp3"
+        },
+        {
+            "name": "button-click",
+            "src": "/sound-button-click.mp3"
+        },
+        {
+            "name": "triple",
+            "src": "/sound-triple.mp3"
+        }
+    ],
+    "operateSoundMap": {
+        "shift": "sound-shift",
+        "undo": "sound-undo",
+        "wash": "sound-wash"
+    }
+}

diy/diy.vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    root: 'diy',
+    publicDir: './public',
+    build: {
+        outDir: 'diy-dist',
+    },
+    define: {
+        __DIY__: true,
+    },
+    server: {
+        host: true,
+        port: 5556,
+    },
+});

diy/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="./public/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="description"
+            content="无限道具版羊了个羊、可以通关的羊了个羊"
+        />
+        <title>有解的羊了个羊</title>
+        <style>
+            html,
+            body {
+                margin: 0;
+                padding: 0;
+                background-color: white;
+                transition: background-color 0.3s 0.4s;
+                color: rgb(0 0 0 / 60%);
+            }
+            a {
+                color: currentColor;
+                text-decoration: inherit;
+            }
+            #root {
+                transition: opacity 0.5s;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script>
+            // vite没有global，手动声明
+            var global = global || window;
+        </script>
+        <script type="module" src="./main.tsx"></script>
+    </body>
+</html>

diy/main.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from '../src/App';
+import '../src/styles/global.scss';
+import '../src/styles/utils.scss';
+import { domRelatedOptForTheme } from '../src/utils';
+import theme from './diy.theme.json';
+
+domRelatedOptForTheme(theme);
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+        <App theme={theme} />
+    </React.StrictMode>
+);

index.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta
             name="description"
-            content="无限道具版羊了个羊、可以通关的羊了个羊"
+            content="无限道具版羊了个羊、可以通关的羊了个羊、羊了个羊生成器"
         />
         <title>有解的羊了个羊</title>
         <script>
@@ -19,30 +19,207 @@
                 s.parentNode.insertBefore(hm, s);
             })();
         </script>
+        <style>
+            html,
+            body {
+                margin: 0;
+                padding: 0;
+                background-color: white;
+                transition: background-color 0.3s 0.4s;
+                color: rgb(0 0 0 / 60%);
+            }
+            a {
+                color: currentColor;
+                text-decoration: inherit;
+            }
+            #root {
+                transition: opacity 0.5s;
+            }
+            #loading {
+                height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                gap: 32px;
+                overflow: visible;
+            }
+            @keyframes move {
+                0% {
+                    left: 0;
+                    top: 0;
+                    height: 50%;
+                    width: 50%;
+                }
+
+                12.5% {
+                    left: 0;
+                    top: 0;
+                    height: 50%;
+                    width: 100%;
+                }
+
+                25% {
+                    left: 50%;
+                    top: 0;
+                    height: 50%;
+                    width: 50%;
+                }
+
+                37.5% {
+                    left: 50%;
+                    top: 0;
+                    height: 100%;
+                    width: 50%;
+                }
+
+                50% {
+                    left: 50%;
+                    top: 50%;
+                    height: 50%;
+                    width: 50%;
+                }
+
+                62.5% {
+                    left: 0;
+                    top: 50%;
+                    height: 50%;
+                    width: 100%;
+                }
+
+                75% {
+                    left: 0;
+                    top: 50%;
+                    height: 50%;
+                    width: 50%;
+                }
+
+                87.5% {
+                    left: 0;
+                    top: 0;
+                    height: 100%;
+                    width: 50%;
+                }
+            }
+            @keyframes wave {
+                0% {
+                    transform: translateY(30px);
+                }
+                100% {
+                    transform: translateY(-30px);
+                }
+            }
+            .loadingBlock {
+                position: absolute;
+                transition: 0.6s;
+                border-radius: 12px;
+                left: 0;
+                top: 0;
+                height: 50%;
+                width: 50%;
+                animation: move 1s infinite ease-in-out;
+            }
+            .loadingBlockContainer {
+                width: 64px;
+                height: 64px;
+                position: relative;
+            }
+            #loading.error .loadingBlock,
+            #loading.success .loadingBlock {
+                animation-play-state: paused;
+            }
+            .loadingBlock1 {
+                background-color: #8dac8588;
+            }
+            #loading.error .loadingBlock1 {
+                transform: rotate(75deg) translateX(30px);
+                animation: wave 1s infinite alternate;
+            }
+            #loading.success .loadingBlock1 {
+                transform: rotate(75deg) translateX(200px) scale(4);
+                transition-delay: 0.1s;
+            }
+            .loadingBlock2 {
+                background-color: #8dac8566;
+                animation-delay: 0.375s;
+            }
+            #loading.error .loadingBlock2 {
+                transform: rotate(175deg) translateX(10px);
+            }
+            #loading.success .loadingBlock2 {
+                transform: rotate(175deg) translateX(200px) scale(2);
+                transition-delay: 0.05s;
+            }
+            .loadingBlock3 {
+                background-color: #8dac8544;
+                animation-delay: 0.75s;
+            }
+            #loading.error .loadingBlock3 {
+                transform: rotate(225deg) translateX(20px);
+            }
+            #loading.success .loadingBlock3 {
+                transform: rotate(225deg) translateX(200px) scale(3);
+            }
+            #loadingTips {
+                font-size: 0.8em;
+                line-height: 1.8;
+                text-align: center;
+                transition: 0.3s;
+            }
+            #loading.success #loadingTips {
+                transform: translateY(300px);
+                opacity: 0;
+            }
+            #backHomeTip {
+                visibility: hidden;
+            }
+        </style>
     </head>
     <body>
-        <div id="root"></div>
+        <div id="root">
+            <!--数据加载提示在react渲染之前做-->
+            <div id="loading" class="loading">
+                <div class="loadingBlockContainer">
+                    <div class="loadingBlock loadingBlock1"></div>
+                    <div class="loadingBlock loadingBlock2"></div>
+                    <div class="loadingBlock loadingBlock3"></div>
+                </div>
+                <div id="loadingTips">
+                    <span id="loadingText">加载中...</span><br />
+                    <span id="backHomeTip">
+                        稍后再试或
+                        <a href="/" style="color: #646cff"> 返回首页 </a>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <script>
+            // vite没有global，手动声明
+            var global = global || window;
+        </script>
         <script type="module" src="/src/main.tsx"></script>
-        <script
-            async
-            src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
-        ></script>
         <script async>
             // 如果您基于此项目二创，可以删除以下代码
             // 否则请标明原仓库地址
-            setTimeout(()=>{
-                const {hostname} = location
-                if(hostname!=='localhost'&&!hostname.endsWith('streakingman.com')){
-                    const a = document.createElement('a')
-                    a.setAttribute('href','https://github.com/StreakingMan/solvable-sheep-game')
-                    a.setAttribute('target','_blank')
-                    a.innerText='本项目仅供交流，禁止商业用途，点击查看原github仓库'
-                    const p = document.createElement('p')
-                    p.style.textAlign = 'center'
-                    p.append(a)
-                    document.body.prepend(p)
+            setTimeout(() => {
+                const { hostname } = location;
+                if (
+                    hostname !== 'localhost' &&
+                    !hostname.endsWith('streakingman.com')
+                ) {
+                    const a = document.createElement('a');
+                    a.setAttribute(
+                        'href',
+                        'https://github.com/StreakingMan/solvable-sheep-game'
+                    );
+                    a.setAttribute('target', '_self');
+                    a.style.cursor = 'pointer';
+                    a.style.zIndex = '15';
+                    a.innerText =
+                        '本项目仅供交流，禁止商业用途，点击查看原github仓库';
+                    document.getElementById('root')?.prepend(a);
                 }
-            },5000)
+            }, 5000);
         </script>
     </body>
 </html>

package.json

@@ -1,17 +1,23 @@
 {
     "name": "solvable-sheep-game",
     "private": false,
-    "version": "0.0.6",
+    "version": "1.1.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
+        "dev:diy": "vite --config diy/diy.vite.config.ts",
         "build": "tsc && vite build",
+        "build:diy": "tsc && vite build --config diy/diy.vite.config.ts",
         "preview": "vite preview",
         "prepare": "husky install",
         "release:first": "standard-version -- --first-release",
         "release": "standard-version --commit-all"
     },
     "dependencies": {
+        "classnames": "^2.3.2",
+        "clipboard": "^2.0.11",
+        "hydrogen-js-sdk": "^2.3.10",
+        "qrcode.react": "^3.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
@@ -30,6 +36,7 @@
         "husky": "^8.0.1",
         "lint-staged": "^13.0.3",
         "prettier": "^2.7.1",
+        "sass": "^1.55.0",
         "standard-version": "^9.5.0",
         "stylelint": "^14.11.0",
         "stylelint-config-prettier-scss": "^0.0.1",