<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rubik's Cube Games</title>
<link rel="stylesheet" href="/styles/gameList.css">
</head>
<body>
<div class="header">
<h1>🎲 Rubik's Cube MCP Games</h1>
<p>Create, manage, and join cube solving sessions.</p>
</div>
<div class="controls">
<button id="createGameBtn">✨ Create New Game</button>
</div>
<div class="games-container">
<% if (games && games.length > 0) { %>
<% games.forEach(game => { %>
<div class="game-card" onclick="window.location.href='/game/<%= game.id %>'">
<div class="game-header">
<div class="game-title">Game <%= game.id.substring(5, 11) %></div>
<div class="game-status <%= game.status %>"><%= game.status.charAt(0).toUpperCase() + game.status.slice(1) %></div>
</div>
<div class="game-details">
<div><strong>Moves:</strong> <%= game.moveCount %></div>
<div><strong>Scrambled with:</strong> <%= game.scrambleMoves || 'N/A' %> moves</div>
<div><strong>Created:</strong> <%= game.createdAt %></div>
</div>
<div class="game-actions">
<button class="copy-prompt-btn" data-gameid="<%= game.id %>">Copy Join Prompt</button>
</div>
</div>
<% }) %>
<% } else { %>
<div class="empty-state">
<h2>No games yet.</h2>
<p>Click "Create New Game" to start a session.</p>
</div>
<% } %>
</div>
<!-- Create Game Modal -->
<div id="createGameModal" class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<h2>Create a New Game</h2>
<p>Set the scramble difficulty for the new cube.</p>
<div class="slider-container">
<label for="difficultySlider">Difficulty (1-100 moves)</label>
<input type="range" id="difficultySlider" min="1" max="100" value="20">
<p>Scramble Moves: <span id="difficultyValue">20</span></p>
</div>
<button id="createGameSubmitBtn">Create Game</button>
</div>
</div>
<script src="/scripts/gameList.js"></script>
</body>
</html>