preview next shape

app/nose/bin/tetris.ts

@@ -15,6 +15,7 @@ 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
@@ -24,13 +25,13 @@ let tetrisTimer = 0
 let lockTimer = 0
 
 const COLORS: Record<string, string> = {
-  I: "#6fc6ff", // light blue (C64 cyan)
+  I: "cyan",
-  O: "#fce94f", // yellow
+  O: "yellow",
-  T: "#d87bfb", // light purple
+  T: "magenta",
-  S: "#8ae234", // light green
+  S: "lime",
-  Z: "#f35f5f", // red
+  Z: "red",
-  J: "#3465a4", // blue
+  J: "blue",
-  L: "#e9b96e", // orange
+  L: "orange",
 }
 
 // I, O, T, L, J, S, Z
@@ -161,6 +162,7 @@ export function init() {
   grid.length = 0
 
   player = newShape()
+  nextShape = newShape()
 }
 
 export function update(_delta: number, input: InputState) {
@@ -261,6 +263,9 @@ export function draw(game: GameContext) {
     }
   }
 
+  // "next shape" UI
+  drawPreview(game)
+
   c.restore()
 
   // ya dead
@@ -342,7 +347,10 @@ function lockShape() {
     }
   }
 
-  player = newShape()
+  player = nextShape
+  player.x = 3
+  player.y = 0
+  nextShape = newShape()
 }
 
 function blocked(): boolean {
@@ -378,3 +386,17 @@ function drawBlock(game: GameContext, x: number, y: number, color: string) {
     color
   )
 }
+
+// draw next shape (top-right corner)
+function drawPreview(game: GameContext) {
+  const previewX = COLS + 3
+  const previewY = 0
+
+  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]!)
+    }
+  }
+}