Update app.py

app.py

@@ -1,111 +1,228 @@
+# app.py
 import gradio as gr
 import numpy as np
 from tictactoe import X, O, EMPTY, initial_state, result, terminal, winner, minimax
 
-def initialize_board():
-    """Initialize an empty Tic Tac Toe board."""
-    return initial_state()
+class GameState:
+    def __init__(self):
+        self.board = initial_state()
+        self.player_symbol = None
+        
+    def reset(self):
+        self.board = initial_state()
+        self.player_symbol = None
+
+game_state = GameState()
 
 def format_cell(cell):
-    """Format cell for display."""
     return cell if cell in [X, O] else " "
 
-def make_move(board_state, row, col):
-    """Handle player and AI moves."""
-    if not isinstance(board_state, list):
-        board_state = initialize_board()
-
-    # Convert string representation back to EMPTY for cells
-    board = [[cell if cell in [X, O] else EMPTY for cell in row] for row in board_state]
-
-    # Player's move
+def make_move(board, row, col, player_symbol):
     if board[row][col] != EMPTY:
-        return board_state, "Invalid move! Cell already taken."
-
-    # Update board with player's move
-    board = result(board, (row, col))
-
-    # Check for game over after player's move
-    if terminal(board):
-        game_winner = winner(board)
+        return board, "Invalid move! Cell already taken."
+    
+    # Make player's move
+    new_board = result(board, (row, col))
+    
+    if terminal(new_board):
+        game_winner = winner(new_board)
         if game_winner:
-            return board, f"Game Over! {game_winner} wins!"
-        return board, "Game Over! It's a tie!"
-
-    # AI's move using minimax
-    ai_move = minimax(board)
+            return new_board, f"Game Over! {game_winner} wins! 🎉"
+        return new_board, "Game Over! It's a tie! 🤝"
+    
+    # Make AI's move
+    ai_move = minimax(new_board)
     if ai_move:
-        board = result(board, ai_move)
-
-    # Check for game over after AI's move
-    if terminal(board):
-        game_winner = winner(board)
-        if game_winner:
-            return board, f"Game Over! {game_winner} wins!"
-        return board, "Game Over! It's a tie!"
-
-    return board, "Your turn!"
+        new_board = result(new_board, ai_move)
+        
+        if terminal(new_board):
+            game_winner = winner(new_board)
+            if game_winner:
+                return new_board, f"Game Over! {game_winner} wins! 🎉"
+            return new_board, "Game Over! It's a tie! 🤝"
+    
+    return new_board, "Your turn!"
+
+css = """
+#game-container {
+    max-width: 400px;
+    margin: 0 auto;
+}
+#game-board {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    margin: 20px 0;
+}
+.cell-button {
+    aspect-ratio: 1;
+    font-size: 2em !important;
+    font-weight: bold !important;
+    border: 2px solid #2c3e50 !important;
+    border-radius: 10px !important;
+    background-color: #ffffff !important;
+    transition: all 0.3s ease !important;
+    min-height: 80px !important;
+}
+.cell-button:hover {
+    background-color: #f0f0f0 !important;
+}
+#message-box {
+    text-align: center;
+    padding: 15px;
+    border-radius: 10px;
+    background-color: #f8f9fa;
+    margin: 20px 0;
+    font-size: 1.2em !important;
+}
+.player-button {
+    padding: 10px 20px !important;
+    font-size: 1.2em !important;
+    border-radius: 8px !important;
+    background-color: #3498db !important;
+    color: white !important;
+    border: none !important;
+    transition: all 0.3s ease !important;
+    min-width: 120px !important;
+}
+.player-button:hover {
+    background-color: #2980b9 !important;
+}
+.restart-button {
+    background-color: #e74c3c !important;
+    color: white !important;
+    padding: 10px 20px !important;
+    font-size: 1.2em !important;
+    border-radius: 8px !important;
+    border: none !important;
+    transition: all 0.3s ease !important;
+    width: 100% !important;
+    max-width: 200px !important;
+    margin: 0 auto !important;
+}
+.restart-button:hover {
+    background-color: #c0392b !important;
+}
+.title {
+    text-align: center;
+    color: #2c3e50;
+    font-size: 2.5em !important;
+    margin-bottom: 20px !important;
+}
+"""
 
 def create_interface():
-    """Create the Gradio interface for Tic Tac Toe."""
-    with gr.Blocks() as demo:
-        gr.Markdown("# Tic Tac Toe vs AI")
-        gr.Markdown("### You play as X, AI plays as O")
-
-        # Create the game state
-        board_state = gr.State(initialize_board())
-
-        # Create the game board display
-        with gr.Row():
-            buttons = [[gr.Button(" ", size="lg") for _ in range(3)] for _ in range(3)]
-
-        # Status message
-        message = gr.Textbox(label="Game Status", value="Your turn!", interactive=False)
-
-        # Restart button
-        restart = gr.Button("Restart Game")
-
-        # Function to update button texts
-        def update_button_text(board):
-            return [[format_cell(cell) for cell in row] for row in board]
-
-        # Handle cell clicks
-        def handle_click(i, j, board):
-            new_board, msg = make_move(board, i, j)
-            button_values = update_button_text(new_board)
-            updates = []
-            for row in button_values:
-                updates.extend(row)
-            updates.append(msg)
-            updates.append(new_board)
-            return updates
+    with gr.Blocks(css=css) as demo:
+        gr.Markdown("# Tic Tac Toe", elem_classes=["title"])
+        
+        with gr.Column(elem_id="game-container"):
+            # Player selection
+            with gr.Row(visible=True) as player_select:
+                select_x = gr.Button("Play as X", elem_classes=["player-button"])
+                select_o = gr.Button("Play as O", elem_classes=["player-button"])
+            
+            # Game status
+            message = gr.Markdown("Choose your symbol to start!", elem_id="message-box")
+            
+            # Game board
+            with gr.Column(visible=False) as game_board:
+                board_display = gr.Grid(
+                    elem_id="game-board",
+                    rows=3,
+                    cols=3,
+                    value=[[" " for _ in range(3)] for _ in range(3)],
+                    render=False
+                )
+                
+                buttons = [[None for _ in range(3)] for _ in range(3)]
+                for i in range(3):
+                    for j in range(3):
+                        buttons[i][j] = gr.Button(
+                            " ",
+                            elem_classes=["cell-button"],
+                            elem_id=f"cell-{i}-{j}"
+                        )
+                
+                restart = gr.Button("New Game", elem_classes=["restart-button"])
+
+        def start_game(symbol):
+            game_state.reset()
+            game_state.player_symbol = symbol
+            game_state.board = initial_state()
+            
+            msg = "Your turn!"
+            if symbol == O:
+                # If player chose O, AI (X) makes the first move
+                ai_move = minimax(game_state.board)
+                game_state.board = result(game_state.board, ai_move)
+            
+            return {
+                player_select: gr.update(visible=False),
+                game_board: gr.update(visible=True),
+                message: msg,
+                **{buttons[i][j]: format_cell(game_state.board[i][j])
+                   for i in range(3) for j in range(3)}
+            }
+
+        def handle_click(i, j):
+            if game_state.board[i][j] != EMPTY:
+                return {
+                    message: "Invalid move! Cell already taken.",
+                    **{buttons[r][c]: format_cell(game_state.board[r][c])
+                       for r in range(3) for c in range(3)}
+                }
+            
+            new_board, msg = make_move(
+                game_state.board,
+                i,
+                j,
+                game_state.player_symbol
+            )
+            game_state.board = new_board
+            
+            return {
+                message: msg,
+                **{buttons[r][c]: format_cell(new_board[r][c])
+                   for r in range(3) for c in range(3)}
+            }
 
-        # Connect button clicks
+        def handle_restart():
+            game_state.reset()
+            return {
+                player_select: gr.update(visible=True),
+                game_board: gr.update(visible=False),
+                message: "Choose your symbol to start!",
+                **{buttons[i][j]: " " for i in range(3) for j in range(3)}
+            }
+
+        # Connect event handlers
+        select_x.click(
+            start_game,
+            inputs=[gr.State(X)],
+            outputs=[player_select, game_board, message, *sum(buttons, [])]
+        )
+        
+        select_o.click(
+            start_game,
+            inputs=[gr.State(O)],
+            outputs=[player_select, game_board, message, *sum(buttons, [])]
+        )
+        
         for i in range(3):
             for j in range(3):
                 buttons[i][j].click(
-                    handle_click,
-                    inputs=[gr.State(i), gr.State(j), board_state],
-                    outputs=[btn for row in buttons for btn in row] + [message, board_state],
+                    lambda x, y: handle_click(x, y),
+                    inputs=[gr.State(i), gr.State(j)],
+                    outputs=[message, *sum(buttons, [])]
                 )
-
-        # Handle restart
-        def handle_restart():
-            new_board = initialize_board()
-            button_values = update_button_text(new_board)
-            updates = []
-            for row in button_values:
-                updates.extend(row)
-            updates.append("Your turn!")
-            updates.append(new_board)
-            return updates
-
+        
         restart.click(
             handle_restart,
-            outputs=[btn for row in buttons for btn in row] + [message, board_state],
+            outputs=[player_select, game_board, message, *sum(buttons, [])]
         )
 
     return demo
 
+
 demo = create_interface()
-demo.launch()
+demo.launch()