Update app.py

app.py

@@ -1,5 +1,8 @@
 import streamlit as st
-import streamlit.components.v1 as components
+import json
+
+# Set page config to wide mode
+st.set_page_config(layout="wide")
 
 # Initialize session state if not already done
 if 'board' not in st.session_state:
@@ -17,11 +20,32 @@ if 'current_player' not in st.session_state:
     st.session_state.current_player = 'white'
 if 'selected_piece' not in st.session_state:
     st.session_state.selected_piece = None
-if 'move_made' not in st.session_state:
-    st.session_state.move_made = False
+if 'last_move' not in st.session_state:
+    st.session_state.last_move = None
 
-# Use the full width of the page
-st.set_page_config(layout="wide")
+def handle_move():
+    if 'last_move' in st.session_state and st.session_state.last_move:
+        move_data = json.loads(st.session_state.last_move)
+        row, col = move_data['row'], move_data['col']
+        
+        if st.session_state.selected_piece is None:
+            # Select a piece
+            if st.session_state.board[row][col] is not None:
+                st.session_state.selected_piece = {'row': row, 'col': col}
+        else:
+            # Move the selected piece
+            from_row = st.session_state.selected_piece['row']
+            from_col = st.session_state.selected_piece['col']
+            
+            # Make the move
+            st.session_state.board[row][col] = st.session_state.board[from_row][from_col]
+            st.session_state.board[from_row][from_col] = None
+            st.session_state.selected_piece = None
+            st.session_state.current_player = 'black' if st.session_state.current_player == 'white' else 'white'
+        
+        # Clear the last move
+        st.session_state.last_move = None
+        st.rerun()
 
 # Create the HTML/JavaScript for the chess board
 chess_board_html = f"""
@@ -102,73 +126,34 @@ for row in range(8):
         </div>
         """
 
-# Add JavaScript for handling moves with improved interaction
+# Add JavaScript for handling moves with Streamlit state management
 chess_board_html += """
         </div>
     </div>
     <script>
         function handleSquareClick(row, col) {
-            // Send the click data to Streamlit
             const data = {
-                'row': row,
-                'col': col
+                row: row,
+                col: col
             };
-            
-            const encodedData = encodeURIComponent(JSON.stringify(data));
-            window.parent.postMessage({
-                type: 'streamlit:setComponentValue',
-                data: encodedData
-            }, '*');
+            window.parent.Streamlit.setComponentValue(JSON.stringify(data));
         }
+
+        // Initialize Streamlit component
+        window.parent.Streamlit.setComponentReady();
     </script>
 </body>
 </html>
 """
 
-# Create a custom component that returns the clicked square
-def chess_board_component():
-    component_value = components.html(
-        chess_board_html,
-        height=1200,
-        key="chess_board"
-    )
-    return component_value
-
-# Handle the component interaction
-clicked_square = chess_board_component()
-
-if clicked_square:
-    try:
-        # Parse the clicked square data
-        data = json.loads(clicked_square)
-        row, col = data['row'], data['col']
-        
-        # Handle the move logic
-        if st.session_state.selected_piece is None:
-            # Select a piece
-            if st.session_state.board[row][col] is not None:
-                st.session_state.selected_piece = {'row': row, 'col': col}
-                st.session_state.move_made = True
-        else:
-            # Move the selected piece
-            from_row = st.session_state.selected_piece['row']
-            from_col = st.session_state.selected_piece['col']
-            
-            # Make the move
-            st.session_state.board[row][col] = st.session_state.board[from_row][from_col]
-            st.session_state.board[from_row][from_col] = None
-            st.session_state.selected_piece = None
-            st.session_state.current_player = 'black' if st.session_state.current_player == 'white' else 'white'
-            st.session_state.move_made = True
-        
-        if st.session_state.move_made:
-            st.rerun()
-            
-    except Exception as e:
-        st.error(f"Error processing move: {str(e)}")
+# Display the chess board and handle moves
+component_value = st.components.v1.html(chess_board_html, height=1200)
+if component_value:
+    st.session_state.last_move = component_value
+    handle_move()
 
 # Add a reset button
-if st.button('Reset Game', key='reset'):
+if st.button('Reset Game'):
     st.session_state.board = [
         ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
         ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
@@ -181,5 +166,5 @@ if st.button('Reset Game', key='reset'):
     ]
     st.session_state.current_player = 'white'
     st.session_state.selected_piece = None
-    st.session_state.move_made = False
+    st.session_state.last_move = None
     st.rerun()