|
|
import streamlit as st |
|
|
import json |
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
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; |
|
|
}} |
|
|
.white {{ |
|
|
background: #e8e8e8; |
|
|
}} |
|
|
.black {{ |
|
|
background: #b0b0b0; |
|
|
}} |
|
|
.selected {{ |
|
|
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"> |
|
|
""" |
|
|
|
|
|
|
|
|
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="handleClick({row}, {col})" |
|
|
data-row="{row}" |
|
|
data-col="{col}"> |
|
|
{piece} |
|
|
</div> |
|
|
""" |
|
|
|
|
|
|
|
|
chess_board_html += """ |
|
|
</div> |
|
|
<script> |
|
|
function handleClick(row, col) { |
|
|
const data = { |
|
|
row: row, |
|
|
col: col |
|
|
}; |
|
|
window.parent.postMessage({ |
|
|
type: 'streamlit:message', |
|
|
data: data |
|
|
}, '*'); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
""" |
|
|
|
|
|
|
|
|
st.components.v1.html(chess_board_html, height=1200) |
|
|
|
|
|
|
|
|
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: |
|
|
|
|
|
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]: |
|
|
|
|
|
st.session_state.selected_piece = {'row': row, 'col': col} |
|
|
|
|
|
|
|
|
st.session_state.clicked_square = None |
|
|
st.rerun() |
|
|
|
|
|
|
|
|
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.rerun() |
