Monorepo for Aesthetic.Computer
aesthetic.computer
arena: minimap top-right + plain-English HUD
- 64×64 minimap above the HUD column showing arena bounds, every remote
player as a colored dot (handleColor), and self as a white dot with a
yellow yaw notch. Doubles as a visual confirmation that snaps are
actually flowing — if dots don't move, the netcode isn't.
- Replace the FPS/MS/FOV/RUN/POSE/POV/SPD/PERF/GFX/FLIP/NET/RX/TX/PEERS
jargon stack with a shorter, plainer column: players, online (live /
lagging / stalled / offline), lag, stance, view, speed, watching, fps,
quality. Same data, less code-speak.
+120
-84
+120
-84
system/public/aesthetic.computer/disks/arena.mjs
+120
-84
system/public/aesthetic.computer/disks/arena.mjs
···
1831
1831
paintRemotes(ink, undefined, FormRef);
1832
1832
1833
1833
// --- HUD (top-right) ---
1834
-
// Sections stack vertically without overlap:
1835
-
// 0–1 GFX (FPS, MS)
1836
-
// 2–3 CAM (FOV, RUN)
1837
-
// 4–5 STATE (POSE, POV) ← only when phys is available
1838
-
// 6 SPEED (u/s)
1839
-
// 7–9 PERF (mode, gfx, flip)
1840
-
// 10–13 NET (status, rx/tx, peers, spectate)
1834
+
// Layout, top to bottom:
1835
+
// 1. minimap (square showing live player positions)
1836
+
// 2. plain-English status: who, where, how the connection is doing
1837
+
// 3. local-perf info (fps + quality tier) at the bottom
1841
1838
const font = "MatrixChunky8";
1842
1839
const margin = 4;
1843
1840
const lineH = 10;
1844
1841
const rX = screen.width - margin; // right edge
1845
1842
const dim = [140, 140, 150]; // shared label color
1846
-
const rightLabel = (txt, y) => {
1843
+
const rightLabel = (txt, y, color) => {
1844
+
if (color) (Array.isArray(color) ? ink(...color) : ink(color));
1847
1845
write(txt, { x: rX - txt.length * 4, y }, undefined, undefined, false, font);
1848
1846
};
1849
1847
// Right-align a row built from [color, text] segments so labels and values
···
1859
1857
}
1860
1858
};
1861
1859
1862
-
// GFX — FPS + frame time.
1863
-
const fpsColor = fps >= 30 ? "lime" : fps >= 15 ? "yellow" : "red";
1864
-
rightLabelMulti([[dim, "FPS "], [fpsColor, `${fps}`]], margin);
1865
-
rightLabelMulti([[dim, "MS "], [[200, 200, 200], avgDt.toFixed(1)]], margin + lineH);
1860
+
// 1. Minimap — top-right, shows arena floor + everyone's position.
1861
+
const mapSize = 64;
1862
+
const mapX = rX - mapSize;
1863
+
const mapY = margin;
1864
+
ink(20, 22, 28, 200).box(mapX, mapY, mapSize, mapSize);
1865
+
ink(80, 82, 96).box(mapX, mapY, mapSize, 1);
1866
+
ink(80, 82, 96).box(mapX, mapY + mapSize - 1, mapSize, 1);
1867
+
ink(80, 82, 96).box(mapX, mapY, 1, mapSize);
1868
+
ink(80, 82, 96).box(mapX + mapSize - 1, mapY, 1, mapSize);
1869
+
{
1870
+
const { xMin, xMax, zMin, zMax } = ARENA_CFG.groundBounds;
1871
+
const wWorld = xMax - xMin;
1872
+
const hWorld = zMax - zMin;
1873
+
const inner = mapSize - 4;
1874
+
const sx = inner / wWorld;
1875
+
const sz = inner / hWorld;
1876
+
const ox = mapX + 2;
1877
+
const oy = mapY + 2;
1878
+
const project = (wx, wz) => ({
1879
+
px: Math.round(ox + (wx - xMin) * sx),
1880
+
py: Math.round(oy + (wz - zMin) * sz),
1881
+
});
1882
+
// Remote players (interpolated like the 3D bodies).
1883
+
const tNow = renderTimeNow();
1884
+
for (const [handle, o] of Object.entries(others)) {
1885
+
const s = sampleOther(o, tNow);
1886
+
if (!s) continue;
1887
+
const { px, py } = project(s.x, s.z);
1888
+
const [r, g, b] = handleColor(handle);
1889
+
ink(r, g, b).box(px - 1, py - 1, 3, 3);
1890
+
}
1891
+
// Self — bigger white dot with a yaw notch.
1892
+
const camRef = system?.fps?.doll?.cam;
1893
+
if (camRef) {
1894
+
const myX = -camRef.x;
1895
+
const myZ = -camRef.z;
1896
+
const { px, py } = project(myX, myZ);
1897
+
ink(255, 255, 255).box(px - 2, py - 2, 5, 5);
1898
+
const yawR = camRef.rotY * Math.PI / 180;
1899
+
const tipX = px + Math.round(Math.sin(yawR) * 6);
1900
+
const tipY = py + Math.round(Math.cos(yawR) * 6);
1901
+
ink(255, 220, 60).box(tipX - 1, tipY - 1, 2, 2);
1902
+
}
1903
+
}
1866
1904
1867
-
// CAM — FOV + run speed.
1868
-
const cam = [150, 200, 255];
1869
-
rightLabelMulti([[dim, "FOV "], [cam, `${FOV}`]], margin + lineH * 2);
1870
-
rightLabelMulti([[dim, "RUN "], [cam, `${RUN_SPEED.toFixed(1)}u/s`]], margin + lineH * 3);
1905
+
// 2. Plain-English status — what an average reader actually wants.
1906
+
let lineY = margin + mapSize + 4;
1907
+
const advance = () => { lineY += lineH; };
1871
1908
1872
-
// STATE — pose + POV (only when phys snapshot is available).
1873
-
if (phys) {
1874
-
const airborne = !phys.onGround;
1875
-
const crouching = phys.crouch > 0.5;
1876
-
const poseTxt = airborne ? "AIR" : crouching ? "CROUCH" : "GROUND";
1877
-
const poseClr = airborne ? "yellow" : crouching ? "orange" : "lime";
1878
-
rightLabelMulti([[dim, "POSE "], [poseClr, poseTxt]], margin + lineH * 4);
1909
+
// Players: count + your handle.
1910
+
const peers = Object.keys(others).length;
1911
+
const total = peers + (netSpectator ? 0 : 1);
1912
+
rightLabelMulti(
1913
+
[[dim, "players "], [peers > 0 ? [180, 230, 180] : [200, 200, 200], `${total}`]],
1914
+
lineY,
1915
+
);
1916
+
advance();
1879
1917
1880
-
const povTxt = phys.thirdPerson ? `3P x${ZOOM_DISTANCES[zoomLevel]}` : "1P";
1881
-
const povClr = phys.thirdPerson ? "magenta" : "cyan";
1882
-
rightLabelMulti([[dim, "POV "], [povClr, povTxt]], margin + lineH * 5);
1918
+
// Connection: transport + how stale snaps are + lag.
1919
+
{
1920
+
const wsOk = !!netServer;
1921
+
const udpOk = !!netUdp?.connected;
1922
+
const nowMs = Date.now();
1923
+
const snapAgeMs = netStats.lastSnapMs ? nowMs - netStats.lastSnapMs : Infinity;
1924
+
let label, color;
1925
+
if (!wsOk) { label = "offline"; color = [220, 90, 90]; }
1926
+
else if (snapAgeMs < 500) { label = udpOk ? "live" : "live (slow)"; color = [120, 230, 120]; }
1927
+
else if (snapAgeMs < 2000) { label = "lagging"; color = [230, 200, 80]; }
1928
+
else { label = "stalled"; color = [230, 140, 90]; }
1929
+
rightLabelMulti([[dim, "online "], [color, label]], lineY);
1930
+
advance();
1931
+
if (wsOk) {
1932
+
const lagClr = ping < 80 ? [180, 230, 180]
1933
+
: ping < 200 ? [230, 220, 120]
1934
+
: [230, 140, 120];
1935
+
rightLabelMulti([[dim, "lag "], [lagClr, `${ping}ms`]], lineY);
1936
+
advance();
1937
+
}
1883
1938
}
1884
1939
1885
-
// SPEED — colored by how close to max (kept on its own row).
1886
-
const upsNow = speedSmoothed * SIM_HZ;
1887
-
const barMaxUPSNow = RUN_SPEED * 1.2;
1888
-
const fillNow = Math.min(1, upsNow / barMaxUPSNow);
1889
-
const spR = fillNow > 0.5 ? Math.floor(255 * ((fillNow - 0.5) * 2)) : 0;
1890
-
const spG = fillNow < 0.5 ? 255 : Math.floor(255 * (1 - (fillNow - 0.5) * 2));
1891
-
rightLabelMulti([[dim, "SPD "], [[spR, spG, 50], `${upsNow.toFixed(1)}u/s`]], margin + lineH * 6);
1940
+
// Live state from physics: stance + camera mode + speed.
1941
+
if (phys) {
1942
+
const stance = !phys.onGround ? "jumping"
1943
+
: phys.crouch > 0.5 ? "crouched"
1944
+
: "standing";
1945
+
const stanceClr = !phys.onGround ? [240, 220, 100]
1946
+
: phys.crouch > 0.5 ? [240, 170, 90]
1947
+
: [180, 230, 180];
1948
+
rightLabelMulti([[dim, "stance "], [stanceClr, stance]], lineY);
1949
+
advance();
1950
+
1951
+
const view = phys.thirdPerson ? `3rd · x${ZOOM_DISTANCES[zoomLevel]}` : "1st";
1952
+
const viewClr = phys.thirdPerson ? [220, 160, 240] : [120, 220, 230];
1953
+
rightLabelMulti([[dim, "view "], [viewClr, view]], lineY);
1954
+
advance();
1955
+
}
1892
1956
1893
-
// PERF — adaptive-quality tier, what it disabled, and the hover-flip mode.
1894
1957
{
1895
-
const tier = perfLowMode ? "LOW" : perfMedMode ? "MED" : "HIGH";
1896
-
const tierClr = perfLowMode ? "red" : perfMedMode ? "orange" : "lime";
1897
-
const fresh = perfSamplesSinceSwitch < 6;
1898
-
rightLabelMulti([[dim, "PERF "], [fresh ? "white" : tierClr, tier]], margin + lineH * 7);
1899
-
1900
-
// GFX disabled-by-tier breakdown — each toggle gets its own tint.
1901
-
if (perfLowMode) {
1902
-
rightLabelMulti(
1903
-
[[dim, "GFX "], ["red", "-BODY "], ["orange", "-ANIM"]],
1904
-
margin + lineH * 8,
1905
-
);
1906
-
} else if (perfMedMode) {
1907
-
rightLabelMulti(
1908
-
[[dim, "GFX "], [[255, 140, 80], "-LAVA "], ["orange", "-ANIM"]],
1909
-
margin + lineH * 8,
1910
-
);
1911
-
} else {
1912
-
rightLabelMulti([[dim, "GFX "], ["lime", "FULL"]], margin + lineH * 8);
1913
-
}
1958
+
const upsNow = speedSmoothed * SIM_HZ;
1959
+
const barMaxUPSNow = RUN_SPEED * 1.2;
1960
+
const fillNow = Math.min(1, upsNow / barMaxUPSNow);
1961
+
const spR = fillNow > 0.5 ? Math.floor(255 * ((fillNow - 0.5) * 2)) : 0;
1962
+
const spG = fillNow < 0.5 ? 255 : Math.floor(255 * (1 - (fillNow - 0.5) * 2));
1963
+
rightLabelMulti([[dim, "speed "], [[spR, spG, 50], `${upsNow.toFixed(1)}`]], lineY);
1964
+
advance();
1965
+
}
1914
1966
1915
-
const flipNames = ["NONE", "X", "Z", "XZ"];
1916
-
const flipClr = hoverFlipMode === 0 ? [130, 130, 130] : [255, 200, 80];
1917
-
rightLabelMulti([[dim, "FLIP "], [flipClr, flipNames[hoverFlipMode]]], margin + lineH * 9);
1967
+
if (netSpectator) {
1968
+
rightLabel("watching", lineY, [255, 200, 80]);
1969
+
advance();
1918
1970
}
1919
1971
1920
-
// NET — transport, ping, snap rx, cmd tx, peer count. Below the perf block.
1972
+
// 3. Quiet local-perf info at the bottom of the column.
1973
+
lineY += 4;
1974
+
const fpsColor = fps >= 30 ? [180, 230, 180]
1975
+
: fps >= 15 ? [230, 220, 120]
1976
+
: [230, 140, 120];
1977
+
rightLabelMulti([[dim, "fps "], [fpsColor, `${fps}`]], lineY);
1978
+
advance();
1921
1979
{
1922
-
const wsOk = !!netServer;
1923
-
const udpOk = !!netUdp?.connected;
1924
-
const nowMs = Date.now();
1925
-
const snapAgeMs = netStats.lastSnapMs ? nowMs - netStats.lastSnapMs : Infinity;
1926
-
const transport = udpOk ? "UDP" : wsOk ? "WS" : "--";
1927
-
const transportClr = !wsOk ? [200, 80, 80]
1928
-
: udpOk ? (snapAgeMs < 500 ? [120, 230, 120] : [230, 200, 80])
1929
-
: [200, 180, 80];
1930
-
const pingClr = ping < 80 ? [180, 230, 180]
1931
-
: ping < 200 ? [230, 220, 120]
1932
-
: [230, 140, 120];
1933
-
rightLabelMulti(
1934
-
[[dim, "NET "], [transportClr, transport], [dim, " "], [pingClr, `${ping}ms`]],
1935
-
margin + lineH * 10,
1936
-
);
1937
-
rightLabelMulti(
1938
-
[[dim, "RX "], [[160, 200, 230], `${netStats.snapsRx}`],
1939
-
[dim, " TX "], [[200, 180, 230], `${netStats.cmdsTx}`]],
1940
-
margin + lineH * 11,
1941
-
);
1942
-
const peers = Object.keys(others).length;
1943
-
const peersClr = peers > 0 ? [180, 230, 180] : [130, 130, 130];
1944
-
rightLabelMulti([[dim, "PEERS "], [peersClr, `${peers}`]], margin + lineH * 12);
1945
-
if (netSpectator) {
1946
-
ink(255, 180, 60);
1947
-
rightLabel(`SPECTATE`, margin + lineH * 13);
1948
-
}
1980
+
const tier = perfLowMode ? "low" : perfMedMode ? "medium" : "high";
1981
+
const tierClr = perfLowMode ? [220, 130, 130]
1982
+
: perfMedMode ? [230, 200, 120]
1983
+
: [180, 220, 180];
1984
+
rightLabelMulti([[dim, "quality "], [tierClr, tier]], lineY);
1949
1985
}
1950
1986
1951
1987
// 🪑 Full-width spectator overlay (only renders when we were kicked from