Theme system: Midnight, Hi-Contrast, Paper, CRT
Palette fully variable-driven (chips, cards, bars, inputs, toasts, tutorial) with a cycling theme chip, persisted choice, and per-theme canvas brightness lift so the scene itself reads better. Hi-Contrast bumps the most-read font sizes; Paper is a true light mode; CRT is phosphor green with a glow, because of course it is. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
type-two
parent
50298b8932
commit
cdb8fa59f8
@ -4,7 +4,7 @@ import { step, place, canPlace, wire, sell, grant, raiseRound, clapBack, shipGra
|
||||
import { saveState, loadState, clearSave } from "./sim/save";
|
||||
import { DEF } from "./sim/catalog";
|
||||
import { Scene } from "./render/scene";
|
||||
import { Hud } from "./ui/hud";
|
||||
import { Hud, applyTheme, currentTheme } from "./ui/hud";
|
||||
import { Panels } from "./ui/panels";
|
||||
import { Tutorial } from "./ui/tutorial";
|
||||
import { sfx } from "./ui/sfx";
|
||||
@ -12,6 +12,7 @@ import { unlockGen, unlockModality, setSpec, setDataSource, unlockRnd, buyUpgrad
|
||||
import { DataSource } from "./sim/research";
|
||||
|
||||
async function boot() {
|
||||
applyTheme(currentTheme());
|
||||
const el = document.getElementById("app")!;
|
||||
const loaded = loadState();
|
||||
const state = loaded ?? createState();
|
||||
|
||||
105
src/ui/hud.css
105
src/ui/hud.css
@ -1,16 +1,97 @@
|
||||
:root {
|
||||
:root, :root[data-theme="midnight"] {
|
||||
--bg: #0b0b12;
|
||||
--panel: rgba(16, 16, 26, 0.92);
|
||||
--edge: #23233a;
|
||||
--text: #e6e6f0;
|
||||
--dim: #8a8aa3;
|
||||
--soft: #c9c9dc;
|
||||
--purple: #8b5cf6;
|
||||
--cyan: #22d3ee;
|
||||
--amber: #f59e0b;
|
||||
--red: #ef4444;
|
||||
--green: #34d399;
|
||||
--chip: #16162a;
|
||||
--chip-on: #221a3a;
|
||||
--card: #12121f;
|
||||
--card-good: #0f2018;
|
||||
--bar-bg: #1c1c2e;
|
||||
--input: #0c0c16;
|
||||
--canvas-bright: 1;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
}
|
||||
:root[data-theme="contrast"] {
|
||||
--bg: #000000;
|
||||
--panel: rgba(8, 8, 12, 0.97);
|
||||
--edge: #52527a;
|
||||
--text: #ffffff;
|
||||
--dim: #c0c0d4;
|
||||
--soft: #ececf8;
|
||||
--purple: #a78bfa;
|
||||
--cyan: #67e8f9;
|
||||
--amber: #fbbf24;
|
||||
--red: #f87171;
|
||||
--green: #6ee7b7;
|
||||
--chip: #1c1c30;
|
||||
--chip-on: #372560;
|
||||
--card: #16161f;
|
||||
--card-good: #143a26;
|
||||
--bar-bg: #2a2a40;
|
||||
--input: #101018;
|
||||
--canvas-bright: 1.15;
|
||||
}
|
||||
:root[data-theme="paper"] {
|
||||
--bg: #e8e4da;
|
||||
--panel: rgba(251, 249, 243, 0.96);
|
||||
--edge: #c2bcaa;
|
||||
--text: #1a1a28;
|
||||
--dim: #63637a;
|
||||
--soft: #34344c;
|
||||
--purple: #6d28d9;
|
||||
--cyan: #0e7490;
|
||||
--amber: #b45309;
|
||||
--red: #dc2626;
|
||||
--green: #047857;
|
||||
--chip: #efebe0;
|
||||
--chip-on: #e3daf6;
|
||||
--card: #f5f2e9;
|
||||
--card-good: #ddf0e2;
|
||||
--bar-bg: #d6d1c2;
|
||||
--input: #ffffff;
|
||||
--canvas-bright: 1.22;
|
||||
}
|
||||
:root[data-theme="crt"] {
|
||||
--bg: #020803;
|
||||
--panel: rgba(3, 16, 6, 0.95);
|
||||
--edge: #1a6b3a;
|
||||
--text: #6ee7a0;
|
||||
--dim: #48a86e;
|
||||
--soft: #8af0b5;
|
||||
--purple: #34d873;
|
||||
--cyan: #4ade80;
|
||||
--amber: #facc15;
|
||||
--red: #f87171;
|
||||
--green: #4ade80;
|
||||
--chip: #052410;
|
||||
--chip-on: #0d4a22;
|
||||
--card: #04180a;
|
||||
--card-good: #0d4a22;
|
||||
--bar-bg: #0c2c16;
|
||||
--input: #031007;
|
||||
--canvas-bright: 1.05;
|
||||
}
|
||||
|
||||
body { background: var(--bg); }
|
||||
#app canvas { filter: brightness(var(--canvas-bright)); }
|
||||
:root[data-theme="crt"] #hud { text-shadow: 0 0 6px rgba(74, 222, 128, 0.3); }
|
||||
|
||||
/* high-contrast bumps the most-read text sizes */
|
||||
:root[data-theme="contrast"] #topbar .stat .val { font-size: 15px; }
|
||||
:root[data-theme="contrast"] .chip { font-size: 13px; }
|
||||
:root[data-theme="contrast"] .node { font-size: 12.5px; }
|
||||
:root[data-theme="contrast"] .node small { font-size: 11.5px; }
|
||||
:root[data-theme="contrast"] .tutbody { font-size: 12.5px; }
|
||||
:root[data-theme="contrast"] .vid .t { font-size: 11.5px; }
|
||||
:root[data-theme="contrast"] #hud { font-size: 13px; }
|
||||
* { box-sizing: border-box; }
|
||||
#hud { position: fixed; inset: 0; pointer-events: none; color: var(--text); font-size: 12px; }
|
||||
#hud .panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; pointer-events: auto; }
|
||||
@ -24,7 +105,7 @@
|
||||
#topbar .stat .val { font-size: 14px; font-weight: 700; }
|
||||
#cash { color: var(--green); font-size: 18px !important; }
|
||||
#income.neg, #watts.hot, #temp.hot { color: var(--red); }
|
||||
.bar { width: 90px; height: 5px; background: #1c1c2e; border-radius: 3px; overflow: hidden; }
|
||||
.bar { width: 90px; height: 5px; background: var(--bar-bg); border-radius: 3px; overflow: hidden; }
|
||||
.bar > div { height: 100%; background: var(--amber); width: 0%; transition: width 0.2s; }
|
||||
.bar.train > div { background: var(--purple); }
|
||||
#breaker-reset {
|
||||
@ -35,10 +116,10 @@
|
||||
|
||||
#controls { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; padding: 10px; }
|
||||
.chip {
|
||||
background: #16162a; border: 1px solid var(--edge); color: var(--dim); border-radius: 6px;
|
||||
background: var(--chip); border: 1px solid var(--edge); color: var(--dim); border-radius: 6px;
|
||||
padding: 5px 9px; cursor: pointer; font: inherit; text-align: left;
|
||||
}
|
||||
.chip.on { color: var(--text); border-color: var(--purple); background: #221a3a; }
|
||||
.chip.on { color: var(--text); border-color: var(--purple); background: var(--chip-on); }
|
||||
#alloc-row { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
|
||||
#alloc { width: 130px; accent-color: var(--purple); }
|
||||
|
||||
@ -50,10 +131,10 @@
|
||||
.shop-cat { font-size: 9px; color: var(--dim); letter-spacing: 0.2em; margin: 4px 0 -2px; }
|
||||
.shop-item {
|
||||
display: flex; gap: 8px; align-items: center; border: 1px solid var(--edge); border-radius: 8px;
|
||||
padding: 6px; cursor: pointer; background: #12121f;
|
||||
padding: 6px; cursor: pointer; background: var(--card);
|
||||
}
|
||||
.shop-item:hover { border-color: var(--cyan); }
|
||||
.shop-item.selected { border-color: var(--green); background: #12281f; }
|
||||
.shop-item.selected { border-color: var(--green); background: var(--card-good); }
|
||||
.shop-item.dim { opacity: 0.45; cursor: default; }
|
||||
.shop-item img { width: 40px; height: 40px; object-fit: contain; }
|
||||
.shop-item .nm { font-weight: 700; font-size: 11px; }
|
||||
@ -76,7 +157,7 @@
|
||||
.toast { padding: 8px 14px; border-radius: 8px; font-weight: 700; animation: rise 4s forwards; }
|
||||
.toast.bad { background: #3a1214; border: 1px solid var(--red); color: #ffb4b4; }
|
||||
.toast.good { background: #12312a; border: 1px solid var(--green); color: #a7f3d0; }
|
||||
.toast.info { background: #16162a; border: 1px solid var(--edge); color: var(--dim); }
|
||||
.toast.info { background: var(--chip); border: 1px solid var(--edge); color: var(--dim); }
|
||||
.toast.rival { background: #251330; border: 1px solid var(--purple); color: #d8b4fe; }
|
||||
|
||||
#fxrow { position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
|
||||
@ -112,12 +193,12 @@
|
||||
.mcols { display: flex; gap: 14px; align-items: flex-start; }
|
||||
.mcol { flex: 1; min-width: 0; }
|
||||
.mcol h4 { margin: 10px 0 6px; font-size: 10px; color: var(--dim); letter-spacing: 0.15em; }
|
||||
.node { display: block; width: 100%; text-align: left; border: 1px solid var(--edge); background: #12121f;
|
||||
.node { display: block; width: 100%; text-align: left; border: 1px solid var(--edge); background: var(--card);
|
||||
border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; font: inherit; color: var(--text); font-size: 11.5px; font-weight: 700; }
|
||||
.node small { display: block; font-weight: 400; color: var(--dim); font-size: 10px; margin-top: 2px; }
|
||||
.node.buy { cursor: pointer; }
|
||||
.node.buy:hover { border-color: var(--cyan); }
|
||||
.node.owned { border-color: var(--green); background: #0f2018; }
|
||||
.node.owned { border-color: var(--green); background: var(--card-good); }
|
||||
.node.dim { opacity: 0.45; }
|
||||
#devpanel { position: absolute; right: 215px; bottom: 12px; width: 250px; max-height: 70vh; overflow-y: auto; padding: 10px; z-index: 40; }
|
||||
.gpu-row { display: flex; align-items: center; gap: 7px; }
|
||||
@ -136,7 +217,7 @@
|
||||
.tutcard.tutdone .tuthead { color: var(--green); }
|
||||
.tuthead button { background: none; border: 0; color: var(--dim); cursor: pointer; font: inherit; }
|
||||
.tuttitle { font-weight: 700; font-size: 12.5px; margin-bottom: 4px; }
|
||||
.tutbody { font-size: 11px; line-height: 1.45; color: #c9c9dc; }
|
||||
.tutbody { font-size: 11px; line-height: 1.45; color: var(--soft); }
|
||||
.tutbody b { color: var(--cyan); }
|
||||
.tutskip { background: none; border: 0; color: var(--dim); font: inherit; font-size: 10px;
|
||||
cursor: pointer; margin-top: 6px; padding: 0; }
|
||||
@ -147,7 +228,7 @@
|
||||
#name-box h2 { margin: 0 0 4px; letter-spacing: 0.3em; color: var(--purple); }
|
||||
#name-box p { color: var(--dim); margin: 0 0 16px; }
|
||||
#name-box .row { display: flex; gap: 6px; margin-bottom: 14px; }
|
||||
#name-box input { flex: 1; background: #0c0c16; border: 1px solid var(--edge); color: var(--text); font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 6px; }
|
||||
#name-box #reroll { background: #16162a; border: 1px solid var(--edge); border-radius: 6px; font-size: 16px; cursor: pointer; padding: 0 12px; }
|
||||
#name-box input { flex: 1; background: var(--input); border: 1px solid var(--edge); color: var(--text); font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 6px; }
|
||||
#name-box #reroll { background: var(--chip); border: 1px solid var(--edge); border-radius: 6px; font-size: 16px; cursor: pointer; padding: 0 12px; }
|
||||
#name-box #cstart { width: 100%; background: var(--purple); color: #fff; border: 0; border-radius: 8px; padding: 10px; font: inherit; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; }
|
||||
#name-box #cstart:hover { filter: brightness(1.15); }
|
||||
|
||||
@ -37,6 +37,22 @@ export function randomModelName(): string {
|
||||
const fmt = (n: number, d = 2) =>
|
||||
n >= 1e6 ? (n / 1e6).toFixed(1) + "M" : n >= 1e3 ? (n / 1e3).toFixed(1) + "K" : n.toFixed(d);
|
||||
|
||||
export const THEMES = [
|
||||
{ id: "midnight", name: "Midnight" },
|
||||
{ id: "contrast", name: "Hi-Contrast" },
|
||||
{ id: "paper", name: "Paper" },
|
||||
{ id: "crt", name: "CRT" },
|
||||
];
|
||||
|
||||
export function applyTheme(id: string) {
|
||||
document.documentElement.dataset.theme = THEMES.some((t) => t.id === id) ? id : "midnight";
|
||||
localStorage.setItem("gigaslop-theme", document.documentElement.dataset.theme!);
|
||||
}
|
||||
|
||||
export function currentTheme(): string {
|
||||
return localStorage.getItem("gigaslop-theme") ?? "midnight";
|
||||
}
|
||||
|
||||
export class Hud {
|
||||
root: HTMLElement;
|
||||
cb: HudCallbacks;
|
||||
@ -76,6 +92,7 @@ export class Hud {
|
||||
<button class="chip" id="rnd-btn">🏢 R&D (R)</button>
|
||||
<button class="chip" id="market-btn">📡 Market (M)</button>
|
||||
<button class="chip" id="mute">${isMuted() ? "🔇 Muted" : "🔊 Sound"}</button>
|
||||
<button class="chip" id="theme">🎨 ${THEMES.find((t) => t.id === currentTheme())?.name ?? "Midnight"}</button>
|
||||
<button class="chip" id="tut-toggle">❓ Tutorial</button>
|
||||
<button class="chip" id="new-game">🗑 New Game</button>
|
||||
<button class="chip" id="raise" style="display:none">💰 Raise</button>
|
||||
@ -112,6 +129,14 @@ export class Hud {
|
||||
muteBtn.textContent = isMuted() ? "🔇 Muted" : "🔊 Sound";
|
||||
if (!isMuted()) sfx.click();
|
||||
};
|
||||
const themeBtn = this.root.querySelector("#theme") as HTMLButtonElement;
|
||||
themeBtn.onclick = () => {
|
||||
const i = THEMES.findIndex((t) => t.id === currentTheme());
|
||||
const next = THEMES[(i + 1) % THEMES.length];
|
||||
applyTheme(next.id);
|
||||
themeBtn.textContent = `🎨 ${next.name}`;
|
||||
sfx.click();
|
||||
};
|
||||
(this.root.querySelector("#new-game") as HTMLButtonElement).onclick = () => {
|
||||
if (confirm("Torch the whole company and start over?")) cb.onNewGame();
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user