Update app.py

app.py

@@ -1,6 +1,9 @@
 import gradio as gr
 from PIL import Image, ImageDraw
 import numpy as np
+import math
+from io import BytesIO
+import base64
 
 # Constants
 BOARD_SIZE = 9
@@ -11,173 +14,205 @@ WHITE_SOLDIER = 1
 BLACK_SOLDIER = 2
 KING = 3
 CASTLE = (4, 4)  # Center of the 9x9 board (0-based indices)
-ESCAPES = [(i, j) for i in range(BOARD_SIZE) for j in range(BOARD_SIZE) if i == 0 or i == BOARD_SIZE-1 or j == 0 or j == BOARD_SIZE-1]
-
-# Colors for visualization
-COLOR_EMPTY = (255, 255, 255)  # White for regular empty cells
-COLOR_CASTLE = (150, 150, 150)  # Gray for the castle
-COLOR_ESCAPE = (0, 255, 0)  # Green for escape tiles
-COLOR_WHITE = (255, 255, 255)  # White for white soldiers
-COLOR_BLACK = (0, 0, 0)  # Black for black soldiers
-COLOR_KING = (255, 215, 0)  # Gold for the king
+CAMPS = [
+    (0,3), (0,4), (0,5), (1,4),  # Top camp
+    (8,3), (8,4), (8,5), (7,4),  # Bottom camp
+    (3,0), (4,0), (5,0), (4,1),  # Left camp
+    (3,8), (4,8), (5,8), (4,7)   # Right camp
+]
+ESCAPES = [(i,j) for i in [0,8] for j in range(BOARD_SIZE)] + [(i,j) for j in [0,8] for i in range(BOARD_SIZE) if (i,j) not in CAMPS]
+COLORS = {
+    'empty': '#FFFFFF',  # White for regular empty cells
+    'castle': '#808080',  # Gray for castle
+    'camp': '#A0522D',    # Brown for camps
+    'escape': '#00FF00',  # Green for escape tiles
+    'white': '#FFFFFF',   # White for white soldiers
+    'black': '#000000',   # Black for black soldiers
+    'king': '#FFD700',    # Gold for king
+    'highlight': '#FFFF00' # Yellow for selected cell
+}
 
 # Game state class
 class TablutState:
     def __init__(self):
-        """Initialize the game state with an empty board and set White as the starting player."""
         self.board = np.zeros((BOARD_SIZE, BOARD_SIZE), dtype=int)
         self.turn = 'WHITE'
+        self.black_in_camps = set(CAMPS)  # Track black pieces in camps
         self.setup_initial_position()
+        self.move_history = []  # To detect draws
 
     def setup_initial_position(self):
-        """Set up the initial board configuration for Tablut."""
-        # Place the king at the center (castle)
         self.board[4, 4] = KING
-        # Place white soldiers around the king in a cross pattern
         white_positions = [(3,4), (4,3), (4,5), (5,4), (2,4), (4,2), (4,6), (6,4)]
         for pos in white_positions:
             self.board[pos] = WHITE_SOLDIER
-        # Place black soldiers in groups at the edges
-        black_positions = [(0,3), (0,4), (0,5), (1,4), (8,3), (8,4), (8,5), (7,4),
-                           (3,0), (4,0), (5,0), (4,1), (3,8), (4,8), (5,8), (4,7)]
-        for pos in black_positions:
+        for pos in CAMPS:
             self.board[pos] = BLACK_SOLDIER
 
+    def copy(self):
+        new_state = TablutState()
+        new_state.board = self.board.copy()
+        new_state.turn = self.turn
+        new_state.black_in_camps = self.black_in_camps.copy()
+        new_state.move_history = self.move_history.copy()
+        return new_state
+
 # Utility functions
-def parse_position(s):
-    """
-    Convert a position string (e.g., 'E5') to board coordinates (row, col).
-    A1 is top-left (0,0), I9 is bottom-right (8,8).
-    """
-    s = s.strip().upper()
-    if len(s) != 2 or not s[0].isalpha() or not s[1].isdigit():
-        raise ValueError("Position must be a letter (A-I) followed by a number (1-9)")
-    col = ord(s[0]) - ord('A')
-    row = int(s[1]) - 1
-    if not (0 <= col < BOARD_SIZE and 0 <= row < BOARD_SIZE):
-        raise ValueError("Position out of bounds")
+def pos_to_coord(pos):
+    """Convert (row, col) to board coordinate (e.g., (4,4) -> 'E5')."""
+    row, col = pos
+    return f"{chr(ord('A') + col)}{row + 1}"
+
+def coord_to_pos(coord):
+    """Convert board coordinate (e.g., 'E5') to (row, col)."""
+    col = ord(coord[0].upper()) - ord('A')
+    row = int(coord[1]) - 1
     return (row, col)
 
 def is_adjacent_to_castle(pos):
-    """Check if a position is orthogonally adjacent to the castle."""
     x, y = pos
     cx, cy = CASTLE
     return (abs(x - cx) == 1 and y == cy) or (abs(y - cy) == 1 and x == cx)
 
-def get_friendly_pieces(friendly):
-    """Return the piece types that can capture for the current player."""
-    if friendly == 'WHITE':
-        return [WHITE_SOLDIER, KING]  # Both white soldiers and king can capture
-    else:
-        return [BLACK_SOLDIER]  # Only black soldiers can capture
+def get_friendly_pieces(turn):
+    return [WHITE_SOLDIER, KING] if turn == 'WHITE' else [BLACK_SOLDIER]
+
+def manhattan_distance(pos1, pos2):
+    return abs(pos1[0] - pos2[0]) + abs(pos1[1] - pos2[1])
 
 # Game logic functions
 def is_valid_move(state, from_pos, to_pos):
-    """Validate if a move from from_pos to to_pos is legal."""
     if from_pos == to_pos:
         return False
     piece = state.board[from_pos]
-    # Check if the piece belongs to the current player
     if state.turn == 'WHITE' and piece not in [WHITE_SOLDIER, KING]:
         return False
     if state.turn == 'BLACK' and piece != BLACK_SOLDIER:
         return False
-    # Check if destination is empty
     if state.board[to_pos] != EMPTY:
         return False
-    # Check if move is orthogonal (like a rook)
     from_row, from_col = from_pos
     to_row, to_col = to_pos
     if from_row != to_row and from_col != to_col:
         return False
-    # Check if the path is clear
+    # Path must be clear
     if from_row == to_row:
         step = 1 if to_col > from_col else -1
         for col in range(from_col + step, to_col, step):
             if state.board[from_row, col] != EMPTY:
                 return False
-    elif from_col == to_col:
+    else:
         step = 1 if to_row > from_row else -1
         for row in range(from_row + step, to_row, step):
             if state.board[row, from_col] != EMPTY:
                 return False
-    # Only the king can move to the castle
+    # Castle is only for the king
     if to_pos == CASTLE and piece != KING:
         return False
+    # Camp restrictions
+    if to_pos in CAMPS:
+        if state.turn == 'WHITE' or (state.turn == 'BLACK' and from_pos not in state.black_in_camps):
+            return False
     return True
 
+def get_legal_moves(state, from_pos):
+    piece = state.board[from_pos]
+    if not piece or (state.turn == 'WHITE' and piece not in [WHITE_SOLDIER, KING]) or \
+       (state.turn == 'BLACK' and piece != BLACK_SOLDIER):
+        return []
+    row, col = from_pos
+    moves = []
+    for r in range(BOARD_SIZE):
+        if r != row:
+            to_pos = (r, col)
+            if is_valid_move(state, from_pos, to_pos):
+                moves.append(to_pos)
+    for c in range(BOARD_SIZE):
+        if c != col:
+            to_pos = (row, c)
+            if is_valid_move(state, from_pos, to_pos):
+                moves.append(to_pos)
+    return moves
+
 def is_soldier_captured(state, pos, friendly):
-    """Check if a soldier at pos is captured by the friendly player."""
     x, y = pos
     friendly_pieces = get_friendly_pieces(friendly)
-    # Standard capture: between two friendly pieces
+    # Standard capture
     if y > 0 and y < BOARD_SIZE - 1:
         if state.board[x, y-1] in friendly_pieces and state.board[x, y+1] in friendly_pieces:
             return True
     if x > 0 and x < BOARD_SIZE - 1:
         if state.board[x-1, y] in friendly_pieces and state.board[x+1, y] in friendly_pieces:
             return True
-    # Capture against the castle
+    # Capture against castle or camp
     if is_adjacent_to_castle(pos):
         cx, cy = CASTLE
-        if x == cx:  # Same row as castle
-            if y < cy and y > 0 and state.board[x, y-1] in friendly_pieces:  # Left of castle
+        if x == cx:
+            if y < cy and y > 0 and state.board[x, y-1] in friendly_pieces:
                 return True
-            elif y > cy and y < BOARD_SIZE - 1 and state.board[x, y+1] in friendly_pieces:  # Right of castle
+            elif y > cy and y < BOARD_SIZE - 1 and state.board[x, y+1] in friendly_pieces:
                 return True
-        elif y == cy:  # Same column as castle
-            if x < cx and x > 0 and state.board[x-1, y] in friendly_pieces:  # Above castle
+        elif y == cy:
+            if x < cx and x > 0 and state.board[x-1, y] in friendly_pieces:
                 return True
-            elif x > cx and x < BOARD_SIZE - 1 and state.board[x+1, y] in friendly_pieces:  # Below castle
+            elif x > cx and x < BOARD_SIZE - 1 and state.board[x+1, y] in friendly_pieces:
                 return True
+    if pos in CAMPS:
+        return False  # Cannot capture pieces in camps
+    for camp in CAMPS:
+        if pos == (camp[0] + 1, camp[1]) and state.board[camp] in friendly_pieces + [EMPTY]:
+            return False
+        elif pos == (camp[0] - 1, camp[1]) and state.board[camp] in friendly_pieces + [EMPTY]:
+            return False
+        elif pos == (camp[0], camp[1] + 1) and state.board[camp] in friendly_pieces + [EMPTY]:
+            return False
+        elif pos == (camp[0], camp[1] - 1) and state.board[camp] in friendly_pieces + [EMPTY]:
+            return False
     return False
 
 def is_king_captured(state, pos):
-    """Check if the king at pos is captured by Black."""
     x, y = pos
     if pos == CASTLE:
-        # King in castle: must be surrounded on all four sides by black soldiers
-        adjacent = [(x-1, y), (x+1, y), (x, y-1), (x, y+1)]
-        for adj in adjacent:
-            if not (0 <= adj[0] < BOARD_SIZE and 0 <= adj[1] < BOARD_SIZE and state.board[adj] == BLACK_SOLDIER):
-                return False
-        return True
+        return all(state.board[x + dx, y + dy] == BLACK_SOLDIER for dx, dy in [(-1,0), (1,0), (0,-1), (0,1)]
+                   if 0 <= x + dx < BOARD_SIZE and 0 <= y + dy < BOARD_SIZE)
     elif is_adjacent_to_castle(pos):
-        # King adjacent to castle: must be surrounded on the three free sides
         cx, cy = CASTLE
         dx = cx - x
         dy = cy - y
         free_directions = [d for d in [(-1,0), (1,0), (0,-1), (0,1)] if d != (dx, dy)]
-        for d in free_directions:
-            check_pos = (x + d[0], y + d[1])
-            if not (0 <= check_pos[0] < BOARD_SIZE and 0 <= check_pos[1] < BOARD_SIZE and state.board[check_pos] == BLACK_SOLDIER):
-                return False
-        return True
+        return all(state.board[x + d[0], y + d[1]] == BLACK_SOLDIER for d in free_directions
+                   if 0 <= x + d[0] < BOARD_SIZE and 0 <= y + d[1] < BOARD_SIZE)
     else:
-        # King elsewhere: captured like a soldier by black pieces
         return is_soldier_captured(state, pos, 'BLACK')
 
-def apply_captures(state):
-    """Apply capture rules after a move."""
+def apply_move(state, from_pos, to_pos):
+    new_state = state.copy()
+    piece = new_state.board[from_pos]
+    new_state.board[to_pos] = piece
+    new_state.board[from_pos] = EMPTY
+    if new_state.turn == 'BLACK' and from_pos in new_state.black_in_camps and to_pos not in CAMPS:
+        new_state.black_in_camps.discard(from_pos)
+    # Apply captures
     captures = []
-    opponent = 'BLACK' if state.turn == 'WHITE' else 'WHITE'
-    # Check opponent soldiers
+    opponent = 'BLACK' if new_state.turn == 'WHITE' else 'WHITE'
     for x in range(BOARD_SIZE):
         for y in range(BOARD_SIZE):
-            if state.board[x, y] == (WHITE_SOLDIER if opponent == 'WHITE' else BLACK_SOLDIER):
-                if is_soldier_captured(state, (x, y), state.turn):
+            if new_state.board[x, y] == (WHITE_SOLDIER if opponent == 'WHITE' else BLACK_SOLDIER):
+                if is_soldier_captured(new_state, (x, y), new_state.turn):
                     captures.append((x, y))
-    # Check king if opponent is White
     if opponent == 'WHITE':
-        king_pos = find_king_position(state)
-        if king_pos and is_king_captured(state, king_pos):
+        king_pos = find_king_position(new_state)
+        if king_pos and is_king_captured(new_state, king_pos):
             captures.append(king_pos)
-    # Remove captured pieces
     for pos in captures:
-        state.board[pos] = EMPTY
+        new_state.board[pos] = EMPTY
+    new_state.turn = 'BLACK' if new_state.turn == 'WHITE' else 'WHITE'
+    # Update move history for draw detection
+    board_tuple = tuple(new_state.board.flatten())
+    new_state.move_history.append(board_tuple)
+    return new_state
 
 def find_king_position(state):
-    """Find the current position of the king on the board."""
     for x in range(BOARD_SIZE):
         for y in range(BOARD_SIZE):
             if state.board[x, y] == KING:
@@ -185,97 +220,180 @@ def find_king_position(state):
     return None
 
 def check_game_status(state):
-    """Check if the game has ended and determine the winner."""
     king_pos = find_king_position(state)
     if king_pos is None:
-        return "BLACK WINS"  # King captured
-    elif king_pos in ESCAPES:
-        return "WHITE WINS"  # King reached an escape tile
+        return "BLACK WINS"
+    if king_pos in ESCAPES:
+        return "WHITE WINS"
+    # Check for no legal moves
+    pieces = []
+    for x in range(BOARD_SIZE):
+        for y in range(BOARD_SIZE):
+            if (state.turn == 'WHITE' and state.board[x, y] in [WHITE_SOLDIER, KING]) or \
+               (state.turn == 'BLACK' and state.board[x, y] == BLACK_SOLDIER):
+                pieces.append((x, y))
+    has_moves = False
+    for pos in pieces:
+        if get_legal_moves(state, pos):
+            has_moves = True
+            break
+    if not has_moves:
+        return "BLACK WINS" if state.turn == 'WHITE' else "WHITE WINS"
+    # Check for draw (same state twice)
+    board_tuple = tuple(state.board.flatten())
+    if state.move_history.count(board_tuple) >= 2:
+        return "DRAW"
+    return "CONTINUE"
+
+# AI implementation
+def evaluate_state(state):
+    status = check_game_status(state)
+    if status == "WHITE WINS":
+        return 1000
+    elif status == "BLACK WINS":
+        return -1000
+    elif status == "DRAW":
+        return 0
+    king_pos = find_king_position(state)
+    if not king_pos:
+        return -1000
+    # Heuristic: distance from king to nearest escape
+    min_escape_dist = min(manhattan_distance(king_pos, e) for e in ESCAPES)
+    white_pieces = sum(1 for x in range(BOARD_SIZE) for y in range(BOARD_SIZE) if state.board[x, y] == WHITE_SOLDIER)
+    black_pieces = sum(1 for x in range(BOARD_SIZE) for y in range(BOARD_SIZE) if state.board[x, y] == BLACK_SOLDIER)
+    # Encourage Black to surround king, White to escape
+    if state.turn == 'WHITE':
+        return -min_escape_dist * 10 + white_pieces * 5 - black_pieces * 3
+    else:
+        return min_escape_dist * 10 - white_pieces * 3 + black_pieces * 5
+
+def minimax(state, depth, alpha, beta, maximizing_player):
+    if depth == 0 or check_game_status(state) != "CONTINUE":
+        return evaluate_state(state), None
+    if maximizing_player:
+        max_eval = -math.inf
+        best_move = None
+        pieces = [(x, y) for x in range(BOARD_SIZE) for y in range(BOARD_SIZE) if state.board[x, y] == BLACK_SOLDIER]
+        for from_pos in pieces:
+            for to_pos in get_legal_moves(state, from_pos):
+                new_state = apply_move(state, from_pos, to_pos)
+                eval_score, _ = minimax(new_state, depth - 1, alpha, beta, False)
+                if eval_score > max_eval:
+                    max_eval = eval_score
+                    best_move = (from_pos, to_pos)
+                alpha = max(alpha, eval_score)
+                if beta <= alpha:
+                    break
+        return max_eval, best_move
     else:
-        return "CONTINUE"
+        min_eval = math.inf
+        best_move = None
+        pieces = [(x, y) for x in range(BOARD_SIZE) for y in range(BOARD_SIZE) if state.board[x, y] in [WHITE_SOLDIER, KING]]
+        for from_pos in pieces:
+            for to_pos in get_legal_moves(state, from_pos):
+                new_state = apply_move(state, from_pos, to_pos)
+                eval_score, _ = minimax(new_state, depth - 1, alpha, beta, True)
+                if eval_score < min_eval:
+                    min_eval = eval_score
+                    best_move = (from_pos, to_pos)
+                beta = min(beta, eval_score)
+                if beta <= alpha:
+                    break
+        return min_eval, best_move
 
-def generate_board_image(state):
-    """Generate an image of the current board state."""
-    img = Image.new('RGB', (BOARD_SIZE * CELL_SIZE, BOARD_SIZE * CELL_SIZE), color=COLOR_EMPTY)
-    draw = ImageDraw.Draw(img)
-    # Draw grid lines
-    for i in range(BOARD_SIZE + 1):
-        draw.line([(i * CELL_SIZE, 0), (i * CELL_SIZE, BOARD_SIZE * CELL_SIZE)], fill=(0,0,0), width=1)
-        draw.line([(0, i * CELL_SIZE), (BOARD_SIZE * CELL_SIZE, i * CELL_SIZE)], fill=(0,0,0), width=1)
-    # Draw special cells
+def ai_move(state):
+    if state.turn != 'BLACK':
+        return state, "Not AI's turn", None
+    depth = 3  # Adjustable for performance
+    _, move = minimax(state, depth, -math.inf, math.inf, True)
+    if move:
+        from_pos, to_pos = move
+        new_state = apply_move(state, from_pos, to_pos)
+        return new_state, f"AI moved from {pos_to_coord(from_pos)} to {pos_to_coord(to_pos)}", None
+    return state, "AI has no moves", None
+
+# SVG board generation
+def generate_board_svg(state, selected_pos=None):
+    width = BOARD_SIZE * CELL_SIZE
+    height = BOARD_SIZE * CELL_SIZE
+    svg = [f'<svg width="{width}" height="{height}" xmlns="http://www.w3.org/2000/svg">']
+    # Draw cells
     for x in range(BOARD_SIZE):
         for y in range(BOARD_SIZE):
-            if (x, y) == CASTLE:
-                color = COLOR_CASTLE
-            elif (x, y) in ESCAPES:
-                color = COLOR_ESCAPE
-            else:
-                color = COLOR_EMPTY
-            draw.rectangle([(y * CELL_SIZE, x * CELL_SIZE), ((y + 1) * CELL_SIZE, (x + 1) * CELL_SIZE)], fill=color)
+            pos = (x, y)
+            fill = COLORS['empty']
+            if pos == CASTLE:
+                fill = COLORS['castle']
+            elif pos in CAMPS:
+                fill = COLORS['camp']
+            elif pos in ESCAPES:
+                fill = COLORS['escape']
+            if pos == selected_pos:
+                fill = COLORS['highlight']
+            svg.append(f'<rect x="{y * CELL_SIZE}" y="{x * CELL_SIZE}" width="{CELL_SIZE}" height="{CELL_SIZE}" fill="{fill}" stroke="black" stroke-width="1"/>')
     # Draw pieces
     for x in range(BOARD_SIZE):
         for y in range(BOARD_SIZE):
             piece = state.board[x, y]
             if piece != EMPTY:
-                center = (y * CELL_SIZE + CELL_SIZE // 2, x * CELL_SIZE + CELL_SIZE // 2)
-                if piece == WHITE_SOLDIER:
-                    draw.ellipse([(center[0] - PIECE_RADIUS, center[1] - PIECE_RADIUS),
-                                  (center[0] + PIECE_RADIUS, center[1] + PIECE_RADIUS)], fill=COLOR_WHITE)
-                elif piece == BLACK_SOLDIER:
-                    draw.ellipse([(center[0] - PIECE_RADIUS, center[1] - PIECE_RADIUS),
-                                  (center[0] + PIECE_RADIUS, center[1] + PIECE_RADIUS)], fill=COLOR_BLACK)
-                elif piece == KING:
-                    draw.ellipse([(center[0] - PIECE_RADIUS, center[1] - PIECE_RADIUS),
-                                  (center[0] + PIECE_RADIUS, center[1] + PIECE_RADIUS)], fill=COLOR_KING)
-    return img
+                cx = y * CELL_SIZE + CELL_SIZE // 2
+                cy = x * CELL_SIZE + CELL_SIZE // 2
+                color = COLORS['white'] if piece == WHITE_SOLDIER else COLORS['black'] if piece == BLACK_SOLDIER else COLORS['king']
+                svg.append(f'<circle cx="{cx}" cy="{cy}" r="{PIECE_RADIUS}" fill="{color}" stroke="black" stroke-width="1"/>')
+    # Draw grid labels
+    for i in range(BOARD_SIZE):
+        svg.append(f'<text x="5" y="{i * CELL_SIZE + CELL_SIZE // 2 + 5}" fill="black">{BOARD_SIZE - i}</text>')
+        svg.append(f'<text x="{i * CELL_SIZE + CELL_SIZE // 2 - 5}" y="{height - 10}" fill="black">{chr(ord("A") + i)}</text>')
+    svg.append('</svg>')
+    return ''.join(svg)
+
+def svg_to_image(svg_content):
+    img = Image.new('RGB', (BOARD_SIZE * CELL_SIZE, BOARD_SIZE * CELL_SIZE), color='white')
+    # For Gradio, we encode SVG as base64 to display in HTML
+    svg_bytes = svg_content.encode('utf-8')
+    svg_base64 = base64.b64encode(svg_bytes).decode('utf-8')
+    return svg_base64
 
 # Gradio interface functions
-def make_move(state, from_str, to_str):
-    """Process a player's move."""
-    try:
-        from_pos = parse_position(from_str)
-        to_pos = parse_position(to_str)
-    except ValueError as e:
-        return state, str(e), generate_board_image(state), state.turn
-    if not is_valid_move(state, from_pos, to_pos):
-        return state, "Invalid move", generate_board_image(state), state.turn
-    # Apply the move
-    state.board[to_pos] = state.board[from_pos]
-    state.board[from_pos] = EMPTY
-    # Apply captures
-    apply_captures(state)
-    # Check game status
-    status = check_game_status(state)
-    if status != "CONTINUE":
-        message = status
+def click_board(state, selected_pos, evt: gr.SelectData):
+    if state.turn != 'WHITE':
+        return state, "It's the AI's turn", None, selected_pos
+    x = evt.index[1] // CELL_SIZE
+    y = evt.index[0] // CELL_SIZE
+    pos = (x, y)
+    if selected_pos is None:
+        # Select a piece
+        if state.board[pos] in [WHITE_SOLDIER, KING]:
+            return state, f"Selected {pos_to_coord(pos)}", None, pos
+        else:
+            return state, "Select a White piece or King", None, None
     else:
-        message = ""
-        state.turn = 'BLACK' if state.turn == 'WHITE' else 'WHITE'
-    return state, message, generate_board_image(state), state.turn
+        # Try to move
+        if is_valid_move(state, selected_pos, pos):
+            new_state = apply_move(state, selected_pos, pos)
+            status = check_game_status(new_state)
+            if status != "CONTINUE":
+                return new_state, status, None, None
+            # Trigger AI move
+            ai_state, ai_message, _ = ai_move(new_state)
+            final_status = check_game_status(ai_state)
+            return ai_state, f"Your move to {pos_to_coord(pos)}. {ai_message}. {final_status if final_status != 'CONTINUE' else ''}", None, None
+        else:
+            return state, "Invalid move", None, None
 
 def new_game():
-    """Start a new game."""
     state = TablutState()
-    return state, "", generate_board_image(state), state.turn
+    return state, "New game started. Your turn (White).", generate_board_svg(state), None
 
-# Set up the Gradio interface
+# Gradio interface
 with gr.Blocks(title="Tablut Game") as demo:
     state = gr.State()
-    board_image = gr.Image(label="Board", type="pil")
-    turn_label = gr.Label(label="Turn")
+    selected_pos = gr.State(value=None)
+    board_html = gr.HTML(label="Board")
     message_label = gr.Label(label="Message")
-    with gr.Row():
-        from_input = gr.Textbox(label="From (e.g., E5)", placeholder="Enter starting position")
-        to_input = gr.Textbox(label="To (e.g., E6)", placeholder="Enter destination")
-    submit_button = gr.Button("Make Move")
     new_game_button = gr.Button("New Game")
+    board_html.select(fn=click_board, inputs=[state, selected_pos], outputs=[state, message_label, board_html, selected_pos])
+    new_game_button.click(fn=new_game, outputs=[state, message_label, board_html, selected_pos])
+    demo.load(fn=new_game, outputs=[state, message_label, board_html, selected_pos])
 
-    # Connect functions to buttons
-    submit_button.click(fn=make_move, inputs=[state, from_input, to_input],
-                        outputs=[state, message_label, board_image, turn_label])
-    new_game_button.click(fn=new_game, outputs=[state, message_label, board_image, turn_label])
-    # Initialize the game on load
-    demo.load(fn=new_game, outputs=[state, message_label, board_image, turn_label])
-
-# Launch the app
-demo.launch()
+# Note: demo.launch() is not needed for HF Spaces