= {
@@ -21,6 +31,7 @@ const randomName = () =>
const DEFAULTS: Settings = {
volume: 0.85, sensitivity: 1, viewBob: false, bloom: true, quality: 'sharp', name: '',
+ avatar: { ...DEFAULT_LOOK },
};
const LS_SETTINGS = 'turncraft.settings';
const LS_HELP_SEEN = 'turncraft.helpSeen';
@@ -29,8 +40,12 @@ export interface MenuOpts {
onApply(s: Settings): void;
onOpen?(): void; // host: exit pointer lock, suppress the pause overlay
onClose?(): void; // host: re-acquire pointer lock if the game has started
+ /** Avatar changed — push it to the relay live (no reload). */
+ onAvatar?(look: AvatarLook): void;
}
+type Tab = 'help' | 'settings' | 'avatar';
+
const HELP_HTML = `
WHAT IS THIS
You are 7 mm tall inside a DJ booth, and the booth is dead. Five things
@@ -48,6 +63,8 @@ mix comes back to life — one layer of music per repair.
wire / torque a screw at the workbench
| Q | drop a carried wire back on the loom |
| 1–9 / SCROLL | pick a hotbar slot |
+| Z X C V | emote — wave, nod (on the beat), point, airhorn |
+| HOLD TAB | who's in the booth |
| F | fly mode (cheat — great for exploring) |
| H | this menu |
@@ -76,14 +93,24 @@ switch on the mixer's back edge lights green. Climb up and press it.
MULTIPLAYER
The booth is shared: other tiny DJs may be in here with you. You'll see
them riding the records; blocks they mine or place change for everyone, and
-quest repairs count for the whole booth. Set your DJ name in SETTINGS.
+quest repairs count for the whole booth. Set your DJ name in SETTINGS and your
+look in AVATAR — colour, headgear and face, live, no reload. Say hello with
+Z X C V (the airhorn is rate-limited, sorry). Hold TAB to see
+who's here.
TIPS
The records spin — stand on one and ride. Walking to the middle while it
turns is a real fight (tiny legs, big physics): press the START/STOP plate to
stop the deck, or embrace the spiral. The little terraces step up as you walk
in. At 45 speed the rim moves faster than you can sprint — jump near the edge
to get launched. Mined blocks can be placed anywhere: build bridges between
-the gear.
`;
+the gear.
+BLOWING THE FUSE
+Once the mix is live the quest is spent — so there's a way to play it again.
+Go back down to the fuse box and keep mining the glass fuse: it takes a
+deliberate five-second hold, and it kills the mix for everyone in the booth.
+The music powers down, the lights die, and the cartridge pops its wires — but
+everything anyone built stays exactly where it is. There's a cooldown after each
+win, so you can't grief a room with it.
`;
export class Menu {
private readonly opts: MenuOpts;
@@ -125,7 +152,7 @@ export class Menu {
isOpen(): boolean { return this.open; }
getSettings(): Settings { return { ...this.settings }; }
- toggle(force?: boolean, tab?: 'help' | 'settings'): void {
+ toggle(force?: boolean, tab?: Tab): void {
const next = force ?? !this.open;
if (next === this.open) { if (tab) this.showTab(tab); return; }
this.open = next;
@@ -152,6 +179,7 @@ export class Menu {
const raw = localStorage.getItem(LS_SETTINGS);
if (raw) s = { ...s, ...JSON.parse(raw) as Partial };
} catch { /* fall through to defaults */ }
+ s.avatar = validLook(s.avatar); // stale/garbage persisted look -> defaults
if (!s.name) {
s.name = randomName();
localStorage.setItem(LS_SETTINGS, JSON.stringify(s));
@@ -164,7 +192,7 @@ export class Menu {
this.opts.onApply(this.settings);
}
- private showTab(tab: 'help' | 'settings'): void {
+ private showTab(tab: Tab): void {
this.panel.querySelectorAll('.tcm-tab').forEach((t) =>
t.classList.toggle('active', t.dataset.tab === tab));
this.panel.querySelectorAll('.tcm-page').forEach((p) =>
@@ -174,7 +202,7 @@ export class Menu {
private build(): void {
const tabs = document.createElement('div');
tabs.className = 'tcm-tabs';
- for (const [key, label] of [['help', 'HOW TO PLAY'], ['settings', 'SETTINGS']] as const) {
+ for (const [key, label] of [['help', 'HOW TO PLAY'], ['avatar', 'AVATAR'], ['settings', 'SETTINGS']] as const) {
const t = document.createElement('button');
t.className = 'tcm-tab' + (key === 'help' ? ' active' : '');
t.dataset.tab = key;
@@ -195,6 +223,12 @@ export class Menu {
help.innerHTML = HELP_HTML; // static template string, no user input
this.panel.appendChild(help);
+ const av = document.createElement('div');
+ av.className = 'tcm-page hidden';
+ av.dataset.tab = 'avatar';
+ this.panel.appendChild(av);
+ this.buildAvatarPage(av);
+
const st = document.createElement('div');
st.className = 'tcm-page hidden';
st.dataset.tab = 'settings';
@@ -216,6 +250,123 @@ export class Menu {
(v) => { this.settings.name = v.slice(0, 24) || s.name; this.save(); }));
}
+ /**
+ * AVATAR tab: palette-only swatch rows + a 2D mirror. You're first-person, so
+ * this preview is the only way to see yourself; it shares paintFace/bodyCss
+ * with the 3D avatar so it can't drift from what peers actually see.
+ */
+ private buildAvatarPage(root: HTMLElement): void {
+ const intro = document.createElement('p');
+ intro.textContent =
+ "Other DJs see this. You don't (you're first person) — so here's the mirror.";
+ root.appendChild(intro);
+
+ const wrap = document.createElement('div');
+ wrap.className = 'tcm-avwrap';
+ const canvas = document.createElement('canvas');
+ canvas.width = 132; canvas.height = 168;
+ canvas.className = 'tcm-avpreview';
+ const controls = document.createElement('div');
+ controls.className = 'tcm-avcontrols';
+ wrap.appendChild(canvas);
+ wrap.appendChild(controls);
+ root.appendChild(wrap);
+
+ const draw = () => this.drawAvatarPreview(canvas);
+
+ const pick = (label: string, count: number, names: readonly string[],
+ get: () => number, set: (i: number) => void, swatch: boolean) => {
+ const row = document.createElement('div');
+ row.className = 'tcm-avrow';
+ const h = document.createElement('span');
+ h.className = 'tcm-avlabel';
+ h.textContent = label;
+ row.appendChild(h);
+ const chips = document.createElement('div');
+ chips.className = 'tcm-chips';
+ for (let i = 0; i < count; i++) {
+ const b = document.createElement('button');
+ b.className = 'tcm-chip' + (get() === i ? ' on' : '');
+ b.title = names[i] ?? String(i);
+ if (swatch) {
+ b.style.background = i === 0 ? 'linear-gradient(135deg,#888,#ccc)'
+ : bodyCss({ ...this.settings.avatar, hue: i }, 0);
+ } else {
+ b.textContent = names[i] ?? String(i);
+ }
+ b.addEventListener('click', () => {
+ set(i);
+ chips.querySelectorAll('.tcm-chip').forEach((c, ci) => c.classList.toggle('on', ci === i));
+ this.settings.avatar = validLook(this.settings.avatar);
+ this.save();
+ this.opts.onAvatar?.(this.settings.avatar); // live — no reload
+ draw();
+ });
+ chips.appendChild(b);
+ }
+ row.appendChild(chips);
+ controls.appendChild(row);
+ };
+
+ const a = () => this.settings.avatar;
+ pick('COLOUR', AVATAR_RANGES.hue, HUE_NAMES, () => a().hue,
+ (i) => { a().hue = i; }, true);
+ pick('HEADGEAR', AVATAR_RANGES.gear, GEAR_NAMES, () => a().gear,
+ (i) => { a().gear = i; }, false);
+ pick('FACE', AVATAR_RANGES.face, FACE_NAMES, () => a().face,
+ (i) => { a().face = i; }, false);
+
+ draw();
+ }
+
+ /** Front-view mock-up of the voxel DJ — cheap 2D, same palette as the 3D one. */
+ private drawAvatarPreview(canvas: HTMLCanvasElement): void {
+ const ctx = canvas.getContext('2d')!;
+ const look = this.settings.avatar;
+ const body = bodyCss(look, 0);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = '#0c0a08';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ const cx = canvas.width / 2;
+ // body + arms
+ ctx.fillStyle = body;
+ ctx.fillRect(cx - 27, 82, 54, 56); // torso
+ ctx.fillRect(cx - 41, 84, 11, 42); // arm L
+ ctx.fillRect(cx + 30, 84, 11, 42); // arm R
+ // head (slightly lighter, like the 3D headMat offsetHSL(+0.15 l))
+ const head = bodyCss(look, 0).replace(/(\d+)%\)$/, (_m, l) => `${Math.min(100, +l + 15)}%)`);
+ ctx.fillStyle = head;
+ ctx.fillRect(cx - 22, 34, 44, 44);
+ paintFace(ctx, look.face, cx - 22, 34, 44, 44);
+
+ // headgear
+ const gear = GEAR_NAMES[look.gear] ?? 'phones';
+ if (gear === 'phones') {
+ ctx.fillStyle = '#191919';
+ ctx.fillRect(cx - 25, 28, 50, 7); // band
+ ctx.fillRect(cx - 30, 44, 9, 22); // cup L
+ ctx.fillRect(cx + 21, 44, 9, 22); // cup R
+ } else if (gear === 'cap') {
+ ctx.fillStyle = '#2f6f8f';
+ ctx.fillRect(cx - 24, 22, 48, 14);
+ ctx.fillRect(cx - 24, 34, 48, 5); // brim (front view)
+ } else if (gear === 'beanie') {
+ ctx.fillStyle = '#8a5a3a';
+ ctx.fillRect(cx - 24, 20, 48, 18);
+ ctx.fillRect(cx - 6, 12, 12, 10); // bobble
+ } else if (gear === 'crown') {
+ ctx.fillStyle = '#d4ac3c';
+ ctx.fillRect(cx - 23, 26, 46, 9);
+ for (const dx of [-16, -4, 8]) ctx.fillRect(cx + dx, 16, 9, 11);
+ }
+
+ ctx.fillStyle = '#6a6252';
+ ctx.font = '10px ui-monospace, monospace';
+ ctx.textAlign = 'center';
+ ctx.fillText(this.settings.name || 'you', cx, 158);
+ }
+
private text(label: string, value: string, onChange: (v: string) => void): HTMLElement {
const row = this.row(label);
const input = document.createElement('input');
@@ -303,7 +454,19 @@ export class Menu {
.tcm-row select{background:#0a0908;color:#d8cdb4;border:1px solid #3a352c;border-radius:4px;
font:12px ui-monospace,monospace;padding:4px 6px}
.tcm-row input[type=text]{background:#0a0908;color:#d8cdb4;border:1px solid #3a352c;
- border-radius:4px;font:12px ui-monospace,monospace;padding:4px 8px;width:160px}`;
+ border-radius:4px;font:12px ui-monospace,monospace;padding:4px 8px;width:160px}
+.tcm-avwrap{display:flex;gap:18px;align-items:flex-start;margin-top:10px}
+.tcm-avpreview{border:1px solid #3a352c;border-radius:6px;image-rendering:pixelated;
+ width:132px;height:168px;flex:none}
+.tcm-avcontrols{flex:1;display:flex;flex-direction:column;gap:12px}
+.tcm-avrow{display:flex;flex-direction:column;gap:5px}
+.tcm-avlabel{color:#8a8378;font-size:11px;letter-spacing:.14em}
+.tcm-chips{display:flex;flex-wrap:wrap;gap:5px}
+.tcm-chip{width:26px;height:26px;border:1px solid #3a352c;border-radius:5px;cursor:pointer;
+ background:#0a0908;color:#d8cdb4;font:9px ui-monospace,monospace;padding:0;overflow:hidden}
+.tcm-chip:not([title=""]){width:auto;min-width:26px;padding:0 7px}
+.tcm-chip.on{border-color:#ffb028;box-shadow:0 0 0 1px #ffb028}
+.tcm-chip:hover{border-color:#6a6252}`;
document.head.appendChild(css);
}
}
diff --git a/src/ui/Roster.ts b/src/ui/Roster.ts
new file mode 100644
index 0000000..6d027e1
--- /dev/null
+++ b/src/ui/Roster.ts
@@ -0,0 +1,104 @@
+// Who's-here list (SOCIAL_RESET brief, Feature 4). Hold Tab: a translucent list
+// of the DJs in the booth (you first), each with their avatar hue as a swatch.
+// Pure view — the data comes from NetClient's roster; no network of its own.
+
+import { bodyCss, type AvatarLook } from '../net/avatarLook';
+
+export interface RosterEntry {
+ id: number;
+ name: string;
+ look: AvatarLook;
+}
+
+export class Roster {
+ private readonly el: HTMLDivElement;
+ private peers: RosterEntry[] = [];
+ private self: { name: string; look: AvatarLook };
+ private shown = false;
+
+ constructor(self: { name: string; look: AvatarLook }) {
+ this.self = self;
+ this.injectStyle();
+ this.el = document.createElement('div');
+ this.el.className = 'tcr-panel hidden';
+ document.body.appendChild(this.el);
+
+ window.addEventListener('keydown', this.onDown);
+ window.addEventListener('keyup', this.onUp);
+ // Tab can steal focus / fire blur — hide defensively.
+ window.addEventListener('blur', () => this.show(false));
+ }
+
+ /** Local player's name/look (the mirror can change live). */
+ setSelf(self: { name: string; look: AvatarLook }): void {
+ this.self = self;
+ if (this.shown) this.render();
+ }
+
+ setPeers(peers: RosterEntry[]): void {
+ this.peers = peers;
+ if (this.shown) this.render();
+ }
+
+ private onDown = (e: KeyboardEvent): void => {
+ if (e.code !== 'Tab') return;
+ e.preventDefault(); // don't tab-focus the page furniture
+ if (!e.repeat) this.show(true);
+ };
+
+ private onUp = (e: KeyboardEvent): void => {
+ if (e.code !== 'Tab') return;
+ e.preventDefault();
+ this.show(false);
+ };
+
+ private show(v: boolean): void {
+ if (v === this.shown) return;
+ this.shown = v;
+ if (v) this.render();
+ this.el.classList.toggle('hidden', !v);
+ }
+
+ private render(): void {
+ const rows: string[] = [];
+ const row = (name: string, css: string, you: boolean) =>
+ `` +
+ `${escapeHtml(name)}${you ? 'you' : ''}
`;
+
+ rows.push(row(this.self.name || 'you', bodyCss(this.self.look, 0), true));
+ for (const p of this.peers) rows.push(row(p.name, bodyCss(p.look, p.id), false));
+
+ const n = this.peers.length + 1;
+ this.el.innerHTML =
+ `IN THE BOOTH — ${n} DJ${n === 1 ? '' : 's'}
${rows.join('')}`;
+ }
+
+ dispose(): void {
+ window.removeEventListener('keydown', this.onDown);
+ window.removeEventListener('keyup', this.onUp);
+ this.el.remove();
+ }
+
+ private injectStyle(): void {
+ const css = document.createElement('style');
+ css.textContent = `
+.tcr-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:45;
+ min-width:240px;max-height:70vh;overflow-y:auto;background:rgba(12,10,8,0.82);
+ border:1px solid #4a4234;border-radius:10px;padding:12px 14px;
+ font:12px/1.6 ui-monospace,monospace;color:#d8cdb4;pointer-events:none;
+ backdrop-filter:blur(2px)}
+.tcr-panel.hidden{display:none}
+.tcr-head{color:#ffb028;font-size:11px;letter-spacing:.15em;margin-bottom:8px}
+.tcr-row{display:flex;align-items:center;gap:9px;padding:3px 0}
+.tcr-row i{width:12px;height:12px;border-radius:3px;flex:none;
+ border:1px solid rgba(255,255,255,0.18)}
+.tcr-row b{margin-left:auto;color:#7ec46a;font-weight:400;font-size:10px;letter-spacing:.1em}`;
+ document.head.appendChild(css);
+ }
+}
+
+/** Names are server-sanitized, but this is user-controlled text in innerHTML. */
+function escapeHtml(s: string): string {
+ return s.replace(/[&<>"']/g, (c) =>
+ ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c] as string));
+}