|
|
import streamlit as st |
|
|
import json |
|
|
|
|
|
|
|
|
st.set_page_config(layout="wide") |
|
|
|
|
|
|
|
|
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: |
|
|
|
|
|
if st.session_state.board[row][col] is not None: |
|
|
st.session_state.selected_piece = {'row': row, 'col': col} |
|
|
else: |
|
|
|
|
|
from_row = st.session_state.selected_piece['row'] |
|
|
from_col = st.session_state.selected_piece['col'] |
|
|
|
|
|
|
|
|
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.last_move = None |
|
|
st.rerun() |
|
|
|
|
|
|
|
|
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"> |
|
|
""" |
|
|
|
|
|
|
|
|
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> |
|
|
""" |
|
|
|
|
|
|
|
|
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> |
|
|
""" |
|
|
|
|
|
|
|
|
component_value = st.components.v1.html(chess_board_html, height=1200) |
|
|
if component_value: |
|
|
st.session_state.last_move = component_value |
|
|
handle_move() |
|
|
|
|
|
|
|
|
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() |
