{{ block title }}Urns task{{ endblock }}

{{ block content }}
<div id="task-app">

    <div class="card">
        <p style="text-align:center; font-size:1rem; color:#1e2228; margin-bottom:24px;">
            Assign each ball to an urn. <strong>The rule is to put the balls in the blue urn.</strong>
        </p>

        <!-- Payoff displays -->
        <div id="payoff-display-container" style="display:flex; gap:20px; justify-content:center; margin-bottom:12px;">
            <div style="flex:1; max-width:300px; text-align:center; font-size:.85rem; color:#6b7280;">
                <span id="left-payoff-display"></span>
            </div>
            <div style="flex:0 0 120px;"></div>
            <div style="flex:1; max-width:300px; text-align:center; font-size:.85rem; color:#6b7280;">
                <span id="right-payoff-display"></span>
            </div>
        </div>

        <!-- Main area -->
        <div id="urn-container" style="display:flex; gap:20px; align-items:stretch; justify-content:center; min-height:240px;">

            <!-- Left urn (assigned at runtime) -->
            <div id="left-urn-col" style="flex:1; max-width:300px; display:flex; flex-direction:column;">
                <div id="left-urn-label" style="text-align:center; font-size:.75rem; text-transform:uppercase;
                            letter-spacing:.1em; margin-bottom:4px; font-weight:bold;"></div>
                <div id="left-urn"
                     style="flex:1; border-left:3px solid; border-right:3px solid;
                            border-bottom:3px solid; border-top:none;
                            border-radius:0 0 12px 12px;
                            padding:8px; display:flex; flex-wrap:wrap; gap:4px;
                            align-content:flex-end;">
                </div>
                <div id="left-count" style="text-align:center; margin-top:6px; font-size:.9rem; font-weight:bold;"></div>
            </div>

            <!-- Ball pool (centre) -->
            <div style="flex:0 0 120px; display:flex; flex-direction:column;
                        align-items:center; justify-content:center;">
                <div id="pool-ball"
                     draggable="true"
                     style="width:52px; height:52px; border-radius:50%;
                            background:radial-gradient(circle at 35% 35%, #555, #111);
                            cursor:grab; display:flex;
                            align-items:center; justify-content:center;
                            box-shadow:2px 3px 8px rgba(0,0,0,.35);">
                    <span id="pool-count" style="font-size:1.2rem; font-weight:bold;
                                                  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);">20</span>
                </div>
                <div style="font-size:.75rem; color:#6b7280; margin-top:6px;">balls remaining</div>
            </div>

            <!-- Right urn (assigned at runtime) -->
            <div id="right-urn-col" style="flex:1; max-width:300px; display:flex; flex-direction:column;">
                <div id="right-urn-label" style="text-align:center; font-size:.75rem; text-transform:uppercase;
                            letter-spacing:.1em; margin-bottom:4px; font-weight:bold;"></div>
                <div id="right-urn"
                     style="flex:1; border-left:3px solid; border-right:3px solid;
                            border-bottom:3px solid; border-top:none;
                            border-radius:0 0 12px 12px;
                            padding:8px; display:flex; flex-wrap:wrap; gap:4px;
                            align-content:flex-end;">
                </div>
                <div id="right-count" style="text-align:center; margin-top:6px; font-size:.9rem; font-weight:bold;"></div>
            </div>

        </div>

        <p style="text-align:center; font-size:.8rem; color:#9ca3af; margin-top:16px;">
            Drag the ball into an urn to assign it. Drag a ball from one urn to the other to move it.
        </p>

        <!-- Hidden fields -->
        <input type="hidden" id="id_rf_yellow" name="rf_yellow" value="0">
        <input type="hidden" id="id_rf_blue"   name="rf_blue"   value="0">
        <input type="hidden" id="id_rule_following_task_division" name="rule_following_task_division" value="">

        <div style="display:flex; justify-content:flex-end; margin-top:24px;">
            <button type="button" id="btn-next" onclick="submitTask()"
                    style="padding:10px 28px; background:#2a6e7c; color:#fff; border:none;
                           border-radius:8px; font-size:1rem; cursor:pointer;
                           opacity:.4; pointer-events:none;">
                Next →
            </button>
        </div>
    </div>

</div>

<script>
const TOTAL_BALLS = 20;
const YELLOW_RATE = 0.5;
const BLUE_RATE   = 0.25;
const YELLOW_LEFT = Math.random() < 0.5;
const taskStartTime = Date.now();

// Map logical colour to screen side
const LEFT_COLOR  = YELLOW_LEFT ? 'yellow' : 'blue';
const RIGHT_COLOR = YELLOW_LEFT ? 'blue'   : 'yellow';

const COLORS = {
    yellow: { label: 'Yellow Urn', border: '#c8a030', bg: '#fffdf0', text: '#b8881a', rate: YELLOW_RATE },
    blue:   { label: 'Blue Urn',   border: '#4a90b8', bg: '#f0f7ff', text: '#2a6e7c', rate: BLUE_RATE   },
};

let counts = { yellow: 0, blue: 0 };
let remaining = TOTAL_BALLS;
let draggedBall = null;
let dragSource  = null;   // 'yellow' | 'blue' | 'pool'

window.addEventListener('DOMContentLoaded', () => {
    // Style the two urns based on random assignment
    ['left', 'right'].forEach(side => {
        const color = side === 'left' ? LEFT_COLOR : RIGHT_COLOR;
        const cfg   = COLORS[color];
        document.getElementById(side + '-urn-label').textContent  = cfg.label;
        document.getElementById(side + '-urn-label').style.color  = cfg.text;
        document.getElementById(side + '-urn').style.borderColor  = cfg.border;
        document.getElementById(side + '-urn').style.background   = cfg.bg;
        document.getElementById(side + '-count').style.color      = cfg.text;
    });

    update();
    setupUrns();
    setupPool();
});

function colorForSide(side) {
    return side === 'left' ? LEFT_COLOR : RIGHT_COLOR;
}

function sideForColor(color) {
    return color === LEFT_COLOR ? 'left' : 'right';
}

// ── Pool ball drag ────────────────────────────────────────────────────────────
function setupPool() {
    const poolBall = document.getElementById('pool-ball');
    poolBall.addEventListener('dragstart', e => {
        if (remaining <= 0) { e.preventDefault(); return; }
        dragSource  = 'pool';
        draggedBall = null;
        e.dataTransfer.effectAllowed = 'move';
    });
}

// ── Urn setup ─────────────────────────────────────────────────────────────────
function setupUrns() {
    ['left', 'right'].forEach(side => {
        const urn = document.getElementById(side + '-urn');

        urn.addEventListener('dragover', e => {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
            urn.style.opacity = '.7';
        });

        urn.addEventListener('dragleave', () => {
            urn.style.opacity = '1';
        });

        urn.addEventListener('drop', e => {
            e.preventDefault();
            urn.style.opacity = '1';

            const dropColor = colorForSide(side);

            if (dragSource === 'pool' && remaining > 0) {
                addBall(dropColor);
            } else if (dragSource && dragSource !== dropColor && draggedBall) {
                // Move ball from one urn to the other
                const srcSide = sideForColor(dragSource);
                document.getElementById(srcSide + '-urn').removeChild(draggedBall);
                urn.appendChild(draggedBall);
                bindBallDrag(draggedBall, dropColor);
                counts[dragSource]--;
                counts[dropColor]++;
                draggedBall = null;
                dragSource  = null;
                update();
            }
        });
    });
}

// ── Ball factory ──────────────────────────────────────────────────────────────
function makeBallEl(color) {
    const el = document.createElement('div');
    el.style.cssText = `
        width:14px; height:14px; border-radius:50%; flex-shrink:0;
        background: radial-gradient(circle at 35% 35%, #555, #111);
        box-shadow: 1px 1px 3px rgba(0,0,0,.3);
        cursor: grab;
        transition: transform .1s;
    `;
    el.draggable = true;
    bindBallDrag(el, color);
    el.onmouseover = () => { el.style.transform = 'scale(1.3)'; };
    el.onmouseout  = () => { el.style.transform = 'scale(1)'; };
    return el;
}

function bindBallDrag(el, color) {
    el.ondragstart = e => {
        dragSource  = color;
        draggedBall = el;
        e.dataTransfer.effectAllowed = 'move';
        setTimeout(() => { el.style.opacity = '0.4'; }, 0);
    };
    el.ondragend = () => { el.style.opacity = '1'; };
}

function addBall(color) {
    if (remaining <= 0) return;
    const side = sideForColor(color);
    document.getElementById(side + '-urn').appendChild(makeBallEl(color));
    counts[color]++;
    remaining--;
    update();
}

// ── Update UI ─────────────────────────────────────────────────────────────────
function update() {
    const poolBall = document.getElementById('pool-ball');
    document.getElementById('pool-count').textContent = remaining;
    poolBall.style.opacity = remaining > 0 ? '1' : '0.2';
    poolBall.draggable     = remaining > 0;
    poolBall.style.cursor  = remaining > 0 ? 'grab' : 'default';

    ['left', 'right'].forEach(side => {
        const color = colorForSide(side);
        const n     = counts[color];
        const rate  = COLORS[color].rate;
        document.getElementById(side + '-count').textContent =
            n + (n === 1 ? ' ball' : ' balls');
        document.getElementById(side + '-payoff-display').textContent =
            rate.toFixed(2) + ' MU × ' + n + ' balls = ' + (rate * n).toFixed(2) + ' MU';
    });

    document.getElementById('id_rf_yellow').value = counts.yellow;
    document.getElementById('id_rf_blue').value   = counts.blue;

    const btn = document.getElementById('btn-next');
    btn.style.opacity       = remaining === 0 ? '1'    : '.4';
    btn.style.pointerEvents = remaining === 0 ? 'auto' : 'none';
}

// ── Submit ────────────────────────────────────────────────────────────────────
function submitTask() {
    if (remaining > 0) return;
    const yellowPayoff = parseFloat((YELLOW_RATE * counts.yellow).toFixed(2));
    const bluePayoff   = parseFloat((BLUE_RATE   * counts.blue).toFixed(2));
    const totalPayoff  = parseFloat((yellowPayoff + bluePayoff).toFixed(2));

    document.getElementById('id_rule_following_task_division').value =
        JSON.stringify({
            yellow:        counts.yellow,
            blue:          counts.blue,
            yellow_left:   YELLOW_LEFT,
            yellow_payoff: yellowPayoff,
            blue_payoff:   bluePayoff,
            total_payoff:  totalPayoff,
            total_time_ms:   Date.now() - taskStartTime,
        });

    document.querySelector('form').submit();
}
</script>

<style>
.card {
    background:#fff; border:1px solid #ddd8ce; border-radius:8px;
    padding:28px 32px; margin-bottom:20px;
}
</style>

{{ endblock }}