957 lines
34 KiB
JavaScript
957 lines
34 KiB
JavaScript
/* ZHILA · the quarry
|
||
a core is a place, a face is a cut, a ring is a year.
|
||
the choir goes out and takes; the hand cuts and sets. */
|
||
|
||
(function () {
|
||
'use strict';
|
||
|
||
const $ = (s, r = document) => r.querySelector(s);
|
||
const $$ = (s, r = document) => Array.prototype.slice.call(r.querySelectorAll(s));
|
||
const clamp = (v, a, b) => v < a ? a : v > b ? b : v;
|
||
const TAU = Math.PI * 2;
|
||
const esc = s => String(s).replace(/[&<>"]/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[c]));
|
||
|
||
const tray = $('#tray');
|
||
const tctx = tray.getContext('2d');
|
||
const overlay = $('#tray-overlay');
|
||
const stage = $('#tray-stage');
|
||
const wall = $('#face-wall');
|
||
const storeEl = $('#store');
|
||
const ledgerEl = $('#ledger');
|
||
|
||
const E = window.ZHILA_ENGINE;
|
||
const cores = E ? E.cores : [];
|
||
const SEMIS = [-12, -9, -7, -5, 0, 2, 3, 5, 7, 8, 10, 12, 14, 15, 17, 19];
|
||
|
||
const state = {
|
||
sel: 0,
|
||
lens: 0.84,
|
||
fracture: 0,
|
||
faceSeed: 7,
|
||
selFace: -1,
|
||
rings: 4,
|
||
ghost: true,
|
||
weather: { age: 0.34, pressure: 0.52, air: 0.41, heat: 0.28 }
|
||
};
|
||
|
||
const HAND_BANK = ['underpass, 2am', 'wet brick', 'empty pool', 'ventilation shaft', 'far room', 'snow on tin', 'lift cable'];
|
||
let handBank = HAND_BANK.slice();
|
||
let lensLine = null, lensHandle = null, lensText = null;
|
||
|
||
/* ————— cores ————— */
|
||
|
||
function mulberry(seed) {
|
||
let a = seed | 0;
|
||
return function () {
|
||
a = a + 0x6D2B79F5 | 0;
|
||
let t = Math.imul(a ^ a >>> 15, 1 | a);
|
||
t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
|
||
return ((t ^ t >>> 14) >>> 0) / 4294967296;
|
||
};
|
||
}
|
||
|
||
/* ————— ledger ————— */
|
||
|
||
let entries = E ? E.log : [];
|
||
|
||
function sealHTML(kind, small) {
|
||
if (!kind) return '';
|
||
return '<span class="seal seal--' + kind + '"><i aria-hidden="true"></i><span>' + kind + '</span></span>';
|
||
}
|
||
|
||
function renderLedger() {
|
||
entries = E ? E.log : entries;
|
||
ledgerEl.innerHTML = entries.slice(0, 3).map(function (e) {
|
||
return '<li class="ledger-item">' +
|
||
'<div class="ledger-top"><span class="ledger-t">' + e.t + '</span>' +
|
||
'<span class="ledger-tool">' + esc(e.tool) + '</span>' +
|
||
'<span class="ledger-by' + (e.by === 'mcp' ? ' is-mcp' : '') + '">' + e.by + '</span></div>' +
|
||
'<div class="ledger-detail">' + esc(e.detail) + ' ' + sealHTML(e.seal) + '</div>' +
|
||
'</li>';
|
||
}).join('');
|
||
}
|
||
|
||
function nowTime() {
|
||
const d = new Date();
|
||
return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
|
||
}
|
||
|
||
function log(tool, detail, seal, by) {
|
||
if (E) E.addLog(tool, detail, seal, by);
|
||
}
|
||
|
||
/* ————— core store ————— */
|
||
|
||
function drawThumb(canvas, core) {
|
||
const g = canvas.getContext('2d');
|
||
const W = canvas.width, H = canvas.height;
|
||
g.clearRect(0, 0, W, H);
|
||
const x = W * 0.18, y = H * 0.04, w = W * 0.64, h = H * 0.92, r = w / 2;
|
||
const p = new Path2D();
|
||
p.moveTo(x + r, y);
|
||
p.lineTo(x + w - r, y);
|
||
p.arc(x + w - r, y + r, r, -Math.PI / 2, Math.PI / 2);
|
||
p.lineTo(x + r, y + h);
|
||
p.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI * 1.5);
|
||
p.closePath();
|
||
|
||
g.save();
|
||
g.clip(p);
|
||
const grd = g.createLinearGradient(x, y, x + w, y);
|
||
grd.addColorStop(0, '#1a0d0a');
|
||
grd.addColorStop(0.45, '#2b1611');
|
||
grd.addColorStop(1, '#0b0605');
|
||
g.fillStyle = grd;
|
||
g.fillRect(x, y, w, h);
|
||
|
||
const rnd = mulberry(core.seed * 31 + 3);
|
||
for (let i = 0; i < 8; i++) {
|
||
const yy = y + h * ((i + 0.6) / 8.6);
|
||
const amp = 1 + rnd() * 3;
|
||
g.beginPath();
|
||
for (let k = 0; k <= 10; k++) {
|
||
const u = k / 10;
|
||
const px = x + u * w;
|
||
const py = yy + Math.sin(u * 6 + i) * amp;
|
||
if (k === 0) g.moveTo(px, py); else g.lineTo(px, py);
|
||
}
|
||
g.strokeStyle = i % 2 ? 'rgba(190,130,105,.16)' : 'rgba(80,45,35,.5)';
|
||
g.lineWidth = 1;
|
||
g.stroke();
|
||
}
|
||
// the seam of sound
|
||
g.beginPath();
|
||
for (let i = 0; i < core.env.length; i++) {
|
||
const px = x + (i / (core.env.length - 1)) * w;
|
||
const py = y + h / 2 - core.env[i] * h * 0.3;
|
||
if (i === 0) g.moveTo(px, py); else g.lineTo(px, py);
|
||
}
|
||
g.strokeStyle = 'rgba(255,105,75,.55)';
|
||
g.lineWidth = 1;
|
||
g.stroke();
|
||
g.restore();
|
||
|
||
g.strokeStyle = 'rgba(239,228,212,.16)';
|
||
g.lineWidth = 1;
|
||
g.stroke(p);
|
||
g.beginPath();
|
||
g.ellipse(x + r, y + h / 2, r * 0.55, h * 0.3, 0, 0, TAU);
|
||
g.strokeStyle = 'rgba(239,228,212,.1)';
|
||
g.stroke();
|
||
}
|
||
|
||
function buildStore() {
|
||
storeEl.innerHTML = '';
|
||
cores.forEach(function (core, i) {
|
||
const item = document.createElement('button');
|
||
item.type = 'button';
|
||
item.className = 'core-item' + (i === state.sel ? ' is-on' : '');
|
||
item.dataset.core = i;
|
||
item.innerHTML =
|
||
'<canvas class="core-thumb" width="96" height="116" aria-hidden="true"></canvas>' +
|
||
'<span class="core-body">' +
|
||
'<span class="core-name">' + esc(core.name) + '</span>' +
|
||
'<span class="core-meta">' + core.dur.toFixed(1) + ' s ' + sealHTML(core.seal) + '</span>' +
|
||
'</span>';
|
||
storeEl.appendChild(item);
|
||
drawThumb(item.querySelector('canvas'), core);
|
||
});
|
||
}
|
||
|
||
storeEl.addEventListener('click', function (e) {
|
||
const item = e.target.closest('.core-item');
|
||
if (!item) return;
|
||
selectCore(+item.dataset.core);
|
||
});
|
||
|
||
function highlightStore() {
|
||
$$('.core-item', storeEl).forEach(function (el, i) {
|
||
const on = i === state.sel;
|
||
el.classList.toggle('is-on', on);
|
||
if (on && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
|
||
});
|
||
}
|
||
|
||
/* ————— tray ————— */
|
||
|
||
function trayGeom() {
|
||
const W = stage.clientWidth, H = stage.clientHeight;
|
||
const coreH = clamp(H * 0.55, 96, 172);
|
||
const top = Math.max(36, (H - coreH) / 2 - 10);
|
||
const pad = 24;
|
||
return { W: W, H: H, x0: pad + 10, x1: W - pad - 10, top: top, bottom: top + coreH, coreH: coreH };
|
||
}
|
||
|
||
function capsule(g, x0, top, x1, bottom) {
|
||
const p = new Path2D();
|
||
if (p.roundRect) p.roundRect(x0, top, x1 - x0, bottom - top, 2.5);
|
||
else p.rect(x0, top, x1 - x0, bottom - top);
|
||
return p;
|
||
}
|
||
|
||
function drawTray() {
|
||
const g0 = trayGeom();
|
||
if (!g0.W || !g0.H) return;
|
||
const dpr = Math.min(2, window.devicePixelRatio || 1);
|
||
tray.width = Math.round(g0.W * dpr);
|
||
tray.height = Math.round(g0.H * dpr);
|
||
tctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
tctx.clearRect(0, 0, g0.W, g0.H);
|
||
|
||
const core = cores[state.sel];
|
||
const { x0, x1, top, bottom, coreH } = g0;
|
||
const mid = (top + bottom) / 2;
|
||
const path = capsule(tctx, x0, top, x1, bottom);
|
||
const rnd = mulberry(core.seed * 131 + 7);
|
||
|
||
// shadow under the core
|
||
tctx.save();
|
||
tctx.filter = 'blur(14px)';
|
||
tctx.fillStyle = 'rgba(0,0,0,.75)';
|
||
tctx.beginPath();
|
||
tctx.ellipse((x0 + x1) / 2, bottom + 10, (x1 - x0) * 0.48, coreH * 0.22, 0, 0, TAU);
|
||
tctx.fill();
|
||
tctx.restore();
|
||
|
||
tctx.save();
|
||
tctx.clip(path);
|
||
const grd = tctx.createLinearGradient(0, top, 0, bottom);
|
||
grd.addColorStop(0, '#26130d');
|
||
grd.addColorStop(0.16, '#170b08');
|
||
grd.addColorStop(0.55, '#100705');
|
||
grd.addColorStop(1, '#040202');
|
||
tctx.fillStyle = grd;
|
||
tctx.fillRect(x0, top, x1 - x0, coreH);
|
||
|
||
// strata: sediment layers
|
||
const bands = 10;
|
||
for (let i = 0; i < bands; i++) {
|
||
const yy = top + coreH * ((i + 0.55) / (bands + 0.9)) + (rnd() - 0.5) * 4;
|
||
const amp = 2 + rnd() * 7;
|
||
const freq = 1.2 + rnd() * 2.4;
|
||
const phase = rnd() * TAU;
|
||
const pts = [];
|
||
for (let k = 0; k <= 32; k++) {
|
||
const u = k / 32;
|
||
const px = x0 + u * (x1 - x0);
|
||
const py = yy + Math.sin(u * TAU * freq + phase) * amp + Math.sin(u * TAU * 5.3 + phase * 2) * 1.4;
|
||
pts.push([px, py]);
|
||
}
|
||
tctx.beginPath();
|
||
pts.forEach(function (p, k) { if (k === 0) tctx.moveTo(p[0], p[1]); else tctx.lineTo(p[0], p[1]); });
|
||
tctx.lineTo(x1, bottom);
|
||
tctx.lineTo(x0, bottom);
|
||
tctx.closePath();
|
||
tctx.fillStyle = i % 2 ? 'rgba(150,60,40,.05)' : 'rgba(0,0,0,.18)';
|
||
tctx.fill();
|
||
tctx.beginPath();
|
||
pts.forEach(function (p, k) { if (k === 0) tctx.moveTo(p[0], p[1]); else tctx.lineTo(p[0], p[1]); });
|
||
tctx.strokeStyle = i % 3 === 0 ? 'rgba(232,64,42,.16)' : 'rgba(190,130,105,.1)';
|
||
tctx.lineWidth = 0.8;
|
||
tctx.stroke();
|
||
}
|
||
|
||
// the seam of sound, inside the stone
|
||
const env = core.env;
|
||
const ampY = coreH * 0.3;
|
||
if (state.ghost) {
|
||
tctx.beginPath();
|
||
for (let i = 0; i < env.length; i++) {
|
||
const px = x0 + (i / (env.length - 1)) * (x1 - x0);
|
||
const py = mid - clamp(env[i] * 1.45, 0, 1) * ampY * 1.25;
|
||
if (i === 0) tctx.moveTo(px, py); else tctx.lineTo(px, py);
|
||
}
|
||
tctx.strokeStyle = 'rgba(232,64,42,.14)';
|
||
tctx.lineWidth = 0.9;
|
||
tctx.stroke();
|
||
}
|
||
tctx.beginPath();
|
||
for (let i = 0; i < env.length; i++) {
|
||
const px = x0 + (i / (env.length - 1)) * (x1 - x0);
|
||
const py = mid - env[i] * ampY;
|
||
if (i === 0) tctx.moveTo(px, py); else tctx.lineTo(px, py);
|
||
}
|
||
for (let i = env.length - 1; i >= 0; i--) {
|
||
const px = x0 + (i / (env.length - 1)) * (x1 - x0);
|
||
tctx.lineTo(px, mid + env[i] * ampY * 0.78);
|
||
}
|
||
tctx.closePath();
|
||
tctx.fillStyle = 'rgba(232,64,42,.13)';
|
||
tctx.fill();
|
||
tctx.save();
|
||
tctx.shadowColor = 'rgba(232,64,42,.75)';
|
||
tctx.shadowBlur = 14;
|
||
tctx.beginPath();
|
||
for (let i = 0; i < env.length; i++) {
|
||
const px = x0 + (i / (env.length - 1)) * (x1 - x0);
|
||
const py = mid - env[i] * ampY;
|
||
if (i === 0) tctx.moveTo(px, py); else tctx.lineTo(px, py);
|
||
}
|
||
tctx.strokeStyle = 'rgba(255,140,105,.95)';
|
||
tctx.lineWidth = 1.5;
|
||
tctx.stroke();
|
||
tctx.restore();
|
||
|
||
// pits and hairlines in the stone
|
||
for (let k = 0; k < 16; k++) {
|
||
const px = x0 + rnd() * (x1 - x0);
|
||
const py = top + rnd() * coreH;
|
||
const rr = 0.7 + rnd() * 2.2;
|
||
tctx.beginPath();
|
||
tctx.ellipse(px, py, rr * 1.9, rr, 0, 0, TAU);
|
||
tctx.fillStyle = 'rgba(0,0,0,.4)';
|
||
tctx.fill();
|
||
tctx.beginPath();
|
||
tctx.ellipse(px, py + 0.7, rr * 1.5, rr * 0.55, 0, 0, TAU);
|
||
tctx.strokeStyle = 'rgba(232,64,42,.16)';
|
||
tctx.lineWidth = 0.6;
|
||
tctx.stroke();
|
||
}
|
||
for (let k = 0; k < 3; k++) {
|
||
let cx = x0 + (0.12 + rnd() * 0.74) * (x1 - x0);
|
||
let cy = top + rnd() * coreH * 0.55;
|
||
tctx.beginPath();
|
||
tctx.moveTo(cx, cy);
|
||
for (let s2 = 0; s2 < 6; s2++) {
|
||
cx += (rnd() - 0.5) * 12;
|
||
cy += 4 + rnd() * 7;
|
||
tctx.lineTo(cx, cy);
|
||
}
|
||
tctx.strokeStyle = 'rgba(0,0,0,.55)';
|
||
tctx.lineWidth = 1.2;
|
||
tctx.stroke();
|
||
tctx.strokeStyle = 'rgba(232,64,42,.15)';
|
||
tctx.lineWidth = 0.5;
|
||
tctx.stroke();
|
||
}
|
||
|
||
// fractures, gashes in the core
|
||
core.cuts.forEach(function (cut) {
|
||
const x = x0 + clamp(cut / core.dur, 0, 1) * (x1 - x0);
|
||
const jag = mulberry(Math.round(cut * 100) + core.seed);
|
||
const pts = [];
|
||
for (let y = top; y <= bottom; y += 7) pts.push([x + (jag() - 0.5) * 3.2, y]);
|
||
tctx.beginPath();
|
||
pts.forEach(function (p, k) { if (k === 0) tctx.moveTo(p[0], p[1]); else tctx.lineTo(p[0], p[1]); });
|
||
tctx.strokeStyle = 'rgba(0,0,0,.8)';
|
||
tctx.lineWidth = 5;
|
||
tctx.stroke();
|
||
tctx.strokeStyle = 'rgba(255,110,80,.62)';
|
||
tctx.lineWidth = 1.15;
|
||
tctx.stroke();
|
||
});
|
||
|
||
// surface light
|
||
const hi = tctx.createLinearGradient(0, top, 0, top + coreH * 0.3);
|
||
hi.addColorStop(0, 'rgba(255,205,175,.1)');
|
||
hi.addColorStop(1, 'rgba(255,205,175,0)');
|
||
tctx.fillStyle = hi;
|
||
tctx.fillRect(x0, top, x1 - x0, coreH * 0.3);
|
||
for (let k = 0; k < 6; k++) {
|
||
const cx = x0 + 8 + rnd() * (x1 - x0 - 16);
|
||
const w = 3 + rnd() * 11;
|
||
const d = 1 + rnd() * 3.4;
|
||
tctx.beginPath();
|
||
tctx.moveTo(cx - w / 2, top);
|
||
tctx.lineTo(cx + w / 2, top);
|
||
tctx.lineTo(cx + (rnd() - 0.5) * 4, top + d);
|
||
tctx.closePath();
|
||
tctx.fillStyle = 'rgba(2,1,1,.75)';
|
||
tctx.fill();
|
||
}
|
||
tctx.restore();
|
||
|
||
tctx.strokeStyle = 'rgba(239,228,212,.2)';
|
||
tctx.lineWidth = 1;
|
||
tctx.stroke(path);
|
||
|
||
// the cut ends of the bore
|
||
[x0 + 6, x1 - 6].forEach(function (cx) {
|
||
tctx.beginPath();
|
||
tctx.ellipse(cx, mid, 6, coreH / 2 - 1, 0, 0, TAU);
|
||
tctx.fillStyle = 'rgba(3,2,2,.55)';
|
||
tctx.fill();
|
||
tctx.strokeStyle = 'rgba(239,228,212,.2)';
|
||
tctx.lineWidth = 0.9;
|
||
tctx.stroke();
|
||
tctx.beginPath();
|
||
tctx.ellipse(cx, mid, 2.4, coreH * 0.34, 0, 0, TAU);
|
||
tctx.strokeStyle = 'rgba(239,228,212,.08)';
|
||
tctx.lineWidth = 0.7;
|
||
tctx.stroke();
|
||
});
|
||
}
|
||
|
||
function buildOverlay() {
|
||
const g = trayGeom();
|
||
if (!g.W || !g.H) return;
|
||
const core = cores[state.sel];
|
||
const { x0, x1, top, bottom } = g;
|
||
let s = '';
|
||
s += '<line x1="' + x0 + '" x2="' + x1 + '" y1="' + (top - 20) + '" y2="' + (top - 20) + '" stroke="rgba(232,64,42,.14)" stroke-width=".7"/>';
|
||
|
||
core.cuts.forEach(function (cut, i) {
|
||
const x = x0 + clamp(cut / core.dur, 0, 1) * (x1 - x0);
|
||
s += '<line class="tray-cut" x1="' + x.toFixed(1) + '" x2="' + x.toFixed(1) + '" y1="' + (top - 14) + '" y2="' + (bottom + 12) + '"/>';
|
||
s += '<text class="tray-cut-text" x="' + (x + 4).toFixed(1) + '" y="' + (top - 6) + '">0' + (i + 1) + '</text>';
|
||
});
|
||
|
||
const ry = bottom + 30;
|
||
s += '<line x1="' + x0 + '" x2="' + x1 + '" y1="' + ry + '" y2="' + ry + '" stroke="rgba(155,133,121,.22)" stroke-width=".7"/>';
|
||
const step = core.dur > 16 ? 4 : core.dur > 10 ? 2 : 1;
|
||
for (let t = 0; t <= core.dur + 0.01; t += step) {
|
||
const x = x0 + clamp(t / core.dur, 0, 1) * (x1 - x0);
|
||
const major = t % (step * 2) === 0;
|
||
s += '<line class="tray-tick' + (major ? ' tray-tick--major' : '') + '" x1="' + x.toFixed(1) + '" x2="' + x.toFixed(1) + '" y1="' + ry + '" y2="' + (ry + (major ? 6 : 3)) + '"/>';
|
||
if (major) {
|
||
s += '<text class="tray-tick-text" x="' + (x + 3).toFixed(1) + '" y="' + (ry + 15) + '">' + t.toFixed(0) + 's</text>';
|
||
}
|
||
}
|
||
|
||
s += '<g id="tray-lens-g">' +
|
||
'<line class="tray-lens"/>' +
|
||
'<rect class="tray-lens-handle" width="4" height="12" rx="0"/>' +
|
||
'<text class="tray-lens-text"></text>' +
|
||
'</g>';
|
||
overlay.setAttribute('viewBox', '0 0 ' + g.W + ' ' + g.H);
|
||
overlay.innerHTML = s;
|
||
lensLine = overlay.querySelector('.tray-lens');
|
||
lensHandle = overlay.querySelector('.tray-lens-handle');
|
||
lensText = overlay.querySelector('.tray-lens-text');
|
||
updateLensOnly();
|
||
}
|
||
|
||
function updateLensOnly() {
|
||
if (!lensLine || !lensText) return;
|
||
const g = trayGeom();
|
||
if (!g.W) return;
|
||
const core = cores[state.sel];
|
||
const lx = g.x0 + clamp(state.lens / core.dur, 0, 1) * (g.x1 - g.x0);
|
||
lensLine.setAttribute('x1', lx.toFixed(1));
|
||
lensLine.setAttribute('x2', lx.toFixed(1));
|
||
lensLine.setAttribute('y1', (g.top - 16).toFixed(1));
|
||
lensLine.setAttribute('y2', (g.bottom + 16).toFixed(1));
|
||
lensHandle.setAttribute('x', (lx - 2).toFixed(1));
|
||
lensHandle.setAttribute('y', (g.top - 24).toFixed(1));
|
||
lensText.setAttribute('x', Math.min(lx + 8, g.x1 - 36).toFixed(1));
|
||
lensText.setAttribute('y', (g.top - 12).toFixed(1));
|
||
lensText.textContent = state.lens.toFixed(2) + 's';
|
||
const pos = $('#tray-pos');
|
||
if (pos) pos.textContent = state.lens.toFixed(2) + ' s';
|
||
}
|
||
|
||
/* ————— faces ————— */
|
||
|
||
function stoneShape(cell, rnd) {
|
||
const inset = 1.4;
|
||
const x0 = cell.x + inset, y0 = cell.y + inset;
|
||
const x1 = cell.x + cell.w - inset, y1 = cell.y + cell.h - inset;
|
||
const corners = [[x0, y0], [x1, y0], [x1, y1], [x0, y1]];
|
||
const pts = [];
|
||
for (let e = 0; e < 4; e++) {
|
||
const a = corners[e], b = corners[(e + 1) % 4];
|
||
pts.push([a[0] + (rnd() - 0.5) * 2.5, a[1] + (rnd() - 0.5) * 2.5]);
|
||
pts.push([
|
||
(a[0] + b[0]) / 2 + (rnd() - 0.5) * 9,
|
||
(a[1] + b[1]) / 2 + (rnd() - 0.5) * 9
|
||
]);
|
||
}
|
||
return pts;
|
||
}
|
||
|
||
function centroid(pts) {
|
||
const n = pts.length;
|
||
return [pts.reduce((a, p) => a + p[0], 0) / n, pts.reduce((a, p) => a + p[1], 0) / n];
|
||
}
|
||
|
||
function ptsStr(pts) {
|
||
return pts.map(function (p) { return p[0].toFixed(1) + ',' + p[1].toFixed(1); }).join(' ');
|
||
}
|
||
|
||
function sealMark(x, y, kind) {
|
||
let inner = '';
|
||
if (kind === 'taken') inner = '<path d="M' + (x - 1.4) + ' ' + (y - 1.4) + 'L' + (x + 1.4) + ' ' + (y + 1.4) + 'M' + (x + 1.4) + ' ' + (y - 1.4) + 'L' + (x - 1.4) + ' ' + (y + 1.4) + '" stroke="rgba(232,64,42,.85)" stroke-width=".8" fill="none"/>';
|
||
else if (kind === 'found') inner = '<circle cx="' + x + '" cy="' + y + '" r="1.1" class="stone-seal-dot"/>';
|
||
else if (kind === 'loan') inner = '<path d="M' + (x - 1.3) + ' ' + (y + 1.3) + 'L' + (x + 1.3) + ' ' + (y - 1.3) + '" stroke="rgba(232,64,42,.85)" stroke-width=".8"/>';
|
||
else if (kind === 'gift') inner = '<circle cx="' + x + '" cy="' + y + '" r=".9" fill="none" stroke="rgba(239,228,212,.7)" stroke-width=".7"/>';
|
||
return '<circle class="stone-seal" cx="' + x + '" cy="' + y + '" r="3"/>' + inner;
|
||
}
|
||
|
||
function buildFaces(seed) {
|
||
if (!wall || !wall.clientWidth || !wall.clientHeight) return;
|
||
state.faceSeed = seed;
|
||
const W = wall.clientWidth, H = wall.clientHeight;
|
||
const core = cores[state.sel];
|
||
const rnd = mulberry(seed);
|
||
const rows = 4, gap = 8;
|
||
let hs = [0, 0, 0, 0].map(function () { return 0.78 + rnd() * 0.44; });
|
||
const hsum = hs.reduce(function (a, b) { return a + b; }, 0);
|
||
const availH = H - gap * (rows - 1) - 2;
|
||
let y = 1;
|
||
const rowRects = [];
|
||
hs.forEach(function (h) {
|
||
const hh = availH * h / hsum;
|
||
rowRects.push({ y: y, h: hh });
|
||
y += hh + gap;
|
||
});
|
||
|
||
const faces = [];
|
||
let idx = 0;
|
||
let svg = '<svg viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none"><defs>';
|
||
['A', 'B', 'C', 'D'].forEach(function (t, ti) {
|
||
svg += '<linearGradient id="stoneGrad' + t + '" x1="0" y1="0" x2="0" y2="1">' +
|
||
'<stop offset="0" stop-color="#' + ['2b1811', '22120d', '31201a', '1a0e0a'][ti] + '"/>' +
|
||
'<stop offset=".3" stop-color="#' + ['160c08', '120906', '180d09', '0e0705'][ti] + '"/>' +
|
||
'<stop offset="1" stop-color="#040202"/>' +
|
||
'</linearGradient>';
|
||
});
|
||
svg += '</defs>';
|
||
rowRects.forEach(function (row, r) {
|
||
let ws = [0, 0, 0, 0].map(function () { return 0.72 + rnd() * 0.56; });
|
||
const wsum = ws.reduce(function (a, b) { return a + b; }, 0);
|
||
const availW = W - gap * 3 - 2;
|
||
let x = 1;
|
||
ws.forEach(function (w, c) {
|
||
const ww = availW * w / wsum;
|
||
const cell = { x: x, y: row.y, w: ww, h: row.h };
|
||
const pts = stoneShape(cell, rnd);
|
||
const cen = centroid(pts);
|
||
const inner = pts.map(function (p) { return [p[0] + (cen[0] - p[0]) * 0.09, p[1] + (cen[1] - p[1]) * 0.09]; });
|
||
const inner2 = pts.map(function (p) { return [p[0] + (cen[0] - p[0]) * 0.2, p[1] + (cen[1] - p[1]) * 0.2]; });
|
||
const tone = ['a', 'b', 'c', 'd'][Math.floor(rnd() * 4)];
|
||
const lip = [pts[7], pts[0], pts[1], pts[2]];
|
||
const foot = [pts[3], pts[4], pts[5], pts[6]];
|
||
const grain = [];
|
||
const gy = cell.y + cell.h * 0.58;
|
||
for (let k = 0; k <= 8; k++) {
|
||
const u = k / 8;
|
||
grain.push([cell.x + 7 + u * (cell.w - 14), gy + Math.sin(u * 5 + rnd() * 2) * 3.4]);
|
||
}
|
||
const grain2 = [];
|
||
const gy2 = cell.y + cell.h * 0.79;
|
||
for (let k = 0; k <= 6; k++) {
|
||
const u = k / 6;
|
||
grain2.push([cell.x + 11 + u * (cell.w - 22), gy2 + Math.sin(u * 4 + rnd() * 2) * 2.6]);
|
||
}
|
||
const crack = [];
|
||
let cx = cell.x + cell.w * (0.45 + rnd() * 0.3), cy = cell.y + 6;
|
||
crack.push([cx, cy]);
|
||
for (let k = 0; k < 4; k++) {
|
||
cx += (rnd() - 0.5) * 12;
|
||
cy += 4 + rnd() * 8;
|
||
crack.push([cx, cy]);
|
||
}
|
||
const pits = [0, 1, 2].map(function () {
|
||
return [cell.x + 12 + rnd() * (cell.w - 24), cell.y + 12 + rnd() * (cell.h - 24), 0.7 + rnd() * 1.3];
|
||
});
|
||
const strata = [];
|
||
for (let k = 0; k <= 6; k++) {
|
||
const u = k / 6;
|
||
strata.push([cell.x + 8 + u * (cell.w - 16), cell.y + cell.h * 0.32 + Math.sin(u * 4 + r) * 2.4]);
|
||
}
|
||
const num = String(idx + 1).padStart(2, '0');
|
||
const slice = core.faces[idx];
|
||
const face = {
|
||
i: idx,
|
||
semis: SEMIS[(3 - r) * 4 + c],
|
||
seal: core.seal,
|
||
t0: slice ? +slice.start.toFixed(2) : 0,
|
||
t1: slice ? +(slice.start + slice.len).toFixed(2) : 0
|
||
};
|
||
faces.push(face);
|
||
const isSel = state.selFace === idx;
|
||
svg += '<g class="stone' + (isSel ? ' is-sel' : '') + '" data-i="' + idx + '">' +
|
||
'<circle class="stone-flash" cx="' + (cen[0]).toFixed(1) + '" cy="' + (cen[1]).toFixed(1) + '" r="' + (Math.min(cell.w, cell.h) * 0.42).toFixed(1) + '"/>' +
|
||
'<polygon class="stone-body stone-body--' + tone + '" points="' + ptsStr(pts) + '"/>' +
|
||
'<polyline class="stone-lip" points="' + ptsStr(lip) + '"/>' +
|
||
'<polyline class="stone-foot-lip" points="' + ptsStr(foot) + '"/>' +
|
||
'<polygon class="stone-face" points="' + ptsStr(inner) + '"/>' +
|
||
'<polygon class="stone-face stone-face--inner" points="' + ptsStr(inner2) + '"/>' +
|
||
'<polyline class="stone-strata" points="' + ptsStr(strata) + '"/>' +
|
||
'<polyline class="stone-grain" points="' + ptsStr(grain) + '"/>' +
|
||
'<polyline class="stone-grain stone-grain--faint" points="' + ptsStr(grain2) + '"/>' +
|
||
'<polyline class="stone-crack" points="' + ptsStr(crack) + '"/>' +
|
||
pits.map(function (p) {
|
||
return '<ellipse class="stone-pit" cx="' + p[0].toFixed(1) + '" cy="' + p[1].toFixed(1) + '" rx="' + (p[2] * 1.7).toFixed(1) + '" ry="' + p[2].toFixed(1) + '"/>';
|
||
}).join('') +
|
||
'<text class="stone-num" x="' + (cell.x + 11).toFixed(1) + '" y="' + (cell.y + 17).toFixed(1) + '">' + num + '</text>' +
|
||
sealMark(cell.x + cell.w - 14, cell.y + cell.h - 13, core.seal) +
|
||
'</g>';
|
||
idx++;
|
||
x += ww + gap;
|
||
});
|
||
});
|
||
svg += '</svg>';
|
||
wall.innerHTML = svg;
|
||
state.faces = faces;
|
||
// keep the selection valid
|
||
if (state.selFace >= faces.length) state.selFace = -1;
|
||
}
|
||
|
||
function indexDur(i) {
|
||
const core = cores[state.sel];
|
||
return core.dur / 16;
|
||
}
|
||
|
||
wall.addEventListener('pointerdown', function (e) {
|
||
const g = e.target.closest ? e.target.closest('.stone') : null;
|
||
if (!g) return;
|
||
const i = +g.dataset.i;
|
||
if (state.selFace !== i) {
|
||
state.selFace = i;
|
||
$$('.stone', wall).forEach(function (el) {
|
||
el.classList.toggle('is-sel', +el.dataset.i === i);
|
||
});
|
||
faceStatus();
|
||
$('#place').disabled = false;
|
||
const lb = $('#place-ring'); if (lb) lb.disabled = false;
|
||
}
|
||
const face = state.faces[i];
|
||
strike(face);
|
||
g.classList.remove('is-struck');
|
||
requestAnimationFrame(function () { g.classList.add('is-struck'); });
|
||
window.setTimeout(function () { g.classList.remove('is-struck'); }, 520);
|
||
});
|
||
|
||
function faceStatus() {
|
||
const el = $('#face-status');
|
||
if (!el) return;
|
||
if (state.selFace < 0 || !state.faces[state.selFace]) {
|
||
el.textContent = 'strike a stone';
|
||
return;
|
||
}
|
||
const f = state.faces[state.selFace];
|
||
el.textContent = 'face ' + String(f.i + 1).padStart(2, '0') + ' · ' +
|
||
f.t0.toFixed(2) + '–' + f.t1.toFixed(2) + ' s · seal ' + f.seal;
|
||
}
|
||
|
||
/* ————— weather ————— */
|
||
|
||
function climateText() {
|
||
const w = state.weather;
|
||
const age = w.age < 0.4 ? 'young' : w.age < 0.7 ? 'middle' : 'old';
|
||
const air = w.air < 0.35 ? 'dry' : w.air < 0.7 ? 'damp' : 'wet';
|
||
const heat = w.heat < 0.35 ? 'cold' : w.heat < 0.7 ? 'warm' : 'hot';
|
||
return age + ', ' + air + ', ' + heat;
|
||
}
|
||
|
||
function updateClimate() {
|
||
const el = $('#climate');
|
||
if (el) el.textContent = climateText();
|
||
}
|
||
|
||
function initWeather() {
|
||
['age', 'pressure', 'air', 'heat'].forEach(function (k) {
|
||
const el = $('#w-' + k);
|
||
if (!el) return;
|
||
state.weather[k] = +el.value / 100;
|
||
const out = el.parentNode.querySelector('output');
|
||
out.textContent = state.weather[k].toFixed(2);
|
||
el.addEventListener('input', function () {
|
||
state.weather[k] = +el.value / 100;
|
||
out.textContent = state.weather[k].toFixed(2);
|
||
updateClimate();
|
||
if (E) E.setWeather(state.weather);
|
||
});
|
||
});
|
||
updateClimate();
|
||
if (E) E.setWeather(state.weather);
|
||
}
|
||
|
||
/* ————— rings ————— */
|
||
|
||
function drawRings() {
|
||
const box = $('#ring-visual');
|
||
if (!box) return;
|
||
const W = box.clientWidth, H = box.clientHeight;
|
||
if (!W || !H) return;
|
||
const cx = W / 2, cy = H / 2;
|
||
let s = '<svg viewBox="0 0 ' + W + ' ' + H + '">';
|
||
const n = Math.min(state.rings, 12);
|
||
const maxR = Math.min(W * 0.46, H * 0.46);
|
||
for (let i = 0; i < n; i++) {
|
||
const r = maxR * (i + 1) / Math.max(n, 4);
|
||
const off = (i % 2 ? 1 : -1) * (1 + i * 0.3);
|
||
s += '<ellipse class="ring-arc" cx="' + (cx + off).toFixed(1) + '" cy="' + cy + '" rx="' + r.toFixed(1) + '" ry="' + (r * 0.58).toFixed(1) + '" stroke-opacity="' + (0.34 + i * 0.05).toFixed(2) + '"/>';
|
||
}
|
||
s += '<circle cx="' + cx + '" cy="' + cy + '" r="1.2" fill="rgba(232,64,42,.9)"/></svg>';
|
||
box.innerHTML = s;
|
||
const count = $('#ring-count');
|
||
if (count) count.textContent = String(state.rings).padStart(2, '0');
|
||
}
|
||
|
||
/* ————— sound ————— */
|
||
|
||
function strike(face) {
|
||
if (!E || !face) return;
|
||
const core = cores[state.sel];
|
||
if (!core) return;
|
||
E.strike(core.id, face.i, { pitch: face.semis, gain: 0.9, ghost: state.ghost });
|
||
}
|
||
|
||
/* ————— view, core select, fracture, place ————— */
|
||
|
||
function updateHeader() {
|
||
const core = cores[state.sel];
|
||
const name = $('#tray-name');
|
||
const dur = $('#tray-dur');
|
||
const sealEl = $('#tray-seal');
|
||
if (name) name.textContent = core.name;
|
||
if (dur) dur.textContent = core.dur.toFixed(1) + ' s';
|
||
if (sealEl) {
|
||
sealEl.className = 'seal seal--' + core.seal;
|
||
const t = sealEl.querySelector('span');
|
||
if (t) t.textContent = core.seal;
|
||
}
|
||
}
|
||
|
||
function selectCore(i, keepSeed) {
|
||
state.sel = clamp(i, 0, cores.length - 1);
|
||
state.selFace = -1;
|
||
$('#place').disabled = true;
|
||
const lb = $('#place-ring'); if (lb) lb.disabled = true;
|
||
const core = cores[state.sel];
|
||
state.lens = core.cuts[0] || 0;
|
||
updateHeader();
|
||
highlightStore();
|
||
if (!keepSeed) state.faceSeed = core.seed * 13 + state.fracture * 7;
|
||
redraw();
|
||
faceStatus();
|
||
}
|
||
|
||
function redraw() {
|
||
drawTray();
|
||
buildOverlay();
|
||
buildFaces(state.faceSeed);
|
||
drawRings();
|
||
}
|
||
|
||
function fractureCore() {
|
||
const core = cores[state.sel];
|
||
state.fracture++;
|
||
if (E) E.refracture(core.id);
|
||
state.faceSeed = core.seed * 13 + state.fracture * 7;
|
||
state.selFace = -1;
|
||
state.lens = core.cuts[0];
|
||
$('#place').disabled = true;
|
||
const lb2 = $('#place-ring'); if (lb2) lb2.disabled = true;
|
||
redraw();
|
||
faceStatus();
|
||
if (wall.animate) {
|
||
wall.animate([{ opacity: 0.25 }, { opacity: 1 }], { duration: 420, easing: 'ease-out' });
|
||
}
|
||
log('faces.fracture', core.id + ' · 16 faces', '', 'hand');
|
||
}
|
||
|
||
function placeFace(loop) {
|
||
if (state.selFace < 0 || !state.faces[state.selFace]) return;
|
||
const core = cores[state.sel];
|
||
if (!core || !window.ZHILA || !window.ZHILA.addStoneClip) return;
|
||
const f = state.faces[state.selFace];
|
||
const label = 'face ' + String(f.i + 1).padStart(2, '0');
|
||
const res = window.ZHILA.addStoneClip(label, f.seal, {
|
||
core: core.id, face: f.i, ring: loop ? 2 : 0, pitch: 0, gain: 0.85
|
||
});
|
||
const st = $('#face-status');
|
||
if (res) {
|
||
if (st) st.textContent = (loop ? 'looping in ' : 'placed in ') + res.lane + ', bar ' + res.start + '–' + res.end;
|
||
}
|
||
}
|
||
|
||
function extract(by, query) {
|
||
if (!E) return;
|
||
const name = by === 'mcp'
|
||
? (query.length > 26 ? query.slice(0, 26) + '…' : query)
|
||
: (handBank.length ? handBank.shift() : 'new core');
|
||
const core = E.newCore({ name: name, seal: by === 'mcp' ? 'found' : 'taken' });
|
||
log('cores.extract', core.name, core.seal, by);
|
||
}
|
||
|
||
/* ————— view switch ————— */
|
||
|
||
function setView(v) {
|
||
document.body.dataset.view = v;
|
||
$$('.view-btn').forEach(function (b) {
|
||
const on = b.dataset.viewBtn === v;
|
||
b.classList.toggle('is-on', on);
|
||
b.setAttribute('aria-pressed', String(on));
|
||
});
|
||
if (v === 'quarry') {
|
||
requestAnimationFrame(function () {
|
||
selectCore(state.sel, true);
|
||
});
|
||
} else {
|
||
requestAnimationFrame(function () {
|
||
if (window.ZHILA && window.ZHILA.buildNave) window.ZHILA.buildNave();
|
||
if (window.ZHILA && window.ZHILA.buildLattice) window.ZHILA.buildLattice();
|
||
});
|
||
}
|
||
}
|
||
|
||
$$('.view-btn').forEach(function (b) {
|
||
b.addEventListener('click', function () { setView(b.dataset.viewBtn); });
|
||
});
|
||
|
||
/* ————— tray scrubbing ————— */
|
||
|
||
let scrubbing = false;
|
||
function scrub(e) {
|
||
const r = stage.getBoundingClientRect();
|
||
const g = trayGeom();
|
||
if (!g.W) return;
|
||
const x = clamp(e.clientX - r.left, g.x0, g.x1);
|
||
const core = cores[state.sel];
|
||
state.lens = +(((x - g.x0) / (g.x1 - g.x0)) * core.dur).toFixed(2);
|
||
updateLensOnly();
|
||
}
|
||
stage.addEventListener('pointerdown', function (e) {
|
||
scrubbing = true;
|
||
stage.setPointerCapture(e.pointerId);
|
||
scrub(e);
|
||
e.preventDefault();
|
||
});
|
||
stage.addEventListener('pointermove', function (e) { if (scrubbing) scrub(e); });
|
||
stage.addEventListener('pointerup', function () { scrubbing = false; });
|
||
stage.addEventListener('pointercancel', function () { scrubbing = false; });
|
||
|
||
/* ————— wiring ————— */
|
||
|
||
$('#fracture').addEventListener('click', fractureCore);
|
||
$('#place').addEventListener('click', function () { placeFace(false); });
|
||
const loopBtn = $('#place-ring');
|
||
if (loopBtn) loopBtn.addEventListener('click', function () { placeFace(true); });
|
||
const updatePlace = function () {
|
||
const on = state.selFace >= 0;
|
||
$('#place').disabled = !on;
|
||
if (loopBtn) loopBtn.disabled = !on;
|
||
};
|
||
|
||
$('#ghost').addEventListener('click', function () {
|
||
state.ghost = !state.ghost;
|
||
this.setAttribute('aria-pressed', String(state.ghost));
|
||
this.textContent = state.ghost ? 'on' : 'off';
|
||
});
|
||
|
||
$('#grow').addEventListener('click', function () {
|
||
state.rings = Math.min(state.rings + 1, 12);
|
||
if (E) E.setRings(state.rings);
|
||
drawRings();
|
||
log('rings.grow', 'ring ' + String(state.rings).padStart(2, '0') + ' · ' + climateText(), '', 'hand');
|
||
});
|
||
|
||
$('#extract').addEventListener('click', function () {
|
||
extract('hand');
|
||
});
|
||
|
||
const choirForm = $('#choir-call');
|
||
const choirInput = $('#choir-input');
|
||
choirForm.addEventListener('submit', function (e) {
|
||
e.preventDefault();
|
||
const q = choirInput.value.trim();
|
||
if (!q || document.body.dataset.mode === 'hand') return;
|
||
choirInput.value = '';
|
||
choirForm.classList.add('is-out');
|
||
window.setTimeout(function () {
|
||
extract('mcp', q);
|
||
choirForm.classList.remove('is-out');
|
||
}, 950);
|
||
});
|
||
|
||
function syncChoir() {
|
||
const hand = document.body.dataset.mode === 'hand';
|
||
choirInput.disabled = hand;
|
||
choirInput.placeholder = hand ? 'the choir is resting' : 'send the choir for…';
|
||
}
|
||
new MutationObserver(syncChoir).observe(document.body, { attributes: true, attributeFilter: ['data-mode'] });
|
||
choirForm.addEventListener('pointerdown', function () {
|
||
if (document.body.dataset.mode === 'hand') {
|
||
const btn = document.querySelector('[data-mode-btn="choir"]');
|
||
if (btn) btn.click();
|
||
window.setTimeout(function () { choirInput.focus(); }, 40);
|
||
}
|
||
});
|
||
|
||
let rt = null;
|
||
window.addEventListener('resize', function () {
|
||
window.clearTimeout(rt);
|
||
rt = window.setTimeout(function () {
|
||
if (document.body.dataset.view !== 'quarry') return;
|
||
drawTray();
|
||
buildOverlay();
|
||
buildFaces(state.faceSeed);
|
||
drawRings();
|
||
}, 180);
|
||
});
|
||
|
||
/* ————— boot ————— */
|
||
|
||
function setWeatherUI(w) {
|
||
['age', 'pressure', 'air', 'heat'].forEach(function (k) {
|
||
if (w[k] == null) return;
|
||
state.weather[k] = clamp(+w[k], 0, 1);
|
||
const el = $('#w-' + k);
|
||
if (el) {
|
||
el.value = Math.round(state.weather[k] * 100);
|
||
const out = el.parentNode.querySelector('output');
|
||
if (out) out.textContent = state.weather[k].toFixed(2);
|
||
}
|
||
});
|
||
if (E) E.setWeather(state.weather);
|
||
updateClimate();
|
||
return state.weather;
|
||
}
|
||
|
||
function setRingsUI(n) {
|
||
state.rings = clamp(Math.round(+n || 0), 0, 12);
|
||
if (E) E.setRings(state.rings);
|
||
drawRings();
|
||
return state.rings;
|
||
}
|
||
|
||
function refresh() {
|
||
buildStore();
|
||
selectCore(state.sel, true);
|
||
}
|
||
|
||
function focusCore(id) {
|
||
const idx = cores.findIndex(function (c) { return c.id === id; });
|
||
if (idx >= 0) selectCore(idx);
|
||
else selectCore(state.sel, true);
|
||
}
|
||
|
||
function boot() {
|
||
if (E) {
|
||
E.onCores(function (core) {
|
||
buildStore();
|
||
const idx = E.cores.indexOf(core);
|
||
if (idx >= 0) {
|
||
state.sel = idx;
|
||
if (document.body.dataset.view === 'quarry') selectCore(idx);
|
||
else updateHeader();
|
||
}
|
||
});
|
||
E.onLog(renderLedger);
|
||
E.setRings(state.rings);
|
||
}
|
||
buildStore();
|
||
initWeather();
|
||
renderLedger();
|
||
selectCore(0, false);
|
||
syncChoir();
|
||
}
|
||
|
||
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
||
window.setTimeout(boot, 0);
|
||
} else {
|
||
document.addEventListener('DOMContentLoaded', boot);
|
||
}
|
||
|
||
window.ZHILA_QUARRY = {
|
||
setView: setView, state: state, cores: cores, focusCore: focusCore,
|
||
setWeatherUI: setWeatherUI, setRingsUI: setRingsUI, refresh: refresh,
|
||
weather: function () { return state.weather; },
|
||
rings: function () { return state.rings; },
|
||
selectedCore: function () { return cores[state.sel] || null; }
|
||
};
|
||
})();
|