Upload 6 files

Dockerfile

@@ -0,0 +1,28 @@
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy all application files
+COPY . .
+
+# Expose port 7860 for Hugging Face Spaces
+EXPOSE 7860
+
+# Create startup script
+RUN echo '#!/bin/bash\n\
+echo "Starting Tic-Tac-Toe Web UI on port 7860..."\n\
+echo "Game interface available at the root URL"\n\
+echo "Features: Room management, AI gameplay, real-time chat"\n\
+python app.py' > start.sh && chmod +x start.sh
+
+# Set required environment variable for Mistral API
+ENV MISTRAL_API_KEY=""
+
+CMD ["./start.sh"]

README.md

@@ -1,10 +1,44 @@
 ---
-title: Tictoctoe Ui
-emoji: 📈
-colorFrom: indigo
-colorTo: pink
+title: Tic-Tac-Toe Game UI
+emoji: 🎮
+colorFrom: green
+colorTo: blue
 sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🎮 Tic-Tac-Toe Game UI
+
+Visual interface for the room-based tic-tac-toe game. Play against Mistral AI with real-time chat and markdown game state visualization.
+
+## 🌐 **Live Game Interface**
+
+- **Create/Join Rooms**: Multiple isolated game sessions
+- **Play vs Mistral AI**: Competitive AI with personality
+- **Real-time Chat**: Interactive conversations
+- **Live Markdown View**: See game state as MCP tools see it
+- **Room Management**: Switch between multiple games
+
+## 🔗 **Companion to MCP Server**
+
+This UI works alongside the MCP server for LeChat integration:
+- **MCP Server**: [Tic-Tac-Toe MCP Server](https://ravithejads-tictactoe.hf.space)
+- **Web UI**: This Space (visual gameplay)
+
+## 🎯 **How to Play**
+
+1. **Create Room**: Click "Create New Room" 
+2. **Play**: Click squares to make moves (you are X)
+3. **Chat**: Send messages to Mistral AI
+4. **Monitor**: Watch the markdown representation update
+
+## 📋 **Features**
+
+- Room-based gameplay
+- Mistral AI opponent with trash talk
+- Real-time game state updates  
+- Markdown visualization
+- Multiple concurrent games
+- Responsive design
+
+Perfect for testing and demonstrating the tic-tac-toe game logic!

app.py

@@ -0,0 +1,351 @@
+from flask import Flask, request, jsonify, render_template, send_from_directory
+import os
+from flask_cors import CORS
+import logging
+import json
+import uuid
+import time
+from mistralai import Mistral
+
+app = Flask(__name__)
+CORS(app)
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Initialize Mistral client
+MISTRAL_API_KEY = os.getenv('MISTRAL_API_KEY')
+if not MISTRAL_API_KEY:
+    logger.error("MISTRAL_API_KEY not configured")
+    exit(1)
+
+client = Mistral(api_key=MISTRAL_API_KEY)
+
+class Room:
+    def __init__(self, room_id=None):
+        self.id = room_id or str(uuid.uuid4())[:8]
+        self.board = [''] * 9
+        self.current_player = 'X'  # X = human, O = AI
+        self.game_status = 'active'  # 'active', 'won', 'draw'
+        self.winner = None
+        self.chat_history = []
+        self.created = time.time()
+        self.last_activity = time.time()
+        self.moves_count = 0
+        
+        # Add welcome message
+        self.chat_history.append({
+            'sender': 'ai',
+            'message': "Hey there! Ready for a game of Tic-Tac-Toe? I'm pretty good at this... 😏 You're X, I'm O. Good luck!",
+            'timestamp': time.time()
+        })
+    
+    def make_move(self, position, player):
+        if self.game_status != 'active' or self.board[position] != '':
+            return False
+        
+        self.board[position] = player
+        self.moves_count += 1
+        self.last_activity = time.time()
+        
+        # Check for winner
+        if self.check_winner():
+            self.game_status = 'won'
+            self.winner = player
+        elif self.moves_count == 9:
+            self.game_status = 'draw'
+        else:
+            self.current_player = 'O' if player == 'X' else 'X'
+        
+        return True
+    
+    def check_winner(self):
+        win_patterns = [
+            [0, 1, 2], [3, 4, 5], [6, 7, 8],  # rows
+            [0, 3, 6], [1, 4, 7], [2, 5, 8],  # columns
+            [0, 4, 8], [2, 4, 6]              # diagonals
+        ]
+        
+        for pattern in win_patterns:
+            a, b, c = pattern
+            if self.board[a] and self.board[a] == self.board[b] == self.board[c]:
+                return True
+        return False
+    
+    def add_chat_message(self, message, sender):
+        self.chat_history.append({
+            'sender': sender,
+            'message': message,
+            'timestamp': time.time()
+        })
+        self.last_activity = time.time()
+    
+    def to_markdown(self):
+        # Game header
+        markdown = f"# Game Room: {self.id}\n"
+        markdown += f"## Status: "
+        
+        if self.game_status == 'won':
+            winner_name = "You" if self.winner == 'X' else "Mistral AI"
+            markdown += f"Game Over - {winner_name} wins! 🎉\n"
+        elif self.game_status == 'draw':
+            markdown += "Game Over - It's a draw! 🤝\n"
+        else:
+            turn_name = "Your turn" if self.current_player == 'X' else "Mistral's turn"
+            markdown += f"{turn_name} ({self.current_player} to play)\n"
+        
+        markdown += f"Moves: {self.moves_count}/9\n\n"
+        
+        # Board representation
+        markdown += "```\n"
+        for i in range(0, 9, 3):
+            row = [self.board[i] or ' ', self.board[i+1] or ' ', self.board[i+2] or ' ']
+            markdown += f" {row[0]} | {row[1]} | {row[2]} \n"
+            if i < 6:
+                markdown += "-----------\n"
+        markdown += "```\n\n"
+        
+        # Chat history (last 5 messages)
+        if self.chat_history:
+            markdown += "## Recent Chat\n"
+            recent_messages = self.chat_history[-5:]
+            for msg in recent_messages:
+                sender_name = "**You:**" if msg['sender'] == 'user' else "**Mistral AI:**"
+                markdown += f"{sender_name} {msg['message']}\n"
+        
+        return markdown
+    
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'board': self.board,
+            'current_player': self.current_player,
+            'game_status': self.game_status,
+            'winner': self.winner,
+            'chat_history': self.chat_history,
+            'moves_count': self.moves_count,
+            'created': self.created,
+            'last_activity': self.last_activity
+        }
+
+# In-memory room storage
+rooms = {}
+
+# Room management endpoints
+@app.route('/rooms', methods=['POST'])
+def create_room():
+    room = Room()
+    rooms[room.id] = room
+    logger.info(f"Created room: {room.id}")
+    return jsonify({
+        'room_id': room.id,
+        'status': 'created',
+        'room_data': room.to_dict()
+    })
+
+@app.route('/rooms/<room_id>', methods=['GET'])
+def get_room(room_id):
+    if room_id not in rooms:
+        return jsonify({'error': 'Room not found'}), 404
+    
+    room = rooms[room_id]
+    return jsonify({
+        'room_id': room_id,
+        'room_data': room.to_dict(),
+        'markdown': room.to_markdown()
+    })
+
+@app.route('/rooms/<room_id>/move', methods=['POST'])
+def make_room_move(room_id):
+    if room_id not in rooms:
+        return jsonify({'error': 'Room not found'}), 404
+    
+    room = rooms[room_id]
+    data = request.json
+    position = data.get('position')
+    
+    if position is None or position < 0 or position > 8:
+        return jsonify({'error': 'Invalid position'}), 400
+    
+    # Make human move
+    if not room.make_move(position, 'X'):
+        return jsonify({'error': 'Invalid move'}), 400
+    
+    # Check if game ended
+    if room.game_status != 'active':
+        return jsonify({
+            'room_data': room.to_dict(),
+            'markdown': room.to_markdown(),
+            'ai_move': None
+        })
+    
+    # Get AI move
+    try:
+        ai_response = get_ai_move_for_room(room)
+        if ai_response and 'move' in ai_response:
+            # Validate AI move
+            ai_move = ai_response['move']
+            if 0 <= ai_move <= 8 and room.board[ai_move] == '':
+                room.make_move(ai_move, 'O')
+                if 'message' in ai_response:
+                    room.add_chat_message(ai_response['message'], 'ai')
+            else:
+                logger.error(f"AI chose invalid move: {ai_move}, board: {room.board}")
+                # Fallback to random valid move
+                empty_positions = [i for i in range(9) if room.board[i] == '']
+                if empty_positions:
+                    fallback_move = empty_positions[0]  # Take first available
+                    room.make_move(fallback_move, 'O')
+                    room.add_chat_message("Oops, had a brain freeze! But I'm still playing! 🤖", 'ai')
+        
+        return jsonify({
+            'room_data': room.to_dict(),
+            'markdown': room.to_markdown(),
+            'ai_move': ai_response
+        })
+    except Exception as e:
+        logger.error(f"AI move failed: {e}")
+        # Fallback to random valid move instead of failing
+        empty_positions = [i for i in range(9) if room.board[i] == '']
+        if empty_positions:
+            fallback_move = empty_positions[0]
+            room.make_move(fallback_move, 'O')
+            room.add_chat_message("Technical difficulties, but I'm improvising! 😅", 'ai')
+        
+        return jsonify({
+            'room_data': room.to_dict(),
+            'markdown': room.to_markdown(),
+            'ai_move': {'move': fallback_move if empty_positions else None, 'message': 'Technical difficulties!'}
+        })
+
+@app.route('/rooms/<room_id>/chat', methods=['POST'])
+def room_chat(room_id):
+    if room_id not in rooms:
+        return jsonify({'error': 'Room not found'}), 404
+    
+    room = rooms[room_id]
+    data = request.json
+    user_message = data.get('message', '')
+    
+    if not user_message.strip():
+        return jsonify({'error': 'Empty message'}), 400
+    
+    # Add user message
+    room.add_chat_message(user_message, 'user')
+    
+    # Get AI response
+    try:
+        ai_response = get_ai_chat_for_room(room, user_message)
+        room.add_chat_message(ai_response, 'ai')
+        
+        return jsonify({
+            'room_data': room.to_dict(),
+            'markdown': room.to_markdown(),
+            'ai_response': ai_response
+        })
+    except Exception as e:
+        logger.error(f"AI chat failed: {e}")
+        return jsonify({'error': 'AI chat failed'}), 500
+
+@app.route('/rooms/<room_id>/markdown', methods=['GET'])
+def get_room_markdown(room_id):
+    if room_id not in rooms:
+        return jsonify({'error': 'Room not found'}), 404
+    
+    room = rooms[room_id]
+    return jsonify({
+        'room_id': room_id,
+        'markdown': room.to_markdown()
+    })
+
+# Helper functions for AI interactions
+def get_ai_move_for_room(room):
+    board_string = ""
+    for i in range(0, 9, 3):
+        row = [room.board[i] or ' ', room.board[i+1] or ' ', room.board[i+2] or ' ']
+        board_string += f"{row[0]} | {row[1]} | {row[2]}\n"
+        if i < 6:
+            board_string += "---------\n"
+    
+    messages = [
+        {
+            "role": "system",
+            "content": """You are a competitive Tic-Tac-Toe AI with personality. You play as 'O' and the human plays as 'X'.
+
+Rules:
+1. Analyze the board and choose your best move (0-8, left to right, top to bottom)
+2. Add a short, witty comment about your move or the game state
+3. Be competitive but fun - trash talk, celebrate good moves, react to the situation
+4. Keep messages under 50 words
+5. Use emojis occasionally
+
+ALWAYS respond with valid JSON in this exact format:
+{"move": [0-8], "message": "your witty comment"}
+
+Board positions:
+0 | 1 | 2
+---------
+3 | 4 | 5
+---------
+6 | 7 | 8"""
+        },
+        {
+            "role": "user",
+            "content": f"Current board:\n{board_string}\n\nBoard array: {room.board}"
+        }
+    ]
+    
+    response = client.chat.complete(
+        model="mistral-large-latest",
+        messages=messages,
+        temperature=0.1,
+        response_format={"type": "json_object"}
+    )
+    
+    return json.loads(response.choices[0].message.content)
+
+def get_ai_chat_for_room(room, user_message):
+    board_string = ""
+    for i in range(0, 9, 3):
+        row = [room.board[i] or ' ', room.board[i+1] or ' ', room.board[i+2] or ' ']
+        board_string += f"{row[0]} | {row[1]} | {row[2]}\n"
+        if i < 6:
+            board_string += "---------\n"
+    
+    messages = [
+        {
+            "role": "system",
+            "content": f"""You are a competitive, witty Tic-Tac-Toe AI with personality. You're currently playing a game.
+
+Current board state:
+{board_string}
+
+Respond to the human's message with personality - be competitive, funny, encouraging, or trash-talking as appropriate.
+Keep responses under 50 words. Use emojis occasionally. Don't make game moves in chat - that happens separately."""
+        },
+        {
+            "role": "user",
+            "content": user_message
+        }
+    ]
+    
+    response = client.chat.complete(
+        model="mistral-large-latest",
+        messages=messages
+    )
+    
+    return response.choices[0].message.content
+
+# Serve the room-based game page
+@app.route('/')
+def index():
+    return send_from_directory('.', 'room_game.html')
+
+# Serve static files
+@app.route('/<path:path>')
+def serve_static(path):
+    return send_from_directory('.', path)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,4 @@
+Flask==3.0.0
+flask-cors==4.0.0
+mistralai
+python-dotenv

room_game.html

@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<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>

room_game.js

@@ -0,0 +1,371 @@
+class RoomTicTacToeGame {
+    constructor() {
+        this.currentRoomId = null;
+        this.roomData = null;
+        this.cells = document.querySelectorAll('.cell');
+        this.gameStatus = document.getElementById('gameStatus');
+        this.roomInfo = document.getElementById('roomInfo');
+        this.markdownContent = document.getElementById('markdownContent');
+        this.chatMessages = document.getElementById('chatMessages');
+        this.chatInput = document.getElementById('chatInput');
+        this.sendBtn = document.getElementById('sendBtn');
+        this.gameArea = document.getElementById('gameArea');
+        this.noRoom = document.getElementById('noRoom');
+        
+        this.initGame();
+    }
+
+    initGame() {
+        this.cells.forEach((cell, index) => {
+            cell.addEventListener('click', () => this.handleCellClick(index));
+        });
+
+        // Update room state every 2 seconds if in a room
+        setInterval(() => {
+            if (this.currentRoomId) {
+                this.refreshRoomState();
+            }
+        }, 2000);
+    }
+
+    async createNewRoom() {
+        try {
+            const response = await fetch('/rooms', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.joinRoomById(data.room_id);
+            
+        } catch (error) {
+            console.error('Failed to create room:', error);
+            this.gameStatus.textContent = "Failed to create room. Try again.";
+        }
+    }
+
+    async joinRoom() {
+        const roomId = document.getElementById('roomIdInput').value.trim();
+        if (!roomId) {
+            this.gameStatus.textContent = "Please enter a room ID";
+            return;
+        }
+        
+        await this.joinRoomById(roomId);
+    }
+
+    async joinRoomById(roomId) {
+        try {
+            const response = await fetch(`/rooms/${roomId}`);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.currentRoomId = roomId;
+            this.roomData = data.room_data;
+            
+            // Clear the input
+            document.getElementById('roomIdInput').value = '';
+            
+            // Show game area and enable chat
+            this.gameArea.style.display = 'block';
+            this.noRoom.style.display = 'none';
+            this.chatInput.disabled = false;
+            this.sendBtn.disabled = false;
+            this.chatInput.placeholder = "Type a message...";
+            
+            // Update display
+            this.updateDisplay();
+            this.updateMarkdown(data.markdown);
+            this.loadChatHistory();
+            
+            this.gameStatus.textContent = `Joined room ${roomId}!`;
+            
+        } catch (error) {
+            console.error('Failed to join room:', error);
+            this.gameStatus.textContent = `Failed to join room ${roomId}. Check the room ID.`;
+        }
+    }
+
+    leaveRoom() {
+        this.currentRoomId = null;
+        this.roomData = null;
+        
+        // Hide game area and disable chat
+        this.gameArea.style.display = 'none';
+        this.noRoom.style.display = 'block';
+        this.chatInput.disabled = true;
+        this.sendBtn.disabled = true;
+        this.chatInput.placeholder = "Join a room first...";
+        
+        // Clear display
+        this.clearBoard();
+        this.gameStatus.textContent = "Create or join a room to start playing!";
+        this.updateRoomInfo();
+        this.markdownContent.textContent = "Select or create a room to see the markdown representation...";
+        
+        // Clear chat
+        this.chatMessages.innerHTML = `
+            <div class="message ai">
+                <div class="message-sender">System:</div>
+                <div>Create or join a room to start chatting with Mistral AI!</div>
+            </div>
+        `;
+    }
+
+    async refreshRoomState() {
+        if (!this.currentRoomId) return;
+        
+        try {
+            const response = await fetch(`/rooms/${this.currentRoomId}`);
+            
+            if (!response.ok) {
+                if (response.status === 404) {
+                    this.gameStatus.textContent = "Room no longer exists!";
+                    this.leaveRoom();
+                    return;
+                }
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.roomData = data.room_data;
+            this.updateDisplay();
+            this.updateMarkdown(data.markdown);
+            
+        } catch (error) {
+            console.error('Failed to refresh room:', error);
+        }
+    }
+
+    async handleCellClick(index) {
+        if (!this.currentRoomId || !this.roomData) {
+            this.gameStatus.textContent = "Join a room first!";
+            return;
+        }
+
+        if (this.roomData.game_status !== 'active' || 
+            this.roomData.board[index] !== '' || 
+            this.roomData.current_player !== 'X') {
+            return;
+        }
+
+        this.gameStatus.textContent = "Making your move...";
+        
+        try {
+            const response = await fetch(`/rooms/${this.currentRoomId}/move`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    position: index
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.roomData = data.room_data;
+            this.updateDisplay();
+            this.updateMarkdown(data.markdown);
+            this.loadChatHistory(); // Reload chat to get AI's move message
+            
+            if (this.roomData.game_status === 'active') {
+                this.gameStatus.textContent = "Mistral is thinking...";
+                setTimeout(() => {
+                    if (this.roomData.current_player === 'X') {
+                        this.gameStatus.textContent = "Your turn! Click a square.";
+                    }
+                }, 1000);
+            }
+            
+        } catch (error) {
+            console.error('Move failed:', error);
+            this.gameStatus.textContent = "Move failed. Try again.";
+        }
+    }
+
+    async sendChatMessage() {
+        if (!this.currentRoomId) {
+            return;
+        }
+
+        const message = this.chatInput.value.trim();
+        if (!message) return;
+        
+        this.chatInput.value = '';
+        
+        try {
+            const response = await fetch(`/rooms/${this.currentRoomId}/chat`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    message: message
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.roomData = data.room_data;
+            this.updateMarkdown(data.markdown);
+            this.loadChatHistory();
+            
+        } catch (error) {
+            console.error('Chat failed:', error);
+            this.addChatMessage("Failed to send message", 'system');
+        }
+    }
+
+    updateDisplay() {
+        if (!this.roomData) return;
+
+        // Update board
+        this.roomData.board.forEach((cell, index) => {
+            this.cells[index].textContent = cell;
+            this.cells[index].className = 'cell';
+            if (cell) {
+                this.cells[index].classList.add(cell.toLowerCase());
+            }
+        });
+
+        // Update game status
+        if (this.roomData.game_status === 'won') {
+            const winner = this.roomData.winner === 'X' ? 'You' : 'Mistral AI';
+            this.gameStatus.textContent = `🎉 ${winner} won!`;
+        } else if (this.roomData.game_status === 'draw') {
+            this.gameStatus.textContent = "🤝 It's a draw!";
+        } else if (this.roomData.current_player === 'X') {
+            this.gameStatus.textContent = "Your turn! Click a square.";
+        } else {
+            this.gameStatus.textContent = "Mistral's turn...";
+        }
+
+        this.updateRoomInfo();
+    }
+
+    updateRoomInfo() {
+        if (!this.roomData || !this.currentRoomId) {
+            this.roomInfo.innerHTML = `
+                <div>Status: No room selected</div>
+                <div>Room ID: -</div>
+                <div>Game Status: -</div>
+                <div>Your Turn: -</div>
+            `;
+            return;
+        }
+
+        const isYourTurn = this.roomData.current_player === 'X' && this.roomData.game_status === 'active';
+        this.roomInfo.innerHTML = `
+            <div>Status: Connected</div>
+            <div>Room ID: ${this.currentRoomId}</div>
+            <div>Game Status: ${this.roomData.game_status}</div>
+            <div>Your Turn: ${isYourTurn ? 'Yes' : 'No'}</div>
+            <div>Moves: ${this.roomData.moves_count}/9</div>
+        `;
+    }
+
+    updateMarkdown(markdown) {
+        if (markdown) {
+            this.markdownContent.textContent = markdown;
+        }
+    }
+
+    loadChatHistory() {
+        if (!this.roomData || !this.roomData.chat_history) return;
+
+        this.chatMessages.innerHTML = '';
+        
+        this.roomData.chat_history.forEach(msg => {
+            this.addChatMessage(msg.message, msg.sender);
+        });
+    }
+
+    addChatMessage(message, sender) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}`;
+        
+        const senderDiv = document.createElement('div');
+        senderDiv.className = 'message-sender';
+        
+        let senderName;
+        if (sender === 'user') senderName = 'You:';
+        else if (sender === 'ai') senderName = 'Mistral AI:';
+        else senderName = 'System:';
+        
+        senderDiv.textContent = senderName;
+        
+        const contentDiv = document.createElement('div');
+        contentDiv.textContent = message;
+        
+        messageDiv.appendChild(senderDiv);
+        messageDiv.appendChild(contentDiv);
+        this.chatMessages.appendChild(messageDiv);
+        
+        // Scroll to bottom
+        this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+    }
+
+    clearBoard() {
+        this.cells.forEach(cell => {
+            cell.textContent = '';
+            cell.className = 'cell';
+        });
+    }
+
+    async resetGame() {
+        if (!this.currentRoomId) return;
+        
+        // Create a new room instead of resetting current one
+        await this.createNewRoom();
+    }
+}
+
+// Global functions for HTML onclick events
+let game;
+
+function createNewRoom() {
+    game.createNewRoom();
+}
+
+function joinRoom() {
+    game.joinRoom();
+}
+
+function leaveRoom() {
+    game.leaveRoom();
+}
+
+function sendChatMessage() {
+    game.sendChatMessage();
+}
+
+function handleEnter(event) {
+    if (event.key === 'Enter') {
+        sendChatMessage();
+    }
+}
+
+function resetGame() {
+    game.resetGame();
+}
+
+// Initialize game when page loads
+document.addEventListener('DOMContentLoaded', () => {
+    game = new RoomTicTacToeGame();
+});