2048

const N = 4;
let board, score, best, won, dead;
let W = 0, H = 0;
let anim = 0;
let dragStart = null;
let lastMouseDown = false;
const SWIPE_MIN = 24;

const COLORS = {
  0:    ["#cdc1b4", "#776e65"],
  2:    ["#eee4da", "#776e65"],
  4:    ["#ede0c8", "#776e65"],
  8:    ["#f2b179", "#f9f6f2"],
  16:   ["#f59563", "#f9f6f2"],
  32:   ["#f67c5f", "#f9f6f2"],
  64:   ["#f65e3b", "#f9f6f2"],
  128:  ["#edcf72", "#f9f6f2"],
  256:  ["#edcc61", "#f9f6f2"],
  512:  ["#edc850", "#f9f6f2"],
  1024: ["#edc53f", "#f9f6f2"],
  2048: ["#edc22e", "#f9f6f2"],
};

function colorFor(v) {
  if (COLORS[v]) return COLORS[v];
  // beyond 2048 — deep purples
  return ["#3c3a32", "#f9f6f2"];
}

function spawn() {
  const empty = [];
  for (let i = 0; i < N * N; i++) if (board[i] === 0) empty.push(i);
  if (!empty.length) return;
  const k = empty[(Math.random() * empty.length) | 0];
  board[k] = Math.random() < 0.9 ? 2 : 4;
}

function reset() {
  board = new Uint32Array(N * N);
  score = 0;
  won = false;
  dead = false;
  spawn();
  spawn();
  anim = 0;
}

function init({ width, height }) {
  W = width; H = height;
  best = 0;
  reset();
}

// Slide one row (length N) to the left, merging equal pairs.
// Returns { row, gained, moved }.
function slideRow(row) {
  const filtered = [];
  for (let i = 0; i < N; i++) if (row[i] !== 0) filtered.push(row[i]);
  let gained = 0;
  for (let i = 0; i < filtered.length - 1; i++) {
    if (filtered[i] === filtered[i + 1]) {
      filtered[i] *= 2;
      gained += filtered[i];
      if (filtered[i] >= 2048) won = true;
      filtered.splice(i + 1, 1);
    }
  }
  while (filtered.length < N) filtered.push(0);
  let moved = false;
  for (let i = 0; i < N; i++) if (row[i] !== filtered[i]) { moved = true; break; }
  return { row: filtered, gained, moved };
}

// dir: 0=left, 1=right, 2=up, 3=down
function move(dir) {
  let anyMoved = false;
  let totalGain = 0;
  for (let i = 0; i < N; i++) {
    // build a row in the slide direction
    const row = new Array(N);
    for (let j = 0; j < N; j++) {
      let x, y;
      if (dir === 0) { x = j; y = i; }
      else if (dir === 1) { x = N - 1 - j; y = i; }
      else if (dir === 2) { x = i; y = j; }
      else { x = i; y = N - 1 - j; }
      row[j] = board[y * N + x];
    }
    const { row: out, gained, moved } = slideRow(row);
    if (moved) anyMoved = true;
    totalGain += gained;
    for (let j = 0; j < N; j++) {
      let x, y;
      if (dir === 0) { x = j; y = i; }
      else if (dir === 1) { x = N - 1 - j; y = i; }
      else if (dir === 2) { x = i; y = j; }
      else { x = i; y = N - 1 - j; }
      board[y * N + x] = out[j];
    }
  }
  if (anyMoved) {
    score += totalGain;
    if (score > best) best = score;
    spawn();
    anim = 1;
    checkDead();
  }
}

function checkDead() {
  for (let i = 0; i < N * N; i++) if (board[i] === 0) return;
  for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
    const v = board[y * N + x];
    if (x + 1 < N && board[y * N + x + 1] === v) return;
    if (y + 1 < N && board[(y + 1) * N + x] === v) return;
  }
  dead = true;
}

function handleKeys(input) {
  if (input.justPressed("r") || input.justPressed("R")) { reset(); return; }
  if (dead || won) return;
  if (input.justPressed("ArrowLeft") || input.justPressed("a")) move(0);
  else if (input.justPressed("ArrowRight") || input.justPressed("d")) move(1);
  else if (input.justPressed("ArrowUp") || input.justPressed("w")) move(2);
  else if (input.justPressed("ArrowDown") || input.justPressed("s")) move(3);
}

function handleSwipe(input) {
  // Track press-drag-release as swipe
  if (input.mouseDown && !lastMouseDown) {
    dragStart = { x: input.mouseX, y: input.mouseY };
  } else if (!input.mouseDown && lastMouseDown && dragStart) {
    const dx = input.mouseX - dragStart.x;
    const dy = input.mouseY - dragStart.y;
    const ax = Math.abs(dx), ay = Math.abs(dy);
    if (Math.max(ax, ay) >= SWIPE_MIN) {
      if (dead || won) {
        // tap-after-finish handled by clicks below
      } else if (ax > ay) {
        move(dx > 0 ? 1 : 0);
      } else {
        move(dy > 0 ? 3 : 2);
      }
    }
    dragStart = null;
  }
  lastMouseDown = input.mouseDown;
  // Drain clicks (any tap when finished restarts)
  const clicks = input.consumeClicks();
  if (clicks && clicks.length && (dead || won)) reset();
}

function drawTile(ctx, x, y, size, v, pad) {
  const [bg, fg] = colorFor(v);
  ctx.fillStyle = bg;
  const r = Math.max(3, size * 0.06);
  // rounded rect
  const x0 = x + pad, y0 = y + pad, w = size - pad * 2, h = size - pad * 2;
  ctx.beginPath();
  ctx.moveTo(x0 + r, y0);
  ctx.lineTo(x0 + w - r, y0);
  ctx.quadraticCurveTo(x0 + w, y0, x0 + w, y0 + r);
  ctx.lineTo(x0 + w, y0 + h - r);
  ctx.quadraticCurveTo(x0 + w, y0 + h, x0 + w - r, y0 + h);
  ctx.lineTo(x0 + r, y0 + h);
  ctx.quadraticCurveTo(x0, y0 + h, x0, y0 + h - r);
  ctx.lineTo(x0, y0 + r);
  ctx.quadraticCurveTo(x0, y0, x0 + r, y0);
  ctx.closePath();
  ctx.fill();
  if (v === 0) return;
  ctx.fillStyle = fg;
  const digits = String(v).length;
  const fs = Math.floor(size * (digits <= 2 ? 0.42 : digits === 3 ? 0.34 : 0.26));
  ctx.font = `bold ${fs}px sans-serif`;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(String(v), x + size / 2, y + size / 2);
}

function tick({ ctx, dt, width, height, input }) {
  W = width; H = height;
  handleKeys(input);
  handleSwipe(input);
  if (anim > 0) anim = Math.max(0, anim - dt * 6);

  // bg
  ctx.fillStyle = "#0e1116";
  ctx.fillRect(0, 0, W, H);

  // board frame
  const side = Math.min(W, H) - 80;
  const ox = (W - side) / 2;
  const oy = (H - side) / 2 + 16;
  const gap = Math.max(4, side * 0.018);
  const cell = (side - gap * (N + 1)) / N;

  ctx.fillStyle = "#bbada0";
  const fr = Math.max(4, side * 0.02);
  ctx.beginPath();
  ctx.moveTo(ox + fr, oy);
  ctx.lineTo(ox + side - fr, oy);
  ctx.quadraticCurveTo(ox + side, oy, ox + side, oy + fr);
  ctx.lineTo(ox + side, oy + side - fr);
  ctx.quadraticCurveTo(ox + side, oy + side, ox + side - fr, oy + side);
  ctx.lineTo(ox + fr, oy + side);
  ctx.quadraticCurveTo(ox, oy + side, ox, oy + side - fr);
  ctx.lineTo(ox, oy + fr);
  ctx.quadraticCurveTo(ox, oy, ox + fr, oy);
  ctx.closePath();
  ctx.fill();

  for (let y = 0; y < N; y++) {
    for (let x = 0; x < N; x++) {
      const px = ox + gap + x * (cell + gap);
      const py = oy + gap + y * (cell + gap);
      drawTile(ctx, px, py, cell, 0, 0);
    }
  }
  for (let y = 0; y < N; y++) {
    for (let x = 0; x < N; x++) {
      const v = board[y * N + x];
      if (v === 0) continue;
      const px = ox + gap + x * (cell + gap);
      const py = oy + gap + y * (cell + gap);
      const pop = 1 + anim * 0.06;
      const s = cell * pop;
      const dx = (cell - s) / 2;
      drawTile(ctx, px + dx, py + dx, s, v, Math.max(2, s * 0.04));
    }
  }

  // HUD
  ctx.fillStyle = "#e6edf3";
  ctx.font = "bold 16px sans-serif";
  ctx.textBaseline = "top";
  ctx.textAlign = "left";
  ctx.fillText(`Score ${score}`, 12, 10);
  ctx.textAlign = "right";
  ctx.fillText(`Best ${best}`, W - 12, 10);
  ctx.textAlign = "center";
  ctx.font = "12px sans-serif";
  ctx.fillStyle = "rgba(230,237,243,0.55)";
  ctx.fillText("arrow keys or swipe — R to reset", W / 2, 12);
  ctx.textAlign = "left";

  if (won || dead) {
    ctx.fillStyle = won ? "rgba(237,194,46,0.78)" : "rgba(20,20,24,0.78)";
    ctx.fillRect(ox, oy, side, side);
    ctx.fillStyle = won ? "#5a4a14" : "#e6edf3";
    ctx.textAlign = "center";
    ctx.font = "bold 38px sans-serif";
    ctx.fillText(won ? "You win!" : "Game Over", W / 2, oy + side / 2 - 18);
    ctx.font = "14px sans-serif";
    ctx.fillText("Tap or press R to restart", W / 2, oy + side / 2 + 18);
    ctx.textAlign = "left";
  }
}