File size: 5,815 Bytes
1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 1a61bb6 058365b 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 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
import streamlit as st
import streamlit.components.v1 as components
# 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 'move_made' not in st.session_state:
st.session_state.move_made = False
# Use the full width of the page
st.set_page_config(layout="wide")
# 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 improved interaction
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>
"""
# Create a custom component that returns the clicked square
def chess_board_component():
component_value = components.html(
chess_board_html,
height=1200,
key="chess_board"
)
return component_value
# Handle the component interaction
clicked_square = chess_board_component()
if clicked_square:
try:
# Parse the clicked square data
data = json.loads(clicked_square)
row, col = data['row'], data['col']
# Handle the move logic
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.session_state.move_made = True
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.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)}")
# Add a reset button
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() |