73 lines
13 KiB
HTML
73 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Fractal Fronds in Darkness — exploration</title>
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body { background: #0a0a0f; color: #3a3a4a; font-family: ui-monospace, monospace; overflow: hidden; }
|
||
|
|
#grid { padding: 20px; font-size: 12px; line-height: 1.4; white-space: pre; }
|
||
|
|
.c { display: inline-block; transition: all 0.3s; }
|
||
|
|
.c.active { color: #fde68a; text-shadow: 0 0 6px rgba(253,230,138,0.5); }
|
||
|
|
.c.strong { color: #34d399; text-shadow: 0 0 10px rgba(52,211,153,0.6); font-weight: bold; }
|
||
|
|
.c.dead { color: #1a1a2a; }
|
||
|
|
#info { position: fixed; bottom: 10px; left: 20px; color: #3a3a4a; font-size: 11px; }
|
||
|
|
#controls { position: fixed; top: 10px; right: 20px; color: #666; font-size: 11px; }
|
||
|
|
#controls span { cursor: pointer; margin-left: 12px; color: #fde68a; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="grid"></div>
|
||
|
|
<div id="info">neurameba · physarum exploration</div>
|
||
|
|
<div id="controls"><span id="play-btn">play</span><span id="reset-btn">reset</span></div>
|
||
|
|
<script>
|
||
|
|
const text = "# Command Reference\n\nEverything in motd happens through commands. Type them in the input bar at the bottom of the terminal.\n\n---\n\n## Shell\n\n### /help\nShow all available commands grouped by category.\n```\n> /help\n```\n\n### /menu\nToggle the sidebar. Shows motd branding, commands, doc links, and footer. Click any command to run it.\n```\n> /menu\n```\n\n### /clear\nClear the terminal output.\n```\n> /clear\n```\n\n### /terminal --width [value]\nSet the terminal width. Accepts px, %, or `reset`.\n```\n> /terminal --width 1000\n Terminal width set to 1000px.\n\n> /terminal --width 80%\n Terminal width set to 80%.\n\n> /terminal --width reset\n Terminal width reset to default (800px).\n```\n\nWidth is stored in localStorage and restored on next visit. On mobile, the terminal is always 100% width.\n\n### /close\nClose the left panel.\n```\n> /close\n```\n\n### /settings cli [position]\nMove the terminal input line. Positions: bottom (default), top, right, left, middle.\n```\n> /settings cli top\n CLI position set to top.\n\n> /settings cli\n CLI position: top\n```\n\nPosition persists across sessions. On mobile, always bottom.\n\n### /config export\nDownload your current config as a JSON file.\n```\n> /config export\n Config downloaded.\n```\n\n### /config import\nLoad config from a JSON file. Opens a file picker.\n```\n> /config import\n [file picker opens]\n Config imported.\n```\n\n### /config reset\nReset all client-side config overrides to server defaults.\n```\n> /config reset\n Config reset to defaults.\n```\n\nThe config system merges localStorage overrides with server defaults. Export/import lets you back up or transfer your settings.\n\n### /read [path]\nRead a documentation file. Renders markdown inline in the terminal.\n```\n> /read about\n> /read api\n> /read commands\n```\n\nWithout arguments, lists all available docs.\n```\n> /read\n```\n\n### /tree -cat\nBrowse categories and their tags. Click a tag to search for posts with it.\n```\n> /tree -cat\n\n coding/\n [rust] [python] [wasm] [js] [frontend] [backend]\n creative/\n [music] [art] [writing] [gamedev]\n meta/\n [motd] [bugs] [ideas] [feedback]\n general/\n [offtopic] [introductions] [showcase]\n```\n\n### /link [target]\nUniversal navigation. Resolves the target and takes you there.\n```\n> /link @alice → opens alice's profile\n> /link rust → searches for [rust] posts\n> /link a3kf9x → shows a specific post\n> /link docs/api → reads the API doc\n```\n\nResolution order: user > tag > post > doc.\n\n---\n\n## Auth\n\n### /register\nCreate an account. Interactive prompts for username and password.\n```\n> /register\n username: alice\n password: ********\n Registered as alice.\n```\n- Username: 3-20 characters, letters/numbers/underscore\n- Password: minimum 8 characters\n\n### /login\nLog in. Session lasts until you close the tab.\n```\n> /login\n username: alice\n password: ********\n Logged in as alice.\n```\n\n### /login-permanently\nLog in with a persistent session. Survives tab closes and browser restarts.\n```\n> /login-permanently\n username: alice\n password: ********\n Logged in as alice (persistent).\n```\n\n### /logout\nEnd your session.\n```\n> /logout\n Logged out.\n```\n\n---\n\n## Profile\n\n### /profile\nView your own profile.\n```\n> /profile\n\n ████ ████\n ████████\n ████████████\n ████████\n ██ ████ ██\n\n @alice (Alice)\n building things\n Posts: 42\n Joined: 2026-03-15\n```\n\n### /profile @user\nView another user's profile.\n```\n> /profile @bob\n```\n\n### /settings\nEdit your display name and bio. Interactive prompts.\n```\n> /settings\n display_name (Alice): Alice W.\n bio (building things): shipping code\n Settings updated.\n```\n\n---\n\n## Posts\n\n### /post [text]\nPublish a post. Max 500 characters. Tags use [brackets].\n```\n> /post just shipped the wasm compiler [rust] [wasm]\n\n @alice · just shipped the was
|
||
|
|
const passes = [{"t":0,"r":316,"c":7,"a":"hold","s":0.15695500514114294,"ps":9,"e":99.90564004112915,"pr":1.1},{"t":0,"r":285,"c":69,"a":"extend","s":0.30809761159341226,"ps":9,"e":70.78034662492311,"pr":1.1},{"t":0,"r":393,"c":4,"a":"hold","s":0.1639470305239032,"ps":9,"e":99.96157624419122,"pr":1.1},{"t":1,"r":316,"c":7,"a":"hold","s":0.19779181173790503,"ps":9,"e":100.13797453503238,"pr":1.1},{"t":1,"r":285,"c":69,"a":"hold","s":0.2766605752987073,"ps":10,"e":71.49363122731278,"pr":1.2000000000000002},{"t":1,"r":393,"c":4,"a":"hold","s":0.2141622586366311,"ps":8,"e":100.47487431328427,"pr":1.05},{"t":2,"r":316,"c":7,"a":"retracted","s":0.19779181173790503,"ps":8,"e":100.52030902893563,"pr":1.05},{"t":2,"r":285,"c":69,"a":"hold","s":0.3018440775524262,"ps":10,"e":72.40838384773218,"pr":1.2000000000000002},{"t":2,"r":393,"c":4,"a":"retracted","s":0.1639470305239032,"ps":7,"e":100.73645055747551,"pr":1},{"t":3,"r":285,"c":69,"a":"retracted","s":0.3018440775524262,"ps":9,"e":73.4731364681516,"pr":1.1500000000000001}];
|
||
|
|
const lines = text.split('\n');
|
||
|
|
const gridEl = document.getElementById('grid');
|
||
|
|
const charEls = [];
|
||
|
|
for (let r = 0; r < lines.length; r++) {
|
||
|
|
const row = [];
|
||
|
|
for (let c = 0; c < lines[r].length; c++) {
|
||
|
|
const s = document.createElement('span');
|
||
|
|
s.className = 'c';
|
||
|
|
s.textContent = lines[r][c];
|
||
|
|
row.push(s);
|
||
|
|
gridEl.appendChild(s);
|
||
|
|
}
|
||
|
|
charEls.push(row);
|
||
|
|
gridEl.appendChild(document.createTextNode('\n'));
|
||
|
|
}
|
||
|
|
let tick = -1, playing = false, iv;
|
||
|
|
function apply(t) {
|
||
|
|
for (const r of charEls) for (const e of r) e.className = 'c';
|
||
|
|
const active = new Map();
|
||
|
|
for (const p of passes) {
|
||
|
|
if (p.t > t) break;
|
||
|
|
const k = p.r+','+p.c;
|
||
|
|
if (p.a === 'died' || p.a === 'retracted') active.set(k, 'dead');
|
||
|
|
else if (p.ps > 16) active.set(k, 'strong');
|
||
|
|
else active.set(k, 'active');
|
||
|
|
}
|
||
|
|
for (const [k, cls] of active) {
|
||
|
|
const [r, c] = k.split(',').map(Number);
|
||
|
|
if (charEls[r]?.[c]) charEls[r][c].className = 'c ' + cls;
|
||
|
|
}
|
||
|
|
document.getElementById('info').textContent = 'tick ' + t + ' · ' + [...active.values()].filter(v=>v!=='dead').length + ' alive';
|
||
|
|
}
|
||
|
|
function play() {
|
||
|
|
if (playing) return;
|
||
|
|
playing = true;
|
||
|
|
document.getElementById('play-btn').textContent = 'pause';
|
||
|
|
const max = passes.length > 0 ? passes[passes.length-1].t : 0;
|
||
|
|
iv = setInterval(() => { tick++; if (tick > max) { pause(); return; } apply(tick); }, 900);
|
||
|
|
}
|
||
|
|
function pause() { playing = false; clearInterval(iv); document.getElementById('play-btn').textContent = 'play'; }
|
||
|
|
function reset() { pause(); tick = -1; for (const r of charEls) for (const e of r) e.className = 'c'; document.getElementById('info').textContent = 'neurameba'; }
|
||
|
|
document.getElementById('play-btn').addEventListener('click', () => playing ? pause() : play());
|
||
|
|
document.getElementById('reset-btn').addEventListener('click', reset);
|
||
|
|
setTimeout(play, 1000);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|