stacker.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacker</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: #15171c;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Courier New', monospace;
    color: #eee;
    padding: 20px;
  }

  #game-wrapper {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }

  /* ---- Cabinet ---- */
  #cabinet {
    background: linear-gradient(#d8d8d4, #b8b8b2);
    border-radius: 14px 14px 6px 6px;
    padding: 0 0 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    width: 320px;
  }

  #marquee {
    background: repeating-linear-gradient(45deg, #f4a800, #f4a800 14px, #ff6a00 14px, #ff6a00 28px);
    border-radius: 14px 14px 0 0;
    padding: 14px 0;
    text-align: center;
    border-bottom: 4px solid #7a4a00;
  }
  #marquee h1 {
    font-size: 2.6rem;
    letter-spacing: 6px;
    color: #ffe000;
    -webkit-text-stroke: 2px #b00000;
    text-shadow: 3px 3px 0 #7a0000;
    font-weight: 900;
  }

  #board-container {
    position: relative;
    margin: 16px auto 0;
    width: max-content;
    background: #07090c;
    border: 3px solid #3a3a3a;
    border-radius: 6px;
    box-shadow: inset 0 0 24px rgba(0,0,0,0.9);
  }

  canvas#board { display: block; }

  #overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.82);
    text-align: center;
    gap: 14px;
    padding: 16px;
  }
  #overlay.hidden { display: none; }

  #overlay h2 {
    font-size: 1.7rem;
    color: #ff3b3b;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 12px rgba(255,40,40,0.7);
  }
  #overlay h2.gold { color: #ffd000; text-shadow: 0 0 16px rgba(255,210,0,0.8); }
  #overlay p { font-size: 0.85rem; color: #bbb; line-height: 1.5; }

  .btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

  button.act {
    margin-top: 6px;
    padding: 11px 24px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #e02424;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background 0.15s;
  }
  button.act:hover { background: #b81d1d; }
  button.act.gold { background: #e0a800; color: #221a00; }
  button.act.gold:hover { background: #c79500; }
  button.act.ghost { background: #444; }
  button.act.ghost:hover { background: #333; }

  #coin-slot {
    text-align: center;
    margin-top: 12px;
    font-size: 0.8rem;
    color: #444;
    letter-spacing: 2px;
  }

  /* ---- Side panel ---- */
  #side-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 180px;
  }
  .panel-box {
    background: #1d2230;
    border: 1px solid #333a4d;
    border-radius: 6px;
    padding: 12px 14px;
  }
  .panel-box h3 {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8893ad;
    margin-bottom: 4px;
  }
  .panel-box .value { font-size: 1.5rem; color: #fff; }
  .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-grid .panel-box { padding: 8px 10px; }
  .stat-grid .value { font-size: 1.25rem; }

  .toggle-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .toggle-row input { width: 16px; height: 16px; cursor: pointer; accent-color: #e02424; }
  .toggle-row span { font-size: 0.78rem; color: #cdd3e0; }
  .toggle-note { font-size: 0.62rem; color: #6b7488; margin-top: 6px; line-height: 1.4; }

  #difficulty {
    width: 100%;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 0.85rem;
    background: #10141d;
    color: #fff;
    border: 1px solid #333a4d;
    border-radius: 4px;
    cursor: pointer;
  }

  #controls { font-size: 0.72rem; color: #aab; line-height: 1.7; }
  #controls span { color: #ff6a6a; font-weight: bold; }
</style>
</head>
<body>
<div id="game-wrapper">
  <div id="cabinet">
    <div id="marquee"><h1>STACKER</h1></div>
    <div id="board-container">
      <canvas id="board"></canvas>
      <div id="overlay">
        <h2 id="ov-title">STACKER</h2>
        <p id="ov-text">Stop the moving blocks to build your stack.<br>Reach row 12 for a MINOR prize, row 15 for the JACKPOT!</p>
        <div class="btn-row" id="ov-buttons">
          <button type="button" class="act" id="start-btn">Play&nbsp;·&nbsp;$1</button>
        </div>
      </div>
    </div>
    <div id="coin-slot">— $1.00 PER PLAY —</div>
  </div>

  <div id="side-panel">
    <div class="panel-box">
      <h3>Current Row</h3>
      <div class="value"><span id="row-val">0</span> / 15</div>
    </div>
    <div class="stat-grid">
      <div class="panel-box"><h3>Minor</h3><div class="value" id="minor-val">0</div></div>
      <div class="panel-box"><h3>Major</h3><div class="value" id="major-val">0</div></div>
    </div>
    <div class="panel-box">
      <h3>Tickets</h3>
      <div class="value" id="tickets-val">0</div>
    </div>
    <div class="panel-box">
      <h3>Difficulty</h3>
      <select id="difficulty" aria-label="Difficulty">
        <option value="easy">Easy</option>
        <option value="normal" selected>Normal</option>
        <option value="hard">Hard</option>
        <option value="insane">Insane</option>
      </select>
      <div class="toggle-note" id="diff-note">Sets how fast the blocks slide. Applies on your next play.</div>
    </div>
    <div class="panel-box">
      <label class="toggle-row">
        <input type="checkbox" id="arcade-toggle">
        <span>Arcade mode</span>
      </label>
      <div class="toggle-note">Adds a real-cabinet rig on top of your difficulty: a sneaky timing offset near the prize rows that can shave a block even on a clean stop. Jackpot becomes brutal.</div>
    </div>
    <div class="panel-box" id="controls">
      <span>Space</span> Stop blocks<br>
      <span>Click / Tap</span> Stop blocks<br>
      <span>R</span> Restart
    </div>
  </div>
</div>

<script>
// ---- Grid / prize config ----
const COLS = 7, ROWS = 15, CELL = 40;
const PAD = 6;                 // inner padding around grid in px
const MINOR_ROW = 12, MAJOR_ROW = 15;
const TICKETS_MINOR = 25, TICKETS_MAJOR = 250;

// Difficulty = base-speed multiplier applied at the start of each play.
const DIFFICULTY = {
  easy:   { mult: 0.72, label: 'Relaxed pace — good for learning the timing.' },
  normal: { mult: 1.00, label: 'Sets how fast the blocks slide. Applies on your next play.' },
  hard:   { mult: 1.45, label: 'Fast blocks and a steeper ramp — a real test.' },
  insane: { mult: 2.00, label: 'Blistering speed. The top rows are near-frame-perfect.' },
};

const board = document.getElementById('board');
const ctx = board.getContext('2d');
board.width = COLS * CELL + PAD * 2;
board.height = ROWS * CELL + PAD * 2;

const overlay = document.getElementById('overlay');
const ovTitle = document.getElementById('ov-title');
const ovText = document.getElementById('ov-text');
const ovButtons = document.getElementById('ov-buttons');
const arcadeToggle = document.getElementById('arcade-toggle');
const difficultySel = document.getElementById('difficulty');
const diffNote = document.getElementById('diff-note');
difficultySel.addEventListener('change', () => {
  diffNote.textContent = (DIFFICULTY[difficultySel.value] || DIFFICULTY.normal).label;
});

// ---- Persistent stats ----
const STORE_KEY = 'stacker-stats';
function loadStats() {
  try { return Object.assign({ minor: 0, major: 0, tickets: 0 }, JSON.parse(localStorage.getItem(STORE_KEY)) || {}); }
  catch { return { minor: 0, major: 0, tickets: 0 }; }
}
function saveStats() { try { localStorage.setItem(STORE_KEY, JSON.stringify(stats)); } catch {} }
let stats = loadStats();

// ---- Game state ----
let stack;        // array of locked rows, index 0 = bottom; each = {start, width}
let currentRow;   // 1-based row being played
let blockWidth;   // active moving group width
let pos;          // left x of moving group (cells, float)
let dir;          // +1 / -1
let speed;        // cells per second
let state;        // 'idle' | 'playing' | 'minor-offer' | 'won' | 'gameover'
let falling;      // [{x,row,t}] blocks that fell off, for fade animation
let flash;        // win flash timer
let lastTime;
let arcadeMode = false;
let speedMult = 1.0;

// Moving group width per row: 3 for rows 1-3, 2 for 4-9, 1 for 10+
function widthForRow(row) {
  if (row <= 3) return 3;
  if (row <= 9) return 2;
  return 1;
}

// Speed (cells/sec) ramps with height, scaled by difficulty; arcade mode ramps harder near the top.
function speedForRow(row) {
  let base = 4.5 + row * 0.55;
  if (arcadeMode) {
    base = 6 + row * 0.9;
    if (row >= MINOR_ROW) base += (row - MINOR_ROW + 1) * 3.5; // brutal at the prize rows
  }
  return base * speedMult;
}

// In arcade mode, the stop can be nudged by up to ~half a cell against the player near the top.
function arcadeOffset(row) {
  if (!arcadeMode || row < MINOR_ROW) return 0;
  const mag = 0.30 + (row - MINOR_ROW) * 0.12;
  return (Math.random() * 2 - 1) * mag;
}

function startGame() {
  arcadeMode = arcadeToggle.checked;
  speedMult = (DIFFICULTY[difficultySel.value] || DIFFICULTY.normal).mult;
  stack = [];
  falling = [];
  flash = 0;
  currentRow = 1;
  blockWidth = widthForRow(1);
  beginRow();
  state = 'playing';
  hideOverlay();
  if (!lastTime) { lastTime = performance.now(); requestAnimationFrame(loop); }
}

function beginRow() {
  blockWidth = Math.min(blockWidth, widthForRow(currentRow));
  speed = speedForRow(currentRow);
  pos = 0;
  dir = 1;
}

function stop() {
  if (state !== 'playing') return;

  // Snap to nearest cell, with arcade nudge applied near the prize rows.
  let landing = pos + arcadeOffset(currentRow);
  let start = Math.round(landing);
  start = Math.max(0, Math.min(COLS - blockWidth, start));

  let newStart = start, newWidth = blockWidth;

  if (stack.length > 0) {
    const prev = stack[stack.length - 1];
    const lo = Math.max(start, prev.start);
    const hi = Math.min(start + blockWidth, prev.start + prev.width);
    newWidth = hi - lo;
    newStart = lo;

    // Record blocks that fall off for the fade animation.
    for (let x = start; x < start + blockWidth; x++) {
      if (x < lo || x >= hi) falling.push({ x, row: currentRow, t: 0 });
    }

    if (newWidth <= 0) { endGame(false); return; }
  }

  stack.push({ start: newStart, width: newWidth });
  blockWidth = newWidth;

  if (currentRow >= MAJOR_ROW) { endGame(true); return; }
  if (currentRow === MINOR_ROW) { offerMinor(); return; }

  currentRow++;
  beginRow();
}

function offerMinor() {
  state = 'minor-offer';
  ovTitle.textContent = 'MINOR PRIZE!';
  ovTitle.className = '';
  ovText.innerHTML = 'You reached row 12. Take the minor prize,<br>or risk it all stacking for the JACKPOT at row 15?';
  ovButtons.innerHTML =
    '<button type="button" class="act gold" id="take-btn">Take prize</button>' +
    '<button type="button" class="act ghost" id="risk-btn">Risk it</button>';
  document.getElementById('take-btn').onclick = () => {
    stats.minor++; stats.tickets += TICKETS_MINOR; saveStats(); renderStats();
    endGameWon('minor');
  };
  document.getElementById('risk-btn').onclick = () => {
    currentRow++; beginRow(); state = 'playing'; hideOverlay();
  };
  flash = 1.0;
  showOverlay();
}

function endGame(won) {
  if (won) {
    stats.major++; stats.tickets += TICKETS_MAJOR; saveStats(); renderStats();
    endGameWon('major');
  } else {
    state = 'gameover';
    ovTitle.textContent = 'GAME OVER';
    ovTitle.className = '';
    ovText.innerHTML = `You stacked ${currentRow - 1} row${currentRow - 1 === 1 ? '' : 's'}.<br>` +
      (currentRow - 1 >= MINOR_ROW ? '' : `Reach row ${MINOR_ROW} for a prize.`);
    ovButtons.innerHTML = '<button type="button" class="act" id="start-btn">Play again · $1</button>';
    document.getElementById('start-btn').onclick = startGame;
    showOverlay();
  }
}

function endGameWon(kind) {
  state = 'won';
  flash = 1.4;
  if (kind === 'major') {
    ovTitle.textContent = '🎉 JACKPOT! 🎉';
    ovTitle.className = 'gold';
    ovText.innerHTML = `You stacked to the TOP and won the MAJOR PRIZE!<br>+${TICKETS_MAJOR} tickets`;
  } else {
    ovTitle.textContent = 'MINOR PRIZE WON!';
    ovTitle.className = 'gold';
    ovText.innerHTML = `Nice stacking.<br>+${TICKETS_MINOR} tickets`;
  }
  ovButtons.innerHTML = '<button type="button" class="act" id="start-btn">Play again · $1</button>';
  document.getElementById('start-btn').onclick = startGame;
  showOverlay();
}

function showOverlay() { overlay.classList.remove('hidden'); }
function hideOverlay() { overlay.classList.add('hidden'); }

// ---- Rendering ----
function cellX(col) { return PAD + col * CELL; }
function cellY(rowFromBottom) { return PAD + (ROWS - rowFromBottom) * CELL; }

function drawCell(col, rowIdx, on, color) {
  // rowIdx is 1-based from bottom
  const x = cellX(col), y = cellY(rowIdx);
  const m = 3;
  if (on) {
    ctx.fillStyle = color;
    ctx.shadowColor = color;
    ctx.shadowBlur = 14;
    ctx.fillRect(x + m, y + m, CELL - m * 2, CELL - m * 2);
    ctx.shadowBlur = 0;
  } else {
    ctx.fillStyle = 'rgba(120,20,20,0.10)';
    ctx.fillRect(x + m, y + m, CELL - m * 2, CELL - m * 2);
  }
}

function drawPrizeLine(rowIdx, label, color) {
  const y = cellY(rowIdx - 1); // line below the prize row's bottom edge
  ctx.strokeStyle = color;
  ctx.lineWidth = 2;
  ctx.setLineDash([6, 5]);
  ctx.beginPath();
  ctx.moveTo(PAD, y);
  ctx.lineTo(board.width - PAD, y);
  ctx.stroke();
  ctx.setLineDash([]);
  ctx.fillStyle = color;
  ctx.font = 'bold 10px "Courier New", monospace';
  ctx.textBaseline = 'bottom';
  ctx.fillText(label, PAD + 4, y - 2);
}

function render(now) {
  ctx.clearRect(0, 0, board.width, board.height);

  // Unlit LED grid backdrop.
  for (let r = 1; r <= ROWS; r++)
    for (let c = 0; c < COLS; c++)
      drawCell(c, r, false);

  // Prize lines.
  drawPrizeLine(MAJOR_ROW, 'MAJOR PRIZE · STACK TO THE TOP', '#ffd000');
  drawPrizeLine(MINOR_ROW, 'MINOR PRIZE', '#ff8c00');

  const winFlash = flash > 0 && (Math.floor(now / 90) % 2 === 0);

  // Locked stack.
  for (let i = 0; i < stack.length; i++) {
    const row = stack[i];
    const color = winFlash ? '#fff3b0' : '#ff2a2a';
    for (let c = row.start; c < row.start + row.width; c++)
      drawCell(c, i + 1, true, color);
  }

  // Moving group.
  if (state === 'playing') {
    const left = Math.round(pos);
    for (let c = left; c < left + blockWidth; c++)
      drawCell(c, currentRow, true, '#ff5050');
  }

  // Falling (missed) blocks fade + drop.
  for (const f of falling) {
    const a = Math.max(0, 1 - f.t * 2);
    if (a <= 0) continue;
    const x = cellX(f.x), y = cellY(f.row) + f.t * 80;
    ctx.globalAlpha = a;
    ctx.fillStyle = '#ff2a2a';
    ctx.fillRect(x + 3, y + 3, CELL - 6, CELL - 6);
    ctx.globalAlpha = 1;
  }
}

function loop(now) {
  const dt = Math.min(0.05, (now - lastTime) / 1000);
  lastTime = now;

  if (state === 'playing') {
    pos += dir * speed * dt;
    const maxPos = COLS - blockWidth;
    if (pos <= 0) { pos = 0; dir = 1; }
    else if (pos >= maxPos) { pos = maxPos; dir = -1; }
  }

  if (flash > 0) flash = Math.max(0, flash - dt);
  for (const f of falling) f.t += dt;
  falling = falling.filter(f => f.t < 0.6);

  renderStatsLive();
  render(now);
  requestAnimationFrame(loop);
}

// ---- HUD ----
function renderStats() {
  document.getElementById('minor-val').textContent = stats.minor;
  document.getElementById('major-val').textContent = stats.major;
  document.getElementById('tickets-val').textContent = stats.tickets;
}
function renderStatsLive() {
  document.getElementById('row-val').textContent =
    (state === 'idle') ? 0 : Math.min(MAJOR_ROW, currentRow || 0);
}

// ---- Input ----
function onStopInput(e) {
  if (state === 'playing') { e.preventDefault(); stop(); }
}
document.addEventListener('keydown', (e) => {
  if (e.code === 'Space') { e.preventDefault(); if (state === 'playing') stop(); }
  else if (e.key === 'r' || e.key === 'R') { if (state !== 'minor-offer') startGame(); }
});
board.addEventListener('mousedown', onStopInput);
board.addEventListener('touchstart', onStopInput, { passive: false });
document.getElementById('start-btn').onclick = startGame;

// ---- Init ----
state = 'idle';
currentRow = 0;
renderStats();
renderStatsLive();
render(performance.now());
// Static first frame while idle; loop starts on first play.
lastTime = performance.now();
requestAnimationFrame(loop);
</script>
</body>
</html>