feat: 导航侧边栏 -> 说明 & 作弊 功能统一风格.

README.md

@@ -53,10 +53,11 @@ npm run build:prod
 ## 项目需求
 
 - [x] 刮削游戏 (后端部分)
-- [ ] TODO: 显示攻略
-  - [ ] 显示攻略的按钮
-  - [ ] 按下后弹出类似图片墙的页中小窗口，显示该游戏的攻略
-  - [ ] 让玩家能一键复制指定部分的代码（已更新【甜蜜色情生活ｰ我和 2 位姐姐ｰ】的攻略文本，可用于调试）
+- [x] 显示攻略
+  - [x] 显示攻略的按钮
+  - [x] 按下后弹出类似图片墙的页中小窗口，显示该游戏的攻略
+  - [x] 让玩家能一键复制指定部分的代码（已更新【甜蜜色情生活ｰ我和 2 位姐姐ｰ】的攻略文本，可用于调试）
+  - [ ] TODO: 等待其他攻略文本补全
 - [ ] TODO: 记忆相关
   - [ ] 历史玩过的游戏
   - [ ] 收藏的游戏
@@ -72,9 +73,9 @@ npm run build:prod
   - [ ] 既有功能的继承
   - [ ] 对 RMMZ 游戏（indexedDB）的处理（？）
   - [ ] 让 Localstorage 或 indexDB 中的存档条目和游戏能关联起来
-- [ ] TODO: 重构[通用作弊代码页](http://rrpg.duels.link/cheats.html)
-  - [ ] 统一界面风格
-- [ ] 卡片展示
+- [x] 重构[通用作弊代码页](http://rrpg.duels.link/cheats.html)
+  - [x] 统一界面风格
+- [x] 卡片展示
   - [x] 请求 php
     - [x] 瀑布流
   - [x] 展示基础卡片
@@ -105,4 +106,4 @@ npm run build:prod
 - [x] 导航栏 Button 连续点击容易失败 -> 样式嵌套问题, 已解决
 - [x] 补充整齐功能区按钮的 tips -> 右上角的数个按钮中，只有【分类】【主题】鼠标移上去未变化样式
 - [x] 打开图片墙会改变地址栏，看起来还蛮怪的
-- [ ] 先输入搜索文字，再切换分类或 tag，要搜索的文字会被无视
+- [ ] TODO: 先输入搜索文字，再切换分类或 tag，要搜索的文字会被无视

src/App.svelte

 <script>
   import { onMount } from 'svelte';
-  import { _theme, _env, _category, _tagTrans } from './stores';
+  import { _theme, _env, _category, _tagTrans, _cheatWindow, _cheatHint } from './stores';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
   import Content from './Content.svelte';
   import MenuWrapNav from './components/MenuWrapNav.svelte';
@@ -8,6 +8,10 @@
   import MenuCateTag from './components/MenuCateTag.svelte';
   import MenuTheme from './components/MenuTheme.svelte';
   import MenuConfig from './components/MenuConfig.svelte';
+  import MedalWrap from './components/MedalWrap.svelte';
+  import Markdown from './components/Markdown.svelte';
+  import generalCheat from './assets/generalCheat.md?raw';
+  import generalRead from './assets/read.md?raw';
 
   /**
    * NOTE: 配置 svelteToast
@@ -67,10 +71,12 @@
       text: '使用说明',
       hint: '必看的说明哟~',
       click: () => {
-        console.log('TODO: click 弹出使用说明.');
+        showInfo = true;
+        info = generalRead;
       },
+      onclick: 'info.showModal()',
       hover: () => {
-        console.log('TODO: hover 弹出使用说明.');
+        // console.log('TODO: hover 弹出使用说明.');
       }
     },
     {
@@ -86,8 +92,12 @@
       text: '作弊',
       hint: '常用作弊命令',
       click: () => {
-        window.open(`${$_env}/cheats.html`);
-      }
+        // window.open(`${$_env}/cheats.html`);
+        showInfo = true;
+        info = generalCheat;
+        // console.log(generalCheat);
+      },
+      onclick: 'info.showModal()'
     }
   ];
 
@@ -134,6 +144,12 @@
       break;
   }
 
+  // -----------------------------
+  // 导航侧边栏信息相关
+
+  let showInfo = false;
+  let info = '';
+
   // -----------------------------
 
   onMount(() => {
@@ -163,7 +179,8 @@
 
     /* 隐藏垂直滚动条 */
     .picsSlider::-webkit-scrollbar,
-    code.language-javascript::-webkit-scrollbar,
+    ._customModal::-webkit-scrollbar,
+    .markdown code::-webkit-scrollbar,
     body::-webkit-scrollbar 
     {
       display: none;
@@ -171,7 +188,8 @@
     }
 
     .picsSlider,
-    code.language-javascript,
+    ._customModal,
+    .markdown code,
     body 
     {
       -ms-overflow-style: none;
@@ -182,7 +200,8 @@
 
     /* 隐藏水平滚动条 */
     .picsSlider::-webkit-scrollbar-horizontal,
-    code.language-javascript::-webkit-scrollbar-horizontal,
+    ._customModal::-webkit-scrollbar-horizontal,
+    .markdown code::-webkit-scrollbar-horizontal,
     body::-webkit-scrollbar-horizontal 
     {
       display: none;
@@ -190,7 +209,8 @@
     }
 
     .picsSlider::-webkit-scrollbar-thumb
-    code.language-javascript::-webkit-scrollbar-thumb
+    ._customModal::-webkit-scrollbar-thumb
+    .markdown code::-webkit-scrollbar-thumb
     body::-webkit-scrollbar-thumb
     {
       display: none;
@@ -301,7 +321,7 @@
             {:else}
               <li>
                 <div class="p-0 tooltip tooltip-left" data-tip={Item.hint}>
-                  <button class="p-3" on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
+                  <button class="p-3" onclick={Item.onclick} on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
                 </div>
               </li>
             {/if}
@@ -366,7 +386,7 @@
           </MenuWrapSide>
         {:else}
           <li>
-            <button on:click={Item.click}>{Item.text}</button>
+            <button onclick={Item.onclick} on:click={Item.click}>{Item.text}</button>
           </li>
         {/if}
       {/each}
@@ -401,6 +421,22 @@
   />
 </div>
 
+<!-- FIXME: 在 closeCallBack 中必须把 trigger 指向的变量手动 false 掉, 不然 bug-->
+<MedalWrap
+  id="info"
+  period={0}
+  trigger={showInfo}
+  contentTrigger={info}
+  closeCallBack={() => {
+    showInfo = false;
+    info = '';
+  }}
+>
+  <div class="w-full h-auto" style="max-height: calc(80vh - 4rem - 3rem - 0.5rem);">
+    <Markdown isDetailCheat={false} markdown={info} />
+  </div>
+</MedalWrap>
+
 <!-- ----------------------------------------------- STYLE ----------------------------------------------- -->
 
 <style>

src/app.css

@@ -4,7 +4,7 @@
 
 /* Markdown 代码样式*/
 
-code.language-javascript {
+.markdown code {
   display: block;
   overflow: hidden;
   overflow-x: scroll;
@@ -15,17 +15,34 @@ code.language-javascript {
   @apply rounded-box;
   @apply bg-neutral;
   @apply text-neutral-content;
+  @apply relative;
 }
 
 .markdown h1 {
-  @apply text-2xl;
+  @apply text-3xl;
   @apply text-center;
-  @apply p-1;
+  @apply p-4;
 }
 
 .markdown h2 {
-  @apply text-base;
-  @apply pb-2;
+  @apply text-xl;
+  @apply p-2;
+  @apply pl-0;
+}
+
+.markdown p {
+  @apply text-sm;
+  @apply pl-4;
+}
+
+.markdown em strong {
+  @apply text-center;
+  @apply text-error-content;
+}
+
+.markdown li {
+  @apply text-xl;
+  @apply px-12;
 }
 
 .markdown hr {
@@ -35,3 +52,11 @@ code.language-javascript {
   @apply rounded-box;
   @apply bg-primary;
 }
+
+.markdown .btn_copyCode {
+  @apply btn btn-sm p-2;
+  @apply bg-primary text-primary-content;
+  @apply hover:bg-accent hover:text-accent-content;
+  @apply absolute top-1 right-1;
+  @apply cursor-pointer;
+}

src/assets/generalCheat.md

+# 通用篇
+
+**_[点击代码或按钮复制到剪切板]_**
+
+## 如何进入控制台：
+
+点击 F12，切换到【控制台】标签页即可。
+
+## 角色 ID
+
+在控制台里列出角色列表  
+`$dataActors`
+（按一下三角形就可以展开查看详细数值了）
+
+## 道具 ID
+
+在控制台里列出道具列表  
+`$dataItems`
+在控制台里列出武器列表  
+`$dataWeapons`
+在控制台里列出防具列表  
+`$dataArmors`
+
+## 变量和开关
+
+在控制台里列出变量列表  
+ `$gameVariables`
+在控制台里列出开关列表  
+ `$gameSwitches`
+查看开关的作用  
+ `$dataSystem.switches`
+查看变量的作用  
+ `$dataSystem.variables`
+调整开关状态  
+ `$gameSwitches.setValue(开关ID,true/false);`
+调整变量状态  
+ `$gameVariables.setValue(变量ID,值);`
+
+## 查看公共事件 ID
+
+`$dataCommonEvents`
+
+## 执行公共事件
+
+`$gameTemp.reserveCommonEvent(公共事件ID);`
+
+## 地图 ID
+
+在控制台里列出地图列表  
+ `$dataMapInfos`
+
+# 队伍篇
+
+## 强行从队伍中移除成员
+
+`$gameParty.removeActor(角色ID);`
+
+## 强行在队伍中增加成员
+
+`$gameParty.addActor(角色ID);`
+
+# 数值篇
+
+## 增加金钱
+
+`$gameParty.gainGold(想要增加的数值);`
+或  
+ `$gameParty._gold += 想要增加的数值;（较为危险，但可以超出上限）`
+
+## 增加经验值
+
+`$gameActors.actor(角色ID).gainExp(想要增加的数值);`
+
+## 增加当前 HP
+
+`$gameActors.actor(角色ID).gainHp(想要增加的数值);`
+
+## 增加当前 MP
+
+`$gameActors.actor(角色ID).gainMp(想要增加的数值);`
+
+## 增加当前 TP
+
+`$gameActors.actor(角色ID).gainTp(想要增加的数值);`
+
+## 永久增加额外能力值
+
+角色最终能力 = 基础值 + 等级 \* 每级增加值 + 额外能力值。  
+只有额外能力值能永久修改（其他的参数刷新页面就还原了）。  
+先用  
+ `$gameActors.actor(角色ID)._paramPlus;`
+查看属性总长度，记下长度
+比如提示(8) [0, 0, 0, 0, 0, 0, 0, 0]  
+ 前面的括号 8 是长度，修改时不要输入。  
+ 修改时  
+ `$gameActors.actor(角色ID)._paramPlus = 新属性列表;`
+比如上述例子就可以写  
+ `$gameActors.actor(角色ID)._paramPlus = [9999, 9999, 9999, 9999, 9999, 9999, 9999, 9999];`
+其中每段对应一种属性，比如可能是[最大 HP,最大 MP,物攻,物防,魔攻,魔防,敏捷,幸运]。  
+ 不过哪段对应什么属性大概只能靠猜了。  
+ 可以是负数，不过最好别带小数点。
+
+# 物品篇
+
+## 获得物品
+
+`$gameParty.gainItem($dataItems[物品ID], 个数);`
+
+`$gameParty.gainItem($dataWeapons[武器ID], 个数);`
+
+`$gameParty.gainItem($dataArmors[防具ID], 个数);`
+
+# 系统篇
+
+## 得到当前状态的存档数据
+
+（复制出来的时候，务必记得去掉开头结尾的单引号）  
+（最终手段，在卡死时只有这个能用。可配合导入导出页面，进行强行存档）  
+ `LZString.compressToBase64(JsonEx.stringify(DataManager.makeSaveContents()));`
+
+## 强行解除存档限制
+
+`$gameSystem._saveEnabled = true;`
+
+## 立刻进入存档画面
+
+`SceneManager.push(Scene_Save);`
+
+## 立刻进入读档画面
+
+`SceneManager.push(Scene_Load);`
+
+## 进入 Debug 画面（用于设置剧情变量、解锁 CG 等）
+
+`SceneManager.push(Scene_Debug);`
+
+# 角色篇
+
+## 设置移动速度
+
+`$gamePlayer._moveSpeed = 移动速度（可以带小数）;`
+
+## 设置 X 坐标
+
+`$gamePlayer._x = X坐标;`
+
+## 设置 Y 坐标 µ
+
+`$gamePlayer._y = Y坐标;`
+
+## 传送到某个地图
+
+`$gamePlayer.reserveTransfer(地图ID,X坐标,Y坐标,0,0);`
+
+## 穿墙-切换开启关闭
+
+`$gamePlayer._through = !$gamePlayer._through;`
+
+## 遇敌-切换开启关闭
+
+`$gameSystem._encounterEnabled = !$gameSystem._encounterEnabled;`
+
+## 设置地雷式遇敌间隔的步数（重启游戏前都有效）
+
+`Game_Player.prototype.makeEncounterCount = function() { return 步数; }`

src/assets/read.md

+存档保存在浏览器缓存中，清除缓存大概会导致丢档——所以在那之前请导出存档。
+
+基本上，所有 RMMV/Tyrano 游戏共用各自引擎的存档位；RMMZ 游戏是另一套存储系统（IndexedDB），暂不支持云存档。
+
+群友可以上传 RPG Maker MV/MZ（特征：游戏根目录下有 www 目录）、
+
+TyranoScript 游戏（特征：游戏根目录下有 nw.pak 且没有 www 目录）并联系我加到列表里。
+
+暂不支持 VX、VXAce、Wolf 等引擎。太烂的机翻中文版和广告过多的版本不予收录。
+
+请解包后把 www 目录随意改名（仅限英文和数字），并上传到 Y:\Upload

src/components/Markdown.svelte

@@ -6,12 +6,16 @@
   /**markdown 字符串原文*/
   export let markdown = '';
 
+  /**类型: 是否是详细作弊攻略*/
+  export let isDetailCheat = true;
+
   /**对 markdown 字符串原文进行处理*/
   let _markdown = () => {
+    if (!markdown.length) return '# 233';
     // console.log(markdown);
     let res = markdown.replaceAll('[copy]', '```javascript\n').replaceAll('[/copy]', '\n```');
     const readme = `# 公共使用说明\n\n一般来讲, 首先要开始游戏至第一个自由活动点 (能自由走动的状态).
-此时按下F12, 选中【控制台】, 即可开始输入指令.\n\n***点击代码即可复制到剪切板.*** \n\n---\n\n# 本地使用说明\n`;
+此时按下F12, 选中【控制台】, 即可开始输入指令.\n\n***点击代码或按钮即可复制到剪切板.*** \n\n---\n\n# 本地使用说明\n`;
     res = readme + res;
     return res;
   };
@@ -19,33 +23,62 @@
   /**Markdown 组件的 DOM*/
   let dom;
 
+  /**复制文字到剪切板
+   * @param text
+   */
+  function copyText(text) {
+    const copy = function (event) {
+      let clipboardData = event.clipboardData || window.clipboardData;
+      clipboardData.setData('text/plain', text);
+      event.preventDefault();
+    };
+    document.addEventListener('copy', copy);
+    document.execCommand('copy');
+    document.removeEventListener('copy', copy);
+  }
+
   onMount(() => {
     // console.log(dom);
-    let doms = dom.querySelectorAll('code.language-javascript');
+    let doms = dom.querySelectorAll('code');
 
     // console.log(doms);
     doms.forEach(element => {
+      const _copyText = element.innerText;
+
+      // element.style.position = 'relative';
+
+      var button = document.createElement('button');
+      button.className = 'btn_copyCode';
+      button.innerHTML = '复制'; // 设置按钮上的文本
+
+      // 加到指定DOM位置
+      element.appendChild(button);
+
+      // 添加点击事件监听器
+      button.addEventListener('click', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        toast.push('已复制成功~');
+        copyText(_copyText);
+      });
+
       // console.log(element);
-      element.onclick = () => {
+
+      element.onclick = e => {
+        e.preventDefault();
+        e.stopPropagation();
         // 已复制
         toast.push('已复制成功~');
         copyText(element.innerText);
       };
     });
   });
-
-  function copyText(text) {
-    const copy = function (event) {
-      let clipboardData = event.clipboardData || window.clipboardData;
-      clipboardData.setData('text/plain', text);
-      event.preventDefault();
-    };
-    document.addEventListener('copy', copy);
-    document.execCommand('copy');
-    document.removeEventListener('copy', copy);
-  }
 </script>
 
 <div bind:this={dom} class="markdown flex flex-col">
-  {@html marked(_markdown())}
+  {#if isDetailCheat}
+    {@html marked(_markdown())}
+  {:else}
+    {@html marked(markdown)}
+  {/if}
 </div>

src/components/card.svelte

@@ -101,7 +101,12 @@
 
 <div class="card w-80 bg-primary text-primary-content shadow-xl overflow-hidden">
   <!-- NOTE: Cover -->
-  <button class="w-80 h-60 relative bg-neutral overflow-hidden" on:click={getInfoPics} onclick="globalModal.showModal()" on:keypress={() => {}}>
+  <button
+    class="w-80 h-60 relative bg-neutral overflow-hidden"
+    on:click={getInfoPics}
+    onclick="globalModal.showModal()"
+    on:keypress={() => {}}
+  >
     <img
       class="w-80 h-60 object-cover blur-lg"
       src={cover ?? '/favicon.ico'}
@@ -145,16 +150,14 @@
           </span>
         {/if}
 
+        <!-- NOTE: 作弊相关 -->
         <button
           class="
             w-6 h-6 mt-0 badge badge-accent rounded-r-box rounded-l-none
             m-auto p-0 cursor-pointer translate-y-[0px] hover:bg-secondary
             inline-flex items-center justify-center tooltip tooltip-left"
           data-tip="作弊"
-          on:click={() => {
-            getHint();
-            // TODO: 作弊
-          }}
+          on:click={getHint}
           onclick="cheat.showModal()"
         >
           <img class="w-4 h-4" src={ICON_CE} alt="icon_ce" />