{{ block title }}Plinko Demo{{ endblock }}

{{ block content }}
<style>
    body { background: #f5f5f5; }
    .demo-page {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
        text-align: center;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        color: #2c3e50;
    }
    .demo-page p {
        font-size: 16px;
        line-height: 1.6;
        max-width: 700px;
        margin: 0.5em auto;
        font-family: Georgia, serif;
    }
    #plinko-canvas {
        display: block;
        margin: 1em auto;
        border-radius: 6px;
        border: 2px solid #2c3e50;
    }
    .demo-controls {
        margin: 1em 0;
    }
    .demo-controls button {
        padding: 12px 28px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        border-radius: 5px;
        margin: 0 6px;
        transition: background 0.15s;
    }
    .btn-drop { background: #3498db; color: white; }
    .btn-drop:hover { background: #2980b9; }
    .btn-drop:disabled { background: #bdc3c7; cursor: default; }
    .btn-reset { background: #ecf0f1; color: #2c3e50; border: 1px solid #bdc3c7; }
    .btn-reset:hover { background: #dfe6e9; }
    .demo-result {
        font-size: 18px;
        min-height: 28px;
        margin: 0.5em 0;
        font-weight: 600;
    }
</style>

<div class="demo-page">

    <p>
        Watch the balls bounce down all {{ R }} rows of the board. Try dropping 1 ball, then 10.
        Notice how the average of more balls is on average a better estimate of the drop position.
    </p>

    <canvas id="plinko-canvas" height="800"></canvas>

    <div class="demo-controls">
        <button type="button" class="btn-drop" id="btn-1" onclick="startDrop(1)">Drop 1 ball</button>
        <button type="button" class="btn-drop" id="btn-9" onclick="startDrop(10)">Drop 10 balls</button>
        <button type="button" class="btn-reset" onclick="resetBoard()">Reset</button>
        <span style="margin-left: 18px; color: #888;">Speed:</span>
        <button type="button" class="btn-reset" onclick="changeSpeed(1)">Slower</button>
        <button type="button" class="btn-reset" onclick="changeSpeed(-1)">Faster</button>
    </div>
    <div class="demo-result" id="result-text"></div>

    <p style="font-size: 15px; color: #555; margin-top: 1em; max-width: 700px; margin-left: auto; margin-right: auto; font-family: Georgia, serif;">
        In the actual trials, the board has <strong>{{ R_TRIAL }} rows</strong> instead of {{ R }},
        so the balls will generally spread out more from the drop position.
    </p>

</div>

<script>
(function() {
    var canvas = document.getElementById('plinko-canvas');
    canvas.width = canvas.parentElement.clientWidth;
    var ctx = canvas.getContext('2d');
    var W = canvas.width;
    var H = canvas.height;

    var NUM_ROWS = {{ R }};
    var PEG_RADIUS = 3;
    var BALL_RADIUS = 4;
    var DROP_POS = 0;
    var DISPLAY_OFFSET = 500;

    function slotDisplayLabel(s) {
        return s / 2 + DISPLAY_OFFSET;
    }

    var BOARD_TOP = 90;
    var BOARD_BOTTOM = H - 120;
    var BOARD_LEFT = 50;
    var BOARD_RIGHT = W - 50;
    var BOARD_H = BOARD_BOTTOM - BOARD_TOP;
    var BOARD_W = BOARD_RIGHT - BOARD_LEFT;

    var SLOT_RANGE = 40;

    function slotToX(slot) {
        return BOARD_LEFT + (slot + SLOT_RANGE) / (2 * SLOT_RANGE) * BOARD_W;
    }
    function rowToY(row) {
        return BOARD_TOP + (row / NUM_ROWS) * BOARD_H;
    }

    var landedBalls = [];
    var activeBalls = [];
    var animating = false;
    var showMean = false;

    // Animation speed: index into speed levels (lower STEP_MS = faster)
    var speedLevels = [120, 80, 50, 35, 20];
    var speedIndex = 2; // default: 50ms
    var STEP_MS = speedLevels[speedIndex];

    var COLORS = ['#e74c3c','#3498db','#2ecc71','#f39c12','#9b59b6',
                  '#1abc9c','#e67e22','#c0392b','#2980b9','#27ae60',
                  '#d35400','#8e44ad','#16a085','#f1c40f','#e74c3c'];

    function drawNumberLine(y, showLabelsBelow) {
        ctx.strokeStyle = '#8090a0';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(BOARD_LEFT, y);
        ctx.lineTo(BOARD_RIGHT, y);
        ctx.stroke();

        for (var s = -SLOT_RANGE; s <= SLOT_RANGE; s += 2) {
            var sx = slotToX(s);
            if (sx < BOARD_LEFT - 2 || sx > BOARD_RIGHT + 2) continue;
            var displayVal = slotDisplayLabel(s);
            if (displayVal % 10 === 0) {
                ctx.strokeStyle = '#8090a0';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(sx, y - 4);
                ctx.lineTo(sx, y + 8);
                ctx.stroke();
                if (showLabelsBelow) {
                    ctx.fillStyle = '#9aa8b8';
                    ctx.font = 'bold 14px Helvetica Neue, sans-serif';
                    ctx.textAlign = 'center';
                    ctx.fillText(displayVal.toString(), sx, y + 24);
                } else {
                    ctx.fillStyle = '#9aa8b8';
                    ctx.font = 'bold 14px Helvetica Neue, sans-serif';
                    ctx.textAlign = 'center';
                    ctx.fillText(displayVal.toString(), sx, y - 10);
                }
            } else {
                ctx.strokeStyle = '#6a7a8a';
                ctx.lineWidth = 1.5;
                ctx.beginPath();
                ctx.moveTo(sx, y - 3);
                ctx.lineTo(sx, y + 5);
                ctx.stroke();
            }
        }
    }

    function drawBoard() {
        ctx.fillStyle = '#1a1a2e';
        ctx.fillRect(0, 0, W, H);

        // Top number line
        drawNumberLine(45, false);

        // Draw ALL pegs, every row
        ctx.fillStyle = '#5a6070';
        for (var r = 1; r < NUM_ROWS; r++) {
            for (var s = -SLOT_RANGE; s <= SLOT_RANGE; s++) {
                if ((s + r) % 2 !== 0) continue;
                var px = slotToX(s);
                var py = rowToY(r);
                if (px < BOARD_LEFT - 5 || px > BOARD_RIGHT + 5) continue;
                ctx.beginPath();
                ctx.arc(px, py, PEG_RADIUS, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        // Drop position indicator
        var dx = slotToX(DROP_POS);
        ctx.fillStyle = '#e74c3c';
        ctx.beginPath();
        ctx.moveTo(dx, BOARD_TOP - 6);
        ctx.lineTo(dx - 8, BOARD_TOP - 16);
        ctx.lineTo(dx + 8, BOARD_TOP - 16);
        ctx.closePath();
        ctx.fill();
        ctx.fillStyle = '#bbb';
        ctx.font = '15px Helvetica Neue, sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Drop position (' + DISPLAY_OFFSET + ')', dx, BOARD_TOP - 20);

        // Bottom number line
        var landingY = BOARD_BOTTOM + 12;
        drawNumberLine(landingY, true);

        // Landed balls on the number line, stacking downward
        var maxStacks = {};
        for (var i = 0; i < landedBalls.length; i++) {
            var b = landedBalls[i];
            if (maxStacks[b.pos] === undefined || b.stack > maxStacks[b.pos]) {
                maxStacks[b.pos] = b.stack;
            }
        }
        for (var i = 0; i < landedBalls.length; i++) {
            var b = landedBalls[i];
            var bx = slotToX(b.pos);
            var by = landingY + b.stack * (BALL_RADIUS * 2 + 2);
            ctx.fillStyle = b.color;
            ctx.globalAlpha = 0.85;
            ctx.beginPath();
            ctx.arc(bx, by, BALL_RADIUS, 0, Math.PI * 2);
            ctx.fill();
            ctx.globalAlpha = 1.0;
        }

        // All active balls bouncing through pegs
        var leadY = 0;
        for (var i = 0; i < activeBalls.length; i++) {
            var ab = activeBalls[i];
            var r0 = ab.row;
            var r1 = Math.min(r0 + 1, NUM_ROWS);
            var p0 = ab.path[r0];
            var p1 = ab.path[r1];
            var t = ab.t;

            var x0 = slotToX(p0);
            var x1 = slotToX(p1);
            var y0 = rowToY(r0);
            var y1 = rowToY(r1);
            var pegY = (y0 + y1) / 2;

            var bx, by;
            if (t < 0.4) {
                var p = t / 0.4;
                bx = x0;
                by = y0 + (pegY - y0) * p;
            } else {
                var p = (t - 0.4) / 0.6;
                bx = x0 + (x1 - x0) * p;
                by = pegY + (y1 - pegY) * p;
            }

            ctx.fillStyle = ab.color;
            ctx.shadowColor = ab.color;
            ctx.shadowBlur = 10;
            ctx.beginPath();
            ctx.arc(bx, by, BALL_RADIUS, 0, Math.PI * 2);
            ctx.fill();
            ctx.shadowBlur = 0;

            if (by > leadY) leadY = by;
        }

        // Scroll to follow the leading ball
        if (activeBalls.length > 0) {
        }

        // Average line after all balls landed
        if (showMean && landedBalls.length > 0) {
            var sum = 0;
            for (var i = 0; i < landedBalls.length; i++) sum += landedBalls[i].pos;
            var mean = sum / landedBalls.length;
            var roundedMean = Math.round(mean / 2) * 2;
            var mx = slotToX(roundedMean);

            var tallest = 0;
            for (var pos in maxStacks) {
                if (maxStacks[pos] > tallest) tallest = maxStacks[pos];
            }
            var bottomOfBalls = landingY + tallest * (BALL_RADIUS * 2 + 2) + BALL_RADIUS + 12;

            ctx.strokeStyle = '#f39c12';
            ctx.lineWidth = 2.5;
            ctx.setLineDash([6, 4]);
            ctx.beginPath();
            ctx.moveTo(mx, BOARD_BOTTOM - 30);
            ctx.lineTo(mx, bottomOfBalls + 20);
            ctx.stroke();
            ctx.setLineDash([]);

            ctx.fillStyle = '#f39c12';
            ctx.font = 'bold 17px Helvetica Neue, sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText('average = ' + slotDisplayLabel(roundedMean), mx, bottomOfBalls + 38);
        }
    }

    function simulatePath() {
        var path = [DROP_POS];
        var pos = DROP_POS;
        for (var r = 0; r < NUM_ROWS; r++) {
            pos += Math.random() < 0.5 ? -1 : 1;
            path.push(pos);
        }
        return path;
    }

    function getStack(pos) {
        var count = 0;
        for (var i = 0; i < landedBalls.length; i++) {
            if (landedBalls[i].pos === pos) count++;
        }
        return count;
    }

    var STAGGER_ROWS = 3; // rows between each ball launch
    var FRAMES_PER_STEP = 2;

    function startDrop(n) {
        if (animating) return;
        animating = true;
        showMean = false;
        landedBalls = [];
        activeBalls = [];
        document.getElementById('btn-1').disabled = true;
        document.getElementById('btn-9').disabled = true;
        document.getElementById('result-text').innerHTML = '';

        // Pre-simulate all paths
        var allPaths = [];
        for (var i = 0; i < n; i++) allPaths.push(simulatePath());

        // Dynamically expand SLOT_RANGE to fit all positions
        SLOT_RANGE = 40;
        for (var i = 0; i < allPaths.length; i++) {
            var finalPos = Math.abs(allPaths[i][NUM_ROWS]);
            if (finalPos + 6 > SLOT_RANGE) SLOT_RANGE = finalPos + 6;
        }
        if (SLOT_RANGE % 2 !== 0) SLOT_RANGE++;

        // Initialize all balls with staggered start frames
        var ballStates = [];
        for (var i = 0; i < n; i++) {
            ballStates.push({
                path: allPaths[i],
                color: COLORS[i % COLORS.length],
                startFrame: i * STAGGER_ROWS * FRAMES_PER_STEP,
                finished: false
            });
        }

        var totalFramesPerBall = NUM_ROWS * FRAMES_PER_STEP;
        var frame = 0;

        drawBoard();

        function tick() {
            frame++;
            activeBalls = [];
            var allDone = true;

            for (var i = 0; i < ballStates.length; i++) {
                var bs = ballStates[i];
                if (bs.finished) continue;

                var localFrame = frame - bs.startFrame;
                if (localFrame < 0) {
                    allDone = false;
                    continue; // not started yet
                }

                var progress = localFrame / totalFramesPerBall;

                if (progress >= 1) {
                    // Ball has landed
                    if (!bs.finished) {
                        bs.finished = true;
                        var finalPos = bs.path[NUM_ROWS];
                        landedBalls.push({ pos: finalPos, color: bs.color, stack: getStack(finalPos) });
                    }
                    continue;
                }

                allDone = false;
                var currentRow = Math.floor(progress * NUM_ROWS);
                var rowProgress = (progress * NUM_ROWS) - currentRow;

                activeBalls.push({
                    path: bs.path,
                    color: bs.color,
                    row: currentRow,
                    t: rowProgress
                });
            }

            drawBoard();

            if (allDone) {
                activeBalls = [];
                showMean = true;
                drawBoard();
                animating = false;
                document.getElementById('btn-1').disabled = false;
                document.getElementById('btn-9').disabled = false;

                var sum = 0;
                for (var i = 0; i < landedBalls.length; i++) sum += landedBalls[i].pos;
                var mean = Math.round(sum / landedBalls.length);
                var displayMean = slotDisplayLabel(Math.round(mean / 2) * 2);
                var error = Math.abs(Math.round(mean / 2));
                document.getElementById('result-text').innerHTML =
                    n + (n === 1 ? ' ball' : ' balls') + ' dropped from position ' + DISPLAY_OFFSET +
                    '. &nbsp; Average landing: <span style="color:#f39c12">' + displayMean + '</span>' +
                    '. &nbsp; Error: ' + error + ' columns.';
                return;
            }

            setTimeout(tick, STEP_MS);
        }
        tick();
    }

    function resetBoard() {
        if (animating) return;
        landedBalls = [];
        activeBalls = [];
        showMean = false;
        SLOT_RANGE = 40;
        document.getElementById('result-text').innerHTML = '';
        drawBoard();
    }

    window.startDrop = startDrop;
    window.resetBoard = resetBoard;
    window.changeSpeed = function(dir) {
        speedIndex = Math.max(0, Math.min(speedLevels.length - 1, speedIndex - dir));
        STEP_MS = speedLevels[speedIndex];
    };

    drawBoard();
})();
</script>

{{ next_button }}
{{ endblock }}