575 lines
31 KiB
JavaScript
575 lines
31 KiB
JavaScript
// public/dev/render-demo.js — dev harness for the battlefield renderer (render/app.js):
|
||
// * prep scene: fake private state (hand / temp / board pieces, items, token stack), draggable; drops are
|
||
// applied locally as if the server accepted them (swap when occupied, equip items onto operators)
|
||
// * recordings (public/dev/recordings/*.json, tools/record-battle.mjs): real battles replayed at real speed
|
||
// through the same pushSnapshot/pushEvents path as the game, with play/pause, speed, scrub and scene select
|
||
// * stress scene: 120 units + projectiles / damage numbers every frame (FPS check)
|
||
// * fx scene: a small normal field (incl. art-less / unknown units, a crate and a turret device) cycling through
|
||
// every sim fx kind (render/fx.js FX_KINDS), every projectile kind (boomerang included) and every status icon; at
|
||
// 'lock' it plays 蕾缪安's S3 as the sim does (a lock every 0.5 s, then one shell every 0.3 s with its bombard)
|
||
// Query: ?scene=prep|<recording>|stress|numbers &stage=<stageId> &t=<seconds> &speed=<x> &paused=1 &panel=0 &quality=high|medium|low
|
||
// &pen=<recording> (prep: that recording's round preview — m.private.nextEnemies — in the enemy preview pen)
|
||
// &fa=L|R (prep on that half of the Final Assault boss field, view.setCamera('bossPrep', { side }))
|
||
// &board=2d|3d (the official 3D board scene, DESIGN §15; default 3D when the local art + WebGL2 are available)
|
||
// &cam=prep|normal|unite|boss|pen|bossPrep [&side=L|R &half=1 &shop=0] (official configBlackBoard framings)
|
||
// Puppeteer hook: window.__demo = { ready, view, seek(t), play(), pause(), setScene(name), stats(), log,
|
||
// refuseDrops (true ⇒ prep drops are silently ignored, like a server that rejects the move) }
|
||
|
||
import { createFieldView } from '../js/render/app.js';
|
||
import { data } from '../js/data.js';
|
||
import { assets } from '../js/assets.js';
|
||
import { GEO } from '../../shared/constants.js';
|
||
import { FX_KINDS } from '../js/render/fx.js';
|
||
|
||
const $ = (id) => document.getElementById(id);
|
||
const q = new URLSearchParams(location.search);
|
||
const logLines = [];
|
||
function log(...a) {
|
||
const s = a.map((x) => (typeof x === 'string' ? x : JSON.stringify(x))).join(' ');
|
||
logLines.push(s);
|
||
if (logLines.length > 12) logLines.shift();
|
||
$('log').textContent = logLines.join('\n');
|
||
}
|
||
window.addEventListener('error', (e) => log('ERROR', e.message));
|
||
window.addEventListener('unhandledrejection', (e) => log('REJECT', String(e.reason?.message || e.reason)));
|
||
|
||
const demo = { ready: false, errors: [], log: logLines };
|
||
window.__demo = demo;
|
||
|
||
let demoHover = null;
|
||
const STAGE_IDS = ['act2autochess_m01', 'act2autochess_m02', 'act2autochess_m03', 'act2autochess_m04', 'act1autochess_m01', 'act1autochess_m02', 'act1autochess_m03', 'act1autochess_m04'];
|
||
|
||
async function main() {
|
||
if (q.get('panel') === '0') $('panel').classList.add('is-hidden');
|
||
await data.loadAll('chess', 'tokens', 'items', 'enemies', 'stages', 'bonds', 'config');
|
||
await assets.ready();
|
||
const index = await fetch('/dev/recordings/index.json').then((r) => (r.ok ? r.json() : []), () => []);
|
||
const view = await createFieldView($('field'), {
|
||
data, assets, settings: { quality: q.get('quality') || 'high', damageNumbers: true },
|
||
...(q.has('aa') ? { antialias: q.get('aa') !== '0' } : {}),
|
||
});
|
||
demo.view = view;
|
||
window.__view = view;
|
||
|
||
// ---- UI --------------------------------------------------------------------------------------------------
|
||
const sceneSel = $('scene');
|
||
const scenes = [{ name: 'prep', title: '休整期 · 拖拽演示' }, ...index.map((r) => ({ name: r.name, title: r.title, rec: r })), { name: 'stress', title: '压力测试 · 120 单位' }, { name: 'fx', title: '特效图鉴 · 全部 fx' }, { name: 'numbers', title: '伤害数字 · 重叠测试' }];
|
||
for (const s of scenes) sceneSel.append(new Option(s.title, s.name));
|
||
const stageSel = $('stage');
|
||
for (const id of STAGE_IDS) { const st = data.lookup('stages', id); if (st) stageSel.append(new Option(st.name || id, id)); }
|
||
|
||
let current = null; // active scene controller
|
||
let playing = q.get('paused') !== '1';
|
||
let speed = Number(q.get('speed')) || 1;
|
||
$('speed').value = String(speed);
|
||
const setPlay = (p) => { playing = p; $('play').textContent = p ? '❚❚' : '▶'; };
|
||
setPlay(playing);
|
||
$('play').onclick = () => setPlay(!playing);
|
||
$('speed').onchange = () => { speed = Number($('speed').value) || 1; };
|
||
sceneSel.onchange = () => setScene(sceneSel.value);
|
||
stageSel.onchange = () => setScene(sceneSel.value, stageSel.value);
|
||
$('scrub').oninput = () => current?.seek?.((Number($('scrub').value) / 1000) * (current.duration || 0));
|
||
$('editable').onclick = () => { const on = !$('editable').classList.contains('is-on'); $('editable').classList.toggle('is-on', on); current?.setEditable?.(on); };
|
||
// board layer toggle (3D official scene ⇄ 2D atlas board) and the official camera framings
|
||
const syncBoardBtn = () => { const on = !!view.stats().board3d?.on; $('board3d').classList.toggle('is-on', on); $('board3d').textContent = on ? '3D' : '2D'; };
|
||
$('board3d').onclick = async () => { await view.setBoardMode?.(view.stats().board3d?.on ? '2d' : '3d'); syncBoardBtn(); };
|
||
setTimeout(syncBoardBtn, 0);
|
||
$('cam').onchange = () => {
|
||
const v = $('cam').value;
|
||
if (!v) return;
|
||
const [kind, side] = v.split('-');
|
||
if (kind === 'prep') view.setCamera('prep', { shop: side !== 'noshop' });
|
||
else if (kind === 'fa') view.setCamera('bossPrep', { side: side || 'L' });
|
||
else view.setCamera(kind, { side: side || 'L', half: !!side });
|
||
};
|
||
|
||
async function setScene(name, stageId) {
|
||
try { current?.stop?.(); } catch { /* ignore */ }
|
||
const s = scenes.find((x) => x.name === name) || scenes[0];
|
||
sceneSel.value = s.name;
|
||
$('title').textContent = s.title;
|
||
if (s.name === 'prep') current = await prepScene(view, stageId || q.get('stage') || 'act2autochess_m01', index);
|
||
else if (s.name === 'numbers') current = numbersScene(view, stageId || q.get('stage') || 'act2autochess_m02');
|
||
else if (s.name === 'stress') current = stressScene(view, stageId || q.get('stage') || 'act2autochess_m01');
|
||
else if (s.name === 'fx') current = fxScene(view, stageId || q.get('stage') || 'act2autochess_m03');
|
||
else current = await recordingScene(view, s.rec);
|
||
if (current.stageId) stageSel.value = current.stageId;
|
||
demo.scene = current;
|
||
return current;
|
||
}
|
||
demo.setScene = setScene;
|
||
demo.showRange = (uid) => (demoHover ? demoHover(uid) : false);
|
||
demo.seek = (t) => current?.seek?.(t);
|
||
demo.play = () => setPlay(true);
|
||
demo.pause = () => setPlay(false);
|
||
demo.stats = () => ({ ...view.stats(), scene: sceneSel.value, t: current?.time ?? 0, duration: current?.duration ?? 0 });
|
||
|
||
await setScene(q.get('scene') || 'prep');
|
||
const t0 = Number(q.get('t'));
|
||
if (Number.isFinite(t0) && t0 > 0) current?.seek?.(t0);
|
||
// ?cam=prep|normal|unite|boss|pen|bossPrep[&side=L|R&half=1&shop=0]: override the scene's camera (official framings)
|
||
if (q.get('cam')) {
|
||
view.setCamera(q.get('cam'), { side: q.get('side') || 'L', half: q.get('half') === '1', shop: q.get('shop') === '0' ? false : undefined, instant: true });
|
||
}
|
||
|
||
let last = performance.now();
|
||
const loop = (now) => {
|
||
const dt = Math.min(0.1, (now - last) / 1000);
|
||
last = now;
|
||
if (current?.tick) {
|
||
try { current.tick(playing ? dt * speed : 0); } catch (err) { log('tick', err.message); }
|
||
if (current.duration) {
|
||
$('scrub').value = String(Math.round((current.time / current.duration) * 1000));
|
||
$('time').textContent = `${current.time.toFixed(1)} / ${current.duration.toFixed(1)} s`;
|
||
}
|
||
}
|
||
const st = view.stats();
|
||
$('stats').textContent = `fps ${st.fps.toFixed(0)} frame ${st.frameMs.toFixed(1)} ms units ${st.units} particles ${st.particles} proj ${st.projectiles} nums ${st.numbers}\nspine ${st.spine ? `${st.spine.ready} ready / ${st.spine.loading} loading / ${st.spine.failed} failed` : '-'} rate ${st.rate?.toFixed?.(2) ?? '-'} buffered ${st.buffered}\nboard ${st.board3d?.on ? `3D · ${st.board3d.calls} calls · ${st.board3d.triangles} tris · ${st.board3d.cpuMs} ms` : '2D atlas'}`;
|
||
requestAnimationFrame(loop);
|
||
};
|
||
requestAnimationFrame(loop);
|
||
demo.ready = true;
|
||
}
|
||
|
||
// =============================================================================================================
|
||
// prep scene
|
||
|
||
async function prepScene(view, stageId, index = []) {
|
||
const stage = data.lookup('stages', stageId);
|
||
view.setStage(stage);
|
||
const fa = q.get('fa');
|
||
if (fa === 'L' || fa === 'R') view.setCamera('bossPrep', { side: fa });
|
||
else view.setCamera('prep', { rect: { ...GEO.NORMAL_RECT }, side: 'L' });
|
||
// the enemy preview pen: a recording's round preview (m.private.nextEnemies shape), else a small R4-like wave
|
||
let nextEnemies = [
|
||
{ enemyKey: 'enemy_1007_slime', count: 2, gate: 'lower', t: 3, fly: false, elite: false, source: 'wave' },
|
||
{ enemyKey: 'enemy_1000_gopro_2', count: 3, gate: 'upper', t: 3, fly: false, elite: false, source: 'wave' },
|
||
{ enemyKey: 'enemy_1019_jshoot', count: 3, gate: 'lower', t: 12, fly: false, elite: false, source: 'wave' },
|
||
{ enemyKey: 'enemy_1006_shield', count: 1, gate: 'lower', t: 13, fly: false, elite: true, source: 'wave' },
|
||
{ enemyKey: 'enemy_1005_yokai', count: 2, gate: 'upper', t: 7, fly: true, elite: false, source: 'wave' },
|
||
];
|
||
const penRec = q.get('pen') ? index.find((r) => r.name === q.get('pen')) : null;
|
||
if (penRec) {
|
||
const rec = await fetch(`/dev/recordings/${penRec.file}`).then((r) => r.json(), () => null);
|
||
if (Array.isArray(rec?.preview)) nextEnemies = rec.preview;
|
||
} else if (q.get('pen') === '0') nextEnemies = [];
|
||
const chess = data.list('chess').filter((c) => c.visible && !c.isGolden);
|
||
const pick = (name) => chess.find((c) => c.name === name);
|
||
const golden = (c) => data.lookup('chess', c.goldenId) || c;
|
||
const items = data.list('items').filter((i) => i.itemType === 'EQUIP' && !i.isGolden);
|
||
let uid = 1;
|
||
const P = (c, extra = {}) => ({ uid: uid++, kind: 'chess', id: c.chessId, golden: !!c.isGolden, tier: c.tier, items: [], ...extra });
|
||
const deploy = stage?.deployTiles?.normal || { melee: [], rangedOnly: [] };
|
||
const meleeTiles = deploy.melee.slice().sort((a, b) => a[0] - b[0] || b[1] - a[1]);
|
||
const rangedTiles = [...(deploy.rangedOnly || []), ...meleeTiles.slice().reverse()];
|
||
const state = { hand: Array(10).fill(null), temp: Array(5).fill(null), board: [], nextEnemies };
|
||
const taken = new Set();
|
||
const place = (c) => {
|
||
const list = c.position === 'MELEE' ? meleeTiles : rangedTiles;
|
||
const t = list.find(([r, cc]) => !taken.has(`${r},${cc}`));
|
||
if (!t) return;
|
||
taken.add(`${t[0]},${t[1]}`);
|
||
state.board.push({ ...P(c), row: t[0], col: t[1] });
|
||
};
|
||
for (const n of ['塞雷娅', '银灰', '德克萨斯', '能天使', '莫斯提马', '白面鸮', '伊内丝']) { const c = pick(n); if (c) place(n === '银灰' || n === '能天使' ? golden(c) : c); }
|
||
const it0 = items[3];
|
||
if (state.board[0] && it0) state.board[0].items = [{ uid: uid++, id: it0.id }];
|
||
const handNames = ['斯卡蒂', '夕', '史尔特尔', '缇缇', '蕾缪安', '异客'];
|
||
handNames.forEach((n, i) => { const c = pick(n); if (c) state.hand[i] = P(c); });
|
||
if (items[0]) state.hand[6] = { uid: uid++, kind: 'item', id: items[0].id, golden: false, tier: items[0].tier };
|
||
if (items[12]) state.hand[7] = { uid: uid++, kind: 'item', id: items[12].id, golden: false, tier: items[12].tier };
|
||
const tok = data.list('tokens').find((t) => t.kind === 'summon' && t.displayType === 'DEFAULT');
|
||
if (tok) state.hand[8] = { uid: uid++, kind: 'token', id: tok.tokenId, golden: false, tier: 1, count: 3 };
|
||
const c1 = pick('角峰'), c2 = pick('格雷伊');
|
||
if (c1) state.temp[0] = P(c1);
|
||
if (c2) state.temp[1] = P(c2);
|
||
|
||
let editable = true;
|
||
const find = (u) => {
|
||
for (let i = 0; i < 10; i++) if (state.hand[i]?.uid === u) return { area: 'hand', idx: i, piece: state.hand[i] };
|
||
for (let i = 0; i < 5; i++) if (state.temp[i]?.uid === u) return { area: 'temp', idx: i, piece: state.temp[i] };
|
||
const b = state.board.find((p) => p.uid === u);
|
||
return b ? { area: 'board', piece: b } : null;
|
||
};
|
||
const at = (t) => (t.area === 'hand' ? state.hand[t.idx] : state.board.find((p) => p.row === t.row && p.col === t.col) || null);
|
||
const tileOk = (piece, r, c) => {
|
||
const rec = data.lookup('chess', piece.id);
|
||
const inMelee = deploy.melee.some(([a, b]) => a === r && b === c);
|
||
const inRanged = (deploy.rangedOnly || []).some(([a, b]) => a === r && b === c);
|
||
return rec?.position === 'MELEE' ? inMelee : inMelee || inRanged;
|
||
};
|
||
const canPlace = (u, target) => {
|
||
const src = find(u);
|
||
if (!src || !editable) return false;
|
||
const occ = at(target);
|
||
if (src.piece.kind === 'item') return !!occ && occ.kind === 'chess' && (occ.items || []).length < 2;
|
||
if (target.area === 'hand') return !occ || src.area !== 'board' || occ.kind !== 'item';
|
||
if (src.piece.kind !== 'chess' && src.piece.kind !== 'token') return false;
|
||
if (!tileOk(src.piece, target.row, target.col) && src.piece.kind === 'chess') return false;
|
||
if (occ && src.area === 'board' && !tileOk(occ, src.piece.row, src.piece.col)) return false;
|
||
return true;
|
||
};
|
||
const apply = (u, target) => {
|
||
const src = find(u);
|
||
if (!src) return;
|
||
const occ = at(target);
|
||
if (src.piece.kind === 'item') {
|
||
if (occ && occ.kind === 'chess') { occ.items = [...(occ.items || []), { uid: src.piece.uid, id: src.piece.id }]; remove(src); }
|
||
return;
|
||
}
|
||
const moved = { ...src.piece };
|
||
remove(src);
|
||
if (occ) {
|
||
const o = { ...occ };
|
||
removeAt(target);
|
||
putAt(o, src.area === 'board' ? { area: 'board', row: src.piece.row, col: src.piece.col } : { area: src.area, idx: src.idx });
|
||
}
|
||
putAt(moved, target);
|
||
};
|
||
const remove = (loc) => {
|
||
if (loc.area === 'hand') state.hand[loc.idx] = null;
|
||
else if (loc.area === 'temp') state.temp[loc.idx] = null;
|
||
else state.board = state.board.filter((p) => p.uid !== loc.piece.uid);
|
||
};
|
||
const removeAt = (t) => {
|
||
if (t.area === 'hand') state.hand[t.idx] = null;
|
||
else state.board = state.board.filter((p) => !(p.row === t.row && p.col === t.col));
|
||
};
|
||
const putAt = (p, t) => {
|
||
const { row, col, ...rest } = p; // eslint-disable-line no-unused-vars
|
||
if (t.area === 'hand') state.hand[t.idx] = rest;
|
||
else if (t.area === 'temp') state.temp[t.idx] = rest;
|
||
else state.board.push({ ...rest, row: t.row, col: t.col });
|
||
};
|
||
const push = () => view.setPrep(JSON.parse(JSON.stringify(state)), { editable, canPlace });
|
||
push();
|
||
const offs = [
|
||
view.on('pieceDrop', (e) => {
|
||
log('pieceDrop', { uid: e.uid, target: e.target });
|
||
if (e.target.area === 'outside' || demo.refuseDrops) return;
|
||
// simulate the server round trip
|
||
setTimeout(() => { apply(e.uid, e.target); push(); }, 90);
|
||
}),
|
||
view.on('pieceClick', (e) => log('pieceClick', { uid: e.uid, detail: e.detail })),
|
||
view.on('pieceDragStart', (e) => { view.highlightTiles(null); log('pieceDragStart', { uid: e.uid, from: e.from }); }),
|
||
// hover a board operator ⇒ its attack range (orange) + its tile (mint), like the original
|
||
view.on('pieceHover', (e) => {
|
||
view.highlightTiles(null);
|
||
const p = e.uid != null ? state.board.find((x) => x.uid === e.uid) : null;
|
||
const rec = p ? data.lookup('chess', p.id) : null;
|
||
if (!rec || !Array.isArray(rec.rangeGrid)) return;
|
||
const tiles = rec.rangeGrid.map(([dr, dc]) => [p.row + dr, p.col + dc]).filter(([r, c]) => !(r === p.row && c === p.col));
|
||
view.highlightTiles(tiles, { color: 0xff9c33, fill: 0.28, line: 0.85, group: 'range' });
|
||
view.highlightTiles([[p.row, p.col]], { color: 0x4ed8af, fill: 0.3, line: 0.9, group: 'rangeStand' });
|
||
}),
|
||
];
|
||
demoHover = (uid) => {
|
||
const p = state.board.find((x) => x.uid === uid);
|
||
const rec = p ? data.lookup('chess', p.id) : null;
|
||
if (!rec) return false;
|
||
view.highlightTiles(rec.rangeGrid.map(([dr, dc]) => [p.row + dr, p.col + dc]).filter(([r, c]) => !(r === p.row && c === p.col)), 'range');
|
||
view.highlightTiles([[p.row, p.col]], 'rangeStand');
|
||
return true;
|
||
};
|
||
let hl = 0;
|
||
return {
|
||
stageId,
|
||
duration: 0,
|
||
time: 0,
|
||
setEditable(on) { editable = on; push(); },
|
||
tick(dt) {
|
||
hl += dt;
|
||
// periodic range preview of the first ranged board piece (demo of highlightTiles 'range')
|
||
void hl;
|
||
},
|
||
stop() { for (const off of offs) off(); view.highlightTiles(null); },
|
||
state,
|
||
};
|
||
}
|
||
|
||
// =============================================================================================================
|
||
// recording scene
|
||
|
||
async function recordingScene(view, meta) {
|
||
const rec = await fetch(`/dev/recordings/${meta.file}`).then((r) => r.json());
|
||
const stage = data.lookup('stages', rec.stageId);
|
||
const frames = rec.frames;
|
||
const t0 = frames[0].snap.t;
|
||
const duration = frames[frames.length - 1].snap.t - t0;
|
||
const kind = rec.kind === 'hidden' ? 'boss' : rec.kind;
|
||
const fieldId = rec.field.fieldId;
|
||
let idx = 0, gameT = t0, endWait = 0;
|
||
|
||
const start = () => {
|
||
view.setStage(stage);
|
||
view.enterBattle(rec.field);
|
||
view.setCamera(kind, { rect: rec.field.rect, side: 'L' });
|
||
idx = 0; gameT = t0 - 0.001; endWait = 0;
|
||
};
|
||
start();
|
||
|
||
const feed = () => {
|
||
while (idx < frames.length && frames[idx].snap.t <= gameT) {
|
||
const f = frames[idx++];
|
||
// like the match server: b.ev first, then the b.snap of the same drain, both with the game time `gt`
|
||
// (the recorded snapshot keeps its numeric `t`, which the engine also accepts)
|
||
if (f.ev.length) view.pushEvents({ t: 'b.ev', fieldId, gt: f.snap.t, ev: f.ev });
|
||
view.pushSnapshot(f.snap);
|
||
}
|
||
};
|
||
|
||
const seek = (t) => {
|
||
const target = t0 + Math.max(0, Math.min(duration, t));
|
||
view.enterBattle(rec.field);
|
||
view.setCamera(kind, { rect: rec.field.rect, side: 'L', instant: true });
|
||
let k = 0;
|
||
while (k + 1 < frames.length && frames[k + 1].snap.t <= target) k++;
|
||
const infos = new Map();
|
||
for (let i = 0; i <= k; i++) for (const e of frames[i].ev) if (e[0] === 'spawn') infos.set(e[1].id, e[1]);
|
||
const present = new Set(frames[k].snap.units.map((u) => u[0]));
|
||
const spawns = [...infos.values()].filter((u) => present.has(u.id)).map((u) => ['spawn', u]);
|
||
if (spawns.length) view.pushEvents({ fieldId, ev: spawns });
|
||
// replay the last few snapshots so the interpolation buffer has a history
|
||
const from = Math.max(0, k - 3);
|
||
for (let i = from; i <= k; i++) view.pushSnapshot(frames[i].snap);
|
||
view.debug.interp.snapToNewest();
|
||
idx = k + 1;
|
||
gameT = frames[k].snap.t;
|
||
};
|
||
|
||
return {
|
||
stageId: rec.stageId,
|
||
duration,
|
||
get time() { return Math.max(0, gameT - t0); },
|
||
seek,
|
||
tick(dt) {
|
||
if (dt <= 0) return;
|
||
if (idx >= frames.length) {
|
||
endWait += dt;
|
||
if (endWait > 3) start();
|
||
return;
|
||
}
|
||
gameT += dt * 2; // combat runs at 2× real time
|
||
feed();
|
||
},
|
||
stop() {},
|
||
rec,
|
||
};
|
||
}
|
||
|
||
// =============================================================================================================
|
||
// stress scene: 120 units, constant projectiles / numbers
|
||
|
||
function stressScene(view, stageId) {
|
||
const stage = data.lookup('stages', stageId);
|
||
view.setStage(stage);
|
||
const rect = { r0: 9, r1: 12, c0: 0, c1: 20 };
|
||
const chess = data.list('chess').filter((c) => c.visible && !c.isGolden);
|
||
const enemies = data.list('enemies').filter((e) => assets.spineEntry(e.key) && e.rank !== 'BOSS');
|
||
let seed = 7;
|
||
const rnd = () => ((seed = (seed * 1103515245 + 12345) & 0x7fffffff) / 0x7fffffff);
|
||
const units = [];
|
||
let id = 1;
|
||
for (let i = 0; i < 40; i++) {
|
||
const c = chess[(i * 7) % chess.length];
|
||
units.push({ id: id++, kind: 'op', side: 'ally', defId: c.chessId, name: c.name, tier: c.tier, golden: i % 6 === 0, spine: c.assets?.spine, avatar: c.assets?.avatar, x: 2 + (i % 17), y: 9 + ((i / 17) | 0) % 4, facing: 1, maxHp: 3000 });
|
||
}
|
||
for (let i = 0; i < 80; i++) {
|
||
const e = enemies[(i * 5) % enemies.length];
|
||
units.push({ id: id++, kind: 'enemy', side: 'enemy', defId: e.key, name: e.name, tier: 1, golden: false, spine: e.spine || e.key, avatar: e.iconId || e.key, x: 20 - (i % 20), y: 9 + (i % 4) + 0.3, facing: -1, maxHp: 5000 });
|
||
}
|
||
const field = { fieldId: 'stress', kind: 'unite', rect, stageId, units };
|
||
view.enterBattle(field);
|
||
view.setCamera('unite', { rect });
|
||
let t = 0, acc = 0;
|
||
const hp = new Map(units.map((u) => [u.id, u.maxHp]));
|
||
const kinds = ['arrow', 'bolt', 'orb', 'none', 'bomb', 'chain'];
|
||
return {
|
||
stageId,
|
||
duration: 0,
|
||
time: 0,
|
||
tick(dt) {
|
||
if (dt <= 0) return;
|
||
acc += dt * 2;
|
||
while (acc >= 0.1) {
|
||
acc -= 0.1;
|
||
t += 0.1;
|
||
const tuples = units.map((u) => {
|
||
let x = u.x, y = u.y;
|
||
if (u.side === 'enemy') { x = 1 + ((u.x - t * 0.35 + 40) % 19); y = u.y + Math.sin(t + u.id) * 0.25; }
|
||
let h = hp.get(u.id);
|
||
if (h <= 0) h = u.maxHp;
|
||
hp.set(u.id, h);
|
||
const flags = (u.id % 11 === 0 ? 2 : 0) | (u.id % 13 === 0 ? 16 : 0);
|
||
return [u.id, Math.round(x * 100) / 100, Math.round(y * 100) / 100, h, u.maxHp, (t * 3 + u.id) % 20, 20, flags, u.side === 'enemy' ? 1 : 0];
|
||
});
|
||
const ev = [];
|
||
for (let k = 0; k < 14; k++) {
|
||
const a = units[(rnd() * 40) | 0], b = units[40 + ((rnd() * 80) | 0)];
|
||
ev.push(['atk', a.id, b.id, kinds[(rnd() * kinds.length) | 0]]);
|
||
const d = 100 + ((rnd() * 900) | 0);
|
||
hp.set(b.id, hp.get(b.id) - d);
|
||
ev.push(['dmg', b.id, d, rnd() < 0.6 ? 'phys' : 'arts']);
|
||
}
|
||
for (let k = 0; k < 4; k++) { const b = units[(rnd() * 40) | 0]; ev.push(['heal', b.id, 150]); }
|
||
if (rnd() < 0.2) ev.push(['skill', units[(rnd() * 40) | 0].id, 1]);
|
||
view.pushEvents({ t: 'b.ev', fieldId: 'stress', gt: t, ev });
|
||
view.pushSnapshot({ t: 'b.snap', fieldId: 'stress', gt: t, units: tuples, dp: 10, killed: 0, total: 80 });
|
||
}
|
||
},
|
||
stop() {},
|
||
};
|
||
}
|
||
|
||
// =============================================================================================================
|
||
// fx gallery: every fx kind, projectile kind and status on a small static field
|
||
|
||
function fxScene(view, stageId) {
|
||
const stage = data.lookup('stages', stageId);
|
||
view.setStage(stage);
|
||
const rect = { ...GEO.NORMAL_RECT };
|
||
const pick = (name) => data.list('chess').find((c) => c.name === name && !c.isGolden);
|
||
const op = (id, name, x, y) => { const c = pick(name); return c ? { id, kind: 'op', side: 'ally', defId: c.chessId, name, tier: c.tier, golden: false, spine: c.assets?.spine, avatar: c.assets?.avatar, x, y, facing: 1, maxHp: 3000 } : null; };
|
||
const en = (id, key, x, y, extra = {}) => { const e = data.lookup('enemies', key); return { id, kind: 'enemy', side: 'enemy', defId: key, name: e?.name || key, tier: 1, golden: false, spine: e?.spine || key, avatar: e?.iconId || key, x, y, facing: -1, maxHp: 4000, ...extra }; };
|
||
const units = [
|
||
op(1, '银灰', 4, 9), op(2, '能天使', 3, 11), op(3, '塞雷娅', 5, 10), op(4, '莫斯提马', 6, 12),
|
||
en(20, 'enemy_1007_slime', 7, 9), en(21, 'enemy_5601_entlec', 8, 10), en(22, 'enemy_nonexistent_x', 7.4, 11),
|
||
en(23, 'enemy_1042_frostd', 9, 9.2), en(24, 'enemy_2016_csphtm', 8.6, 12, { boss: true, maxHp: 90000 }),
|
||
{ id: 30, kind: 'device', side: 'ally', defId: 'trap_1105_accrate', name: 'crate', x: 6, y: 9, facing: 1, maxHp: 100 },
|
||
{ id: 31, kind: 'device', side: 'ally', defId: 'trap_1104_aclasert', name: 'turret', x: 5, y: 12, facing: 1, maxHp: 3000 },
|
||
].filter(Boolean);
|
||
view.enterBattle({ fieldId: 'fx', kind: 'normal', rect, stageId, units });
|
||
view.setCamera('normal', { rect });
|
||
const kinds = Object.keys(FX_KINDS);
|
||
const projs = ['arrow', 'bolt', 'orb', 'bomb', 'lob', 'drone', 'enemy', 'boomerang', 'chain', 'chainHeal', 'beam', 'none'];
|
||
const statuses = ['stun', 'ab:frost', 'reed2:scorch', 'fragile', 'sleep', 'silence', 'levitate', 'skill:shotst_shred', 'lumen:resist'];
|
||
let t = 0, acc = 0, i = 0;
|
||
const hp = new Map(units.map((u) => [u.id, u.maxHp]));
|
||
const unitAt = (id) => units.find((u) => u.id === id) || units[0];
|
||
const extraFor = (k) => {
|
||
const base = { id: [1, 20, 21, 3, 23][i % 5] };
|
||
switch (FX_KINDS[k].a) {
|
||
case 'beam': case 'bolt': return { ...base, from: 1, to: 20, src: 2 };
|
||
case 'volley': return { ...base, id: 2, src: 2, targets: [20, 21, 23] };
|
||
case 'blink': return { ...base, id: 21, fx: 9, fy: 11 };
|
||
case 'move': return { ...base, id: 20, fromX: 9, fromY: 9 };
|
||
case 'zone': case 'telegraph': return { ...base, r: 1.5, dur: 2, tiles: k === 'telegraph' ? 'box' : undefined };
|
||
case 'dp': return { ...base, id: 3, n: 10 };
|
||
case 'element': return { ...base, id: 21, element: ['burn', 'neural', 'apoptosis'][i % 3] };
|
||
case 'shell': return { id: 2, r: 1.5, t: 0.3, i: 0 }; // 蕾缪安 (id = the shooter) shelling an enemy
|
||
case 'flame': return { id: 1, target: 20, r: 1, n: 1, dur: 1 }; // 炎佑's jet (id = the dragon) onto its target
|
||
default: return k === 'lock' ? { id: 21, src: 2 } : FX_KINDS[k].pt ? { id: 2, r: 1.5 } : base;
|
||
}
|
||
};
|
||
// `pt` kinds name the shooter in `id` and happen at an enemy's spot; a 'flame' happens at its target
|
||
const posFor = (k, ex) => unitAt(FX_KINDS[k].pt ? [21, 23, 20][i % 3] : FX_KINDS[k].a === 'flame' ? ex.target : ex.id);
|
||
// 蕾缪安 S3 as the sim plays it (sim/content/kits/ops/chess_char_6_01-lemuen.js): a lock every 0.5 s, then after the skill one shell every
|
||
// 0.3 s on the locks in order, each landing 0.3 s later with its bombard — queued [game time, event]
|
||
const queue = [];
|
||
const lemuenS3 = () => {
|
||
const locks = [21, 23, 20, 21, 24];
|
||
locks.forEach((id, k) => queue.push([t + 0.5 * k, ['fx', 'lock', unitAt(id).x, unitAt(id).y, { id, src: 2 }]]));
|
||
const end = t + 0.5 * locks.length;
|
||
queue.push([end - 0.5, ['skill', 2, 0]]);
|
||
locks.forEach((id, k) => {
|
||
const x = unitAt(id).x + ((k * 37) % 7 - 3) * 0.05, y = unitAt(id).y + ((k * 53) % 7 - 3) * 0.05;
|
||
queue.push([end + 0.3 * k, ['fx', 'bombardShell', x, y, { id: 2, r: 1.5, t: 0.3, i: k }]]);
|
||
queue.push([end + 0.3 * k + 0.3, ['fx', 'bombard', x, y, { id: 2, r: 1.5 }]]);
|
||
});
|
||
};
|
||
return {
|
||
stageId, duration: 0, time: 0,
|
||
get kind() { return kinds[(i - 1 + kinds.length) % kinds.length]; },
|
||
tick(dt) {
|
||
if (dt <= 0) return;
|
||
acc += dt * 2;
|
||
while (acc >= 0.1) {
|
||
acc -= 0.1;
|
||
t += 0.1;
|
||
const ev = [];
|
||
for (let q = queue.length - 1; q >= 0; q--) if (queue[q][0] <= t + 1e-6) ev.unshift(queue.splice(q, 1)[0][1]);
|
||
if (Math.round(t * 10) % 5 === 0) {
|
||
const k = kinds[i % kinds.length];
|
||
const ex = extraFor(k);
|
||
const at = posFor(k, ex);
|
||
if (k === 'lock' && !queue.length) { ev.push(['skill', 2, 1]); lemuenS3(); }
|
||
ev.push(['fx', k, at.x, at.y, ex]);
|
||
$('title').textContent = `特效图鉴 · ${k} (${FX_KINDS[k].a})`;
|
||
const a = units[i % 4], b = units[4 + (i % 5)];
|
||
const pk = projs[i % projs.length];
|
||
ev.push(['atk', pk === 'chain' ? 20 : a.id, b.id, pk]);
|
||
ev.push(['dmg', b.id, 120 + (i * 37) % 900, ['phys', 'arts', 'true', 'burn'][i % 4]]);
|
||
if (i % 3 === 0) ev.push(['heal', units[i % 4].id, 240]);
|
||
const st = statuses[i % statuses.length];
|
||
ev.push(['status', b.id, st, 1], ['status', units[4 + ((i + 2) % 5)].id, statuses[(i + 4) % statuses.length], 0]);
|
||
if (i % 6 === 0) ev.push(['skill', units[i % 4].id, 1]);
|
||
if (i % 6 === 3) ev.push(['skill', units[(i - 3) % 4].id, 0]);
|
||
hp.set(b.id, Math.max(1, hp.get(b.id) - 300));
|
||
i++;
|
||
}
|
||
const tuples = units.map((u) => {
|
||
const h = hp.get(u.id);
|
||
const flags = u.id === 21 ? 1 : u.id === 23 ? 128 : u.id === 2 ? 32 : 0;
|
||
return [u.id, u.x, u.y, h, u.maxHp, (t * 2 + u.id) % 20, u.kind === 'op' ? 20 : 0, flags, u.side === 'enemy' ? 2 : 0];
|
||
});
|
||
view.pushEvents({ t: 'b.ev', fieldId: 'fx', gt: t, ev });
|
||
view.pushSnapshot({ t: 'b.snap', fieldId: 'fx', gt: t, units: tuples, dp: 10, killed: 0, total: 5 });
|
||
}
|
||
},
|
||
stop() {},
|
||
};
|
||
}
|
||
|
||
// =============================================================================================================
|
||
// damage numbers: a boss and a knot of minions standing on top of each other take rapid mixed hits (the '41509' /
|
||
// '201625' overlap cases: numbers of different units side by side must never read as one)
|
||
|
||
function numbersScene(view, stageId) {
|
||
const stage = data.lookup('stages', stageId);
|
||
view.setStage(stage);
|
||
const rect = { ...GEO.BOSS_RECT };
|
||
const pick = (name) => data.list('chess').find((c) => c.name === name && !c.isGolden);
|
||
const op = (id, name, x, y) => { const c = pick(name); return c ? { id, kind: 'op', side: 'ally', defId: c.chessId, name, tier: c.tier, golden: false, spine: c.assets?.spine, avatar: c.assets?.avatar, x, y, facing: 1, dir: 'RIGHT', maxHp: 4000 } : null; };
|
||
const en = (id, key, x, y, extra = {}) => { const e = data.lookup('enemies', key); return { id, kind: 'enemy', side: 'enemy', defId: key, name: e?.name || key, tier: 1, golden: false, spine: e?.spine || key, avatar: e?.iconId || key, x, y, facing: -1, maxHp: 6000, ...extra }; };
|
||
const units = [
|
||
op(1, '史尔特尔', 6, 3), op(2, '能天使', 5, 4), op(3, '莫斯提马', 5, 2), op(4, '白面鸮', 4, 3),
|
||
en(20, 'enemy_1001_bigbo', 7.2, 3.1, { boss: true, maxHp: 400000 }),
|
||
en(21, 'enemy_1007_slime', 7.35, 3.0), en(22, 'enemy_1007_slime', 7.1, 2.9), en(23, 'enemy_1000_gopro_2', 7.5, 3.2),
|
||
en(24, 'enemy_1006_shield', 8.1, 3.05, { maxHp: 12000 }), en(25, 'enemy_1019_jshoot', 7.6, 4.1),
|
||
].filter(Boolean);
|
||
view.enterBattle({ fieldId: 'nums', kind: 'boss', rect, stageId, units });
|
||
view.setCamera('boss', { rect, side: 'L', half: true });
|
||
let seed = 11;
|
||
const rnd = () => ((seed = (seed * 1103515245 + 12345) & 0x7fffffff) / 0x7fffffff);
|
||
const hp = new Map(units.map((u) => [u.id, u.maxHp]));
|
||
const enemies = units.filter((u) => u.side === 'enemy');
|
||
let t = 0, acc = 0;
|
||
return {
|
||
stageId, duration: 0, time: 0,
|
||
tick(dt) {
|
||
if (dt <= 0) return;
|
||
acc += dt * 2;
|
||
while (acc >= 0.1) {
|
||
acc -= 0.1;
|
||
t += 0.1;
|
||
const ev = [];
|
||
for (let k = 0; k < 3; k++) {
|
||
const b = enemies[(rnd() * enemies.length) | 0];
|
||
const boss = !!b.boss;
|
||
const style = ['phys', 'arts', 'phys', 'true', 'burn'][(rnd() * 5) | 0];
|
||
const n = boss ? 2000 + ((rnd() * 200000) | 0) : 40 + ((rnd() * 900) | 0);
|
||
ev.push(['atk', units[(rnd() * 4) | 0].id, b.id, 'none'], ['dmg', b.id, n, style]);
|
||
hp.set(b.id, Math.max(1, hp.get(b.id) - n * 0.02));
|
||
}
|
||
if (rnd() < 0.5) ev.push(['heal', units[(rnd() * 4) | 0].id, 60 + ((rnd() * 400) | 0)]);
|
||
const tuples = units.map((u) => [u.id, u.x, u.y, hp.get(u.id), u.maxHp, 5, 20, u.side === 'enemy' && u.x < 7.4 ? 1 : 0, 0]);
|
||
view.pushEvents({ t: 'b.ev', fieldId: 'nums', gt: t, ev });
|
||
view.pushSnapshot({ t: 'b.snap', fieldId: 'nums', gt: t, units: tuples, dp: 10, killed: 0, total: 6 });
|
||
}
|
||
},
|
||
stop() {},
|
||
};
|
||
}
|
||
|
||
main().catch((err) => { log('FATAL', err.message); console.error(err); demo.error = err.message; });
|