aesthetic.computer / core
Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

arena: stack top-right HUD into 6 labeled, non-overlapping sections

GFX/CAM/STATE/SPEED/PERF/NET each get their own row range so the
network info and perf panel no longer collide. Adds a rightLabelMulti
helper so labels and values can be tinted independently per row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

prompt.ac/@jeffrey 07a0b980 b5a8a440

+95 -69
+95 -69
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 1841 const font = "MatrixChunky8"; 1835 1842 const margin = 4; 1836 1843 const lineH = 10; 1837 1844 const rX = screen.width - margin; // right edge 1845 + const dim = [140, 140, 150]; // shared label color 1838 1846 const rightLabel = (txt, y) => { 1839 - // MatrixChunky8 glyphs are ~4px wide; right-align by char count. 1840 1847 write(txt, { x: rX - txt.length * 4, y }, undefined, undefined, false, font); 1848 + }; 1849 + // Right-align a row built from [color, text] segments so labels and values 1850 + // can be tinted independently on the same line. 1851 + const rightLabelMulti = (parts, y) => { 1852 + let total = 0; 1853 + for (const [, t] of parts) total += t.length; 1854 + let x = rX - total * 4; 1855 + for (const [c, t] of parts) { 1856 + if (Array.isArray(c)) ink(...c); else ink(c); 1857 + write(t, { x, y }, undefined, undefined, false, font); 1858 + x += t.length * 4; 1859 + } 1841 1860 }; 1842 1861 1843 - // FPS 1844 - ink(fps >= 30 ? "lime" : fps >= 15 ? "yellow" : "red"); 1845 - rightLabel(`${fps} FPS`, margin); 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); 1846 1866 1847 - // Frame time 1848 - ink(180, 180, 180); 1849 - rightLabel(`${avgDt.toFixed(1)}ms`, margin + lineH); 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); 1850 1871 1851 - // FOV + run speed (Quake-style spec) 1852 - ink(150, 200, 255); 1853 - rightLabel(`FOV ${FOV}`, margin + lineH * 2); 1854 - rightLabel(`RUN ${RUN_SPEED.toFixed(1)}u/s`, margin + lineH * 3); 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); 1855 1879 1856 - // 🏟️ Net — ping, snap rx, cmd tx, peer count. Under the "AIR/GROUND" row. 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); 1883 + } 1884 + 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); 1892 + 1893 + // PERF — adaptive-quality tier, what it disabled, and the hover-flip mode. 1894 + { 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 + } 1914 + 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); 1918 + } 1919 + 1920 + // NET — transport, ping, snap rx, cmd tx, peer count. Below the perf block. 1857 1921 { 1858 1922 const wsOk = !!netServer; 1859 1923 const udpOk = !!netUdp?.connected; 1860 1924 const nowMs = Date.now(); 1861 1925 const snapAgeMs = netStats.lastSnapMs ? nowMs - netStats.lastSnapMs : Infinity; 1862 - const color = !wsOk ? [200, 80, 80] 1863 - : udpOk ? (snapAgeMs < 500 ? [120, 230, 120] : [230, 200, 80]) 1864 - : [200, 180, 80]; 1865 - ink(...color); 1866 - rightLabel(`${udpOk ? "UDP" : wsOk ? "WS" : "--"} ${ping}ms`, margin + lineH * 6); 1867 - ink(160, 160, 180); 1868 - rightLabel(`rx ${netStats.snapsRx} tx ${netStats.cmdsTx}`, margin + lineH * 7); 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 + ); 1869 1942 const peers = Object.keys(others).length; 1870 - ink(peers > 0 ? [180, 230, 180] : [130, 130, 130]); 1871 - rightLabel(`peers ${peers}`, margin + lineH * 8); 1943 + const peersClr = peers > 0 ? [180, 230, 180] : [130, 130, 130]; 1944 + rightLabelMulti([[dim, "PEERS "], [peersClr, `${peers}`]], margin + lineH * 12); 1872 1945 if (netSpectator) { 1873 1946 ink(255, 180, 60); 1874 - rightLabel(`SPECTATE`, margin + lineH * 9); 1947 + rightLabel(`SPECTATE`, margin + lineH * 13); 1875 1948 } 1876 1949 } 1877 1950 ··· 1889 1962 write(msg2, { x: Math.floor(screen.width / 2 - msg2.length * 2), y: bannerY + 10 }, undefined, undefined, false, "MatrixChunky8"); 1890 1963 write(msg3, { x: Math.floor(screen.width / 2 - msg3.length * 2), y: bannerY + 18 }, undefined, undefined, false, "MatrixChunky8"); 1891 1964 } 1892 - 1893 - // 🏃 Current speed — colored by how close to max. 1894 - const upsNow = speedSmoothed * SIM_HZ; 1895 - const barMaxUPSNow = RUN_SPEED * 1.2; 1896 - const fillNow = Math.min(1, upsNow / barMaxUPSNow); 1897 - const spR = fillNow > 0.5 ? Math.floor(255 * ((fillNow - 0.5) * 2)) : 0; 1898 - const spG = fillNow < 0.5 ? 255 : Math.floor(255 * (1 - (fillNow - 0.5) * 2)); 1899 - ink(spR, spG, 50); 1900 - rightLabel(`${upsNow.toFixed(1)}u/s`, margin + lineH * 9); 1901 - 1902 - // Grounded / airborne indicator (reuses `phys` captured above). 1903 - if (phys) { 1904 - const airborne = !phys.onGround; 1905 - const crouching = phys.crouch > 0.5; 1906 - ink(airborne ? "yellow" : crouching ? "orange" : "lime"); 1907 - rightLabel( 1908 - airborne ? "AIR" : crouching ? "CROUCH" : "GROUND", 1909 - margin + lineH * 4, 1910 - ); 1911 - 1912 - // POV indicator — shows 1P or 3P plus the current zoom distance. 1913 - ink(phys.thirdPerson ? "magenta" : "cyan"); 1914 - const povStr = phys.thirdPerson 1915 - ? `3P ×${ZOOM_DISTANCES[zoomLevel]}` 1916 - : "1P"; 1917 - rightLabel(povStr, margin + lineH * 5); 1918 - } 1919 - 1920 - // ⚡ Perf mode label — shows which adaptive-quality tier is active. Flashes 1921 - // briefly after a tier change (perfSamplesSinceSwitch < 6). 1922 - const perfLabel = perfLowMode ? "PERF LOW" : perfMedMode ? "PERF MED" : "PERF HIGH"; 1923 - const perfFresh = perfSamplesSinceSwitch < 6; 1924 - ink(perfLowMode ? "red" : perfMedMode ? "orange" : "lime"); 1925 - if (perfFresh) ink("white"); 1926 - rightLabel(perfLabel, margin + lineH * 6); 1927 - // Show which features are currently disabled by the perf tier. 1928 - ink(150, 150, 150); 1929 - if (perfLowMode) rightLabel("-BODY -ANIM", margin + lineH * 7); 1930 - else if (perfMedMode) rightLabel("-LAVA-ANIM", margin + lineH * 7); 1931 - 1932 - // Hover-flip experiment — press F to cycle, label shows current mode. 1933 - const flipNames = ["F:NONE", "F:X", "F:Z", "F:XZ"]; 1934 - ink(255, 200, 80); 1935 - rightLabel(flipNames[hoverFlipMode], margin + lineH * 8); 1936 - 1937 - // Speed now displayed in top-right HUD stack — bottom-center bar removed 1938 - // because the jump/crouch mobile buttons overlap that area. 1939 1965 1940 1966 // 🎯 Debug crosshair at the current pen position (unlocked mode only) so 1941 1967 // we can visually compare it against the highlighted hover tile.