{% extends "global/Page.html" %}
{% load otree static %}

{% block content %}
<h1>Practice round</h1>
<p>Practice moving PAC-MAN around the maze</p>
<canvas id="gameCanvas" width="500" height="500" style="border:1px solid #000; background-color: black;"></canvas>
<p id="fruitCounter" style="color: white; text-align: center; margin-top: 10px;">Collected: <span id="fruitCount">0</span> / 20</p>
{% endblock %}

{% block scripts %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const canvasSize = 500;
    const numRows = 13;
    const numCols = 13;
    const cellSize = canvasSize / numRows;
    const offsetX = 0;
    const offsetY = 0;


    const mazeMap = [
        "1111111111111",
        "1000000000001",
        "1011010101101",
        "1010010100101",
        "1000110110001",
        "1010000000101",
        "1010101010101",
        "1010000000101",
        "1000110110001",
        "1010010100101",
        "1011010101101",
        "1000000000001",
        "1111111111111"
    ];

    
    function gridToPixel(grid) {
        return {
            x: offsetX + grid.col * cellSize + cellSize / 2,
            y: offsetY + grid.row * cellSize + cellSize / 2
        };
    }

    let pacmanGrid = { row: 6, col: Number("{{ pac_column }}") };
    let pacmanState = gridToPixel(pacmanGrid);
    let trialEnded = false;

    function drawMaze() {
        const gap = 3;
        for (let row = 0; row < numRows; row++) {
            for (let col = 0; col < numCols; col++) {
                if (mazeMap[row][col] === "1") {
                    ctx.fillStyle = "blue";
                    ctx.fillRect(offsetX + col * cellSize + gap,
                                 offsetY + row * cellSize + gap,
                                 cellSize - 2 * gap,
                                 cellSize - 2 * gap);
                }
            }
        }
    }

    function drawPacman() {
        ctx.fillStyle = "yellow";
        ctx.beginPath();
        ctx.arc(pacmanState.x, pacmanState.y, cellSize * 0.4, 0, 2 * Math.PI);
        ctx.fill();
    }

    function drawGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawMaze();
        drawPacman();
    }
    drawGame();

    function getDeltaFromKey(key) {
        switch (key.toLowerCase()) {
            case 'arrowup': return { dRow: -1, dCol: 0 };
            case 'arrowdown': return { dRow: 1, dCol: 0 };
            case 'arrowleft': return { dRow: 0, dCol: -1 };
            case 'arrowright': return { dRow: 0, dCol: 1 };
            default: return null;
        }
    }

    document.addEventListener('keydown', function(e) {
        const delta = getDeltaFromKey(e.key);
        if (!delta) return;

        e.preventDefault(); // Stop page from scrolling

        const newRow = pacmanGrid.row + delta.dRow;
        const newCol = pacmanGrid.col + delta.dCol;

        // Check boundaries & walls
        if (newRow < 0 || newRow >= numRows || newCol < 0 || newCol >= numCols) return;
        if (mazeMap[newRow][newCol] !== "0") return;

        // Update PAC-MAN position
        pacmanGrid = { row: newRow, col: newCol };
        pacmanState = gridToPixel(pacmanGrid);

        // **Redraw the canvas**
        drawGame();
    });
});
</script>
{% endblock %}