Главная Обзор Помощь
Вход
bang
/
games-creater
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Дерево: 9d3c6590f8
Ветки Метки
games-creater
/
web
/
index.html

index.html 31 KB
История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh">
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 

  6. <title>Anim Studio · 动画资源库</title>
    7. 

  7. <style>
    8. 

  8.   :root{
    9. 

  9.     --bg:#1b1430; --panel:#241a3d; --card:#2c2150; --line:#3d2f63;
    10. 

  10.     --accent:#ff7eb6; --accent2:#7ee8ff; --text:#f3eefb; --muted:#a99ccb;
    11. 

  11.   }
    12. 

  12.   *{box-sizing:border-box}
    13. 

  13.   body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
    14. 

  14.        background:linear-gradient(160deg,#1b1430,#2a1b45);color:var(--text);min-height:100vh}
    15. 

  15.   header{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;
    16. 

  16.          align-items:center;gap:14px}
    17. 

  17.   header h1{font-size:20px;margin:0}
    18. 

  18.   header .sub{color:var(--muted);font-size:13px}
    19. 

  19.   .wrap{max-width:1180px;margin:0 auto;padding:20px 24px 60px}
    20. 

  20. 

  21.   details.gen{background:var(--panel);border:1px solid var(--line);border-radius:14px;
    22. 

  22.               padding:0 18px;margin-bottom:22px}
    23. 

  23.   details.gen summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:15px;
    24. 

  24.               list-style:none}
    25. 

  25.   details.gen summary::-webkit-details-marker{display:none}
    26. 

  26.   .gen-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;padding:0 0 18px}
    27. 

  27.   .workflow-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;padding:0 0 18px}
    28. 

  28.   .workflow-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 18px}
    29. 

  29.   .workflow-note{color:var(--muted);font-size:12px;line-height:1.5}
    30. 

  30.   .field{margin-bottom:10px}
    31. 

  31.   .field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
    32. 

  32.   .field input,.field select,textarea{width:100%;background:#160f29;color:var(--text);
    33. 

  33.        border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:13px}
    34. 

  34.   .field input[type="checkbox"]{width:auto;margin-right:6px;vertical-align:-1px}
    35. 

  35.   textarea{font-family:ui-monospace,Menlo,monospace;min-height:300px;resize:vertical;line-height:1.45}
    36. 

  36.   button{background:linear-gradient(90deg,var(--accent),#ff9d6e);color:#2a0f23;border:none;
    37. 

  37.          border-radius:9px;padding:10px 18px;font-weight:700;cursor:pointer;font-size:14px}
    38. 

  38.   button.ghost{background:#2c2150;color:var(--text);border:1px solid var(--line);font-weight:600}
    39. 

  39.   button:disabled{opacity:.5;cursor:default}
    40. 

  40.   .log{white-space:pre-wrap;background:#0f0a1e;border:1px solid var(--line);border-radius:8px;
    41. 

  41.        padding:10px;font-family:ui-monospace,monospace;font-size:12px;color:#bfe;max-height:160px;
    42. 

  42.        overflow:auto;margin-top:10px}
    43. 

  43. 

  44.   .tabs{display:flex;gap:8px;margin:6px 0 18px}
    45. 

  45.   .tabs button{background:#241a3d;color:var(--muted);border:1px solid var(--line)}
    46. 

  46.   .tabs button.active{background:var(--accent);color:#2a0f23}
    47. 

  47.   .toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
    48. 

  48.   .toolbar select{background:#160f29;color:var(--text);border:1px solid var(--line);
    49. 

  49.        border-radius:8px;padding:7px 10px;font-size:13px}
    50. 

  50.   .count{color:var(--muted);font-size:13px}
    51. 

  51. 

  52.   .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
    53. 

  53.   .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;
    54. 

  54.         display:flex;flex-direction:column;gap:10px}
    55. 

  55.   .stage{height:200px;border-radius:10px;background:
    56. 

  56.         repeating-conic-gradient(#241a3d 0 25%, #2c2150 0 50%) 0/22px 22px;
    57. 

  57.         display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative}
    58. 

  58.   .stage img{max-height:88%;max-width:88%;transform-origin:50% 100%;will-change:transform;
    59. 

  59.         filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
    60. 

  60.   .stage canvas{position:absolute;inset:0;width:100%;height:100%}
    61. 

  61.   .name{font-weight:700;font-size:15px}
    62. 

  62.   .meta{color:var(--muted);font-size:12px;line-height:1.5}
    63. 

  63.   .row{display:flex;gap:8px;align-items:center}
    64. 

  64.   .row select{flex:1;background:#160f29;color:var(--text);border:1px solid var(--line);
    65. 

  65.         border-radius:7px;padding:6px 8px;font-size:12px}
    66. 

  66.   .pill{display:inline-block;background:#160f29;border:1px solid var(--line);border-radius:20px;
    67. 

  67.         padding:2px 10px;font-size:11px;color:var(--accent2)}
    68. 

  68.   .art-img{max-width:100%;max-height:180px;object-fit:contain}
    69. 

  69.   .demo-box{width:84px;height:84px;border-radius:14px;
    70. 

  70.         background:linear-gradient(135deg,var(--accent),var(--accent2));margin:auto;
    71. 

  71.         display:flex;align-items:center;justify-content:center;font-weight:800;color:#241a3d;font-size:22px}
    72. 

  72.   .empty{color:var(--muted);text-align:center;padding:50px;border:1px dashed var(--line);border-radius:14px}
    73. 

  73.   code{background:#160f29;padding:1px 6px;border-radius:5px;font-size:12px}
    74. 

  74.   a{color:var(--accent2)}
    75. 

  75. </style>
    76. 

  76. </head>
    77. 

  77. <body>
    78. 

  78. <header>
    79. 

  79.   <h1>🍬 Anim Studio</h1>
    80. 

  80.   <span class="sub">动画资源库 · 角色 / 特效 / 动效 可视化预览</span>
    81. 

  81. </header>
    82. 

  82. 

  83. <div class="wrap">
    84. 

  84.   <details class="gen" id="workflowPanel" open>
    85. 

  85.     <summary>▸ AI 游戏方案（创意 + 风格 + 玩法 → manifest）</summary>
    86. 

  86.     <div class="field"><label>创意简报（可填一句话，也可以写完整需求）</label>
    87. 

  87.       <textarea id="creativeBrief" style="min-height:92px" placeholder="例：做一个竖屏海盗金币 slot，参考糖果传奇那种明亮可爱的反馈，但主题是热带宝藏。核心钩子是金币 Hold & Win，整体要轻松、亮、适合移动端。"></textarea></div>
    88. 

  88.     <div class="workflow-grid">
    89. 

  89.       <div class="field"><label>参考图 / 网址链接（一行一个）</label>
    90. 

  90.         <textarea id="creativeRefs" style="min-height:92px" placeholder="https://...\n也可以写：本地截图文件名、参考页面链接、竞品链接"></textarea></div>
    91. 

  91.       <div class="field"><label>上传参考图 / 截图（最多 4 张）</label>
    92. 

  92.         <input id="creativeImageFiles" type="file" accept="image/*" multiple>
    93. 

  93.         <div class="workflow-note" id="creativeImageMsg">上传图会先由视觉模型提炼风格，再生成 manifest。</div></div>
    94. 

  94.       <div class="field"><label>希望参考的风格点</label>
    95. 

  95.         <textarea id="creativeStyleNotes" style="min-height:92px" placeholder="按钮质感、颜色、角色比例、背景气氛、UI 密度等"></textarea></div>
    96. 

  96.       <div class="field"><label>必须避免</label>
    97. 

  97.         <textarea id="creativeAvoidNotes" style="min-height:92px" placeholder="不要照抄 logo / IP / 角色；不要暗黑；不要复杂文字"></textarea></div>
    98. 

  98.       <div>
    99. 

  99.         <div class="field"><label>文字模型</label>
    100. 

  100.           <input id="textModel" value="gpt-4o-mini"></div>
    101. 

  101.         <button class="ghost" id="aiWorkflowBtn">AI 生成完整游戏方案</button>
    102. 

  102.         <div class="workflow-note" id="aiWorkflowMsg">先生成统一方案，再微调玩法和图片资源。</div>
    103. 

  103.       </div>
    104. 

  104.     </div>
    105. 

  105.     <div class="log" id="gamePlanView" style="display:none;max-height:260px"></div>
    106. 

  106.     <div class="workflow-grid">
    107. 

  107.       <div class="field"><label>游戏代号</label>
    108. 

  108.         <input id="wfGameId" value="jelly-candy-slot"></div>
    109. 

  109.       <div class="field"><label>游戏标题</label>
    110. 

  110.         <input id="wfTitle" value="Jelly Candy Slot"></div>
    111. 

  111.       <div class="field"><label>主题</label>
    112. 

  112.         <select id="wfTheme">
    113. 

  113.           <option value="jelly">果冻糖果</option>
    114. 

  114.           <option value="fruit">水果乐园</option>
    115. 

  115.           <option value="egypt">埃及宝藏</option>
    116. 

  116.           <option value="pirate">海盗金币</option>
    117. 

  117.           <option value="cyber">霓虹赛博</option>
    118. 

  118.         </select></div>
    119. 

  119.       <div class="field"><label>基础玩法</label>
    120. 

  120.         <select id="wfReelMode">
    121. 

  121.           <option value="ways">Ways 5×3</option>
    122. 

  122.           <option value="paylines">固定赔线 5×3</option>
    123. 

  123.           <option value="megaways">Megaways 6轴</option>
    124. 

  124.           <option value="cluster">Cluster Pays 6×5</option>
    125. 

  125.         </select></div>
    126. 

  126.       <div class="field"><label>波动风格</label>
    127. 

  127.         <select id="wfVolatility">
    128. 

  128.           <option value="medium">中波动</option>
    129. 

  129.           <option value="low">低波动</option>
    130. 

  130.           <option value="high">高波动</option>
    131. 

  131.         </select></div>
    132. 

  132.       <div class="field"><label>目标 RTP（%）</label>
    133. 

  133.         <input id="wfTargetRtp" type="number" value="96" min="50" max="99.5" step="0.1"></div>
    134. 

  134.       <div class="field"><label><input type="checkbox" id="wfEnableMathModel" checked> 生成赔率和触发概率数学模型</label></div>
    135. 

  135.       <div class="field"><label>角色/符号数量</label>
    136. 

  136.         <select id="wfCharacterCount">
    137. 

  137.           <option>10</option><option>8</option><option>12</option><option>6</option>
    138. 

  138.         </select></div>
    139. 

  139.       <div class="field"><label>UI 资产范围</label>
    140. 

  140.         <select id="wfUiCompleteness">
    141. 

  141.           <option value="full">完整</option>
    142. 

  142.           <option value="basic">基础</option>
    143. 

  143.         </select></div>
    144. 

  144.       <div class="field"><label>反馈强度</label>
    145. 

  145.         <select id="wfFeedbackIntensity">
    146. 

  146.           <option value="standard">标准</option>
    147. 

  147.           <option value="quiet">克制</option>
    148. 

  148.           <option value="loud">夸张</option>
    149. 

  149.         </select></div>
    150. 

  150.       <div class="field"><label>初始金币</label>
    151. 

  151.         <input id="wfStartingBalance" type="number" value="5000" min="100" step="100"></div>
    152. 

  152.       <div class="field"><label>默认下注</label>
    153. 

  153.         <input id="wfDefaultBet" type="number" value="50" min="1" step="10"></div>
    154. 

  154.       <div class="field"><label>免费旋转次数</label>
    155. 

  155.         <input id="wfFreeSpinCount" type="number" value="8" min="3" max="30"></div>
    156. 

  156.       <div class="field"><label>最大连锁次数</label>
    157. 

  157.         <input id="wfMaxCascades" type="number" value="6" min="1" max="20"></div>
    158. 

  158.       <div class="field"><label><input type="checkbox" id="wfCascades" checked> Cascades 连锁下落</label></div>
    159. 

  159.       <div class="field"><label><input type="checkbox" id="wfFreeSpins" checked> Scatter Free Spins</label></div>
    160. 

  160.       <div class="field"><label><input type="checkbox" id="wfWilds" checked> Wild 符号</label></div>
    161. 

  161.       <div class="field"><label><input type="checkbox" id="wfHoldWin"> Hold & Win</label></div>
    162. 

  162.       <div class="field"><label><input type="checkbox" id="wfMultipliers"> 连锁倍数</label></div>
    163. 

  163.     </div>
    164. 

  164.     <div class="workflow-actions">
    165. 

  165.       <button id="buildWorkflowBtn">生成玩法配置和 manifest</button>
    166. 

  166.       <button class="ghost" id="openGenBtn">打开生成面板</button>
    167. 

  167.       <span class="workflow-note" id="workflowMsg">先生成 manifest，再点下方“开始生成”。</span>
    168. 

  168.     </div>
    169. 

  169.   </details>
    170. 

  170. 

  171.   <details class="gen" id="genPanel" open>
    172. 

  172.     <summary>▸ 生成图片资源（填 key，点开始）</summary>
    173. 

  173.     <div class="gen-grid">
    174. 

  174.       <div>
    175. 

  175.         <div class="field"><label>接口协议（厂商）</label>
    176. 

  176.           <select id="provider"><option>OpenAI 兼容接口</option></select></div>
    177. 

  177.         <div class="field"><label>API Key</label>
    178. 

  178.           <input id="apiKey" type="password" placeholder="已内置，留空即可；临时换 key 时再填写"></div>
    179. 

  179.         <div class="field"><label>Base URL</label>
    180. 

  180.           <input id="baseUrl" value="https://x.long.bid/v1"></div>
    181. 

  181.         <div class="field"><label>模型名（真正发给 API 的，按你的填）</label>
    182. 

  182.           <input id="model" value="gpt-image-2"></div>
    183. 

  183.         <div class="field"><label>尺寸</label>
    184. 

  184.           <select id="size"><option>1024x1024</option><option>1024x1536</option><option>1536x1024</option></select></div>
    185. 

  185.         <div class="field"><label><input type="checkbox" id="removeBg"> 生图后去背景（较慢）</label></div>
    186. 

  186.         <button id="startBtn">▶ 开始生成</button>
    187. 

  187.         <div class="log" id="log" style="display:none"></div>
    188. 

  188.       </div>
    189. 

  189.       <div class="field"><label>animation_manifest.json</label>
    190. 

  190.         <textarea id="manifest"></textarea></div>
    191. 

  191.     </div>
    192. 

  192.   </details>
    193. 

  193. 

  194.   <div class="toolbar">
    195. 

  195.     <span class="meta">资源库（game）：</span>
    196. 

  196.     <select id="gameSel"></select>
    197. 

  197.     <button class="ghost" id="reloadBtn">↻ 刷新</button>
    198. 

  198.     <button id="exportBtn">📦 导出 Cocos 整合包</button>
    199. 

  199.     <button class="ghost" id="deleteBtn">🗑 删除该资源库</button>
    200. 

  200.     <span class="count" id="opMsg"></span>
    201. 

  201.   </div>
    202. 

  202. 

  203.   <div class="tabs">
    204. 

  204.     <button data-tab="chars" class="active">角色库</button>
    205. 

  205.     <button data-tab="art">UI 美术</button>
    206. 

  206.     <button data-tab="vfx">特效库</button>
    207. 

  207.     <button data-tab="ui">动效库</button>
    208. 

  208.   </div>
    209. 

  209. 

  210.   <div id="view"></div>
    211. 

  211. </div>
    212. 

  212. 

  213. <script>
    214. 

  214. const $ = s => document.querySelector(s);
    215. 

  215. let LIB = {characters:[],vfx:[],ui:[]}, ASSET="", TAB="chars";
    216. 

  216. const animTargets = []; // {el, anim, start}
    217. 

  217. 

  218. // ---------- 拉取默认 manifest & 资源库 ----------
    219. 

  219. async function loadManifest(){
    220. 

  220.   try{ const t = await (await fetch('/api/manifest')).text(); $('#manifest').value = t; }catch(e){}
    221. 

  221. }
    222. 

  222. async function loadLibrary(game){
    223. 

  223.   const url = '/api/library' + (game?('?game='+encodeURIComponent(game)):'');
    224. 

  224.   const lib = await (await fetch(url)).json();
    225. 

  225.   LIB = lib; ASSET = lib.assetBase || "";
    226. 

  226.   const sel = $('#gameSel'); sel.innerHTML='';
    227. 

  227.   (lib.games||[]).forEach(g=>{ const o=document.createElement('option');
    228. 

  228.      o.value=g;o.textContent=g; if(g===lib.game)o.selected=true; sel.appendChild(o); });
    229. 

  229.   if(!(lib.games||[]).length){ const o=document.createElement('option');o.textContent='(暂无)';sel.appendChild(o); }
    230. 

  230.   render();
    231. 

  231. }
    232. 

  232. 

  233. // ---------- 关键帧采样（与后端 spine 数据一致）----------
    234. 

  234. const lerp=(a,b,t)=>a+(b-a)*t;
    235. 

  235. function sample(keys,t,field){
    236. 

  236.   if(!keys||!keys.length) return field==='value'?0:1;
    237. 

  237.   if(t<=keys[0].time) return keys[0][field];
    238. 

  238.   for(let i=0;i<keys.length-1;i++){
    239. 

  239.     if(t>=keys[i].time && t<=keys[i+1].time){
    240. 

  240.       const f=(t-keys[i].time)/((keys[i+1].time-keys[i].time)||1);
    241. 

  241.       return lerp(keys[i][field],keys[i+1][field],f);
    242. 

  242.     }
    243. 

  243.   }
    244. 

  244.   return keys[keys.length-1][field];
    245. 

  245. }
    246. 

  246. function tick(now){
    247. 

  247.   for(const t of animTargets){
    248. 

  248.     if(!t.el.isConnected) continue;
    249. 

  249.     const a=t.anim; if(!a){continue;}
    250. 

  250.     const dur=a.duration||1; const time=((now-t.start)/1000)%dur;
    251. 

  251.     const sx=sample(a.scale,time,'x'), sy=sample(a.scale,time,'y');
    252. 

  252.     const rot=sample(a.rotate,time,'value');
    253. 

  253.     t.el.style.transform=`scaleX(${sx}) scaleY(${sy}) rotate(${(-rot).toFixed(2)}deg)`;
    254. 

  254.   }
    255. 

  255.   requestAnimationFrame(tick);
    256. 

  256. }
    257. 

  257. requestAnimationFrame(tick);
    258. 

  258. 

  259. // ---------- 渲染 ----------
    260. 

  260. function render(){
    261. 

  261.   const v=$('#view'); v.innerHTML=''; animTargets.length=0;
    262. 

  262.   if(TAB==='chars') renderChars(v);
    263. 

  263.   if(TAB==='art') renderArt(v);
    264. 

  264.   if(TAB==='vfx') renderVfx(v);
    265. 

  265.   if(TAB==='ui') renderUi(v);
    266. 

  266. }
    267. 

  267. 

  268. function renderChars(v){
    269. 

  269.   const list=LIB.characters||[];
    270. 

  270.   if(!list.length){ v.innerHTML='<div class="empty">还没有角色。填 key 在生成面板点「开始」即可生成。</div>'; return; }
    271. 

  271.   const grid=document.createElement('div'); grid.className='grid';
    272. 

  272.   list.forEach(c=>{
    273. 

  273.     const card=document.createElement('div'); card.className='card';
    274. 

  274.     const anims=Object.keys(c.animations||{});
    275. 

  275.     card.innerHTML=`
    276. 

  276.       <div class="stage"><img src="${ASSET+c.png}" alt="${c.id}"></div>
    277. 

  277.       <div class="name">${c.id}</div>
    278. 

  278.       <div class="row">
    279. 

  279.         <select>${anims.map(a=>`<option>${a}</option>`).join('')}</select>
    280. 

  280.       </div>
    281. 

  281.       <div class="meta">${c.w}×${c.h}px · ${(c.files||[]).length} 个文件<br>
    282. 

  282.         <span class="pill">spine</span> 动画: ${anims.join(', ')||'idle'}</div>`;
    283. 

  283.     const img=card.querySelector('img'), selA=card.querySelector('select');
    284. 

  284.     const tgt={el:img, anim:c.animations[anims[0]], start:performance.now()};
    285. 

  285.     animTargets.push(tgt);
    286. 

  286.     selA.onchange=()=>{ tgt.anim=c.animations[selA.value]; tgt.start=performance.now(); };
    287. 

  287.     grid.appendChild(card);
    288. 

  288.   });
    289. 

  289.   v.appendChild(grid);
    290. 

  290. }
    291. 

  291. 

  292. function renderArt(v){
    293. 

  293.   const list=LIB.ui_art||[];
    294. 

  294.   if(!list.length){ v.innerHTML='<div class="empty">还没有 UI 美术。用工作流生成 manifest 后点「开始生成」。</div>'; return; }
    295. 

  295.   const grid=document.createElement('div'); grid.className='grid';
    296. 

  296.   list.forEach(a=>{
    297. 

  297.     const card=document.createElement('div'); card.className='card';
    298. 

  298.     card.innerHTML=`
    299. 

  299.       <div class="stage"><img class="art-img" src="${ASSET+a.file}" alt="${a.id}"></div>
    300. 

  300.       <div class="name">${a.id}</div>
    301. 

  301.       <div class="meta">${a.w}×${a.h}px · ${a.transparent?'透明素材':'整图背景'}<br>
    302. 

  302.         <span class="pill">ui_art</span> ${a.file}</div>`;
    303. 

  303.     grid.appendChild(card);
    304. 

  304.   });
    305. 

  305.   v.appendChild(grid);
    306. 

  306. }
    307. 

  307. 

  308. function renderVfx(v){
    309. 

  309.   const list=LIB.vfx||[];
    310. 

  310.   if(!list.length){ v.innerHTML='<div class="empty">还没有特效。</div>'; return; }
    311. 

  311.   const grid=document.createElement('div'); grid.className='grid';
    312. 

  312.   list.forEach(x=>{
    313. 

  313.     const card=document.createElement('div'); card.className='card';
    314. 

  314.     card.innerHTML=`
    315. 

  315.       <div class="stage"><canvas></canvas></div>
    316. 

  316.       <div class="name">${x.id}</div>
    317. 

  317.       <div class="meta"><span class="pill">particle</span> 模板: ${x.template} ·
    318. 

  318.         发射率 ${x.config.emissionRate}/s · 寿命 ${x.config.life}s</div>`;
    319. 

  319.     grid.appendChild(card);
    320. 

  320.     startParticle(card.querySelector('canvas'), x.config);
    321. 

  321.   });
    322. 

  322.   v.appendChild(grid);
    323. 

  323. }
    324. 

  324. 

  325. function startParticle(canvas, cfg){
    326. 

  326.   const dpr=window.devicePixelRatio||1;
    327. 

  327.   function resize(){ canvas.width=canvas.clientWidth*dpr; canvas.height=canvas.clientHeight*dpr; }
    328. 

  328.   setTimeout(resize,0); window.addEventListener('resize',resize);
    329. 

  329.   const ctx=canvas.getContext('2d');
    330. 

  330.   const ps=[]; let acc=0, last=performance.now();
    331. 

  331.   const sc=(cfg.startColor||[255,255,255,255]), ec=(cfg.endColor||[255,255,255,0]);
    332. 

  332.   const rand=(v)=>(Math.random()*2-1)*(v||0);
    333. 

  333.   function spawn(){
    334. 

  334.     const W=canvas.width,H=canvas.height;
    335. 

  335.     const cx=W/2+rand(cfg.posVarX)*dpr, cy=H*0.5+rand(cfg.posVarY)*dpr;
    336. 

  336.     const ang=((cfg.angle||90)+rand(cfg.angleVar))*Math.PI/180;
    337. 

  337.     const sp=((cfg.speed||100)+rand(cfg.speedVar))*dpr*0.5;
    338. 

  338.     ps.push({x:cx,y:cy,vx:Math.cos(ang)*sp,vy:-Math.sin(ang)*sp,
    339. 

  339.       life:(cfg.life||1)+rand(cfg.lifeVar),age:0,
    340. 

  340.       ss:(cfg.startSize||20),es:(cfg.endSize!=null?cfg.endSize:cfg.startSize||20)});
    341. 

  341.   }
    342. 

  342.   function loop(now){
    343. 

  343.     if(!canvas.isConnected) return;
    344. 

  344.     const dt=Math.min(0.05,(now-last)/1000); last=now;
    345. 

  345.     const W=canvas.width,H=canvas.height;
    346. 

  346.     acc+=(cfg.emissionRate||60)*dt;
    347. 

  347.     while(acc>=1 && ps.length<260){ acc-=1; spawn(); }
    348. 

  348.     ctx.clearRect(0,0,W,H); ctx.globalCompositeOperation='lighter';
    349. 

  349.     for(let i=ps.length-1;i>=0;i--){
    350. 

  350.       const p=ps[i]; p.age+=dt;
    351. 

  351.       if(p.age>=p.life){ ps.splice(i,1); continue; }
    352. 

  352.       p.vy+=(-(cfg.gravityY||0))*dpr*dt; p.vx+=(cfg.gravityX||0)*dpr*dt;
    353. 

  353.       p.x+=p.vx*dt; p.y+=p.vy*dt;
    354. 

  354.       const f=p.age/p.life;
    355. 

  355.       const r=Math.max(0.5,(p.ss+(p.es-p.ss)*f))*dpr/2;
    356. 

  356.       const cr=Math.round(lerp(sc[0],ec[0],f)),cg=Math.round(lerp(sc[1],ec[1],f)),cb=Math.round(lerp(sc[2],ec[2],f));
    357. 

  357.       const a=lerp((sc[3]??255),(ec[3]??0),f)/255;
    358. 

  358.       ctx.beginPath();ctx.fillStyle=`rgba(${cr},${cg},${cb},${a})`;
    359. 

  359.       ctx.arc(p.x,p.y,r,0,7);ctx.fill();
    360. 

  360.     }
    361. 

  361.     requestAnimationFrame(loop);
    362. 

  362.   }
    363. 

  363.   requestAnimationFrame(loop);
    364. 

  364. }
    365. 

  365. 

  366. // ---------- UI tween 预览（JS 复刻，仅用于看效果）----------
    367. 

  367. const EASE={
    368. 

  368.   cubicOut:t=>1-Math.pow(1-t,3),
    369. 

  369.   backOut:t=>{const c=1.7;return 1+(c+1)*Math.pow(t-1,3)+c*Math.pow(t-1,2);},
    370. 

  370.   elasticOut:t=>t===0?0:t===1?1:Math.pow(2,-10*t)*Math.sin((t*10-0.75)*(2*Math.PI/3))+1,
    371. 

  371.   sineInOut:t=>-(Math.cos(Math.PI*t)-1)/2,
    372. 

  372.   linear:t=>t,
    373. 

  373. };
    374. 

  374. function animate(dur,ease,fn){
    375. 

  375.   const s=performance.now();
    376. 

  376.   function step(now){const t=Math.min(1,(now-s)/(dur*1000));fn(EASE[ease](t));if(t<1)requestAnimationFrame(step);}
    377. 

  377.   requestAnimationFrame(step);
    378. 

  378. }
    379. 

  379. const TWEEN_DEMO={
    380. 

  380.   scale_bounce:(el)=>{animate(0.09,'linear',t=>el.style.transform=`scale(${1-0.1*t})`);
    381. 

  381.     setTimeout(()=>animate(0.12,'backOut',t=>el.style.transform=`scale(${0.9+0.15*t})`),90);
    382. 

  382.     setTimeout(()=>animate(0.08,'linear',t=>el.style.transform=`scale(${1.05-0.05*t})`),210);},
    383. 

  383.   elastic_in:(el)=>{el.style.opacity=1;animate(0.45,'elasticOut',t=>el.style.transform=`scale(${t})`);},
    384. 

  384.   fade_slide_in:(el)=>{animate(0.3,'cubicOut',t=>{el.style.opacity=t;el.style.transform=`translateY(${40*(1-t)}px)`;});},
    385. 

  385.   number_roll:(el)=>{el.dataset.role='num';animate(0.8,'cubicOut',t=>el.textContent=Math.floor(8888*t));},
    386. 

  386.   pulse:(el)=>{let on=true;el._pi&&clearInterval(el._pi);
    387. 

  387.     el._pi=setInterval(()=>{animate(0.6,'sineInOut',t=>el.style.transform=`scale(${on?1+0.06*t:1.06-0.06*t})`);on=!on;},620);},
    388. 

  388. };
    389. 

  389. function renderUi(v){
    390. 

  390.   const list=LIB.ui||[];
    391. 

  391.   if(!list.length){ v.innerHTML='<div class="empty">还没有 UI 动效。已生成的会编译进 <code>ui/TweenPresets.ts</code>。</div>'; return; }
    392. 

  392.   const grid=document.createElement('div'); grid.className='grid';
    393. 

  393.   list.forEach(u=>{
    394. 

  394.     const card=document.createElement('div'); card.className='card';
    395. 

  395.     card.innerHTML=`<div class="stage"><div class="demo-box">${u.preset==='number_roll'?'0':'UI'}</div></div>
    396. 

  396.       <div class="name">${u.id}</div>
    397. 

  397.       <div class="meta"><span class="pill">tween</span> 预设: ${u.preset}</div>
    398. 

  398.       <button class="ghost">▶ 播放</button>`;
    399. 

  399.     const box=card.querySelector('.demo-box');
    400. 

  400.     card.querySelector('button').onclick=()=>{
    401. 

  401.       box.style.opacity=1;box.style.transform='';
    402. 

  402.       (TWEEN_DEMO[u.preset]||(()=>{}))(box);
    403. 

  403.     };
    404. 

  404.     grid.appendChild(card);
    405. 

  405.   });
    406. 

  406.   v.appendChild(grid);
    407. 

  407. }
    408. 

  408. 

  409. // ---------- 事件 ----------
    410. 

  410. document.querySelectorAll('.tabs button').forEach(b=>b.onclick=()=>{
    411. 

  411.   document.querySelectorAll('.tabs button').forEach(x=>x.classList.remove('active'));
    412. 

  412.   b.classList.add('active'); TAB=b.dataset.tab; render();
    413. 

  413. });
    414. 

  414. $('#gameSel').onchange=e=>loadLibrary(e.target.value);
    415. 

  415. $('#reloadBtn').onclick=()=>loadLibrary($('#gameSel').value);
    416. 

  416. 

  417. function opMsg(t,ok=true){ const m=$('#opMsg'); m.textContent=t; m.style.color=ok?'#7ee8ff':'#ff9d9d'; }
    418. 

  418. function workflowMsg(t,ok=true){ const m=$('#workflowMsg'); m.textContent=t; m.style.color=ok?'#a99ccb':'#ff9d9d'; }
    419. 

  419. 

  420. function renderGamePlan(plan, source){
    421. 

  421.   const box=$('#gamePlanView');
    422. 

  422.   if(!plan){ box.style.display='none'; box.textContent=''; return; }
    423. 

  423.   const gd=plan.gameDesign||{}, creative=plan.creative||{}, art=gd.artDirection||{};
    424. 

  424.   const lines=[
    425. 

  425.     `AI 游戏方案 · ${source||plan.source||''}`,
    426. 

  426.     `标题：${gd.title||''}`,
    427. 

  427.     `核心钩子：${gd.coreHook||''}`,
    428. 

  428.     `玩法：${gd.reelExperience||''} / ${gd.volatility||''}`,
    429. 

  429.     `差异点：${(gd.differentiators||[]).join('、')||'未生成'}`,
    430. 

  430.     `美术主题：${art.theme||''}`,
    431. 

  431.     `美术风格：${art.style||''}`,
    432. 

  432.     `参考：${(creative.references||[]).join('，')||'无'}；上传图 ${creative.uploadedReferenceImages||0} 张`,
    433. 

  433.     `视觉分析：${creative.visionStyleAnalysis&&Object.keys(creative.visionStyleAnalysis).length?JSON.stringify(creative.visionStyleAnalysis,null,2):(creative.visionStyleAnalysisError||'无')}`
    434. 

  434.   ];
    435. 

  435.   box.textContent=lines.join('\n');
    436. 

  436.   box.style.display='block';
    437. 

  437. }
    438. 

  438. 

  439. function workflowPayload(){
    440. 

  440.   const features=[];
    441. 

  441.   if($('#wfCascades').checked) features.push('cascades');
    442. 

  442.   if($('#wfFreeSpins').checked) features.push('free_spins');
    443. 

  443.   if($('#wfWilds').checked) features.push('wilds');
    444. 

  444.   if($('#wfHoldWin').checked) features.push('hold_win');
    445. 

  445.   if($('#wfMultipliers').checked) features.push('multipliers');
    446. 

  446.   return {
    447. 

  447.     gameId: $('#wfGameId').value,
    448. 

  448.     title: $('#wfTitle').value,
    449. 

  449.     theme: $('#wfTheme').value,
    450. 

  450.     reelMode: $('#wfReelMode').value,
    451. 

  451.     volatility: $('#wfVolatility').value,
    452. 

  452.     targetRtp: $('#wfTargetRtp').value,
    453. 

  453.     enableMathModel: $('#wfEnableMathModel').checked,
    454. 

  454.     characterCount: $('#wfCharacterCount').value,
    455. 

  455.     uiCompleteness: $('#wfUiCompleteness').value,
    456. 

  456.     feedbackIntensity: $('#wfFeedbackIntensity').value,
    457. 

  457.     startingBalance: $('#wfStartingBalance').value,
    458. 

  458.     defaultBet: $('#wfDefaultBet').value,
    459. 

  459.     freeSpinCount: $('#wfFreeSpinCount').value,
    460. 

  460.     maxCascades: $('#wfMaxCascades').value,
    461. 

  461.     creative: {
    462. 

  462.       brief: $('#creativeBrief').value,
    463. 

  463.       references: $('#creativeRefs').value.split('\n').map(x=>x.trim()).filter(Boolean),
    464. 

  464.       uploadedReferenceImages: ($('#creativeImageFiles').files||[]).length,
    465. 

  465.       styleNotes: $('#creativeStyleNotes').value,
    466. 

  466.       avoidNotes: $('#creativeAvoidNotes').value
    467. 

  467.     },
    468. 

  468.     gameDesign: {
    469. 

  469.       title: $('#wfTitle').value,
    470. 

  470.       artDirection: { theme: $('#wfTheme').value, styleNotes: $('#creativeStyleNotes').value },
    471. 

  471.       reelExperience: $('#wfReelMode').value,
    472. 

  472.       volatility: $('#wfVolatility').value
    473. 

  473.     },
    474. 

  474.     features
    475. 

  475.   };
    476. 

  476. }
    477. 

  477. 

  478. $('#buildWorkflowBtn').onclick=async()=>{
    479. 

  479.   const btn=$('#buildWorkflowBtn'); btn.disabled=true; workflowMsg('正在生成玩法配置和 manifest…');
    480. 

  480.   try{
    481. 

  481.     const r=await fetch('/api/slot-workflow',{method:'POST',headers:{'Content-Type':'application/json'},
    482. 

  482.       body:JSON.stringify(workflowPayload())});
    483. 

  483.     const d=await r.json();
    484. 

  484.     if(!d.ok){ workflowMsg('生成失败: '+(d.error||'未知错误'),false); }
    485. 

  485.     else{
    486. 

  486.       $('#manifest').value=JSON.stringify(d.manifest,null,2);
    487. 

  487.       const cfg=d.slot_config||d.manifest.slot_config||{};
    488. 

  488.       const reels=cfg.reels?`${cfg.reels.columns}×${cfg.reels.rows}`:'';
    489. 

  489.       const minMatch=cfg.winRules?cfg.winRules.minMatch:'';
    490. 

  490.       const sim=cfg.mathModel&&cfg.mathModel.simulation?cfg.mathModel.simulation:{};
    491. 

  491.       if(cfg.mathModel&&cfg.mathModel.status==='disabled_by_user'){
    492. 

  492.         workflowMsg(`已生成 ${d.manifest.game}：${reels}，数学模型未生成，最小中奖 ${minMatch} 连。`);
    493. 

  493.       }else{
    494. 

  494.         workflowMsg(`已生成 ${d.manifest.game}：${reels}，RTP ${((sim.estimatedRtp||0)*100).toFixed(2)}%，命中率 ${((sim.hitFrequency||0)*100).toFixed(2)}%，最小中奖 ${minMatch} 连。`);
    495. 

  495.       }
    496. 

  496.       $('#genPanel').open=true;
    497. 

  497.     }
    498. 

  498.   }catch(e){ workflowMsg('请求失败: '+e,false); }
    499. 

  499.   btn.disabled=false;
    500. 

  500. };
    501. 

  501. 

  502. async function readReferenceImages(){
    503. 

  503.   const input=$('#creativeImageFiles');
    504. 

  504.   const files=Array.from(input.files||[]).slice(0,4);
    505. 

  505.   if(!files.length) return [];
    506. 

  506.   $('#creativeImageMsg').textContent=`已选择 ${files.length} 张，准备上传给视觉模型分析…`;
    507. 

  507.   const readers=files.map(file=>new Promise((resolve,reject)=>{
    508. 

  508.     if(file.size>6*1024*1024){ reject(new Error(file.name+' 超过 6MB')); return; }
    509. 

  509.     const r=new FileReader();
    510. 

  510.     r.onload=()=>resolve(r.result);
    511. 

  511.     r.onerror=()=>reject(r.error||new Error('读取失败'));
    512. 

  512.     r.readAsDataURL(file);
    513. 

  513.   }));
    514. 

  514.   return Promise.all(readers);
    515. 

  515. }
    516. 

  516. 

  517. $('#aiWorkflowBtn').onclick=async()=>{
    518. 

  518.   const btn=$('#aiWorkflowBtn'); btn.disabled=true; const msg=$('#aiWorkflowMsg');
    519. 

  519.   msg.textContent='AI 正在理解创意和参考链接…'; msg.style.color='#a99ccb';
    520. 

  520.   try{
    521. 

  521.     const referenceImages=await readReferenceImages();
    522. 

  522.     if(referenceImages.length) msg.textContent='视觉模型正在分析上传参考图…';
    523. 

  523.     const r=await fetch('/api/creative-manifest',{method:'POST',headers:{'Content-Type':'application/json'},
    524. 

  524.       body:JSON.stringify({
    525. 

  525.         api_key:$('#apiKey').value,
    526. 

  526.         base_url:$('#baseUrl').value,
    527. 

  527.         text_model:$('#textModel').value,
    528. 

  528.         gameId:$('#wfGameId').value,
    529. 

  529.         title:$('#wfTitle').value,
    530. 

  530.         brief:$('#creativeBrief').value,
    531. 

  531.         references:$('#creativeRefs').value,
    532. 

  532.         reference_images:referenceImages,
    533. 

  533.         styleNotes:$('#creativeStyleNotes').value,
    534. 

  534.         avoidNotes:$('#creativeAvoidNotes').value,
    535. 

  535.         targetRtp:$('#wfTargetRtp').value,
    536. 

  536.         enableMathModel:$('#wfEnableMathModel').checked
    537. 

  537.       })});
    538. 

  538.     const d=await r.json();
    539. 

  539.     if(!d.ok){ msg.textContent='AI 生成失败: '+(d.error||'未知错误'); msg.style.color='#ff9d9d'; }
    540. 

  540.     else{
    541. 

  541.       $('#manifest').value=JSON.stringify(d.manifest,null,2);
    542. 

  542.       const req=d.creative_request||{};
    543. 

  543.       $('#wfGameId').value=req.gameId||$('#wfGameId').value;
    544. 

  544.       $('#wfTitle').value=req.title||$('#wfTitle').value;
    545. 

  545.       if(req.theme) $('#wfTheme').value=req.theme;
    546. 

  546.       if(req.reelMode) $('#wfReelMode').value=req.reelMode;
    547. 

  547.       if(req.volatility) $('#wfVolatility').value=req.volatility;
    548. 

  548.       if(req.characterCount) $('#wfCharacterCount').value=String(req.characterCount);
    549. 

  549.       if(req.uiCompleteness) $('#wfUiCompleteness').value=req.uiCompleteness;
    550. 

  550.       if(req.feedbackIntensity) $('#wfFeedbackIntensity').value=req.feedbackIntensity;
    551. 

  551.       const fs=new Set(req.features||[]);
    552. 

  552.       $('#wfCascades').checked=fs.has('cascades');
    553. 

  553.       $('#wfFreeSpins').checked=fs.has('free_spins');
    554. 

  554.       $('#wfWilds').checked=fs.has('wilds');
    555. 

  555.       $('#wfHoldWin').checked=fs.has('hold_win');
    556. 

  556.       $('#wfMultipliers').checked=fs.has('multipliers');
    557. 

  557.       renderGamePlan(d.game_plan, d.source);
    558. 

  558.       msg.textContent=`已生成完整游戏方案和 manifest（来源：${d.source}），可微调后开始生成图片资源。`;
    559. 

  559.       $('#genPanel').open=true;
    560. 

  560.     }
    561. 

  561.   }catch(e){ msg.textContent='请求失败: '+e; msg.style.color='#ff9d9d'; }
    562. 

  562.   btn.disabled=false;
    563. 

  563. };
    564. 

  564. 

  565. $('#openGenBtn').onclick=()=>{ $('#genPanel').open=true; $('#genPanel').scrollIntoView({behavior:'smooth',block:'start'}); };
    566. 

  566. 

  567. $('#exportBtn').onclick=async()=>{
    568. 

  568.   const game=$('#gameSel').value;
    569. 

  569.   if(!game||game==='(暂无)'){ opMsg('没有可导出的资源库',false); return; }
    570. 

  570.   const btn=$('#exportBtn'); btn.disabled=true; opMsg('打包中…');
    571. 

  571.   try{
    572. 

  572.     const r=await fetch('/api/export',{method:'POST',headers:{'Content-Type':'application/json'},
    573. 

  573.       body:JSON.stringify({game})});
    574. 

  574.     const d=await r.json();
    575. 

  575.     if(d.ok) opMsg('✅ 已导出到 '+d.pack);
    576. 

  576.     else opMsg('❌ '+(d.error||'导出失败'),false);
    577. 

  577.   }catch(e){ opMsg('请求失败: '+e,false); }
    578. 

  578.   btn.disabled=false;
    579. 

  579. };
    580. 

  580. 

  581. $('#deleteBtn').onclick=async()=>{
    582. 

  582.   const game=$('#gameSel').value;
    583. 

  583.   if(!game||game==='(暂无)'){ opMsg('没有可删除的资源库',false); return; }
    584. 

  584.   if(!confirm(`确定删除资源库「${game}」？此操作会从磁盘删掉 out/${game} 整个文件夹，不可恢复。`)) return;
    585. 

  585.   const btn=$('#deleteBtn'); btn.disabled=true; opMsg('删除中…');
    586. 

  586.   try{
    587. 

  587.     const r=await fetch('/api/delete',{method:'POST',headers:{'Content-Type':'application/json'},
    588. 

  588.       body:JSON.stringify({game})});
    589. 

  589.     const d=await r.json();
    590. 

  590.     if(d.ok){ opMsg('✅ 已删除 '+d.deleted); await loadLibrary(); }
    591. 

  591.     else opMsg('❌ '+(d.error||'删除失败'),false);
    592. 

  592.   }catch(e){ opMsg('请求失败: '+e,false); }
    593. 

  593.   btn.disabled=false;
    594. 

  594. };
    595. 

  595. $('#startBtn').onclick=async()=>{
    596. 

  596.   const btn=$('#startBtn'); const log=$('#log');
    597. 

  597.   btn.disabled=true; log.style.display='block'; log.textContent='任务创建中…';
    598. 

  598.   try{
    599. 

  599.     const r=await fetch('/api/generate',{method:'POST',headers:{'Content-Type':'application/json'},
    600. 

  600.       body:JSON.stringify({
    601. 

  601.         provider:$('#provider').value, api_key:$('#apiKey').value,
    602. 

  602.         base_url:$('#baseUrl').value, model:$('#model').value, size:$('#size').value,
    603. 

  603.         remove_bg:$('#removeBg').checked,
    604. 

  604.         manifest:$('#manifest').value, async:true })});
    605. 

  605.     const d=await r.json();
    606. 

  606.     if(!d.ok || !d.jobId){
    607. 

  607.       log.textContent=(d.logs||[]).join('\n')+(d.error?('\n❌ '+d.error):'');
    608. 

  608.       btn.disabled=false;
    609. 

  609.       return;
    610. 

  610.     }
    611. 

  611.     await pollJob(d.jobId, log, btn);
    612. 

  612.   }catch(e){ log.textContent='请求失败: '+e; }
    613. 

  613. };
    614. 

  614. 

  615. async function pollJob(jobId, log, btn){
    616. 

  616.   let lastText='';
    617. 

  617.   while(true){
    618. 

  618.     let d;
    619. 

  619.     try{
    620. 

  620.       d=await (await fetch('/api/job?id='+encodeURIComponent(jobId))).json();
    621. 

  621.     }catch(e){
    622. 

  622.       log.textContent=lastText+'\n轮询失败: '+e;
    623. 

  623.       btn.disabled=false;
    624. 

  624.       return;
    625. 

  625.     }
    626. 

  626.     const lines=d.logs||[];
    627. 

  627.     const head=`任务 ${jobId.slice(0,8)} · ${d.status||'running'} · ${(d.game||'')}`;
    628. 

  628.     lastText=head+'\n'+lines.join('\n')+(d.error?('\n❌ '+d.error):'');
    629. 

  629.     log.textContent=lastText;
    630. 

  630.     log.scrollTop=log.scrollHeight;
    631. 

  631.     if(d.status==='done'){
    632. 

  632.       await loadLibrary(d.game);
    633. 

  633.       btn.disabled=false;
    634. 

  634.       return;
    635. 

  635.     }
    636. 

  636.     if(d.status==='error'){
    637. 

  637.       btn.disabled=false;
    638. 

  638.       return;
    639. 

  639.     }
    640. 

  640.     await new Promise(r=>setTimeout(r,1200));
    641. 

  641.   }
    642. 

  642. }
    643. 

  643. 

  644. loadManifest(); loadLibrary();
    645. 

  645. </script>
    646. 

  646. </body>
    647. 

  647. </html>
    648.