Hugging Face's logo

Spaces:
awacke1
/
Chess
Sleeping

App Files Community
Chess
File size: 4,495 Bytes 
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
 
import streamlit as st
import json

# 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

# Create the HTML/JavaScript for the chess board
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">
"""

# 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="handleClick({row}, {col})"
             data-row="{row}"
             data-col="{col}">
            {piece}
        </div>
        """

# Add JavaScript for handling moves
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>
"""

# Display the chess board
st.components.v1.html(chess_board_html, height=1200)

# Handle moves through Streamlit's session state
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:
        # Move the 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]:
        # Select the piece
        st.session_state.selected_piece = {'row': row, 'col': col}
    
    # Clear the clicked square
    st.session_state.clicked_square = None
    st.rerun()

# 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.rerun()