pisti-kart-oyunu/index.html

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Gerçek kurallı 4 oyunculu Pişti kart oyunu — oyun motoru, yapay zekâ ve görsel kart masası" />
    <title>Pişti — Gerçek Kart Oyunu</title>
    <link
      rel="icon"
      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E%E2%99%A0%3C/text%3E%3C/svg%3E"
    />
  </head>
  <body>
    <div id="app">
      <!-- ÜST BAR -->
      <header class="topbar">
        <div class="topbar__brand">
          <span class="topbar__logo">♠</span>
          <div>
            <h1 class="topbar__title">Pişti</h1>
            <p class="topbar__sub">Gerçek kurallar · 4 oyuncu · 2v2 takım</p>
          </div>
        </div>

        <div class="topbar__controls">
          <label class="field">
            <span>Mod</span>
            <select id="mode">
              <option value="team">Takım (Sen + Partner vs Rakipler)</option>
              <option value="solo">Tek Başına (3 AI'a karşı)</option>
            </select>
          </label>

          <label class="field">
            <span>AI Zorluk</span>
            <select id="difficulty">
              <option value="kolay">Kolay</option>
              <option value="normal" selected>Normal</option>
              <option value="zor">Zor</option>
            </select>
          </label>

          <label class="field">
            <span>Adın</span>
            <input id="player-name" type="text" value="Sen" maxlength="14" />
          </label>

          <button id="btn-start" class="btn btn--primary">Oyunu Başlat</button>
          <button id="btn-reset" class="btn">Sıfırla</button>
          <button id="btn-sound" class="btn btn--icon" title="Sesi aç/kapat">🔊</button>
        </div>
      </header>

      <!-- ANA ALAN -->
      <main class="layout">
        <!-- SOL: MASA -->
        <section class="table-area">
          <div class="seat seat--partner">
            <div id="partner-info" class="pin"></div>
            <div id="partner-hand" class="hand hand--hidden"></div>
          </div>

          <div class="table-mid">
            <div class="seat seat--left">
              <div id="rakip2-info" class="pin"></div>
              <div id="rakip2-hand" class="hand hand--vertical"></div>
            </div>

            <div class="felt">
              <div id="capture-banner" class="banner" aria-live="polite"></div>
              <div id="table" class="table-cards" aria-label="Yerdeki kartlar"></div>
              <div id="last-move" class="last-move"></div>
            </div>

            <div class="seat seat--right">
              <div id="rakip1-info" class="pin"></div>
              <div id="rakip1-hand" class="hand hand--vertical"></div>
            </div>
          </div>

          <div class="seat seat--human">
            <div id="human-hand" class="hand hand--human" aria-label="Elindeki kartlar"></div>
            <div id="human-info" class="pin pin--human"></div>
          </div>
        </section>

        <!-- SAĞ: PANEL -->
        <aside class="panel">
          <div class="panel__block">
            <h2 class="panel__title">Skor Tablosu</h2>
            <div class="score-row">
              <span class="score-row__label">Bizim Takım <small>(Sen + Partner)</small></span>
              <span class="score-row__cards" id="score-a-cards">0 kart</span>
              <span class="score-row__value" id="score-a">0</span>
            </div>
            <div class="score-row score-row--b">
              <span class="score-row__label">Rakipler <small>(Rakip 1 + Rakip 2)</small></span>
              <span class="score-row__cards" id="score-b-cards">0 kart</span>
              <span class="score-row__value" id="score-b">0</span>
            </div>
            <div class="stat-grid">
              <div class="stat"><span class="stat__k">Destede</span><span class="stat__v" id="deck-count">0</span></div>
              <div class="stat"><span class="stat__k">Tur</span><span class="stat__v" id="round-num">0</span></div>
              <div class="stat"><span class="stat__k">Sıra</span><span class="stat__v" id="turn-label">—</span></div>
            </div>
            <div id="status-chip" class="chip chip--idle">Hazır</div>
          </div>

          <div class="panel__block panel__block--grow">
            <h2 class="panel__title">Oyun Günlüğü</h2>
            <div id="log-list" class="log" aria-live="polite"></div>
          </div>

          <div class="panel__block">
            <h2 class="panel__title">Puanlama</h2>
            <ul class="rules">
              <li><b>Karo 10</b> → 3 puan</li>
              <li><b>Sinek 2</b> → 2 puan</li>
              <li><b>Her As</b> → 1 puan</li>
              <li><b>Her Vale</b> → 1 puan</li>
              <li><b>Pişti</b> → 10 puan</li>
              <li><b>Kart çoğunluğu</b> → +3 puan</li>
            </ul>
          </div>
        </aside>
      </main>
    </div>

    <!-- MODAL -->
    <div id="modal" class="modal" aria-hidden="true">
      <div class="modal__card">
        <button id="modal-close" class="modal__close" aria-label="Kapat">✕</button>
        <h2 id="modal-title" class="modal__title">Başlık</h2>
        <div id="modal-body" class="modal__body"></div>
      </div>
    </div>

    <!-- TOAST -->
    <div id="toast" class="toast" aria-live="polite"></div>

    <script type="module" src="/src/ui/app.ts"></script>
  </body>
</html>