File size: 5,404 Bytes
1a61bb6 ec3e191 1a61bb6 ec3e191 058365b ec3e191 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 ec3e191 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 ec3e191 1a61bb6 ec3e191 1a61bb6 ec3e191 1a61bb6 ec3e191 1a61bb6 ec3e191 1a61bb6 ec3e191 1a61bb6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
import streamlit as st
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:
st.session_state.board = [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
[None] * 8,
[None] * 8,
[None] * 8,
[None] * 8,
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
]
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 = [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
[None] * 8,
[None] * 8,
[None] * 8,
[None] * 8,
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
]
st.session_state.current_player = 'white'
st.session_state.selected_piece = None
st.session_state.last_move = None
st.rerun() |