Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Room-Based Tic-Tac-Toe vs Mistral AI</title> | |
| <style> | |
| body { | |
| font-family: 'Courier New', monospace; | |
| background: #1a1a1a; | |
| color: #00ff00; | |
| margin: 0; | |
| padding: 20px; | |
| display: flex; | |
| height: 100vh; | |
| gap: 20px; | |
| } | |
| .game-container { | |
| display: flex; | |
| gap: 20px; | |
| width: 100%; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .room-panel { | |
| flex: 0 0 250px; | |
| background: #222; | |
| border: 1px solid #444; | |
| border-radius: 5px; | |
| padding: 15px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .room-header { | |
| color: #00ccff; | |
| font-weight: bold; | |
| text-align: center; | |
| margin-bottom: 10px; | |
| } | |
| .room-info { | |
| background: #333; | |
| padding: 10px; | |
| border-radius: 3px; | |
| font-size: 12px; | |
| } | |
| .room-controls button { | |
| width: 100%; | |
| background: #4ecdc4; | |
| color: white; | |
| border: none; | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| cursor: pointer; | |
| font-family: 'Courier New', monospace; | |
| border-radius: 3px; | |
| } | |
| .room-controls button:hover { | |
| background: #45a7a0; | |
| } | |
| .room-id-input { | |
| width: 100%; | |
| background: #333; | |
| border: 1px solid #555; | |
| color: #00ff00; | |
| padding: 8px; | |
| font-family: 'Courier New', monospace; | |
| margin-bottom: 10px; | |
| } | |
| .markdown-panel { | |
| flex: 0 0 300px; | |
| background: #222; | |
| border: 1px solid #444; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| } | |
| .markdown-header { | |
| background: #333; | |
| padding: 10px; | |
| text-align: center; | |
| color: #00ccff; | |
| font-weight: bold; | |
| } | |
| .markdown-content { | |
| padding: 15px; | |
| font-size: 12px; | |
| line-height: 1.4; | |
| max-height: 600px; | |
| overflow-y: auto; | |
| white-space: pre-wrap; | |
| } | |
| .game-board { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .title { | |
| font-size: 24px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| color: #00ccff; | |
| } | |
| .board { | |
| display: grid; | |
| grid-template-columns: repeat(3, 100px); | |
| grid-template-rows: repeat(3, 100px); | |
| gap: 2px; | |
| background: #333; | |
| padding: 2px; | |
| margin-bottom: 20px; | |
| } | |
| .cell { | |
| background: #222; | |
| border: 1px solid #555; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 36px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| .cell:hover { | |
| background: #333; | |
| } | |
| .cell.x { | |
| color: #ff6b6b; | |
| } | |
| .cell.o { | |
| color: #4ecdc4; | |
| } | |
| .status { | |
| font-size: 18px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| color: #ffff99; | |
| } | |
| .reset-btn { | |
| background: #ff6b6b; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| font-family: 'Courier New', monospace; | |
| margin-bottom: 20px; | |
| } | |
| .reset-btn:hover { | |
| background: #ff5252; | |
| } | |
| .chat-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| background: #222; | |
| border: 1px solid #444; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| } | |
| .chat-header { | |
| background: #333; | |
| padding: 10px; | |
| text-align: center; | |
| color: #00ccff; | |
| font-weight: bold; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 10px; | |
| max-height: 400px; | |
| } | |
| .message { | |
| margin-bottom: 10px; | |
| padding: 8px; | |
| border-radius: 5px; | |
| } | |
| .message.user { | |
| background: #1a4a1a; | |
| align-self: flex-end; | |
| text-align: right; | |
| } | |
| .message.ai { | |
| background: #1a1a4a; | |
| align-self: flex-start; | |
| } | |
| .message-sender { | |
| font-weight: bold; | |
| font-size: 12px; | |
| margin-bottom: 4px; | |
| } | |
| .user .message-sender { | |
| color: #ff6b6b; | |
| } | |
| .ai .message-sender { | |
| color: #4ecdc4; | |
| } | |
| .chat-input { | |
| display: flex; | |
| padding: 10px; | |
| background: #333; | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| background: #222; | |
| border: 1px solid #555; | |
| color: #00ff00; | |
| padding: 8px; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .chat-input button { | |
| background: #4ecdc4; | |
| color: white; | |
| border: none; | |
| padding: 8px 15px; | |
| cursor: pointer; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .loading { | |
| opacity: 0.6; | |
| } | |
| .no-room { | |
| text-align: center; | |
| color: #888; | |
| font-style: italic; | |
| margin-top: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="game-container"> | |
| <!-- Room Management Panel --> | |
| <div class="room-panel"> | |
| <div class="room-header">🏠 Room Management</div> | |
| <div class="room-controls"> | |
| <button onclick="createNewRoom()">Create New Room</button> | |
| <input type="text" class="room-id-input" id="roomIdInput" placeholder="Enter Room ID"> | |
| <button onclick="joinRoom()">Join Room</button> | |
| <button onclick="leaveRoom()">Leave Room</button> | |
| </div> | |
| <div class="room-info" id="roomInfo"> | |
| <div>Status: No room selected</div> | |
| <div>Room ID: -</div> | |
| <div>Game Status: -</div> | |
| <div>Your Turn: -</div> | |
| </div> | |
| </div> | |
| <!-- Markdown Display Panel --> | |
| <div class="markdown-panel"> | |
| <div class="markdown-header">📝 Game State (Markdown)</div> | |
| <div class="markdown-content" id="markdownContent"> | |
| Select or create a room to see the markdown representation... | |
| </div> | |
| </div> | |
| <!-- Game Board --> | |
| <div class="game-board"> | |
| <h1 class="title">🎮 Room-Based Tic-Tac-Toe</h1> | |
| <div class="status" id="gameStatus">Create or join a room to start playing!</div> | |
| <div id="gameArea" style="display: none;"> | |
| <div class="board" id="gameBoard"> | |
| <div class="cell" data-index="0"></div> | |
| <div class="cell" data-index="1"></div> | |
| <div class="cell" data-index="2"></div> | |
| <div class="cell" data-index="3"></div> | |
| <div class="cell" data-index="4"></div> | |
| <div class="cell" data-index="5"></div> | |
| <div class="cell" data-index="6"></div> | |
| <div class="cell" data-index="7"></div> | |
| <div class="cell" data-index="8"></div> | |
| </div> | |
| <button class="reset-btn" onclick="resetGame()">New Game (Same Room)</button> | |
| </div> | |
| <div class="no-room" id="noRoom"> | |
| 👆 Create a new room or join an existing one to start playing! | |
| </div> | |
| </div> | |
| <!-- Chat Panel --> | |
| <div class="chat-container"> | |
| <div class="chat-header">💬 Chat with Mistral AI</div> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="message ai"> | |
| <div class="message-sender">System:</div> | |
| <div>Create or join a room to start chatting with Mistral AI!</div> | |
| </div> | |
| </div> | |
| <div class="chat-input"> | |
| <input type="text" id="chatInput" placeholder="Join a room first..." onkeypress="handleEnter(event)" disabled> | |
| <button onclick="sendChatMessage()" disabled id="sendBtn">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="room_game.js"></script> | |
| </body> | |
| </html> |