Initial commit

public/app.js

@@ -0,0 +1,260 @@
+const socket = io();
+const $ = (selector) => document.querySelector(selector);
+const sessionKey = "materia-medica-session";
+const cardValues = [2, 3, 4, 5];
+let state = null;
+let actionMode = "one";
+let toastTimer;
+
+const showToast = (message) => {
+  const toast = $("#toast");
+  toast.textContent = message;
+  toast.classList.add("show");
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => toast.classList.remove("show"), 2600);
+};
+
+const emit = (event, payload = {}) => socket.emit(event, payload);
+const options = (values = cardValues) => values.map((value) => `<option value="${value}">${value}</option>`).join("");
+const player = (id) => state?.players.find((item) => item.id === id);
+
+socket.on("connect", () => {
+  $("#connection").textContent = "已连接";
+  $("#connection").classList.add("online");
+  const saved = JSON.parse(localStorage.getItem(sessionKey) || "null");
+  if (saved) emit("session:resume", saved);
+});
+
+socket.on("disconnect", () => {
+  $("#connection").textContent = "正在重连";
+  $("#connection").classList.remove("online");
+});
+
+socket.on("session", (session) => {
+  localStorage.setItem(sessionKey, JSON.stringify(session));
+});
+
+socket.on("room:state", (room) => {
+  state = room;
+  $("#entry").classList.add("hidden");
+  $("#game").classList.remove("hidden");
+  render();
+});
+
+socket.on("error:message", showToast);
+socket.on("private:message", showToast);
+
+$("#create").addEventListener("click", () => emit("room:create", { name: $("#name").value }));
+$("#join").addEventListener("click", () =>
+  emit("room:join", { name: $("#name").value, roomId: $("#room-code").value.trim().toUpperCase() })
+);
+$("#start").addEventListener("click", () => emit("game:start"));
+$("#copy-room").addEventListener("click", async () => {
+  await navigator.clipboard?.writeText(state.id);
+  showToast("房间码已复制");
+});
+
+function render() {
+  const self = player(state.selfId);
+  const current = player(state.currentPlayerId);
+  $("#copy-room").textContent = state.id;
+  $("#start").classList.toggle("hidden", state.phase !== "waiting" || state.hostId !== state.selfId);
+
+  const titles = {
+    waiting: state.players.length < 3 ? `等待玩家 ${state.players.length}/3` : "三人到齐，可以开始",
+    playing: current ? `${current.name} 的回合` : "牌局进行中",
+    finished: state.winnerId ? `${player(state.winnerId)?.name ?? "玩家"} 获胜` : "游戏结束"
+  };
+  $("#status-title").textContent = titles[state.phase];
+
+  $("#players").innerHTML = state.players.map((item) => `
+    <article class="player ${item.id === state.selfId ? "self" : ""} ${item.id === state.currentPlayerId ? "current" : ""} ${item.eliminated ? "eliminated" : ""}">
+      <div class="player-head">
+        <span class="player-name">${escapeHtml(item.name)}${item.id === state.selfId ? "（你）" : ""}</span>
+        <span class="player-score">${item.score} 分</span>
+      </div>
+      <div class="player-meta">
+        <span>${item.eliminated ? "已淘汰" : `${item.cardCount} 张牌`}</span>
+        <span><i class="dot ${item.connected ? "online" : ""}"></i> ${item.connected ? "在线" : "离线"}</span>
+      </div>
+    </article>
+  `).join("");
+
+  const hand = self?.hand ?? [];
+  $("#hand-total").textContent = `${hand.length} 张`;
+  $("#hand").innerHTML = hand.length
+    ? hand.map((value) => `<div class="card" aria-label="数字 ${value}">${value}</div>`).join("")
+    : `<span class="empty">${state.phase === "waiting" ? "游戏开始后发牌" : "没有手牌"}</span>`;
+
+  $("#logs").innerHTML = [...state.logs].reverse().map((log) => `
+    <li>${escapeHtml(log.message)}<time>${new Date(log.at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</time></li>
+  `).join("");
+
+  renderActions();
+}
+
+function renderActions() {
+  const area = $("#actions");
+  const self = player(state.selfId);
+  const myTurn = state.currentPlayerId === state.selfId;
+  $("#turn-note").textContent = state.phase === "playing" ? (myTurn ? "轮到你行动" : "等待其他玩家") : "";
+
+  if (state.phase === "waiting") {
+    area.innerHTML = `<p class="empty">${state.players.length === 3 ? "由房主开始游戏" : "分享房间码，邀请另外两名玩家"}</p>`;
+    return;
+  }
+  if (state.phase === "finished") {
+    area.innerHTML = `<div class="response-box"><p class="response-copy">隐藏牌是 <strong>${state.hidden?.join("、")}</strong>。</p></div>`;
+    return;
+  }
+  if (self.eliminated) {
+    area.innerHTML = `<p class="empty">你已被淘汰，可以继续观看牌局。</p>`;
+    return;
+  }
+  if (state.pending?.type === "request") {
+    renderRequestResponse(area);
+    return;
+  }
+  if (state.pending?.type === "guess") {
+    renderGuessResponse(area);
+    return;
+  }
+  if (!myTurn) {
+    area.innerHTML = `<p class="empty">观察各玩家手牌数量的变化，等待你的回合。</p>`;
+    return;
+  }
+
+  const targets = state.players.filter((item) => item.id !== state.selfId && !item.eliminated);
+  area.innerHTML = `
+    <div class="action-tabs">
+      <button data-mode="one" class="${actionMode === "one" ? "active" : ""}">取一张</button>
+      <button data-mode="all" class="${actionMode === "all" ? "active" : ""}">取同号全部</button>
+      <button data-mode="guess" class="${actionMode === "guess" ? "active" : ""}">猜隐藏牌</button>
+    </div>
+    ${actionMode === "guess" ? guessForm() : `
+      <form id="request-form" class="action-form">
+        <label>目标<select name="targetId">${targets.map((item) => `<option value="${item.id}">${escapeHtml(item.name)}</option>`).join("")}</select></label>
+        <label>牌号一<select name="first">${options()}</select></label>
+        <label>牌号二<select name="second">${options()}</select></label>
+        <button class="primary">发出请求</button>
+      </form>
+    `}
+  `;
+  area.querySelectorAll("[data-mode]").forEach((button) => {
+    button.addEventListener("click", () => {
+      actionMode = button.dataset.mode;
+      renderActions();
+    });
+  });
+  $("#request-form")?.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    emit("game:request", {
+      targetId: form.get("targetId"),
+      values: [Number(form.get("first")), Number(form.get("second"))],
+      mode: actionMode
+    });
+  });
+  $("#guess-form")?.addEventListener("submit", sendGuess);
+}
+
+function renderRequestResponse(area) {
+  const pending = state.pending;
+  if (pending.targetId !== state.selfId) {
+    area.innerHTML = `<p class="empty">等待 ${escapeHtml(player(pending.targetId)?.name ?? "目标玩家")} 回应要牌请求。</p>`;
+    return;
+  }
+  area.innerHTML = `
+    <div class="response-box">
+      <p class="response-copy">${escapeHtml(player(pending.requesterId)?.name)} 请求数字 <strong>${pending.values.join(" 或 ")}</strong> 的${pending.mode === "one" ? "一张牌" : "其中一种全部牌"}。</p>
+      <div class="response-actions">
+        ${pending.values.map((value) => `<button class="primary" data-give="${value}">交出数字 ${value}</button>`).join("")}
+        <button class="danger" data-decline>不给</button>
+      </div>
+    </div>
+  `;
+  area.querySelectorAll("[data-give]").forEach((button) =>
+    button.addEventListener("click", () => emit("game:request-answer", { value: Number(button.dataset.give) }))
+  );
+  area.querySelector("[data-decline]").addEventListener("click", () => emit("game:request-answer", { value: null }));
+}
+
+function renderGuessResponse(area) {
+  const pending = state.pending;
+  const expectedPlayerId = pending.forcedPlayerId ?? pending.responderIds[pending.responseIndex];
+  const guessList = pending.guesses.map((guess) => `
+    <div class="guess-option">
+      <span><strong>${escapeHtml(player(guess.playerId)?.name)}</strong>：${guess.values.join("、")}</span>
+      ${expectedPlayerId === state.selfId && guess.playerId !== state.selfId
+        ? `<button class="primary" data-agree="${guess.playerId}">认同</button>`
+        : ""}
+    </div>
+  `).join("");
+
+  if (expectedPlayerId !== state.selfId) {
+    const waitingFor = player(expectedPlayerId)?.name ?? "其他玩家";
+    area.innerHTML = `
+      <div class="response-box">
+        <div class="guess-list">${guessList}</div>
+        <p class="empty">等待 ${escapeHtml(waitingFor)} 回应。</p>
+      </div>
+    `;
+    return;
+  }
+
+  const forced = pending.forcedPlayerId === state.selfId;
+  area.innerHTML = `
+    <div class="response-box">
+      <div class="guess-list">${guessList}</div>
+      ${forced ? `<p class="response-copy">你是本轮唯一放弃者，必须选择认同一项猜测或提出自己的猜测。</p>` : ""}
+      <div class="response-actions">
+        <button data-counter>另猜</button>
+        ${forced ? "" : `<button class="danger" data-choice="abandon">放弃</button>`}
+      </div>
+      <form id="counter-form" class="guess-pair hidden">
+        <select name="first">${options()}</select>
+        <select name="second">${options()}</select>
+        <button class="primary">提交新猜测</button>
+      </form>
+    </div>
+  `;
+  area.querySelectorAll("[data-agree]").forEach((button) =>
+    button.addEventListener("click", () =>
+      emit("game:guess-answer", { choice: "agree", guesserId: button.dataset.agree })
+    )
+  );
+  area.querySelectorAll("[data-choice]").forEach((button) =>
+    button.addEventListener("click", () => emit("game:guess-answer", { choice: button.dataset.choice }))
+  );
+  area.querySelector("[data-counter]").addEventListener("click", () => $("#counter-form").classList.remove("hidden"));
+  $("#counter-form").addEventListener("submit", (event) => {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    emit("game:guess-answer", {
+      choice: "counter",
+      values: [Number(form.get("first")), Number(form.get("second"))]
+    });
+  });
+}
+
+function guessForm() {
+  return `
+    <form id="guess-form" class="action-form">
+      <label>第一张<select name="first">${options()}</select></label>
+      <label>第二张<select name="second">${options()}</select></label>
+      <button class="primary">提出猜测</button>
+    </form>
+  `;
+}
+
+function sendGuess(event) {
+  event.preventDefault();
+  const form = new FormData(event.currentTarget);
+  emit("game:guess", { values: [Number(form.get("first")), Number(form.get("second"))] });
+}
+
+function escapeHtml(value = "") {
+  return String(value).replace(/[&<>"']/g, (character) => ({
+    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;"
+  })[character]);
+}

public/index.html

@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#18201d" />
+    <title>本草牌局</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <div>
+        <div class="brand">本草牌局</div>
+        <div class="subtitle">Materia Medica</div>
+      </div>
+      <div id="connection" class="connection">连接中</div>
+    </header>
+
+    <main>
+      <section id="entry" class="entry-panel">
+        <div class="entry-copy">
+          <p class="eyebrow">三人推理牌局</p>
+          <h1>藏起两张牌，读懂每一次交换。</h1>
+          <p>牌号越大，数量越多。观察手牌数量的变化，推断桌面下的答案。</p>
+        </div>
+        <form id="entry-form" class="entry-form">
+          <label>
+            玩家名称
+            <input id="name" maxlength="18" autocomplete="nickname" placeholder="输入你的名字" required />
+          </label>
+          <div class="entry-actions">
+            <button type="button" id="create" class="primary">创建房间</button>
+            <div class="join-row">
+              <input id="room-code" maxlength="6" autocomplete="off" placeholder="房间码" />
+              <button type="button" id="join">加入</button>
+            </div>
+          </div>
+        </form>
+      </section>
+
+      <section id="game" class="game hidden">
+        <div class="room-heading">
+          <div>
+            <p class="eyebrow">房间 <button id="copy-room" class="text-button" title="复制房间码"></button></p>
+            <h1 id="status-title">等待玩家</h1>
+          </div>
+          <button id="start" class="primary hidden">开始游戏</button>
+        </div>
+
+        <div class="game-layout">
+          <div class="board-column">
+            <section id="players" class="players" aria-label="玩家"></section>
+
+            <section class="hand-section">
+              <div class="section-title">
+                <h2>我的手牌</h2>
+                <span id="hand-total">0 张</span>
+              </div>
+              <div id="hand" class="hand"></div>
+            </section>
+
+            <section id="action-panel" class="action-panel">
+              <div class="section-title">
+                <h2>行动</h2>
+                <span id="turn-note"></span>
+              </div>
+              <div id="actions"></div>
+            </section>
+          </div>
+
+          <aside class="log-panel">
+            <div class="section-title">
+              <h2>牌局记录</h2>
+              <span>仅公开数量</span>
+            </div>
+            <ol id="logs" class="logs"></ol>
+          </aside>
+        </div>
+      </section>
+    </main>
+
+    <div id="toast" class="toast" role="status"></div>
+    <script src="/socket.io/socket.io.js"></script>
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>

public/styles.css

@@ -0,0 +1,219 @@
+:root {
+  color-scheme: light;
+  --ink: #17201d;
+  --muted: #66706c;
+  --paper: #f4f3ed;
+  --surface: #ffffff;
+  --line: #d8dcd7;
+  --green: #23664d;
+  --green-dark: #174735;
+  --red: #a14335;
+  --amber: #c49035;
+  --blue: #356e95;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--paper);
+  color: var(--ink);
+}
+
+button, input, select { font: inherit; }
+
+button {
+  min-height: 44px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink);
+  cursor: pointer;
+  font-weight: 700;
+}
+
+button:hover:not(:disabled) { border-color: var(--green); }
+button:disabled { cursor: not-allowed; opacity: .5; }
+
+button.primary {
+  border-color: var(--green);
+  background: var(--green);
+  color: white;
+}
+
+button.danger { border-color: #d7aaa3; color: var(--red); }
+
+input, select {
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid #cbd1cc;
+  border-radius: 6px;
+  background: white;
+  padding: 0 12px;
+  color: var(--ink);
+}
+
+label { display: grid; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 650; }
+h1, h2, p { margin: 0; }
+h1 { font-size: 42px; line-height: 1.12; }
+h2 { font-size: 17px; }
+.hidden { display: none !important; }
+
+.topbar {
+  height: 68px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 max(18px, env(safe-area-inset-left));
+  background: var(--ink);
+  color: white;
+}
+
+.brand { font-family: Georgia, serif; font-size: 21px; font-weight: 700; }
+.subtitle { margin-top: 1px; color: #b9c4bf; font-size: 10px; text-transform: uppercase; }
+.connection { font-size: 13px; color: #b9c4bf; }
+.connection.online { color: #94d4b8; }
+
+main { width: min(1180px, 100%); margin: 0 auto; padding: 24px 18px 48px; }
+.eyebrow { color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; }
+
+.entry-panel {
+  min-height: calc(100vh - 116px);
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
+  align-items: center;
+  gap: 9vw;
+}
+
+.entry-copy { display: grid; gap: 18px; max-width: 650px; }
+.entry-copy > p:last-child { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.7; }
+.entry-form { display: grid; gap: 22px; padding: 28px; border: 1px solid var(--line); background: var(--surface); }
+.entry-actions { display: grid; gap: 12px; }
+.join-row { display: grid; grid-template-columns: 1fr 92px; gap: 8px; }
+
+.room-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 18px;
+  padding-bottom: 22px;
+}
+
+.room-heading h1 { margin-top: 7px; font-size: 29px; }
+.text-button { min-height: auto; padding: 0; border: 0; color: var(--green); background: transparent; }
+.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
+.board-column { min-width: 0; display: grid; align-content: start; gap: 18px; }
+
+.players { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+.player {
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-left: 4px solid transparent;
+  background: var(--surface);
+}
+.player.current { border-left-color: var(--amber); }
+.player.self { background: #f7fbf8; }
+.player.eliminated { opacity: .52; }
+.player-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+.player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
+.player-score { flex: 0 0 auto; color: var(--green); font-size: 13px; font-weight: 800; }
+.player-meta { display: flex; justify-content: space-between; margin-top: 12px; color: var(--muted); font-size: 12px; }
+.dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #aeb5b1; }
+.dot.online { background: #3b986d; }
+
+.hand-section, .action-panel, .log-panel {
+  border: 1px solid var(--line);
+  background: var(--surface);
+  padding: 16px;
+}
+
+.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.section-title span { color: var(--muted); font-size: 12px; }
+.hand { display: flex; min-height: 94px; align-items: center; gap: 8px; overflow-x: auto; padding-top: 14px; }
+.card {
+  width: 58px;
+  height: 78px;
+  flex: 0 0 58px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #c9cec9;
+  border-radius: 6px;
+  background: #fffef9;
+  box-shadow: 0 3px 0 #dfe2dc;
+  font-family: Georgia, serif;
+  font-size: 29px;
+  font-weight: 700;
+}
+.empty { color: var(--muted); font-size: 14px; }
+
+.action-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
+.action-tabs button { padding: 0 7px; font-size: 13px; }
+.action-tabs button.active { border-color: var(--green); background: #eaf4ef; color: var(--green-dark); }
+.action-form { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 8px; margin-top: 12px; align-items: end; }
+.action-form label { min-width: 0; }
+.action-form button { padding: 0 18px; }
+.response-box { display: grid; gap: 12px; margin-top: 14px; }
+.response-copy { color: var(--muted); line-height: 1.55; }
+.response-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.response-actions button { padding: 0 16px; }
+.guess-list { display: grid; gap: 8px; }
+.guess-option {
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid var(--line);
+  padding: 7px 8px 7px 12px;
+}
+.guess-option button { flex: 0 0 auto; min-height: 36px; padding: 0 14px; }
+.guess-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 270px; }
+
+.log-panel { min-height: 420px; align-self: stretch; }
+.logs { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
+.logs li { padding: 11px 0; border-top: 1px solid #eceeeb; color: #4d5853; font-size: 13px; line-height: 1.45; }
+.logs time { display: block; margin-top: 3px; color: #939b97; font-size: 10px; }
+
+.toast {
+  position: fixed;
+  z-index: 10;
+  left: 50%;
+  bottom: calc(22px + env(safe-area-inset-bottom));
+  max-width: calc(100vw - 32px);
+  transform: translate(-50%, 20px);
+  border-radius: 6px;
+  background: var(--ink);
+  color: white;
+  padding: 11px 16px;
+  opacity: 0;
+  pointer-events: none;
+  transition: .2s ease;
+}
+.toast.show { transform: translate(-50%, 0); opacity: 1; }
+
+@media (max-width: 800px) {
+  .entry-panel { grid-template-columns: 1fr; align-content: center; gap: 36px; }
+  .game-layout { grid-template-columns: 1fr; }
+  .log-panel { min-height: 0; }
+}
+
+@media (max-width: 560px) {
+  main { padding: 18px 12px 36px; }
+  .topbar { height: 60px; }
+  .entry-panel { min-height: calc(100vh - 96px); }
+  .entry-copy h1 { font-size: 30px; }
+  .entry-form { padding: 18px; }
+  .room-heading { align-items: center; }
+  .room-heading h1 { font-size: 23px; }
+  .players { grid-template-columns: 1fr; }
+  .player { padding: 11px 12px; }
+  .player-meta { margin-top: 8px; }
+  .hand-section, .action-panel, .log-panel { padding: 14px; }
+  .action-form { grid-template-columns: 1fr 1fr; }
+  .action-form label:first-child { grid-column: 1 / -1; }
+  .action-form button { grid-column: 1 / -1; }
+  .action-tabs button { min-height: 48px; }
+}