Spaces:

awacke1
/

Chess

Sleeping

App Files Files Community

awacke1 commited on Jan 7

Commit

f1b315c

verified ·

1 Parent(s): ec3e191

Update app.py

Browse files

Files changed (1) hide show

app.py +68 -124

app.py CHANGED Viewed

@@ -1,5 +1,4 @@
 import streamlit as st
-import json
 # Set page config to wide mode
 st.set_page_config(layout="wide")
@@ -20,140 +19,86 @@ 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 'last_move' not in st.session_state:
-    st.session_state.last_move = None
-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"""
-<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;
-        }}
-        .white {{
-            background: #e8e8e8;
-        }}
-        .black {{
-            background: #b0b0b0;
-        }}
-        .selected {{
-            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
-for row in range(8):
-    for col in range(8):
-        piece = st.session_state.board[row][col] or ''
-        is_selected = (st.session_state.selected_piece and
-                      st.session_state.selected_piece['row'] == row and
-                      st.session_state.selected_piece['col'] == col)
-        square_color = 'white' if (row + col) % 2 == 0 else 'black'
-        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 Streamlit state management
-chess_board_html += """
-        </div>
-    </div>
-    <script>
-        function handleSquareClick(row, col) {
-            const data = {
-                row: row,
-                col: col
-            };
-            window.parent.Streamlit.setComponentValue(JSON.stringify(data));
         }
-        // Initialize Streamlit component
-        window.parent.Streamlit.setComponentReady();
-    </script>
-</body>
-</html>
-"""
-# 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'):
     st.session_state.board = [
         ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
         ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
@@ -166,5 +111,4 @@ if st.button('Reset Game'):
     ]
     st.session_state.current_player = 'white'
     st.session_state.selected_piece = None
-    st.session_state.last_move = None
     st.rerun()

 import streamlit as st
 # Set page config to wide mode
 st.set_page_config(layout="wide")
     st.session_state.current_player = 'white'
 if 'selected_piece' not in st.session_state:
     st.session_state.selected_piece = None
+def handle_square_click(row, 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}
+            st.rerun()
+    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.rerun()
+# Create buttons for each square using Streamlit's native components
+st.write(f"## Chess Game")
+st.write(f"Current Player: {'White' if st.session_state.current_player == 'white' else 'Black'}")
+# Create the chessboard using a grid of columns
+board_container = st.container()
+with board_container:
+    # CSS for the chess board
+    st.markdown("""
+        <style>
+        .stButton > button {
             width: 100%;
+            height: 0;
+            padding-bottom: 100%;
+            font-size: 3em;
             display: flex;
             align-items: center;
             justify-content: center;
+            background-color: transparent;
+            border: none;
         }
+        .chess-square-white {
+            background-color: #e8e8e8 !important;
+        }
+        .chess-square-black {
+            background-color: #b0b0b0 !important;
+        }
+        .chess-square-selected {
+            background-color: #ffd700 !important;
+        }
+        </style>
+    """, unsafe_allow_html=True)
+    # Create the board grid
+    for row in range(8):
+        cols = st.columns(8)
+        for col in range(8):
+            with cols[col]:
+                piece = st.session_state.board[row][col] or ' '
+                is_selected = (st.session_state.selected_piece and
+                             st.session_state.selected_piece['row'] == row and
+                             st.session_state.selected_piece['col'] == col)
+                square_color = 'white' if (row + col) % 2 == 0 else 'black'
+                if is_selected:
+                    class_name = "chess-square-selected"
+                else:
+                    class_name = f"chess-square-{square_color}"
+                # Create a button for each square
+                if st.button(
+                    piece,
+                    key=f"square_{row}_{col}",
+                    help=f"Row {row}, Col {col}",
+                    type="secondary",
+                    use_container_width=True
+                ):
+                    handle_square_click(row, col)
 # 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.rerun()