|
|
import streamlit as st |
|
|
import streamlit.components.v1 as components |
|
|
|
|
|
|
|
|
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 'move_made' not in st.session_state: |
|
|
st.session_state.move_made = False |
|
|
|
|
|
|
|
|
st.set_page_config(layout="wide") |
|
|
|
|
|
|
|
|
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) { |
|
|
// 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> |
|
|
</body> |
|
|
</html> |
|
|
""" |
|
|
|
|
|
|
|
|
def chess_board_component(): |
|
|
component_value = components.html( |
|
|
chess_board_html, |
|
|
height=1200, |
|
|
key="chess_board" |
|
|
) |
|
|
return component_value |
|
|
|
|
|
|
|
|
clicked_square = chess_board_component() |
|
|
|
|
|
if clicked_square: |
|
|
try: |
|
|
|
|
|
data = json.loads(clicked_square) |
|
|
row, col = data['row'], 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} |
|
|
st.session_state.move_made = True |
|
|
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.move_made = True |
|
|
|
|
|
if st.session_state.move_made: |
|
|
st.rerun() |
|
|
|
|
|
except Exception as e: |
|
|
st.error(f"Error processing move: {str(e)}") |
|
|
|
|
|
|
|
|
if st.button('Reset Game', key='reset'): |
|
|
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.move_made = False |
|
|
st.rerun() |
