okey-turk-klasik/index.html

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Okey — Türk Klasik Okey</title>
<meta name="description" content="Türk Klasik Okey — tarayıcıda oynanabilir, yapay zekâ rakipli okey oyunu." />
<meta name="theme-color" content="#0d3b28" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='7' fill='%230d3b28'/><text y='24' x='6' font-size='20'>&#129130;</text></svg>" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div id="app">
    <header id="topbar">
      <div class="brand">
        <span class="logo">🀄</span>
        <div>
          <h1>Okey</h1>
          <p class="sub">Türk Klasik Okey — Oynanabilir MVP</p>
        </div>
      </div>
      <div class="controls">
        <div id="indicator-box" class="info-box">
          <span class="info-label">Gösterge</span>
          <div id="indicator-tile" class="mini-tile-wrap"></div>
        </div>
        <div id="okey-box" class="info-box">
          <span class="info-label">Okey</span>
          <div id="okey-tile" class="mini-tile-wrap"></div>
        </div>
        <button id="btn-new-game" class="btn btn-primary">Yeni Oyun</button>
      </div>
    </header>

    <main id="table">
      <!-- Üst: Bot 2 -->
      <section class="seat seat-top" id="seat-2">
        <div class="seat-head">
          <span class="seat-avatar" id="avatar-2">🤖</span>
          <div class="seat-meta">
            <span class="seat-name" id="name-2">Bot 2</span>
            <span class="seat-count" id="count-2">14 taş</span>
          </div>
        </div>
        <div class="seat-bar"><i id="bar-2" style="width:100%"></i></div>
        <div class="opp-hand" id="opp-hand-2"></div>
      </section>

      <div class="mid-row">
        <!-- Sol: Bot 1 -->
        <section class="seat seat-left" id="seat-1">
          <div class="seat-head">
            <span class="seat-avatar" id="avatar-1">🤖</span>
            <div class="seat-meta">
              <span class="seat-name" id="name-1">Bot 1</span>
              <span class="seat-count" id="count-1">14 taş</span>
            </div>
          </div>
          <div class="seat-bar"><i id="bar-1" style="width:100%"></i></div>
          <div class="opp-hand vertical" id="opp-hand-1"></div>
        </section>

        <!-- Orta masa -->
        <section id="center-area">
          <div class="center-row">
            <div class="pile-box">
              <span class="pile-label">Kapalı Deste</span>
              <div id="deck-pile" class="deck-pile" title="Kapalı desteden çek">
                <div class="deck-stack"></div>
                <div class="deck-stack"></div>
                <div class="deck-stack"></div>
                <span class="deck-count" id="deck-count">0</span>
              </div>
            </div>

            <div id="turn-indicator" class="turn-indicator">
              <span class="turn-label">Sıra</span>
              <span class="turn-name" id="turn-name">Sen</span>
              <span class="turn-phase" id="turn-phase">Taş çek</span>
            </div>

            <div class="pile-box">
              <span class="pile-label">Atılan Taş</span>
              <div id="discard-pile" class="discard-pile" title="Son atılan taşı al"></div>
            </div>
          </div>
        </section>

        <!-- Sağ: Bot 3 -->
        <section class="seat seat-right" id="seat-3">
          <div class="seat-head">
            <span class="seat-avatar" id="avatar-3">🤖</span>
            <div class="seat-meta">
              <span class="seat-name" id="name-3">Bot 3</span>
              <span class="seat-count" id="count-3">14 taş</span>
            </div>
          </div>
          <div class="seat-bar"><i id="bar-3" style="width:100%"></i></div>
          <div class="opp-hand vertical" id="opp-hand-3"></div>
        </section>
      </div>

      <!-- Alt: oyuncu eli -->
      <section class="seat seat-bottom active" id="seat-0">
        <div class="seat-head">
          <span class="seat-name">Sen <span class="you-badge">SEN</span></span>
          <span class="seat-count" id="count-0">15</span>
        </div>
        <div id="player-hand" class="player-hand"></div>
        <div class="player-actions">
          <span id="status-msg" class="status-msg">Kapalı desteden ya da atılan taştan bir taş çek.</span>
          <button id="btn-discard" class="btn btn-danger" disabled>Seçili Taşı At</button>
        </div>
      </section>
    </main>

    <aside id="log-panel">
      <h2>Oyun Günlüğü</h2>
      <ul id="log-list"></ul>
    </aside>
  </div>

  <!-- Kazanma ekranı -->
  <div id="winner-overlay" class="overlay hidden">
    <div class="overlay-card">
      <div class="confetti-layer" id="confetti-layer"></div>
      <div class="overlay-emoji">🎉</div>
      <h2 id="winner-title">Okey Yaptın!</h2>
      <p id="winner-detail">Tebrikler, elindeki tüm taşları perlere ayırdın.</p>
      <div class="overlay-per" id="winner-per"></div>
      <button id="btn-play-again" class="btn btn-primary">Yeni Oyun</button>
    </div>
  </div>

  <script src="js/tiles.js"></script>
  <script src="js/rules.js"></script>
  <script src="js/bot.js"></script>
  <script src="js/game.js"></script>
  <script src="js/ui.js"></script>
  <script src="js/main.js"></script>
</body>
</html>