Update app.py

app.py

@@ -1,246 +1,200 @@
 import gradio as gr
 import numpy as np
-from tictactoe import X, O, EMPTY, initial_state, result, terminal, winner, minimax
 
-class GameState:
+# Game constants
+X = "X"
+O = "O"
+EMPTY = None
+
+class TicTacToe:
     def __init__(self):
-        self.board = initial_state()
-        self.player_symbol = None
+        self.board = [[EMPTY for _ in range(3)] for _ in range(3)]
+        self.current_player = X
+        self.game_over = False
         
     def reset(self):
-        self.board = initial_state()
-        self.player_symbol = None
-
-game_state = GameState()
-
-def format_cell(cell):
-    return cell if cell in [X, O] else " "
-
-def make_move(board, row, col, player_symbol):
-    if board[row][col] != EMPTY:
-        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 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:
-        new_board = result(new_board, ai_move)
+        self.board = [[EMPTY for _ in range(3)] for _ in range(3)]
+        self.current_player = X
+        self.game_over = False
+        
+    def make_move(self, row, col):
+        if self.board[row][col] is not None or self.game_over:
+            return False
+            
+        self.board[row][col] = self.current_player
+        if self.check_winner():
+            self.game_over = True
+            return True
+            
+        if self.is_board_full():
+            self.game_over = True
+            return True
+            
+        self.current_player = O if self.current_player == X else X
+        return True
+        
+    def check_winner(self):
+        # Check rows
+        for row in self.board:
+            if row.count(row[0]) == 3 and row[0] is not None:
+                return True
+                
+        # Check columns
+        for col in range(3):
+            if (self.board[0][col] == self.board[1][col] == self.board[2][col] 
+                and self.board[0][col] is not None):
+                return True
+                
+        # Check diagonals
+        if (self.board[0][0] == self.board[1][1] == self.board[2][2] 
+            and self.board[0][0] is not None):
+            return True
+        if (self.board[0][2] == self.board[1][1] == self.board[2][0] 
+            and self.board[0][2] is not None):
+            return True
+            
+        return False
         
-        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 = """
+    def is_board_full(self):
+        return all(all(cell is not None for cell in row) for row in self.board)
+
+# Initialize game
+game = TicTacToe()
+
+# Custom CSS
+custom_css = """
 #game-container {
-    max-width: 240px;  /* Even smaller container */
+    max-width: 300px;
     margin: 0 auto;
     padding: 20px;
+    background: #f5f5f5;
+    border-radius: 10px;
 }
 
-.game-board {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);  /* Force 3 columns */
-    grid-template-rows: repeat(3, 1fr);     /* Force 3 rows */
-    gap: 3px;
-    background-color: #ff0000;  /* Red grid lines */
-    padding: 3px;
-    width: 180px;  /* Fixed smaller width */
-    height: 180px; /* Fixed height to match width */
-    margin: 20px auto;
+.board-row {
+    display: flex !important;
+    justify-content: center !important;
+    gap: 3px !important;
+    margin: 3px 0 !important;
 }
 
-.cell-button {
-    width: 100% !important;
-    height: 100% !important;
-    aspect-ratio: 1;
-    font-size: 1.2em !important;
+.cell {
+    width: 60px !important;
+    height: 60px !important;
+    font-size: 24px !important;
     font-weight: bold !important;
+    background: white !important;
     border: none !important;
-    background-color: #ffffff !important;
-    color: #0066cc !important;  /* Blue X and O */
-    padding: 0 !important;
-    margin: 0 !important;
+    color: #0066cc !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    min-height: unset !important;  /* Remove min-height */
+    cursor: pointer !important;
+    padding: 0 !important;
+    margin: 0 !important;
 }
 
-.cell-button:hover {
-    background-color: #f0f0f0 !important;
+.board-container {
+    background: #ff0000;
+    padding: 3px;
+    width: fit-content;
+    margin: 20px auto;
+    border-radius: 4px;
 }
 
-#message-box {
+#status-message {
     text-align: center;
-    padding: 10px;
-    border-radius: 8px;
-    background-color: #f8f9fa;
     margin: 15px 0;
-    font-size: 1em !important;
-}
-
-.player-button {
-    padding: 8px 16px !important;
-    font-size: 1em !important;
-    border-radius: 6px !important;
-    background-color: #3498db !important;
-    color: white !important;
-    border: none !important;
-    transition: all 0.3s ease !important;
-    min-width: 80px !important;
-}
-
-.player-button:hover {
-    background-color: #2980b9 !important;
+    font-size: 18px;
+    color: #333;
 }
 
-.restart-button {
-    background-color: #e74c3c !important;
+#reset-button {
+    display: block !important;
+    margin: 20px auto !important;
+    padding: 10px 20px !important;
+    background: #e74c3c !important;
     color: white !important;
-    padding: 8px 16px !important;
-    font-size: 1em !important;
-    border-radius: 6px !important;
     border: none !important;
-    transition: all 0.3s ease !important;
-    width: 100% !important;
-    max-width: 120px !important;
-    margin: 10px auto !important;
-}
-
-.restart-button:hover {
-    background-color: #c0392b !important;
+    border-radius: 5px !important;
+    cursor: pointer !important;
+    font-size: 16px !important;
 }
 
-.title {
-    text-align: center;
-    color: #2c3e50;
-    font-size: 1.8em !important;
-    margin-bottom: 15px !important;
-}
-
-/* Fix for grid layout */
-.game-board-row {
-    display: contents !important;
+#reset-button:hover {
+    background: #c0392b !important;
 }
 """
 
-def create_interface():
-    with gr.Blocks(css=css) as demo:
-        gr.Markdown("# Tic Tac Toe", elem_classes=["title"])
-        
+def create_board():
+    with gr.Blocks(css=custom_css) as demo:
         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")
+            status = gr.Markdown("Player X's turn", elem_id="status-message")
             
-            # Game board
-            with gr.Column(visible=False) as game_board:
-                # Create 3x3 grid using rows
+            # Create board container with red background
+            with gr.Column(elem_classes=["board-container"]):
+                # Create 3x3 grid
                 buttons = [[None for _ in range(3)] for _ in range(3)]
                 for i in range(3):
-                    with gr.Row(elem_classes=["game-board-row"]):
+                    with gr.Row(elem_classes=["board-row"]):
                         for j in range(3):
                             buttons[i][j] = gr.Button(
                                 " ",
-                                elem_classes=["cell-button"],
+                                elem_classes=["cell"],
                                 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)}
-            }
+            reset_btn = gr.Button("New Game", elem_id="reset-button")
 
         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
+            if game.make_move(i, j):
+                symbol = game.board[i][j]
+                message = ""
+                
+                if game.game_over:
+                    if game.check_winner():
+                        message = f"Player {symbol} wins! 🎉"
+                    else:
+                        message = "It's a tie! 🤝"
+                else:
+                    next_player = "O" if symbol == "X" else "X"
+                    message = f"Player {next_player}'s turn"
+                
+                # Update all buttons
+                button_updates = {}
+                for r in range(3):
+                    for c in range(3):
+                        value = game.board[r][c] if game.board[r][c] is not None else " "
+                        button_updates[buttons[r][c]] = value
+                
+                return {status: message, **button_updates}
             
-            return {
-                message: msg,
-                **{buttons[r][c]: format_cell(new_board[r][c])
-                   for r in range(3) for c in range(3)}
-            }
-
-        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)}
-            }
+            return {status: "Invalid move!"}
+
+        def reset_game():
+            game.reset()
+            updates = {status: "Player X's turn"}
+            for i in range(3):
+                for j in range(3):
+                    updates[buttons[i][j]] = " "
+            return updates
 
         # 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(
                     lambda x, y: handle_click(x, y),
                     inputs=[gr.State(i), gr.State(j)],
-                    outputs=[message, *sum(buttons, [])]
+                    outputs=[status, *sum(buttons, [])]
                 )
         
-        restart.click(
-            handle_restart,
-            outputs=[player_select, game_board, message, *sum(buttons, [])]
+        reset_btn.click(
+            reset_game,
+            outputs=[status, *sum(buttons, [])]
         )
 
     return demo
 
-demo = create_interface()
+# Launch the app
+demo = create_board()
 demo.launch()