Update app.py

app.py

@@ -57,7 +57,7 @@ def format_board(board):
 
 def play_game(board, col, state):
     if state["game_over"]:
-        return board, "Game is over! Click 'New Game' to play again."
+        return board, "Game is over! Click 'New Game' to play again.", state
     
     # Convert display format to game logic format
     board_array = np.array([[0 if cell == SYMBOLS[EMPTY] else 
@@ -68,7 +68,7 @@ def play_game(board, col, state):
     board_array = make_move(board_array, col, PLAYER)
     if check_winner(board_array):
         state["game_over"] = True
-        return format_board(board_array), "You win! 🎉"
+        return format_board(board_array), "You win! 🎉", state
     
     # AI move
     config = Configuration({"rows": BOARD_SIZE[0], "columns": BOARD_SIZE[1], "inarow": WIN_LENGTH})
@@ -79,9 +79,9 @@ def play_game(board, col, state):
     
     if check_winner(board_array):
         state["game_over"] = True
-        return format_board(board_array), "AI wins! 🤖"
+        return format_board(board_array), "AI wins! 🤖", state
     
-    return format_board(board_array), "Your turn!"
+    return format_board(board_array), "Your turn!", state
 
 css = """
 #board {
@@ -102,43 +102,8 @@ css = """
     width: 14.28%;
     height: 40px;
     vertical-align: middle;
-    background: #f0f0f0;  /* Light background for cells */
-    border-radius: 4px;   /* Rounded corners */
-}
-.button-container {
-    max-width: 400px;
-    margin: 0 auto 20px auto;
-    padding: 10px;
-}
-.button-row {
-    display: flex;
-    justify-content: space-between;
-    gap: 10px;
-}
-.button-row button {
-    flex: 1;
-    min-width: 40px;
-    height: 40px;
-}
-"""
-#board {
-    max-width: 400px;
-    margin: 20px auto;
-    overflow: visible !important;
-}
-#board table {
-    width: 100%;
-    table-layout: fixed;
-    border-collapse: separate;
-    border-spacing: 4px;
-}
-#board td {
-    text-align: center;
-    font-size: 28px;
-    padding: 8px;
-    width: 14.28%;
-    height: 40px;
-    vertical-align: middle;
+    background: #f0f0f0;
+    border-radius: 4px;
 }
 .button-container {
     max-width: 400px;
@@ -164,12 +129,10 @@ def create_ui():
         
         state = gr.State({"game_over": False})
         
-        # Button container
         with gr.Row(elem_classes="button-container"):
             with gr.Row(elem_classes="button-row"):
                 buttons = [gr.Button(str(i), size="sm") for i in range(BOARD_SIZE[1])]
         
-        # Updated Dataframe configuration
         board = gr.Dataframe(
             value=format_board(initialize_game()),
             interactive=False,
@@ -201,5 +164,6 @@ def create_ui():
     
     return demo
 
-demo = create_ui()
-demo.launch()
+if __name__ == "__main__":
+    demo = create_ui()
+    demo.launch()