<?php $pageTitle = 'EL3AB - دومينو'; $hideNav = true; ?>
<?php require __DIR__ . '/../includes/header.php'; ?>

<link rel="stylesheet" href="/public/css/domino.css">

<div class="domino-game">
  <!-- Top area: opponent + scores -->
  <div class="domino-top-area">
    <div id="domino-opponent-top" class="domino-opponent-top"></div>
    <div id="domino-scores"></div>
  </div>

  <!-- Side opponents (4P mode) -->
  <div id="domino-opponent-left" class="domino-opponent-left"></div>
  <div id="domino-opponent-right" class="domino-opponent-right"></div>

  <!-- Board -->
  <div class="domino-board-area">
    <div id="domino-board"></div>
    <div id="domino-boneyard"></div>
  </div>

  <!-- Status -->
  <div id="domino-status" class="domino-status"></div>

  <!-- Actions -->
  <div id="domino-actions"></div>

  <!-- End buttons (choose which side to play on) -->
  <div id="domino-end-buttons"></div>

  <!-- Player hand -->
  <div class="domino-hand-area">
    <div id="domino-hand"></div>
  </div>
</div>

<!-- Round overlay -->
<div id="domino-round-overlay"></div>

<script src="/public/js/domino-constants.js"></script>
<script src="/public/js/domino-ui.js"></script>
<script src="/public/js/domino-bot.js"></script>
<script src="/public/js/domino-game.js"></script>
<script>
(function() {
  var params = new URLSearchParams(window.location.search);
  var mode = params.get('mode') || '2p';
  var type = params.get('type') || 'bot';
  var playerCount = parseInt(params.get('players')) || 2;
  var difficulty = params.get('difficulty') || 'medium';

  DominoGame.init({
    mode: mode,
    playerCount: playerCount,
    difficulty: difficulty,
    isLocal: type === 'local'
  });
})();
</script>

<?php require __DIR__ . '/../includes/footer.php'; ?>
