L33tChess

index.py

from flask import Flask, session, render_template_string, request, redirect
import chess
import chess.svg
import os

app = Flask(__name__)
app.secret_key = os.getenv("FLAG", "your_flag")

def render_piece_svg(piece):
    return chess.svg.piece(piece, size=50)


def describe_move(move_uci, board):
    try:
        move = chess.Move.from_uci(move_uci)

        piece = board.piece_at(move.from_square)
        if piece:
            piece_name = piece.piece_type
            piece_names = {
                chess.PAWN: "pawn",
                chess.KNIGHT: "knight",
                chess.BISHOP: "bishop",
                chess.ROOK: "rook",
                chess.QUEEN: "queen",
                chess.KING: "king"
            }
            color = "white" if piece.color == chess.WHITE else "black"
            piece_str = piece_names.get(piece_name, "piece")
            from_square = chess.square_name(move.from_square)
            to_square = chess.square_name(move.to_square)
            msg =  f"moving the {color} {piece_str} from {from_square} to {to_square}"
        else:
            msg = "no piece on the source square."

        if move in board.legal_moves:
            board.push(move)
            session["fen"] = board.fen()
            if board.is_checkmate():
                msg = "<b>Checkmate:</b> "+msg + " #"
            elif board.is_check():
                msg = "Check: "+msg
     
            return '<h3 id="msg" style="color:green">'+msg+'</h3>'
        
        else:
            return '<h3 id="msg" style="color:red">Illegal: '+msg+'</h3>'

        
    except Exception as e:
        return '<h3 hidden id="msg" style="color:red">'+str(e)+'</h3>'


def create_template():
    return  '''
        <title>Chess</title>
        <style>
            #board {
               display: grid;
                grid-template-columns: repeat(8, 60px);
                width: 480px;
                margin: auto;
            }
            .square {
                width: 60px;
                height: 60px;
                background-color: #f0d9b5;
                border: 1px solid black;
                position: relative;
            }
            .square.dark {
                background-color: #b58863;
            }
            .piece {
                position: absolute;
                cursor: grab;
            }
            #msg {
                font: italic bold 16px Arial, sans-serif;
                text-align: center;
            }

        </style>
        <h2 style="text-align:center">Turn: {{ "White" if turn else "Black" }}</h2>''' + session.get("msg", "")  + \
        '''<button onclick="location.href='/reset'" style="display:block; margin: 20px auto;">Reset</button>
        <div id="board">
           {% for rank in range(8, 0, -1) %}
    {% set rank_index = loop.index0 %}
    {% for file in "abcdefgh" %}
        {% set file_index = loop.index0 %}
        {% set square = file + rank|string %}
        {% set is_dark = (file_index + rank_index) % 2 == 1 %}
        <div class="square {% if is_dark %}dark{% endif %}" data-square="{{ square }}">
            {% if board.get(square) %}
                <div class="piece" data-square="{{ square }}" draggable="true">
                    {{ board[square]|safe }}
                </div>
            {% endif %}
        </div>
    {% endfor %}
{% endfor %}

        </div>

        <script>
            let dragged = null;
            let from = null;

            document.querySelectorAll('.piece').forEach(piece => {
                piece.addEventListener('dragstart', e => {
                    dragged = piece;
                    from = piece.dataset.square;
                });
            });

            document.querySelectorAll('.square').forEach(square => {
                square.addEventListener('dragover', e => e.preventDefault());
                square.addEventListener('drop', e => {
                    e.preventDefault();
                    const to = square.dataset.square;
                    const uci = from + to;
                    fetch('/move', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ move: uci })
                    }).then(() => window.location.reload());
                });
            });
        </script>
  '''
@app.route("/reset")
def reset():
    session.clear()
    return redirect("/")

@app.route("/move", methods=["POST"])
def move():
    fen = session.get("fen", None)
    if not fen:
        board = chess.Board()
        session["fen"] = board.fen()
    else:
        board = chess.Board(fen)
        
    data = request.get_json()
    move_uci = data.get("move")
    session["msg"] = describe_move(move_uci, board)
    return redirect("/")

@app.route("/")
def index():
    fen = session.get("fen", None)
    if not fen:
        board = chess.Board()
        session["fen"] = board.fen()
    else:
        board = chess.Board(fen)

    board_map = {}
    for square in chess.SQUARES:
        piece = board.piece_at(square)
        if piece:
            board_map[chess.square_name(square)] = render_piece_svg(piece)
    return render_template_string(create_template(), board=board_map, turn=board.turn)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)