feat: add boilerplate
This commit is contained in:
183
app/static/css/style.css
Normal file
183
app/static/css/style.css
Normal file
@@ -0,0 +1,183 @@
|
||||
:root {
|
||||
--bg: #0b0f1a;
|
||||
--panel: #1a1433;
|
||||
--ink: #f4e8c1;
|
||||
--accent: #7dff6a;
|
||||
--pink: #ff5d8f;
|
||||
--cyan: #5ce1ff;
|
||||
--gold: #ffd35c;
|
||||
--shadow: #05060c;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; min-height: 100%; }
|
||||
body {
|
||||
background: radial-gradient(circle at 20% 0%, #2a1b5c 0%, var(--bg) 45%);
|
||||
color: var(--ink);
|
||||
font-family: "VT323", monospace;
|
||||
font-size: 22px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.scanlines {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgba(0,0,0,0.15) 0px,
|
||||
rgba(0,0,0,0.15) 1px,
|
||||
transparent 2px,
|
||||
transparent 4px
|
||||
);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 4px solid var(--accent);
|
||||
}
|
||||
.logo {
|
||||
font-family: "Press Start 2P", monospace;
|
||||
font-size: 14px;
|
||||
color: var(--gold);
|
||||
text-decoration: none;
|
||||
text-shadow: 3px 3px 0 #000;
|
||||
}
|
||||
nav a { color: var(--cyan); text-decoration: none; font-family: "Press Start 2P", monospace; font-size: 10px; }
|
||||
|
||||
main { max-width: 1100px; margin: 24px auto; padding: 0 16px 48px; }
|
||||
|
||||
.pixel-panel {
|
||||
background: var(--panel);
|
||||
border: 4px solid var(--ink);
|
||||
box-shadow: 8px 8px 0 var(--shadow);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3 { font-family: "Press Start 2P", monospace; font-size: 14px; color: var(--gold); }
|
||||
.tiny { font-size: 16px; opacity: 0.8; word-break: break-all; }
|
||||
.hint { text-align: center; opacity: 0.7; }
|
||||
|
||||
.stack { display: flex; flex-direction: column; gap: 12px; }
|
||||
label { display: flex; flex-direction: column; gap: 6px; font-family: "Press Start 2P", monospace; font-size: 10px; }
|
||||
input, select, textarea {
|
||||
font-family: "VT323", monospace;
|
||||
font-size: 22px;
|
||||
background: #0d0820;
|
||||
color: var(--ink);
|
||||
border: 3px solid var(--cyan);
|
||||
padding: 8px;
|
||||
}
|
||||
.check { flex-direction: row; align-items: center; gap: 10px; }
|
||||
.check input { width: auto; }
|
||||
|
||||
.btn {
|
||||
font-family: "Press Start 2P", monospace;
|
||||
font-size: 12px;
|
||||
background: var(--accent);
|
||||
color: #041204;
|
||||
border: 4px solid #000;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
box-shadow: 4px 4px 0 #000;
|
||||
}
|
||||
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
|
||||
.btn-ghost { background: var(--cyan); }
|
||||
.btn-small, .btn-tiny { font-size: 9px; padding: 8px; }
|
||||
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.alert { background: var(--pink); color: #000; padding: 8px; border: 3px solid #000; }
|
||||
|
||||
.play-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
|
||||
.board ol { padding-left: 22px; }
|
||||
.board li { margin: 6px 0; }
|
||||
.board li.host::after { content: " ★"; color: var(--gold); }
|
||||
.board li.off { opacity: 0.4; }
|
||||
|
||||
.stage .job-title { font-family: "Press Start 2P", monospace; font-size: 13px; line-height: 1.6; }
|
||||
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
|
||||
.chip { background: #000; border: 2px solid var(--cyan); padding: 4px 8px; font-size: 16px; }
|
||||
.chip.bonus { border-color: var(--gold); color: var(--gold); }
|
||||
.description { background: #0d0820; border: 3px dashed var(--pink); padding: 12px; line-height: 1.3; max-height: 240px; overflow: auto; }
|
||||
|
||||
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
|
||||
.opt {
|
||||
background: #120c28;
|
||||
border: 3px solid var(--ink);
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
font-family: "VT323", monospace;
|
||||
font-size: 22px;
|
||||
}
|
||||
.opt.picked { border-color: var(--accent); background: #16351a; }
|
||||
.opt.good { border-color: var(--accent); background: #1d5a24; }
|
||||
.opt.bad { border-color: var(--pink); }
|
||||
|
||||
.results { margin-top: 12px; }
|
||||
.results li { list-style: none; }
|
||||
.results ul { padding: 0; }
|
||||
|
||||
.row-between { display: flex; justify-content: space-between; align-items: center; }
|
||||
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.pixel-table { width: 100%; border-collapse: collapse; font-size: 18px; }
|
||||
.pixel-table th, .pixel-table td { border: 2px solid #3c2f66; padding: 6px; text-align: left; vertical-align: top; }
|
||||
.clip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.st-ready, .st-done { color: var(--accent); }
|
||||
.st-queued, .st-running, .st-needs_salary { color: var(--gold); }
|
||||
.st-error, .st-hidden { color: var(--pink); }
|
||||
|
||||
.mascot-wrap { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; margin-bottom: 16px; }
|
||||
.mascot-wrap.compact { grid-template-columns: 80px 1fr; }
|
||||
.speech {
|
||||
background: #fff8dc;
|
||||
color: #1a1028;
|
||||
border: 4px solid #000;
|
||||
padding: 10px 12px;
|
||||
position: relative;
|
||||
min-height: 72px;
|
||||
}
|
||||
.speech::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 18px;
|
||||
border: 8px solid transparent;
|
||||
border-right-color: #000;
|
||||
}
|
||||
|
||||
.ralo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.ralo-name { font-family: "Press Start 2P", monospace; font-size: 8px; color: var(--accent); }
|
||||
.ralo-pixel {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: scale(1.5);
|
||||
transform-origin: top center;
|
||||
margin-bottom: 48px;
|
||||
animation: bounce 1.1s steps(2) infinite;
|
||||
background: #000;
|
||||
box-shadow:
|
||||
4px 0 0 #000, 8px 0 0 #000, 12px 0 0 #000,
|
||||
0 4px 0 #000, 4px 4px 0 #7dff6a, 8px 4px 0 #7dff6a, 12px 4px 0 #000, 16px 4px 0 #000,
|
||||
0 8px 0 #000, 4px 8px 0 #7dff6a, 8px 8px 0 #ffd35c, 12px 8px 0 #7dff6a, 16px 8px 0 #000,
|
||||
0 12px 0 #000, 4px 12px 0 #5ce1ff, 8px 12px 0 #7dff6a, 12px 12px 0 #5ce1ff, 16px 12px 0 #000,
|
||||
4px 16px 0 #000, 8px 16px 0 #ff5d8f, 12px 16px 0 #000,
|
||||
4px 20px 0 #000, 8px 20px 0 #000, 12px 20px 0 #000;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% { translate: 0 0; }
|
||||
100% { translate: 0 2px; }
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.play-layout, .admin-grid, .grid-2, .mascot-wrap, .options { grid-template-columns: 1fr; }
|
||||
.logo { font-size: 10px; }
|
||||
}
|
||||
185
app/static/js/play.js
Normal file
185
app/static/js/play.js
Normal file
@@ -0,0 +1,185 @@
|
||||
const root = document.querySelector(".play-layout");
|
||||
const sessionId = root.dataset.session;
|
||||
const token = root.dataset.token;
|
||||
const isHost = root.dataset.host === "1";
|
||||
const playerId = Number(root.dataset.player);
|
||||
let roundSeen = 0;
|
||||
const playersEl = document.getElementById("players");
|
||||
const stageEl = document.getElementById("stage");
|
||||
const tipEl = document.getElementById("tip");
|
||||
const inviteEl = document.getElementById("invite");
|
||||
const hostForm = document.getElementById("host-form");
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const nextBtn = document.getElementById("next-btn");
|
||||
|
||||
inviteEl.textContent = "Invite: " + location.origin + "/join/" + sessionId;
|
||||
|
||||
let lastChoice = null;
|
||||
let submitted = false;
|
||||
let proto = location.protocol === "https:" ? "wss" : "ws";
|
||||
const ws = new WebSocket(`${proto}://${location.host}/ws/${sessionId}?token=${token}`);
|
||||
|
||||
ws.onmessage = (ev) => {
|
||||
const data = JSON.parse(ev.data);
|
||||
if (data.type === "error") {
|
||||
tipEl.textContent = data.message;
|
||||
return;
|
||||
}
|
||||
if (data.type === "state") render(data);
|
||||
};
|
||||
|
||||
function send(payload) {
|
||||
ws.send(JSON.stringify(payload));
|
||||
}
|
||||
|
||||
if (startBtn) startBtn.onclick = () => send({ action: "start" });
|
||||
if (nextBtn) nextBtn.onclick = () => send({ action: "next" });
|
||||
|
||||
function render(data) {
|
||||
const s = data.session;
|
||||
playersEl.innerHTML = data.players
|
||||
.map(
|
||||
(p) =>
|
||||
`<li class="${p.host ? "host" : ""} ${p.connected ? "" : "off"}">${escapeHtml(p.name)} — ${p.score} pts</li>`
|
||||
)
|
||||
.join("");
|
||||
|
||||
if (hostForm) hostForm.hidden = s.status !== "lobby";
|
||||
if (startBtn) startBtn.hidden = s.status !== "lobby";
|
||||
if (nextBtn) nextBtn.hidden = !(s.status === "playing" && data.round && data.round.status === "revealed");
|
||||
|
||||
if (s.status === "lobby") {
|
||||
submitted = false;
|
||||
lastChoice = null;
|
||||
tipEl.textContent = "Lobby time! Host tweaks the rules, then hits START. Share the invite link.";
|
||||
stageEl.innerHTML = `<p>Waiting for players (${data.players.length}/${s.max_players}). Rounds: ${s.num_rounds}.</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (s.status === "finished") {
|
||||
tipEl.textContent = `Match over! ${data.winner} takes the crown. High score wins the RAL throne.`;
|
||||
stageEl.innerHTML = `<h2>FINAL BOARD</h2>` + playersEl.outerHTML;
|
||||
return;
|
||||
}
|
||||
|
||||
const r = data.round;
|
||||
if (!r) return;
|
||||
if (r.number !== roundSeen) {
|
||||
roundSeen = r.number;
|
||||
lastChoice = null;
|
||||
submitted = false;
|
||||
}
|
||||
if ((r.answered_ids || []).includes(playerId)) submitted = true;
|
||||
|
||||
if (r.status === "open") {
|
||||
if (r.bonus) {
|
||||
tipEl.textContent =
|
||||
"BONUS ROUND! Harder posting. 150 for the right band, 300 if you nail the exact RAL, -50 if the exact guess is wrong. Also pick hybrid / remote / in-place (+50).";
|
||||
} else {
|
||||
tipEl.textContent =
|
||||
"Read the offer. Pick the closest RAL band. 100 points if you hit it, 0 if not. Optional exact number: +200 or -50.";
|
||||
}
|
||||
} else {
|
||||
tipEl.textContent = "Everyone locked in. Here's the reveal — host can move to the next round.";
|
||||
}
|
||||
|
||||
const job = r.job;
|
||||
const meta = [];
|
||||
if (r.bonus) meta.push(`<span class="chip bonus">BONUS ROUND</span>`);
|
||||
meta.push(`<span class="chip">ROUND ${r.number}/${s.num_rounds}</span>`);
|
||||
if (job.company) meta.push(`<span class="chip">${escapeHtml(job.company)}</span>`);
|
||||
if (job.subject) meta.push(`<span class="chip">${escapeHtml(job.subject)}</span>`);
|
||||
if (job.location) meta.push(`<span class="chip">${escapeHtml(job.location)}</span>`);
|
||||
if (job.extra) meta.push(`<span class="chip">${escapeHtml(job.extra)}</span>`);
|
||||
|
||||
const locked = r.status !== "open" || submitted;
|
||||
const options = r.options
|
||||
.map((o) => {
|
||||
let cls = "opt";
|
||||
if (lastChoice === o.key) cls += " picked";
|
||||
if (r.status === "revealed") {
|
||||
if (o.key === r.correct) cls += " good";
|
||||
else if (lastChoice === o.key) cls += " bad";
|
||||
}
|
||||
return `<button class="${cls}" data-key="${o.key}" ${locked && r.status === "open" ? "disabled" : ""}>${escapeHtml(o.label)}</button>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
let extra = "";
|
||||
if (job.has_exact) {
|
||||
extra += `<label>EXACT RAL (optional)<input id="precise" type="number" min="15000" max="400000" step="1000" ${locked ? "disabled" : ""} /></label>`;
|
||||
}
|
||||
if (r.bonus) {
|
||||
extra += `<label>WORK MODE
|
||||
<select id="work-type" ${locked ? "disabled" : ""}>
|
||||
<option value="hybrid">Hybrid</option>
|
||||
<option value="remote">Full remote</option>
|
||||
<option value="onsite">In-place only</option>
|
||||
</select>
|
||||
</label>`;
|
||||
}
|
||||
|
||||
let results = "";
|
||||
if (r.status === "revealed") {
|
||||
const ral =
|
||||
r.ral_exact != null
|
||||
? `Exact RAL: ${r.ral_exact}`
|
||||
: `RAL range: ${r.ral_min} - ${r.ral_max}`;
|
||||
results = `<div class="results">
|
||||
<p>${ral} · Company: ${escapeHtml(r.company)} · Work: ${escapeHtml(r.work_type)}</p>
|
||||
<ul>${r.answers
|
||||
.map(
|
||||
(a) =>
|
||||
`<li>${escapeHtml(a.name)}: ${a.correct ? "HIT" : "MISS"} ${a.precise != null ? "· exact " + a.precise : ""} → ${a.points} pts</li>`
|
||||
)
|
||||
.join("")}</ul>
|
||||
</div>`;
|
||||
} else {
|
||||
results = `<p class="tiny">Locked in: ${r.answered.join(", ") || "nobody yet"}. Waiting: ${r.waiting.join(", ")}</p>`;
|
||||
}
|
||||
|
||||
stageEl.innerHTML = `
|
||||
<p class="job-title">${escapeHtml(job.title)}</p>
|
||||
<div class="meta">${meta.join("")}</div>
|
||||
<div class="description">${escapeHtml(job.description)}</div>
|
||||
<div class="options">${options}</div>
|
||||
${extra}
|
||||
${r.status === "open" ? `<button class="btn" id="lock-btn" ${locked ? "disabled" : ""}>LOCK ANSWER</button>` : ""}
|
||||
${results}
|
||||
`;
|
||||
|
||||
stageEl.querySelectorAll(".opt").forEach((btn) => {
|
||||
btn.onclick = () => {
|
||||
if (locked) return;
|
||||
lastChoice = btn.dataset.key;
|
||||
stageEl.querySelectorAll(".opt").forEach((b) => b.classList.remove("picked"));
|
||||
btn.classList.add("picked");
|
||||
};
|
||||
});
|
||||
const lockBtn = document.getElementById("lock-btn");
|
||||
if (lockBtn) {
|
||||
lockBtn.onclick = () => {
|
||||
if (!lastChoice) {
|
||||
tipEl.textContent = "Pick a RAL band first, then lock it in.";
|
||||
return;
|
||||
}
|
||||
const preciseEl = document.getElementById("precise");
|
||||
const workEl = document.getElementById("work-type");
|
||||
submitted = true;
|
||||
send({
|
||||
action: "answer",
|
||||
choice: lastChoice,
|
||||
precise: preciseEl && preciseEl.value ? Number(preciseEl.value) : null,
|
||||
work_type: workEl ? workEl.value : "",
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
return String(str || "")
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """);
|
||||
}
|
||||
Reference in New Issue
Block a user