Monty Hall: Switch or Stay

// Monty Hall: Switch or Stay
// Three doors. User clicks one (pick). Host reveals a goat behind another door.
// Second click chooses between the remaining two doors (this is implicitly
// "stay" if the user clicks their original door, or "switch" if they click the
// other unrevealed door). Track running win counts and rates.

let W, H;
let state;           // 'PICK' | 'REVEAL' | 'RESULT'
let doors;           // array of {x, y, w, h, hasCar, isOpen, revealed}
let prizeDoor;
let userPick;        // index 0..2
let revealedDoor;    // index host opened
let finalPick;       // index after stay/switch
let didSwitch;
let didWin;

let stayPlays, stayWins;
let switchPlays, switchWins;

// Time-based animation
let resultTime;      // ms remaining showing result
let history;         // recent decisions, for the running plot
const HISTORY_MAX = 200;

function init({ width, height }) {
  W = width;
  H = height;
  state = 'PICK';
  stayPlays = 0; stayWins = 0;
  switchPlays = 0; switchWins = 0;
  history = [];
  layoutDoors();
  newRound();
}

function layoutDoors() {
  const baseY = Math.min(H * 0.30, 130);
  const dw = Math.min(120, W * 0.18);
  const dh = Math.min(190, H * 0.36);
  const gap = (W - 3 * dw) / 4;
  doors = [];
  for (let i = 0; i < 3; i++) {
    doors.push({
      x: gap + i * (dw + gap),
      y: baseY,
      w: dw,
      h: dh,
      isOpen: false,
      revealed: false,
    });
  }
}

function newRound() {
  state = 'PICK';
  prizeDoor = Math.floor(Math.random() * 3);
  userPick = -1;
  revealedDoor = -1;
  finalPick = -1;
  didSwitch = false;
  didWin = false;
  for (const d of doors) { d.isOpen = false; d.revealed = false; }
  resultTime = 0;
}

function hostReveal() {
  // host opens a door that is NOT user's pick AND NOT the prize
  const choices = [];
  for (let i = 0; i < 3; i++) {
    if (i !== userPick && i !== prizeDoor) choices.push(i);
  }
  revealedDoor = choices[Math.floor(Math.random() * choices.length)];
  doors[revealedDoor].isOpen = true;
  doors[revealedDoor].revealed = true;
  state = 'REVEAL';
}

function finalize(chosen) {
  finalPick = chosen;
  didSwitch = (chosen !== userPick);
  didWin = (chosen === prizeDoor);
  doors[chosen].isOpen = true;
  // also reveal prize door if not already
  doors[prizeDoor].isOpen = true;
  state = 'RESULT';
  resultTime = 1400;

  if (didSwitch) {
    switchPlays++;
    if (didWin) switchWins++;
  } else {
    stayPlays++;
    if (didWin) stayWins++;
  }

  history.push({ didSwitch, didWin });
  if (history.length > HISTORY_MAX) history.shift();
}

function pointInDoor(x, y, d) {
  return x >= d.x && x <= d.x + d.w && y >= d.y && y <= d.y + d.h;
}

function drawDoor(ctx, d, i, label) {
  // door frame
  ctx.fillStyle = '#3a2418';
  ctx.fillRect(d.x - 4, d.y - 4, d.w + 8, d.h + 8);
  if (!d.isOpen) {
    // closed door — wood
    ctx.fillStyle = '#8b5a2b';
    ctx.fillRect(d.x, d.y, d.w, d.h);
    // panel lines
    ctx.strokeStyle = '#5a3a1c';
    ctx.lineWidth = 2;
    ctx.strokeRect(d.x + 8, d.y + 8, d.w - 16, d.h - 16);
    ctx.beginPath();
    ctx.moveTo(d.x + 8, d.y + d.h / 2);
    ctx.lineTo(d.x + d.w - 8, d.y + d.h / 2);
    ctx.stroke();
    // handle
    ctx.fillStyle = '#ffd060';
    ctx.beginPath();
    ctx.arc(d.x + d.w - 14, d.y + d.h / 2, 4, 0, Math.PI * 2);
    ctx.fill();
    // number
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 26px monospace';
    ctx.textAlign = 'center';
    ctx.fillText(label, d.x + d.w / 2, d.y + 30);
    ctx.textAlign = 'left';
  } else {
    // opened — show car or goat
    ctx.fillStyle = '#101018';
    ctx.fillRect(d.x, d.y, d.w, d.h);
    ctx.strokeStyle = '#3a2418';
    ctx.lineWidth = 2;
    ctx.strokeRect(d.x, d.y, d.w, d.h);
    if (i === prizeDoor) {
      // car: stylized
      ctx.fillStyle = '#ff5050';
      const cy = d.y + d.h * 0.55;
      const cw = d.w * 0.7;
      const cx = d.x + d.w / 2 - cw / 2;
      const ch = d.h * 0.18;
      // body
      ctx.fillRect(cx, cy, cw, ch);
      // roof
      ctx.fillRect(cx + cw * 0.2, cy - ch * 0.7, cw * 0.6, ch * 0.7);
      // wheels
      ctx.fillStyle = '#222';
      ctx.beginPath();
      ctx.arc(cx + cw * 0.2, cy + ch, ch * 0.5, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(cx + cw * 0.8, cy + ch, ch * 0.5, 0, Math.PI * 2);
      ctx.fill();
      // label
      ctx.fillStyle = '#ffeb80';
      ctx.font = 'bold 16px monospace';
      ctx.textAlign = 'center';
      ctx.fillText('CAR', d.x + d.w / 2, d.y + d.h * 0.30);
      ctx.textAlign = 'left';
    } else {
      // goat: stylized
      ctx.fillStyle = '#e0e0e0';
      const gx = d.x + d.w / 2;
      const gy = d.y + d.h * 0.55;
      // body
      ctx.beginPath();
      ctx.ellipse(gx, gy, d.w * 0.28, d.h * 0.13, 0, 0, Math.PI * 2);
      ctx.fill();
      // head
      ctx.beginPath();
      ctx.ellipse(gx + d.w * 0.22, gy - d.h * 0.06, d.w * 0.10, d.h * 0.07, 0, 0, Math.PI * 2);
      ctx.fill();
      // legs
      ctx.fillRect(gx - d.w * 0.18, gy + d.h * 0.08, d.w * 0.04, d.h * 0.14);
      ctx.fillRect(gx + d.w * 0.10, gy + d.h * 0.08, d.w * 0.04, d.h * 0.14);
      // horns
      ctx.fillStyle = '#555';
      ctx.beginPath();
      ctx.moveTo(gx + d.w * 0.20, gy - d.h * 0.11);
      ctx.lineTo(gx + d.w * 0.22, gy - d.h * 0.18);
      ctx.lineTo(gx + d.w * 0.24, gy - d.h * 0.11);
      ctx.fill();
      // label
      ctx.fillStyle = '#ccc';
      ctx.font = 'bold 16px monospace';
      ctx.textAlign = 'center';
      ctx.fillText('GOAT', d.x + d.w / 2, d.y + d.h * 0.30);
      ctx.textAlign = 'left';
    }
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) {
    W = width;
    H = height;
    layoutDoors();
  }

  ctx.fillStyle = '#0a0a14';
  ctx.fillRect(0, 0, W, H);

  // handle clicks
  const clicks = input.consumeClicks();
  for (const c of clicks) {
    if (state === 'PICK') {
      for (let i = 0; i < 3; i++) {
        if (pointInDoor(c.x, c.y, doors[i])) {
          userPick = i;
          hostReveal();
          break;
        }
      }
    } else if (state === 'REVEAL') {
      for (let i = 0; i < 3; i++) {
        if (i === revealedDoor) continue;
        if (pointInDoor(c.x, c.y, doors[i])) {
          finalize(i);
          break;
        }
      }
    } else if (state === 'RESULT') {
      // any click → new round
      newRound();
    }
  }

  // auto-advance result after delay
  if (state === 'RESULT') {
    resultTime -= dt * 1000;
    if (resultTime <= 0) {
      // wait for user click to continue; don't auto-advance
    }
  }

  // highlight user pick / hover
  for (let i = 0; i < 3; i++) {
    const d = doors[i];
    if (state === 'REVEAL' && i === userPick) {
      ctx.strokeStyle = '#60c8ff';
      ctx.lineWidth = 4;
      ctx.strokeRect(d.x - 8, d.y - 8, d.w + 16, d.h + 16);
    }
    if (state === 'RESULT' && i === finalPick) {
      ctx.strokeStyle = didWin ? '#60ff80' : '#ff6060';
      ctx.lineWidth = 4;
      ctx.strokeRect(d.x - 8, d.y - 8, d.w + 16, d.h + 16);
    }
  }

  for (let i = 0; i < 3; i++) {
    drawDoor(ctx, doors[i], i, String(i + 1));
  }

  // title and instructions
  ctx.fillStyle = '#e8e8f0';
  ctx.font = 'bold 18px monospace';
  ctx.textAlign = 'center';
  ctx.fillText('Monty Hall — Switch or Stay?', W / 2, 28);

  ctx.font = '13px monospace';
  ctx.fillStyle = '#cfd';
  let prompt = '';
  if (state === 'PICK') prompt = 'Step 1: pick a door';
  else if (state === 'REVEAL') {
    const otherIdx = [0, 1, 2].find(i => i !== userPick && i !== revealedDoor);
    prompt = `Host opened door ${revealedDoor + 1}. Click door ${userPick + 1} to STAY or door ${otherIdx + 1} to SWITCH.`;
  }
  else if (state === 'RESULT') {
    prompt = `${didSwitch ? 'SWITCHED' : 'STAYED'} → ${didWin ? 'WIN!' : 'lose'}.  Click to play again.`;
  }
  ctx.fillText(prompt, W / 2, 50);
  ctx.textAlign = 'left';

  // ---- stats panel ----
  const panelY = doors[0].y + doors[0].h + 30;
  const panelH = H - panelY - 20;
  if (panelH > 60) {
    // bar chart of win rates
    const stayRate = stayPlays > 0 ? stayWins / stayPlays : 0;
    const switchRate = switchPlays > 0 ? switchWins / switchPlays : 0;

    const barX = 30;
    const barW = Math.min(360, W - 60);
    const barH = 18;
    const labelW = 110;
    const barAreaX = barX + labelW;
    const barAreaW = barW - labelW - 80;

    // STAY bar
    let by = panelY;
    ctx.fillStyle = '#aab';
    ctx.font = '12px monospace';
    ctx.fillText(`STAY  (${stayWins}/${stayPlays})`, barX, by + 13);
    ctx.fillStyle = '#222';
    ctx.fillRect(barAreaX, by, barAreaW, barH);
    ctx.fillStyle = '#60c8ff';
    ctx.fillRect(barAreaX, by, barAreaW * stayRate, barH);
    // dashed at 1/3
    ctx.strokeStyle = '#fc6';
    ctx.setLineDash([3, 3]);
    ctx.beginPath();
    ctx.moveTo(barAreaX + barAreaW / 3, by - 2);
    ctx.lineTo(barAreaX + barAreaW / 3, by + barH + 2);
    ctx.stroke();
    ctx.setLineDash([]);
    ctx.fillStyle = '#fff';
    ctx.fillText(`${(stayRate * 100).toFixed(1)}%`, barAreaX + barAreaW + 6, by + 13);

    // SWITCH bar
    by += barH + 10;
    ctx.fillStyle = '#aab';
    ctx.fillText(`SWITCH (${switchWins}/${switchPlays})`, barX, by + 13);
    ctx.fillStyle = '#222';
    ctx.fillRect(barAreaX, by, barAreaW, barH);
    ctx.fillStyle = '#60ff80';
    ctx.fillRect(barAreaX, by, barAreaW * switchRate, barH);
    ctx.strokeStyle = '#fc6';
    ctx.setLineDash([3, 3]);
    ctx.beginPath();
    ctx.moveTo(barAreaX + (barAreaW * 2) / 3, by - 2);
    ctx.lineTo(barAreaX + (barAreaW * 2) / 3, by + barH + 2);
    ctx.stroke();
    ctx.setLineDash([]);
    ctx.fillStyle = '#fff';
    ctx.fillText(`${(switchRate * 100).toFixed(1)}%`, barAreaX + barAreaW + 6, by + 13);

    // Theoretical labels
    by += barH + 18;
    ctx.fillStyle = '#fc6';
    ctx.font = '11px monospace';
    ctx.fillText('theoretical:  P(win | stay) = 1/3 ≈ 33.3%   ·   P(win | switch) = 2/3 ≈ 66.7%', barX, by);

    // Mini timeline of last decisions
    by += 18;
    const dotR = Math.max(3, Math.min(5, (barW - 20) / Math.max(40, history.length) / 2));
    const tx0 = barX;
    const tw = barW;
    if (history.length > 0) {
      ctx.fillStyle = '#888';
      ctx.fillText(`last ${history.length}:`, tx0, by);
      const ty = by + 14;
      for (let i = 0; i < history.length; i++) {
        const h = history[i];
        const dx = tx0 + 90 + ((tw - 100) * (i / Math.max(1, HISTORY_MAX - 1)));
        ctx.fillStyle = h.didSwitch
          ? (h.didWin ? '#60ff80' : '#406030')
          : (h.didWin ? '#60c8ff' : '#304060');
        ctx.beginPath();
        ctx.arc(dx, ty, dotR, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.fillStyle = '#666';
      ctx.font = '10px monospace';
      ctx.fillText('switch-win=green · switch-lose=dim · stay-win=blue · stay-lose=dim', tx0, by + 30);
    }
  }
}