meyer/public/index.html

<!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>