Update app.py

app.py

@@ -5,8 +5,9 @@ def initialize_game():
     board = [["" for _ in range(3)] for _ in range(3)]
     current_player = "X"
     status = "Player 1's turn (X)"
-    flattened_board = [cell for row in board for cell in row]
-    return board, current_player, status, flattened_board
+    # Create 9 buttons for the grid
+    buttons = [gr.Button(value="", elem_classes=["cell-btn"]) for _ in range(9)]
+    return board, current_player, status, *buttons
 
 # Check for a winner
 def check_winner(board):
@@ -30,21 +31,27 @@ def handle_move(board, current_player, button_idx):
     row, col = divmod(button_idx, 3)
     if board[row][col] != "":
         status = f"Invalid move! Player {1 if current_player == 'X' else 2}'s turn ({current_player})"
-        return board, current_player, status, [cell for row in board for cell in row]
+        buttons = [gr.Button(value=board[i//3][i%3], elem_classes=["cell-btn"]) for i in range(9)]
+        return board, current_player, status, *buttons
 
     board[row][col] = current_player
     winner = check_winner(board)
     if winner:
         status = f"Player {1 if winner == 'X' else 2} ({winner}) wins! 🎉"
-        return board, current_player, status, [cell for row in board for cell in row]
+        buttons = [gr.Button(value=board[i//3][i%3], elem_classes=["cell-btn"]) for i in range(9)]
+        return board, current_player, status, *buttons
 
     if check_draw(board):
         status = "It's a draw! 🤝"
-        return board, current_player, status, [cell for row in board for cell in row]
+        buttons = [gr.Button(value=board[i//3][i%3], elem_classes=["cell-btn"]) for i in range(9)]
+        return board, current_player, status, *buttons
 
     current_player = "O" if current_player == "X" else "X"
     status = f"Player {1 if current_player == 'X' else 2}'s turn ({current_player})"
-    return board, current_player, status, [cell for row in board for cell in row]
+    
+    # Update the buttons to reflect the new board state
+    buttons = [gr.Button(value=board[i//3][i%3], elem_classes=["cell-btn"]) for i in range(9)]
+    return board, current_player, status, *buttons
 
 # Build the Gradio UI
 with gr.Blocks(css=".cell-btn {height: 100px; width: 100px; font-size: 2em; text-align: center;}") as tic_tac_toe:
@@ -55,21 +62,20 @@ with gr.Blocks(css=".cell-btn {height: 100px; width: 100px; font-size: 2em; text
     current_player = gr.State("X")
     game_status = gr.Textbox(value="Player 1's turn (X)", label="Game Status", interactive=False)
 
-    # Create grid buttons without displaying any Number components
+    # Create grid buttons
     buttons = []
     for i in range(3):
         with gr.Row():
             for j in range(3):
-                # Each button is clickable, the index is passed in hidden and used internally
-                btn = gr.Button(value="", elem_classes=["cell-btn"], elem_id=f"button_{i*3 + j}")
+                btn = gr.Button(value="", elem_classes=["cell-btn"])
                 buttons.append(btn)
 
     # Update buttons dynamically on click
     for idx, btn in enumerate(buttons):
         btn.click(
             handle_move,
-            inputs=[board_state, current_player, gr.Number(idx, visible=False)],  # Hide the number input
-            outputs=[board_state, current_player, game_status, *buttons],
+            inputs=[board_state, current_player, gr.Number(idx, visible=False)],
+            outputs=[board_state, current_player, game_status, *buttons],  # Return all outputs
         )
 
     # Reset game button
@@ -77,7 +83,7 @@ with gr.Blocks(css=".cell-btn {height: 100px; width: 100px; font-size: 2em; text
     reset_button.click(
         initialize_game,
         inputs=[],
-        outputs=[board_state, current_player, game_status, *buttons],
+        outputs=[board_state, current_player, game_status, *buttons],  # Include buttons in reset
     )
 
 tic_tac_toe.launch()