[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import GameContainer from "@/components/game-container" export default function Home() { return (

Block Placer

) } [V0_FILE]typescriptreact:file="components/block.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" interface BlockProps { type: string isDragged: boolean onDragStart: () => void level: number position: { row: number; col: number } } export default function Block({ type, isDragged, onDragStart, level, position }: BlockProps) { // Define colors for different block types const blockColors: Record = { red: "bg-red-500 hover:bg-red-400", blue: "bg-blue-500 hover:bg-blue-400", green: "bg-green-500 hover:bg-green-400", yellow: "bg-yellow-500 hover:bg-yellow-400", purple: "bg-purple-500 hover:bg-purple-400", // Special blocks that appear at higher levels gold: "bg-amber-400 hover:bg-amber-300", bomb: "bg-gray-800 hover:bg-gray-700", } // Add special effects based on level const getSpecialEffects = () => { if (level >= 3) { return "after:content-[''] after:absolute after:inset-0 after:bg-white/20 after:rounded-md after:opacity-50 after:animate-pulse" } return "" } return ( {/* Block content - could be an icon, pattern, or just color */}

{type === "bomb" &&

} {type === "gold" &&

★

}

) } [V0_FILE]typescriptreact:file="components/score-display.tsx" isEdit="true" isMerged="true" "use client" import { motion, useSpring } from "framer-motion" import { useEffect, useState } from "react" interface ScoreDisplayProps { score: number } export default function ScoreDisplay({ score }: ScoreDisplayProps) { const [displayScore, setDisplayScore] = useState(0) const springScore = useSpring(0, { stiffness: 100, damping: 30 }) useEffect(() => { springScore.set(score) const unsubscribe = springScore.onChange((latest) => { setDisplayScore(Math.floor(latest)) }) return unsubscribe }, [score, springScore]) return (

SCORE

{displayScore.toLocaleString()}

) } [V0_FILE]typescriptreact:file="components/level-display.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" interface LevelDisplayProps { level: number } export default function LevelDisplay({ level }: LevelDisplayProps) { return (

LEVEL

{level}

) } [V0_FILE]typescriptreact:file="lib/game-utils.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { BlockShape } from "./block-shapes" // Check if a block can be placed at the specified position export function canPlaceBlock( board: (string | null)[][], block: BlockShape, startRow: number, startCol: number, ): boolean { const rows = board.length const cols = board[0].length // Check if the block would go out of bounds if (startRow + block.shape.length > rows || startCol + block.shape[0].length > cols) { return false } // Check if any cell is already occupied for (let r = 0; r < block.shape.length; r++) { for (let c = 0; c < block.shape[0].length; c++) { if (block.shape[r][c] && board[startRow + r][startCol + c] !== null) { return false } } } return true } // Check for complete horizontal lines export function checkForCompleteLines(board: (string | null)[][]) { const rows = board.length const cols = board[0].length const newBoard = [...board.map((row) => [...row])] let linesCleared = 0 // Check for complete horizontal lines for (let i = 0; i < rows; i++) { let isComplete = true for (let j = 0; j < cols; j++) { if (newBoard[i][j] === null) { isComplete = false break } } if (isComplete) { // Clear the line for (let j = 0; j < cols; j++) { newBoard[i][j] = null } linesCleared++ } } return { clearedBoard: newBoard, linesCleared } } // Apply gravity to make blocks fall after lines are cleared export function applyGravity(board: (string | null)[][]) { const rows = board.length const cols = board[0].length const newBoard = [...board.map((row) => [...row])] // For each column for (let j = 0; j < cols; j++) { // Start from the bottom and move up let emptyRow = rows - 1 for (let i = rows - 1; i >= 0; i--) { if (newBoard[i][j] !== null) { // If this cell has a block, move it down to the lowest empty position if (i !== emptyRow) { newBoard[emptyRow][j] = newBoard[i][j] newBoard[i][j] = null } // Move the empty position up emptyRow-- } } } return newBoard } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Block Placer", description: "A grid-based block placement game", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } @layer utilities { .text-balance { text-wrap: balance; } } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, red: { 500: "#ef4444", }, blue: { 500: "#3b82f6", }, green: { 500: "#22c55e", }, yellow: { 500: "#eab308", }, purple: { 500: "#a855f7", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], safelist: ["bg-red-500", "bg-blue-500", "bg-green-500", "bg-yellow-500", "bg-purple-500"], } [V0_FILE]typescriptreact:file="components/block-selector.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import type { BlockShape } from "@/lib/block-shapes" interface BlockSelectorProps { blocks: BlockShape[] selectedBlock: BlockShape | null onSelectBlock: (block: BlockShape) => void } export default function BlockSelector({ blocks, selectedBlock, onSelectBlock }: BlockSelectorProps) { return (

Available Blocks

{blocks.map((block) => ( onSelectBlock(block)} whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} >

{block.shape.map((row, rowIndex) => row.map((cell, colIndex) => (

)), )}

))} {blocks.length === 0 && (

No blocks available. Game over!

)}

) } [V0_FILE]typescriptreact:file="lib/block-shapes.ts" isMerged="true" export interface BlockShape { id: string shape: boolean[][] color: string } // Define various block shapes (similar to Tetris pieces) export const BLOCK_SHAPES: Omit[] = [ // Single block { shape: [[true]], }, // Line shapes { shape: [[true, true]], }, { shape: [[true, true, true]], }, { shape: [[true], [true]], }, { shape: [[true], [true], [true]], }, // L shapes { shape: [ [true, false], [true, true], ], }, { shape: [ [false, true], [true, true], ], }, { shape: [ [true, true], [true, false], ], }, { shape: [ [true, true], [false, true], ], }, // T shape { shape: [ [true, true, true], [false, true, false], ], }, { shape: [ [false, true, false], [true, true, true], ], }, // Square shape { shape: [ [true, true], [true, true], ], }, // Z shapes { shape: [ [true, true, false], [false, true, true], ], }, { shape: [ [false, true, true], [true, true, false], ], }, ] [V0_FILE]typescriptreact:file="components/game-container.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from "@/components/ui/dialog" import GameBoard from "./game-board" import BlockSelector from "./block-selector" import ScoreDisplay from "./score-display" import LevelDisplay from "./level-display" import { checkForCompleteLines, canPlaceBlock } from "@/lib/game-utils" import { type BlockShape, BLOCK_SHAPES } from "@/lib/block-shapes" // Game settings const BOARD_SIZE = 8 // Changed from 10 to 8 const POINTS_PER_LINE = 100 const BLOCKS_PER_LEVEL = 10 export default function GameContainer() { // Game board - 8x8 grid, empty (null) cells const [gameBoard, setGameBoard] = useState<(string | null)[][]>( Array(BOARD_SIZE) .fill(null) .map(() => Array(BOARD_SIZE).fill(null)), ) const [score, setScore] = useState(0) const [level, setLevel] = useState(1) const [placedBlocks, setPlacedBlocks] = useState(0) const [availableBlocks, setAvailableBlocks] = useState([]) const [selectedBlock, setSelectedBlock] = useState(null) const [isGameOver, setIsGameOver] = useState(false) const [showInstructions, setShowInstructions] = useState(true) // Initialize available blocks useEffect(() => { generateNewBlocks() }, []) // Check for level up useEffect(() => { if (placedBlocks >= level * BLOCKS_PER_LEVEL) { setLevel((prev) => prev + 1) generateNewBlocks(true) // Generate new blocks with bonus } }, [placedBlocks, level]) // Check for game over useEffect(() => { if (availableBlocks.length > 0 && !canPlaceAnyBlock()) { setIsGameOver(true) } }, [gameBoard, availableBlocks]) // Add keyboard listener for rotation useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Rotate when 'R' or 'r' is pressed if ((e.key === "r" || e.key === "R") && selectedBlock) { rotateSelectedBlock() } } window.addEventListener("keydown", handleKeyDown) return () => { window.removeEventListener("keydown", handleKeyDown) } }, [selectedBlock]) // Re-add listener when selected block changes const startNewGame = () => { setGameBoard( Array(BOARD_SIZE) .fill(null) .map(() => Array(BOARD_SIZE).fill(null)), ) setScore(0) setLevel(1) setPlacedBlocks(0) setSelectedBlock(null) setIsGameOver(false) generateNewBlocks() } const generateNewBlocks = (isLevelUp = false) => { // Always generate exactly 3 new blocks const count = 3 const newBlocks: BlockShape[] = [] for (let i = 0; i < count; i++) { const randomIndex = Math.floor(Math.random() * BLOCK_SHAPES.length) const block = JSON.parse(JSON.stringify(BLOCK_SHAPES[randomIndex])) as Omit // Assign random color const colors = ["red", "blue", "green", "yellow", "purple"] const randomColor = colors[Math.floor(Math.random() * colors.length)] // Add unique ID and color const newBlock: BlockShape = { ...block, color: randomColor, id: `block-${Date.now()}-${i}`, } newBlocks.push(newBlock) } // Replace existing blocks instead of adding to them setAvailableBlocks(newBlocks) } const handleBlockSelect = (block: BlockShape) => { setSelectedBlock(block) } const handleCellClick = (row: number, col: number) => { if (!selectedBlock) return // Check if block can be placed at this position if (canPlaceBlock(gameBoard, selectedBlock, row, col)) { // Create a copy of the board const newBoard = [...gameBoard.map((row) => [...row])] // Place the block on the board selectedBlock.shape.forEach((blockRow, rowOffset) => { blockRow.forEach((cell, colOffset) => { if (cell) { newBoard[row + rowOffset][col + colOffset] = selectedBlock.color } }) }) // Update the board setGameBoard(newBoard) // Remove the placed block from available blocks setAvailableBlocks((prev) => prev.filter((block) => block.id !== selectedBlock.id)) // Increment placed blocks counter setPlacedBlocks((prev) => prev + 1) // Clear the selected block setSelectedBlock(null) // Check for complete lines const { clearedBoard, linesCleared } = checkForCompleteLines(newBoard) if (linesCleared > 0) { // Award points for cleared lines const pointsEarned = linesCleared * POINTS_PER_LINE * level setScore((prev) => prev + pointsEarned) // Update the board with cleared lines, but don't apply gravity setGameBoard(clearedBoard) } // Generate new blocks only if all blocks have been used if (availableBlocks.length <= 1) { // If this was the last block, generate 3 new ones generateNewBlocks() } } } const canPlaceAnyBlock = () => { // Check if any available block can be placed anywhere on the board for (const block of availableBlocks) { for (let row = 0; row <= BOARD_SIZE - block.shape.length; row++) { for (let col = 0; col <= BOARD_SIZE - block.shape[0].length; col++) { if (canPlaceBlock(gameBoard, block, row, col)) { return true } } } } return false } const rotateSelectedBlock = () => { if (!selectedBlock) return // Create a deep copy of the selected block const rotatedBlock = JSON.parse(JSON.stringify(selectedBlock)) as BlockShape // Get the dimensions of the current shape const rows = rotatedBlock.shape.length const cols = rotatedBlock.shape[0].length // Create a new rotated shape matrix const newShape: boolean[][] = Array(cols) .fill(null) .map(() => Array(rows).fill(false)) // Perform the rotation (90 degrees clockwise) for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { newShape[c][rows - 1 - r] = rotatedBlock.shape[r][c] } } rotatedBlock.shape = newShape setSelectedBlock(rotatedBlock) } return (

{/* Instructions Dialog */} {/* Game Over Dialog */}

) } [V0_FILE]typescriptreact:file="components/game-board.tsx" isEdit="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import type { BlockShape } from "@/lib/block-shapes" import { canPlaceBlock } from "@/lib/game-utils" interface GameBoardProps { board: (string | null)[][] selectedBlock: BlockShape | null onCellClick: (row: number, col: number) => void } export default function GameBoard({ board, selectedBlock, onCellClick }: GameBoardProps) { // Preview the block placement on hover const [hoverPosition, setHoverPosition] = useState<{ row: number; col: number } | null>(null) const handleCellHover = (row: number, col: number) => { setHoverPosition({ row, col }) } const handleCellLeave = () => { setHoverPosition(null) } // Get cells that would be affected by block placement const getAffectedCells = (row: number, col: number) => { if (!selectedBlock) return [] const affectedCells: { row: number; col: number; valid: boolean }[] = [] // Check if the block would go out of bounds const isValidPlacement = canPlaceBlock(board, selectedBlock, row, col) // Add all cells that would be affected by this block for (let r = 0; r < selectedBlock.shape.length; r++) { for (let c = 0; c < selectedBlock.shape[0].length; c++) { if (selectedBlock.shape[r][c]) { const cellRow = row + r const cellCol = col + c // Check if this cell is within bounds const isInBounds = cellRow >= 0 && cellRow < board.length && cellCol >= 0 && cellCol < board[0].length if (isInBounds) { // Check if this specific cell can be placed (not already occupied) const isCellValid = board[cellRow][cellCol] === null affectedCells.push({ row: cellRow, col: cellCol, valid: isCellValid && isValidPlacement, }) } } } } return affectedCells } return (

{board.map((row, rowIndex) => row.map((cell, colIndex) => { // Check if this cell is part of the hover preview let previewInfo = { isPreview: false, isValid: false, color: "" } if (selectedBlock && hoverPosition) { const affectedCells = getAffectedCells(hoverPosition.row, hoverPosition.col) const matchingCell = affectedCells.find((c) => c.row === rowIndex && c.col === colIndex) if (matchingCell) { previewInfo = { isPreview: true, isValid: matchingCell.valid, color: selectedBlock.color, } } } return ( onCellClick(rowIndex, colIndex)} onMouseEnter={() => handleCellHover(rowIndex, colIndex)} onMouseLeave={handleCellLeave} whileHover={{ scale: 1.05 }} > {/* Preview overlay */} {previewInfo.isPreview && (

)} ) }), )}

) }

About

About