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

{% block title %}
Pac-Man Demo - Trial {{ round_number }}
{% endblock %}

{% block content %}
<h1>Pac-Man Demo - Trial {{ round_number }}</h1>

{# ---- Instructions (sync vs control + practice) ---- #}
{% if is_practice %}
  {% if sync_condition == 'sync' %}
    <p><strong>PRACTICE TRIAL (SYNCHRONY):</strong>
      In this trial, Pac-Man will move only if you both press the <em>same key</em> at (almost) the same time.
      Please practice moving together.
    </p>
  {% else %}
    <p><strong>PRACTICE TRIAL (NO SYNCHRONY):</strong>
      In this trial, Pac-Man will move whenever either of you presses a valid key. Please practice moving together.
    </p>
  {% endif %}
  {% with target=target_color %}
  <div style="margin:8px 0 12px 0; font-size:15px;">
    <strong>For this practice round, please go together to this fruit:</strong>
    <svg width="20" height="20" style="vertical-align: middle; margin: 0 4px -3px 4px;">
      <polygon points="10,2 2,18 18,18"
               fill="{{ target }}"
               stroke="black"
               stroke-width="2" />
    </svg>
    <span style="font-weight:bold; color: '{{ target }}';">{{ target }}</span>
    fruit.
  </div>
  {% endwith %}
{% else %}
{% if sync_condition == 'sync' %}
  <p><strong>SYNCHRONY TRIAL:</strong>
    Navigate Pac-Man together – he will only respond if you both press the same key at the same time.
  </p>

{% elif sync_condition == 'parallel' %}
  <p><strong>PARALLEL TRIAL:</strong>
    You each control your own Pac-Man in your own maze. Both mazes are shown side-by-side.
    Your key presses move only your Pac-Man, but you can see your partner moving at the same time.
  </p>

{% else %}
  <p><strong>JOINT CONTROL TRIAL:</strong>
    Navigate Pac-Man together – he will respond to any of your key presses (no synchrony required).
  </p>
{% endif %}
{% endif %}

<form method="post">
  <canvas id="gameCanvas" width="500" height="500" style="border:1px solid #000; background-color: black;"></canvas>
</form>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {

  const CONDITION   = ("{{ sync_condition }}" || "").toLowerCase().trim(); // 'sync' | 'control' | 'parallel'
  const IS_PRACTICE = "{{ is_practice }}" === "True";
  const ME          = Number("{{ player.id_in_group }}") || 1;

  // ---- Tell the Twilio overlay what "phase" we're in ----
  try {
    // parallel trials should show the "quiet/no talking" overlay
    localStorage.setItem('pacman_phase', CONDITION === 'parallel' ? 'quiet' : 'joint');
  } catch (e) {}

  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');

  // --------- Metronome (only for sync trials) ---------
  const METRO_MODE  = "{{ metronome_condition }}";
  const INTERVAL_MS = Math.max(1, Number("{{ metronome_value }}") || 1000);
  const PERIOD_SEC  = INTERVAL_MS / 1000;
  const FADE_BEATS  = 8;
  const CLICK_MS    = 0.05;
  const CLICK_GAIN  = 0.12;

  let audioCtx = null, osc = null, gain = null;
  let schedulerTimer = null;
  let nextTime = 0;
  let running = false;
  let beatsScheduled = 0;
  const beatsLimit = (METRO_MODE === 'fade') ? FADE_BEATS : Infinity;

  function setupAudio() {
    if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    if (!osc || !gain) {
      osc = audioCtx.createOscillator();
      gain = audioCtx.createGain();
      osc.type = 'square';
      osc.frequency.value = 1000;
      gain.gain.value = 0.0;
      osc.connect(gain);
      gain.connect(audioCtx.destination);
      osc.start();
    }
    if (audioCtx.state !== 'running') audioCtx.resume().catch(()=>{});
  }

  function scheduleClick(at) {
    gain.gain.setValueAtTime(0.0, at);
    gain.gain.setValueAtTime(CLICK_GAIN, at);
    gain.gain.setValueAtTime(0.0, at + CLICK_MS);
    beatsScheduled++;
  }

  function scheduler() {
    if (!running) return;
    if (!audioCtx || audioCtx.state !== 'running') audioCtx && audioCtx.resume().catch(()=>{});
    const lookahead = 0.1;
    const now = audioCtx ? audioCtx.currentTime : 0;

    while (running && beatsScheduled < beatsLimit && nextTime < now + lookahead) {
      scheduleClick(nextTime);
      nextTime += PERIOD_SEC;
    }
    if (beatsScheduled >= beatsLimit) { stopMetronome(true); return; }
    schedulerTimer = setTimeout(scheduler, 25);
  }

  function startMetronome() {
    if (running) return;
    setupAudio();
    nextTime = audioCtx.currentTime;
    running = true;
    scheduler();
  }

  function stopMetronome(faded=false) {
    running = false;
    if (schedulerTimer) { clearTimeout(schedulerTimer); schedulerTimer = null; }
    try { if (gain && audioCtx) gain.gain.setValueAtTime(0.0, audioCtx.currentTime); } catch(e){}
  }

  // --------- Maze / grid ---------
  const numRows = 13;
  const numCols = 13;

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

  // One board is always 500x500. In parallel we draw two boards (1000x500).
  const boardSize = 500;
  const cellSize = boardSize / numRows;

  if (CONDITION === "parallel") {
    canvas.width  = boardSize * 2;
    canvas.height = boardSize;
  } else {
    canvas.width  = boardSize;
    canvas.height = boardSize;
  }

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

  function drawMaze(offsetX=0, offsetY=0) {
      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
                  );
              }
          }
      }
  }

  const option1Row = 3;
  const option2Row = 9;

  const options = [
    { row: option1Row, col: Number("{{ column_number }}"), color: "{{ option1_color }}" },
    { row: option2Row, col: Number("{{ column_number }}"), color: "{{ option2_color }}" }
  ];

  function drawOptions(offsetX=0, offsetY=0) {
      options.forEach(opt => {
          ctx.fillStyle = opt.color;
          const pix = gridToPixel({ row: opt.row, col: opt.col }, offsetX, offsetY);
          const triHeight = cellSize * 0.5;
          const triHalfBase = cellSize * 0.3;

          ctx.beginPath();
          ctx.moveTo(pix.x, pix.y - triHeight / 2);
          ctx.lineTo(pix.x - triHalfBase, pix.y + triHeight / 2);
          ctx.lineTo(pix.x + triHalfBase, pix.y + triHeight / 2);
          ctx.closePath();
          ctx.fill();
      });
  }

  // Ghosts — original pattern.
  function makeGhosts() {
    return [
      { row: 3, col: Number("{{ column_number }}"), direction: 1, rowMin: 2, rowMax: 6,  color: "red" },
      { row: 8, col: Number("{{ column_number }}"), direction: 1, rowMin: 7, rowMax: 11, color: "white" }
    ];
  }
  let ghostsLeft  = makeGhosts();
  let ghostsRight = makeGhosts(); // used only in parallel
  let ghosts = makeGhosts();      // used in control/sync

  function drawGhosts(ghostArr, offsetX=0, offsetY=0) {
      ghostArr.forEach(ghost => {
          ctx.fillStyle = ghost.color;
          const pix = gridToPixel({ row: ghost.row, col: ghost.col }, offsetX, offsetY);
          ctx.fillRect(
              pix.x - cellSize * 0.4,
              pix.y - cellSize * 0.4,
              cellSize * 0.8,
              cellSize * 0.8
          );
      });
  }

  function updateGhostsArr(ghostArr) {
    for (const ghost of ghostArr) {
        let nr = ghost.row + ghost.direction;
        if (nr < ghost.rowMin || nr > ghost.rowMax) {
            ghost.direction *= -1;
            nr = ghost.row + ghost.direction;
        }
        ghost.row = nr;
    }
  }

  // --------- State ---------
  let showActors = false;
  let controlsEnabled = false;
  let ghostsTimer = null;

  let trialEnded = false;
  let outcomeSent = false;

  // Shared (control/sync)
  let pacmanGrid = { row: 6, col: Number("{{ pac_column }}") };

  // Parallel (two avatars)
  let p1Grid = { row: 6, col: Number("{{ pac_column }}") };
  let p2Grid = { row: 6, col: Number("{{ pac_column }}") };

  function drawPacmanAt(grid, offsetX=0, offsetY=0, fill="yellow") {
      const pix = gridToPixel(grid, offsetX, offsetY);
      ctx.fillStyle = fill;
      ctx.beginPath();
      ctx.arc(pix.x, pix.y, cellSize * 0.4, 0, 2 * Math.PI);
      ctx.fill();
  }

  // --------- Collisions ---------
  function gridHitsAnyOption(g) {
    for (const opt of options) {
      if (g.row === opt.row && g.col === opt.col) return true;
    }
    return false;
  }

  function gridHitsAnyGhost(g, ghostArr) {
    for (const gh of ghostArr) {
      if (g.row === gh.row && g.col === gh.col) return true;
    }
    return false;
  }

  function maybeSendOutcome(outcome) {
    if (trialEnded || outcomeSent) return;
    outcomeSent = true;
    liveSend({ outcome });
  }

  // NEW: per-participant ending for parallel
  function maybeSendOutcomeForYou(outcome) {
    if (trialEnded || outcomeSent) return;
    outcomeSent = true;
    console.log("SENDING outcome_for_you:", outcome);
    liveSend({ outcome_for_you: outcome });
  }

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

    if (CONDITION === "parallel") {
        // left board
        drawMaze(0, 0);
        if (showActors) {
            drawOptions(0, 0);
            drawGhosts(ghostsLeft, 0, 0);

            // only show my own pacman
            if (ME === 1) {
                drawPacmanAt(p1Grid, 0, 0, "yellow");
            }
        }

        // right board
        drawMaze(boardSize, 0);
        if (showActors) {
            drawOptions(boardSize, 0);
            drawGhosts(ghostsRight, boardSize, 0);

            // only show my own pacman
            if (ME === 2) {
                drawPacmanAt(p2Grid, boardSize, 0, "yellow");
            }
        }

        // only my own outcome matters in parallel
        if (showActors && !trialEnded) {
            if (ME === 1) {
                if (gridHitsAnyGhost(p1Grid, ghostsLeft)) {
                    maybeSendOutcomeForYou("ghost");
                } else if (gridHitsAnyOption(p1Grid)) {
                    maybeSendOutcomeForYou("fruit");
                }
            } else {
                if (gridHitsAnyGhost(p2Grid, ghostsRight)) {
                    maybeSendOutcomeForYou("ghost");
                } else if (gridHitsAnyOption(p2Grid)) {
                    maybeSendOutcomeForYou("fruit");
                }
            }
        }

    } else {
        // control/sync: single board
        drawMaze(0, 0);
        if (showActors) {
            drawOptions(0, 0);
            drawPacmanAt(pacmanGrid, 0, 0, "yellow");
            drawGhosts(ghosts, 0, 0);

            if (!trialEnded && !outcomeSent) {
                if (gridHitsAnyOption(pacmanGrid)) maybeSendOutcome("fruit");
                if (gridHitsAnyGhost(pacmanGrid, ghosts)) maybeSendOutcome("ghost");
            }
        }
    }
  }

  function updateGhosts() {
    if (CONDITION === "parallel") {
      updateGhostsArr(ghostsLeft);
      updateGhostsArr(ghostsRight);
    } else {
      updateGhostsArr(ghosts);
    }
    drawGame();
  }

  drawGame();

  // ------ Start trial depending on condition ------
  if (CONDITION === "sync") {
      startMetronome();
      setTimeout(() => {
          showActors = true;
          controlsEnabled = true;
          ghostsTimer = setInterval(updateGhosts, 1000);
          drawGame();
      }, INTERVAL_MS * 8);
  } else {
      showActors = true;
      controlsEnabled = true;
      ghostsTimer = setInterval(updateGhosts, 1000);
      drawGame();
  }

  // ------ Keydown -> liveSend(key) ------
  document.addEventListener('keydown', function(e) {
      if (!controlsEnabled || trialEnded) return;
      const arrowToDirection = {
          'arrowup': 'w',
          'arrowdown': 's',
          'arrowleft': 'a',
          'arrowright': 'd'
      };
      const key = e.key.toLowerCase();
      if (key in arrowToDirection) {
          e.preventDefault();
          liveSend({ key: arrowToDirection[key] });
      }
  });

  // ------ liveRecv from server ------
  function liveRecv(data) {
      console.log("Received update from server:", data);
      console.log("LIVE RECV FIRED:", data);

      // parallel payload: p1_row/p1_col/p2_row/p2_col
      if (CONDITION === "parallel") {
        if (data && data.p1_row !== undefined && data.p1_col !== undefined) {
          p1Grid = { row: data.p1_row, col: data.p1_col };
        }
        if (data && data.p2_row !== undefined && data.p2_col !== undefined) {
          p2Grid = { row: data.p2_row, col: data.p2_col };
        }
        drawGame();
      }

      // control/sync payload: row/col
      if (data && data.row !== undefined && data.col !== undefined) {
          pacmanGrid = { row: data.row, col: data.col };
          drawGame();
      }

      // ------ end trial ------
      // PARALLEL: end only for *you* (outcome_for_you)
      // CONTROL/SYNC: end for both (outcome)
      if (data) {
        console.log("outcome_for_you =", data.outcome_for_you);

        // (A) parallel-only individual ending
        if (CONDITION === "parallel" && data.outcome_for_you) {
          console.log("You ended with outcome:", data.outcome_for_you);

          if (!trialEnded) {
            // harmless even if left in; sync won't happen here
            if (CONDITION === "sync") stopMetronome(true);
            if (ghostsTimer) { clearInterval(ghostsTimer); ghostsTimer = null; }
            trialEnded = true;

            setTimeout(() => {
              const form = document.querySelector("form");
              if (form) form.submit();
            }, 100);
          }
          return; // don't fall through
        }

        // (B) joint ending (control/sync) — end for everyone
        if (data.outcome) {
          console.log("Trial ended with outcome:", data.outcome);

          if (!trialEnded) {
            if (CONDITION === "sync") stopMetronome(true);
            if (ghostsTimer) { clearInterval(ghostsTimer); ghostsTimer = null; }
            trialEnded = true;

            setTimeout(() => {
              const form = document.querySelector("form");
              if (form) form.submit();
            }, 100);
          }
        }
      }
  }
  window.liveRecv = liveRecv;

});
</script>
{% endblock %}