defunkt/nose-pluto
1
0
Fork 0
Code Issues Pull Requests Activity

preview next shape, better colors

Browse Source
This commit is contained in:
Chris Wanstrath 2025-09-29 10:40:38 -07:00
parent e5d792ada0
commit 7d5062afab
1 changed files with 75 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
app/nose/bin/tetris.ts
View File

@ -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")
// 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<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]!)
}
}
}