Spaces:

awacke1
/

Chess

Sleeping

App Files Files Community

awacke1 commited on Jan 7

Commit

058365b

verified ·

1 Parent(s): 1a61bb6

Update app.py

Browse files

Files changed (1) hide show

app.py +78 -38

app.py CHANGED Viewed

@@ -1,5 +1,5 @@
 import streamlit as st
-import json
 # Initialize session state if not already done
 if 'board' not in st.session_state:
@@ -17,30 +17,44 @@ 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
 # Create the HTML/JavaScript for the chess board
 chess_board_html = f"""
 <html>
 <head>
     <style>
         .chess-board {{
             width: 100%;
-            max-width: 1024px;
-            height: 1024px;
             display: grid;
             grid-template-columns: repeat(8, 1fr);
             gap: 2px;
             padding: 10px;
             background: #2f2f2f;
         }}
         .square {{
             aspect-ratio: 1;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 3.5em;
             cursor: pointer;
             transition: background-color 0.2s;
         }}
         .square:hover {{
             opacity: 0.8;
@@ -55,17 +69,19 @@ chess_board_html = f"""
             background: #ffd700 !important;
         }}
         .game-info {{
-            font-size: 1.5em;
             margin: 20px;
             text-align: center;
         }}
     </style>
 </head>
 <body>
-    <div class="game-info">
-        Current Player: {'White' if st.session_state.current_player == 'white' else 'Black'}
-    </div>
-    <div class="chess-board" id="board">
 """
 # Generate the squares with pieces
@@ -79,25 +95,29 @@ for row in range(8):
         selected_class = ' selected' if is_selected else ''
         chess_board_html += f"""
         <div class="square {square_color}{selected_class}"
-             onclick="handleClick({row}, {col})"
              data-row="{row}"
              data-col="{col}">
             {piece}
         </div>
         """
-# Add JavaScript for handling moves
 chess_board_html += """
     </div>
     <script>
-        function handleClick(row, col) {
             const data = {
-                row: row,
-                col: col
             };
             window.parent.postMessage({
-                type: 'streamlit:message',
-                data: data
             }, '*');
         }
     </script>
@@ -105,31 +125,50 @@ chess_board_html += """
 </html>
 """
-# Display the chess board
-st.components.v1.html(chess_board_html, height=1200)
-# Handle moves through Streamlit's session state
-if st.session_state.get('clicked_square'):
-    clicked = st.session_state.clicked_square
-    row, col = clicked['row'], clicked['col']
-    if st.session_state.selected_piece:
-        # Move the piece
-        selected = st.session_state.selected_piece
-        st.session_state.board[row][col] = st.session_state.board[selected['row']][selected['col']]
-        st.session_state.board[selected['row']][selected['col']] = None
-        st.session_state.selected_piece = None
-        st.session_state.current_player = 'black' if st.session_state.current_player == 'white' else 'white'
-    elif st.session_state.board[row][col]:
-        # Select the piece
-        st.session_state.selected_piece = {'row': row, 'col': col}
-    # Clear the clicked square
-    st.session_state.clicked_square = None
-    st.rerun()
 # Add a reset button
-if st.button('Reset Game'):
     st.session_state.board = [
         ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
         ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
@@ -142,4 +181,5 @@ if st.button('Reset Game'):
     ]
     st.session_state.current_player = 'white'
     st.session_state.selected_piece = None
     st.rerun()

 import streamlit as st
+import streamlit.components.v1 as components
 # Initialize session state if not already done
 if 'board' 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
+# Use the full width of the page
+st.set_page_config(layout="wide")
 # Create the HTML/JavaScript for the chess board
 chess_board_html = f"""
 <html>
 <head>
     <style>
+        .container {{
+            width: 100%;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }}
         .chess-board {{
             width: 100%;
+            max-width: 1400px;
+            aspect-ratio: 1;
             display: grid;
             grid-template-columns: repeat(8, 1fr);
             gap: 2px;
             padding: 10px;
             background: #2f2f2f;
+            margin: 0 auto;
         }}
         .square {{
             aspect-ratio: 1;
             display: flex;
             align-items: center;
             justify-content: center;
+            font-size: 4em;
             cursor: pointer;
             transition: background-color 0.2s;
+            user-select: none;
         }}
         .square:hover {{
             opacity: 0.8;
             background: #ffd700 !important;
         }}
         .game-info {{
+            font-size: 2em;
             margin: 20px;
             text-align: center;
+            color: #333;
         }}
     </style>
 </head>
 <body>
+    <div class="container">
+        <div class="game-info">
+            Current Player: {'White' if st.session_state.current_player == 'white' else 'Black'}
+        </div>
+        <div class="chess-board" id="board">
 """
 # Generate the squares with pieces
         selected_class = ' selected' if is_selected else ''
         chess_board_html += f"""
         <div class="square {square_color}{selected_class}"
+             onclick="handleSquareClick({row}, {col})"
              data-row="{row}"
              data-col="{col}">
             {piece}
         </div>
         """
+# Add JavaScript for handling moves with improved interaction
 chess_board_html += """
+        </div>
     </div>
     <script>
+        function handleSquareClick(row, col) {
+            // Send the click data to Streamlit
             const data = {
+                'row': row,
+                'col': col
             };
+            const encodedData = encodeURIComponent(JSON.stringify(data));
             window.parent.postMessage({
+                type: 'streamlit:setComponentValue',
+                data: encodedData
             }, '*');
         }
     </script>
 </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)}")
 # Add a reset button
+if st.button('Reset Game', key='reset'):
     st.session_state.board = [
         ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
         ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
     ]
     st.session_state.current_player = 'white'
     st.session_state.selected_piece = None
+    st.session_state.move_made = False
     st.rerun()