diff --git a/app/nose/bin/tetris.ts b/app/nose/bin/tetris.ts index c448b13..31e6bac 100644 --- a/app/nose/bin/tetris.ts +++ b/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 = { I: "cyan", O: "yellow", @@ -47,10 +52,6 @@ const SHAPES: Record = { ]], T: [ - [ - [0, 1, 0], - [1, 1, 1], - ], [ [1, 0], [1, 1], @@ -64,6 +65,10 @@ const SHAPES: Record = { [0, 1], [1, 1], [0, 1] + ], + [ + [0, 1, 0], + [1, 1, 1], ] ], @@ -110,10 +115,6 @@ const SHAPES: Record = { ], S: [ - [ - [0, 1, 1], - [1, 1, 0] - ], [ [1, 0], [1, 1], @@ -127,14 +128,14 @@ const SHAPES: Record = { [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 = { [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") + // game.clear("#654321") // brown + 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 - game.rectfill(0, 0, boardW, boardH, "black") + // 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] || "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 = { + 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]!) } } } \ No newline at end of file