nose-pluto/app/nose/bin/tetris.ts

/// <reference lib="dom" />
export const game = true

import type { GameContext, InputState } from "@/shared/game"
import { randomElement, randomIndex } from "@/shared/utils.ts"

const COLS = 10
const ROWS = 20
const CELL = 25
const DOWN_TICK = 10
const MOVE_TICK = 3
const TETRIS_FRAMES = 5
const LOCK_DELAY = 5

type Shape = { x: number, y: number, shape: string, rotation: number }

let player: Shape
let nextShape: Shape
let grid: string[][] = []
let dead = false
let downTick = 0
let moveTick = 0
let tetrisRows: number[] = []
let tetrisTimer = 0
let lockTimer = 0

const BORDER_COLOR = "#b388ff"
const BG_COLOR = "#222"
const LINE_COLOR = "black"
const UI_BG_COLOR = "#4c3a87"

const COLORS: Record<string, string> = {
  I: "cyan",
  O: "yellow",
  T: "magenta",
  S: "lime",
  Z: "red",
  J: "blue",
  L: "orange",
}

// I, O, T, L, J, S, Z
const SHAPES: Record<string, number[][][]> = {
  I: [
    [[1, 1, 1, 1]],
    [[1], [1], [1], [1]]
  ],

  O: [[
    [1, 1],
    [1, 1]
  ]],

  T: [
    [
      [1, 0],
      [1, 1],
      [1, 0]
    ],
    [
      [1, 1, 1],
      [0, 1, 0],
    ],
    [
      [0, 1],
      [1, 1],
      [0, 1]
    ],
    [
      [0, 1, 0],
      [1, 1, 1],
    ]
  ],

  L: [
    [
      [1, 0],
      [1, 0],
      [1, 1]
    ],
    [
      [1, 1, 1],
      [1, 0, 0]
    ],
    [
      [1, 1],
      [0, 1],
      [0, 1]
    ],
    [
      [0, 0, 1],
      [1, 1, 1]
    ]
  ],

  J: [
    [
      [0, 1],
      [0, 1],
      [1, 1]
    ],
    [
      [1, 0, 0],
      [1, 1, 1]
    ],
    [
      [1, 1],
      [1, 0],
      [1, 0]
    ],
    [
      [1, 1, 1],
      [0, 0, 1]
    ]
  ],

  S: [
    [
      [1, 0],
      [1, 1],
      [0, 1]
    ],
    [
      [0, 1, 1],
      [1, 1, 0],
    ],
    [
      [1, 0],
      [1, 1],
      [0, 1]
    ],
    [
      [0, 1, 1],
      [1, 1, 0]
    ]
  ],

  Z: [
    [
      [0, 1],
      [1, 1],
      [1, 0]
    ],
    [
      [1, 1, 0],
      [0, 1, 1]
    ],
    [
      [0, 1],
      [1, 1],
      [1, 0]
    ],
    [
      [1, 1, 0],
      [0, 1, 1]
    ]
  ],
}

export function init() {
  dead = false
  downTick = 0
  moveTick = 0
  tetrisTimer = TETRIS_FRAMES
  lockTimer = 0
  tetrisRows.length = 0
  grid.length = 0

  player = newShape()
  nextShape = newShape()
}

export function update(_delta: number, input: InputState) {
  const keys = input.pressed

  if (input.justPressed.has(" ")) {
    rotateShape()
  }

  // tetris animation
  if (tetrisRows.length > 0) {
    tetrisTimer--
    if (tetrisTimer <= 0) {
      removeTetrisRows()
      tetrisRows = []
    }
  } else if (anyFullRows()) {
    tetrisRows = findFullRows()
    tetrisTimer = TETRIS_FRAMES
  }

  const hit = blocked()
  if (!hit) lockTimer = LOCK_DELAY

  if (hit) {
    if (lockTimer > 0) {
      lockTimer--
    } else {
      lockShape()
      return
    }
  }

  if (++moveTick % MOVE_TICK === 0) {
    if (
      (keys.has("ArrowLeft") || keys.has("a")) &&
      !collision(player.x - 1, player.y, player.rotation)
    )
      player.x = Math.max(0, player.x - 1)

    if (
      (keys.has("ArrowRight") || keys.has("d")) &&
      !collision(player.x + 1, player.y, player.rotation)
    )
      player.x = Math.min(COLS, player.x + 1)

    if (
      (keys.has("ArrowDown") || keys.has("s")) &&
      !collision(player.x, player.y + 1, player.rotation)
    )
      player.y += 1
  }

  if (++downTick % DOWN_TICK === 0)
    if (!collision(player.x, player.y + 1, player.rotation)) {
      player.y++
    }
}

export function draw(game: GameContext) {
  // game.clear("#654321") // brown
  game.clear(UI_BG_COLOR)

  const boardW = COLS * CELL
  const boardH = ROWS * CELL
  const offsetX = (game.width - boardW) / 2
  const offsetY = (game.height - boardH) / 2

  const c = game.ctx
  c.save()
  c.translate(offsetX, offsetY)

  // lines (shows through cracks between blocks)
  game.rectfill(0, 0, boardW, boardH, LINE_COLOR)

  // draw border
  for (let col = -1; col <= COLS; col++) {
    drawBlock(game, col, -1, BORDER_COLOR)
    drawBlock(game, col, ROWS, BORDER_COLOR)
  }
  for (let row = 0; row < ROWS; row++) {
    drawBlock(game, -1, row, BORDER_COLOR)
    drawBlock(game, COLS, row, BORDER_COLOR)
  }

  // draw board
  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLS; col++) {
      let color = grid[row]?.[col] || BG_COLOR
      if (tetrisRows.includes(row)) color = "white"
      drawBlock(game, col, row, color)
    }
  }

  // player shape
  const shape = SHAPES[player.shape]![player.rotation]!
  for (const row in shape) {
    for (const col in shape[row]!) {
      const filled = shape[row][col]
      if (!filled) continue

      const x = player.x + Number(col)
      const y = player.y + Number(row)

      drawBlock(game, x, y, COLORS[player.shape]!)
    }
  }

  // "next shape" UI
  drawPreview(game)

  c.restore()

  // ya dead
  if (dead) {
    game.centerText("GAME OVER", "red", 24)
  }
}

function newShape(): Shape {
  const shape = randomElement(Object.keys(SHAPES))!
  return { x: 3, y: 0, shape, rotation: randomIndex(SHAPES[shape]!)! }
}

function anyFullRows(): boolean {
  return findFullRows().length > 0
}

function findFullRows(): number[] {
  const rows: number[] = []
  for (let y = 0; y < ROWS; y++) {
    let full = true
    for (let x = 0; x < COLS; x++) {
      if (!grid[y]?.[x]) {
        full = false
        break
      }
    }
    if (full) rows.push(y)
  }
  return rows
}

function removeTetrisRows() {
  const newGrid: string[][] = []

  for (let y = 0; y < ROWS; y++)
    if (!tetrisRows.includes(y))
      newGrid.push(grid[y] ?? [])

  // add empty rows on top to restore height
  while (newGrid.length < ROWS)
    newGrid.unshift([])

  grid = newGrid
  tetrisRows = []
}

function collision(x: number, y: number, rotation: number): boolean {
  const shape = SHAPES[player.shape]![rotation]!

  for (let row = 0; row < shape.length; row++) {
    for (let col = 0; col < shape[row]!.length; col++) {
      if (!shape[row]![col]) continue

      const nx = x + col
      const ny = y + row

      if (nx < 0 || nx >= COLS) return true
      if (ny >= ROWS) return true
      if (grid[ny]?.[nx]) return true
    }
  }

  return false
}

function lockShape() {
  const shape = SHAPES[player.shape]![player.rotation]!
  for (const row in shape) {
    for (const col in shape[row]!) {
      const filled = shape[row][col]
      if (!filled) continue

      const x = player.x + Number(col)
      const y = player.y + Number(row)

      grid[y] ??= []
      grid[y][x] = COLORS[player.shape]!
    }
  }

  player = nextShape
  player.x = 3
  player.y = 0
  nextShape = newShape()
}

function blocked(): boolean {
  const shape = SHAPES[player.shape]![player.rotation]!
  let hit = false

  outer: for (const row in shape) {
    for (const col in shape[row]!) {
      const filled = shape[row][col]
      if (!filled) continue

      const x = player.x + Number(col)
      const y = player.y + Number(row)

      grid[y + 1] ??= []

      if ((y + 1) >= ROWS || grid[y + 1]![x]) {
        hit = true
        break outer
      }
    }
  }

  return hit
}

function drawBlock(game: GameContext, x: number, y: number, color: string) {
  game.rectfill(
    x * CELL,
    y * CELL,
    ((x + 1) * CELL) - .5,
    ((y + 1) * CELL) - .5,
    color
  )
}

// I, O, T, L, J, S, Z
const PREVIEW_OFFSETS: Record<string, [number, number]> = {
  I: [2, 3],
  O: [3, 2],
  T: [3, 2],
  L: [3, 2],
  J: [3, 2],
  S: [3, 2],
  Z: [3, 2],
}

// draw next shape (top-right corner)
function drawPreview(game: GameContext) {
  const previewX = COLS + 2
  const previewY = 0
  const cols = 7
  const rows = 7

  // lines (shows through cracks between blocks)
  game.rectfill(
    previewX * CELL,
    previewY * CELL,
    (previewX + cols) * CELL,
    (previewY + rows) * CELL,
    LINE_COLOR
  )
  // draw board
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      let color = grid[row]?.[col] || BG_COLOR
      drawBlock(game, previewX + col, previewY + row, color)
    }
  }

  // draw border
  for (let col = -1; col < cols; col++) {
    drawBlock(game, previewX + col + 1, -1, BORDER_COLOR)
    drawBlock(game, previewX + col + 1, rows, BORDER_COLOR)
  }

  for (let row = -1; row < rows; row++) {
    drawBlock(game, previewX, row, BORDER_COLOR)
    drawBlock(game, previewX + cols, row, BORDER_COLOR)
  }

  const next = SHAPES[nextShape.shape]![0]!
  for (let row = 0; row < next.length; row++) {
    for (let col = 0; col < next[row]!.length; col++) {
      if (!next[row]![col]) continue
      const [offsetX, offsetY] = PREVIEW_OFFSETS[nextShape.shape]!
      drawBlock(game, previewX + col + offsetX, previewY + row + offsetY, COLORS[nextShape.shape]!)
    }
  }
}

function rotateShape() {
  const oldRot = player.rotation
  const newRot = (oldRot + 1) % SHAPES[player.shape]!.length

  if (!collision(player.x, player.y, newRot)) {
    player.rotation = newRot
    return
  }

  if (!collision(player.x + 1, player.y, newRot)) {
    player.x += 1
    player.rotation = newRot
    return
  }

  if (!collision(player.x - 1, player.y, newRot)) {
    player.x -= 1
    player.rotation = newRot
    return
  }
}