preview next shape, better colors

app/nose/bin/tetris.ts

@@ -24,6 +24,11 @@ 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",
@@ -47,10 +52,6 @@ const SHAPES: Record<string, number[][][]> = {
   ]],
 
   T: [
-    [
-      [0, 1, 0],
-      [1, 1, 1],
-    ],
     [
       [1, 0],
       [1, 1],
@@ -64,6 +65,10 @@ const SHAPES: Record<string, number[][][]> = {
       [0, 1],
       [1, 1],
       [0, 1]
+    ],
+    [
+      [0, 1, 0],
+      [1, 1, 1],
     ]
   ],
 
@@ -110,10 +115,6 @@ const SHAPES: Record<string, number[][][]> = {
   ],
 
   S: [
-    [
-      [0, 1, 1],
-      [1, 1, 0]
-    ],
     [
       [1, 0],
       [1, 1],
@@ -127,14 +128,14 @@ const SHAPES: Record<string, number[][][]> = {
       [1, 0],
       [1, 1],
       [0, 1]
+    ],
+    [
+      [0, 1, 1],
+      [1, 1, 0]
     ]
   ],
 
   Z: [
-    [
-      [1, 1, 0],
-      [0, 1, 1]
-    ],
     [
       [0, 1],
       [1, 1],
@@ -148,6 +149,10 @@ const SHAPES: Record<string, number[][][]> = {
       [0, 1],
       [1, 1],
       [1, 0]
+    ],
+    [
+      [1, 1, 0],
+      [0, 1, 1]
     ]
   ],
 }
@@ -225,8 +230,8 @@ export function update(_delta: number, input: InputState) {
 }
 
 export function draw(game: GameContext) {
-  // game.clear("#6C6FF6")
+  // game.clear("#654321") // brown
-  game.clear("#654321")
+  game.clear(UI_BG_COLOR)
 
   const boardW = COLS * CELL
   const boardH = ROWS * CELL
@@ -237,13 +242,23 @@ export function draw(game: GameContext) {
   c.save()
   c.translate(offsetX, offsetY)
 
-  // background
+  // lines (shows through cracks between blocks)
-  game.rectfill(0, 0, boardW, boardH, "black")
+  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] || "gray"
+      let color = grid[row]?.[col] || BG_COLOR
       if (tetrisRows.includes(row)) color = "white"
       drawBlock(game, col, row, color)
     }
@@ -387,16 +402,57 @@ function drawBlock(game: GameContext, x: number, y: number, color: string) {
   )
 }
 
+// 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 + 3
+  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
-      drawBlock(game, previewX + col, previewY + row, COLORS[nextShape.shape]!)
+      const [offsetX, offsetY] = PREVIEW_OFFSETS[nextShape.shape]!
+      drawBlock(game, previewX + col + offsetX, previewY + row + offsetY, COLORS[nextShape.shape]!)
     }
   }
 }