first commit

public/index.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Meyer – drikke terningespil</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎲</text></svg>">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<!-- ======= NAME ENTRY ======= -->
+<section id="view-name" class="view">
+  <div class="name-card">
+    <div class="logo-dice"><span class="d">M</span><span class="d">Y</span><span class="d">E</span><span class="d">R</span></div>
+    <h1>Drikke terningespil</h1>
+    <p class="sub">Rul i skjul, bluf med dine øjne. Du og dine venner snakker over voicechat – her ses det, hvad I drikker. 🍺</p>
+    <label for="name-input">Dit navn</label>
+    <div class="name-row">
+      <input id="name-input" maxlength="24" placeholder="fx. Rasmus" autocomplete="off">
+      <button id="btn-enter" class="btn primary" disabled>Gå til lobby</button>
+    </div>
+    <div class="name-row">
+      <button id="btn-rules" class="btn ghost">Spilleregler</button>
+    </div>
+  </div>
+</section>
+
+<!-- ======= LOBBY ======= -->
+<section id="view-lobby" class="view hidden">
+  <header class="topbar">
+    <div class="brand">🎲 Meyer <span class="brand-sub">– drikke terningespil</span></div>
+    <div class="me-chip">Du: <b id="me-name"></b>
+      <button id="btn-change-name" class="linklike" title="Skift navn">✏️</button>
+    </div>
+  </header>
+  <main class="lobby-main">
+    <div class="lobby-card">
+      <div class="card-head">
+        <h2>🍻 Bord</h2>
+        <button id="btn-refresh" class="btn ghost sm">↻ Opdater</button>
+      </div>
+      <div id="room-list" class="room-list"></div>
+      <div class="create-row">
+        <input id="new-room-name" maxlength="30" placeholder="Bordets navn (fx. Fredagsgang)">
+        <button id="btn-create" class="btn primary">Opret bord</button>
+      </div>
+    </div>
+    <aside class="side-card">
+      <h3>🍺 Sådan spilles Meyer</h3>
+      <ul class="rules-mini">
+        <li>Hver spiller har <b>2 øller</b> og <b>2 terninger</b>.</li>
+        <li>Din tur: rul i skjul, kig under øllerne, og sig en kombination (eller bluf højt).</li>
+        <li>Næste spiller kan <b>trø</b> på dig eller <b>løfte dine øller</b> for at tjekke.</li>
+        <li>Løfter hun og du lyver → <b>du drikker</b>. Løfter hun og du talte sandt → <b>hun drikker</b>.</li>
+        <li>Taber du, taber du 1 øje. Ned til 1 = sidste chance. Til 0 = <b>du er ude</b>.</li>
+      </ul>
+      <p class="hint">I taler sammen på voicechat – det skaber dramaet. 🎧</p>
+    </aside>
+  </main>
+</section>
+
+<!-- ======= GAME ======= -->
+<section id="view-game" class="view hidden">
+  <header class="topbar">
+    <div class="brand">🎲 <b id="game-room-name"></b></div>
+    <div class="topbar-right">
+      <span id="game-phase" class="phase-chip"></span>
+      <button id="btn-leave" class="btn ghost sm">🚪 Forlad bord</button>
+    </div>
+  </header>
+
+  <main class="game-main">
+    <div class="game-col">
+      <!-- turn indicator -->
+      <div id="turn-banner" class="turn-banner"></div>
+
+      <!-- last claim -->
+      <div id="last-claim" class="last-claim hidden"></div>
+
+      <!-- opponent cups row -->
+      <div id="opp-table" class="table-row"></div>
+
+      <!-- chat -->
+      <div class="chat-box">
+        <div id="chat-log" class="chat-log"></div>
+        <div class="chat-input">
+          <input id="chat-input" maxlength="200" placeholder="Skriv til bordet…">
+          <button id="btn-chat" class="btn primary sm">Send</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="side-col">
+      <!-- my cup -->
+      <div class="my-board">
+        <div class="my-nameplate"><b id="my-name-game"></b><span id="my-turn-chip" class="turn-chip hidden">DIN TUR</span></div>
+        <div class="cups" id="my-cups">
+          <div class="cup" id="cup-l"><div class="cup-body"><div class="cup-shine"></div><div class="cup-base"></div></div></div>
+          <div class="cup" id="cup-r"><div class="cup-body"><div class="cup-shine"></div><div class="cup-base"></div></div></div>
+        </div>
+        <div id="my-dice" class="dice-area"></div>
+        <div id="my-actions" class="actions"></div>
+      </div>
+
+      <!-- scoreboard -->
+      <div class="board-card">
+        <h3>Spillerne</h3>
+        <div id="score-list"></div>
+        <div id="host-actions" class="host-actions"></div>
+      </div>
+    </div>
+  </main>
+
+  <!-- game over overlay -->
+  <div id="overlay" class="overlay hidden">
+    <div class="overlay-card">
+      <div id="overlay-emoji">🏆</div>
+      <h2 id="overlay-title"></h2>
+      <p id="overlay-text"></p>
+      <div id="overlay-actions"></div>
+    </div>
+  </div>
+</section>
+
+<!-- ======= RULES MODAL ======= -->
+<div id="modal-rules" class="modal hidden">
+  <div class="modal-card">
+    <button class="modal-x" id="btn-close-rules">✕</button>
+    <h2>Spille regler for Meyer</h2>
+    <p><b>Materiale:</b> 2 øller + 2 terninger per spiller. Min. 2 spillere, max. 4.</p>
+    <p>Spillets mål er at hele tiden slå <b>højere og højere kombinationer</b>.</p>
+    <h3>Kombinationer (højest → lavest)</h3>
+    <ol class="rules-list">
+      <li>1 + 2 → <b>Meyer</b></li>
+      <li>1 + 3 → <b>Lille-Meyer</b></li>
+      <li>6 + 6 → Par 6</li>
+      <li>5 + 5 → Par 5</li>
+      <li>Par 4, 3, 2, 1</li>
+      <li>6 + 5, 6 + 4</li>
+      <li>63, 62, 61, 54, 53 … helt ned til 32</li>
+    </ol>
+    <h3>Sådan foregår en omgang</h3>
+    <ol class="rules-list">
+      <li>Læg terningerne mellem dine to øller og rul.</li>
+      <li>Løft forsigtigt det <b>øverste øl</b> og kig – hold slaget hemmeligt for de andre.</li>
+      <li>Sig enten det du har, eller <b>bluf</b> og sig noget højere – så sender du øllerne videre til næste spiller.</li>
+      <li>Næste spiller kan <b>trø på dig</b> (du drikker, hvis din sagde kombination er højere end sandheden), eller <b>løfte dine øller</b> og se, hvad du i virkeligheden har.</li>
+      <li>Løfter hun: sandt → hun taber; du lyver → du taber. Hvis ingen løfter → dit slag står.</li>
+      <li>Hvis du rullede lavere end det, du kræver, kan du i stedet <b>rulle igen</b> uden at kigge – og sende terningerne videre i håbet om et højere slag.</li>
+    </ol>
+    <h3>Øjnene</h3>
+    <p>Hver spiller har en terning-foran-sig (pointtavle) med 6 øjne opad. Taber du en omgang vendes den 1 øje nedad. Ned til 1 øje = sidste chance. Taber du igen → <b>du er ude</b>. Sidste mand (kvinde) ved bordet vinder.</p>
+    <p class="hint">💡 Husk: I har voicechat open. Skælv, hvis du bluffer – lyden kan give dig væk. 🎧🍺</p>
+  </div>
+</div>
+
+<script src="app.js"></script>
+</body>
+</html>