[V0_FILE]typescriptreact:file="components/ui/card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" const Card = ({ className, children, noBorder = false, ...props }) => { return (

{children}

) } Card.displayName = "Card" const CardContent = ({ className, children, ...props }) => { return (

{children}

) } CardContent.displayName = "CardContent" export { Card, CardContent } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isEdit="true" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" isEdit="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "underline-offset-4 hover:underline text-primary", }, size: { default: "h-10 py-2 px-4", sm: "h-9 px-3 rounded-md", lg: "h-11 px-8 rounded-md", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps {} const Button = React.forwardRef(({ className, variant, size, ...props }, ref) => { return ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import { ThemeProvider } from "@/components/theme-provider" import "@/app/globals.css" export default function RootLayout({ children }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" isEdit="true" import TetrisGame from "@/tetris-game" export default function Page() { return } [V0_FILE]javascript:file="tailwind.config.js" isMerged="true" isEdit="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: { 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))", }, }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="tetris-game.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback, useRef } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { GamepadIcon } from "lucide-react" import { ThemeSwitcher } from "@/components/theme-switcher" import { motion, AnimatePresence } from "framer-motion" // Add this array of emojis at the top of the file, after the imports const EMOJIS = [ "😀", "😎", "🤖", "👾", "🎮", "🕹️", "🔮", "💎", "🚀", "🌟", "🍄", "🌈", "🦄", "🐉", "🦋", "🌺", "🍕", "🍦", "🧠", "💡", "🎨", "🎭", "🎲", "🧩", "🏆", "⚡", "🔥", "❄️", "🌊", "🍀", "🎵", "🎉", "🥳", "🦸", "🧙", "🧬", "🔬", "📚", "💻", "🛸", "🌌", "🏰", ] // Tetris constants const ROWS = 20 const COLS = 10 // Each shape is a matrix of 0s and 1s // We index them with letters for convenience // Modify the SHAPES object to include an emoji property const SHAPES = { I: { shape: [[1, 1, 1, 1]], colour: "bg-cyan-500 dark:bg-cyan-400", }, O: { shape: [ [1, 1], [1, 1], ], colour: "bg-yellow-500 dark:bg-yellow-400", }, T: { shape: [ [1, 1, 1], [0, 1, 0], ], colour: "bg-purple-500 dark:bg-purple-400", }, S: { shape: [ [0, 1, 1], [1, 1, 0], ], colour: "bg-green-500 dark:bg-green-400", }, Z: { shape: [ [1, 1, 0], [0, 1, 1], ], colour: "bg-red-500 dark:bg-red-400", }, J: { shape: [ [1, 0, 0], [1, 1, 1], ], colour: "bg-blue-500 dark:bg-blue-400", }, L: { shape: [ [0, 0, 1], [1, 1, 1], ], colour: "bg-orange-500 dark:bg-orange-400", }, } // Return a random shape from the SHAPES object // Modify the getRandomShape function to include an emoji function getRandomShape() { const shapeKeys = Object.keys(SHAPES) const randKey = shapeKeys[Math.floor(Math.random() * shapeKeys.length)] const { shape, colour } = SHAPES[randKey] const emoji = EMOJIS[Math.floor(Math.random() * EMOJIS.length)] return { matrix: shape, colour, emoji, row: 0, col: Math.floor((COLS - shape[0].length) / 2), } } // Rotate a matrix clockwise function rotateMatrix(matrix) { // Number of rows/cols const rows = matrix.length const cols = matrix[0].length const rotated = [] for (let c = 0; c < cols; c++) { const newRow = [] for (let r = rows - 1; r >= 0; r--) { newRow.push(matrix[r][c]) } rotated.push(newRow) } return rotated } // Merge shape into board // Update the merge function to include the emoji function merge(board, shape) { const newBoard = board.map((row) => [...row]) // copy const { matrix, row, col, colour, emoji } = shape for (let r = 0; r < matrix.length; r++) { for (let c = 0; c < matrix[r].length; c++) { if (matrix[r][c] !== 0) { newBoard[row + r][col + c] = { colour, emoji } } } } return newBoard } // Check collision // Update the checkCollision function to work with the new board structure function checkCollision(board, shape) { const { matrix, row, col } = shape for (let r = 0; r < matrix.length; r++) { for (let c = 0; c < matrix[r].length; c++) { if (matrix[r][c] !== 0) { const newRow = row + r const newCol = col + c // Out of bounds or occupied if (newRow < 0 || newRow >= ROWS || newCol < 0 || newCol >= COLS || board[newRow][newCol] !== null) { return true } } } } return false } // Clear completed lines function clearLines(board) { let cleared = 0 const newBoard = board.filter((row) => { // If every column in row is non-null, the row is full if (row.every((cell) => cell !== null)) { cleared++ return false } return true }) // Add empty rows at the top for each cleared line while (newBoard.length < ROWS) { newBoard.unshift(Array(COLS).fill(null)) } return { newBoard, cleared } } // Poof animation component const Poof = ({ rowIndex }) => { return ( ) } export default function TetrisGame() { const [board, setBoard] = useState(Array.from({ length: ROWS }, () => Array(COLS).fill(null))) const [currentShape, setCurrentShape] = useState(null) const [score, setScore] = useState(0) const [lines, setLines] = useState(0) const [gameOver, setGameOver] = useState(false) const [gameStarted, setGameStarted] = useState(false) const [clearedRows, setClearedRows] = useState([]) const dropIntervalRef = useRef(null) const startGame = useCallback(() => { const newBoard = Array.from({ length: ROWS }, () => Array(COLS).fill(null)) setBoard(newBoard) setScore(0) setLines(0) setGameOver(false) setGameStarted(true) setCurrentShape(getRandomShape()) }, []) const dropShape = useCallback(() => { if (!currentShape) return const newShape = { ...currentShape, row: currentShape.row + 1, } if (checkCollision(board, newShape)) { // Place current shape const mergedBoard = merge(board, currentShape) // Clear lines const { newBoard, cleared } = clearLines(mergedBoard) if (cleared > 0) { setScore((prev) => prev + cleared * 100) setLines((prev) => prev + cleared) // Add cleared rows to state for animation const newClearedRows = [] for (let i = 0; i < cleared; i++) { newClearedRows.push(newBoard.findIndex((row) => row.every((cell) => cell === null))) newBoard.splice( newBoard.findIndex((row) => row.every((cell) => cell === null)), 1, ) } setClearedRows(newClearedRows) setTimeout(() => { setClearedRows([]) }, 300) } // Get a new shape const nextShape = getRandomShape() // Check if collision occurs immediately if (checkCollision(newBoard, nextShape)) { // Game over setGameOver(true) setGameStarted(false) if (dropIntervalRef.current) { clearInterval(dropIntervalRef.current) } setCurrentShape(null) setBoard(newBoard) return } setBoard(newBoard) setCurrentShape(nextShape) } else { // If no collision, update position setCurrentShape(newShape) } }, [board, currentShape]) const handleKeyDown = useCallback( (e) => { if (!currentShape || gameOver) return if (e.key === "ArrowLeft") { e.preventDefault() const newShape = { ...currentShape, col: currentShape.col - 1 } if (!checkCollision(board, newShape)) { setCurrentShape(newShape) } } else if (e.key === "ArrowRight") { e.preventDefault() const newShape = { ...currentShape, col: currentShape.col + 1 } if (!checkCollision(board, newShape)) { setCurrentShape(newShape) } } else if (e.key === "ArrowUp") { e.preventDefault() const rotated = rotateMatrix(currentShape.matrix) const newShape = { ...currentShape, matrix: rotated } if (!checkCollision(board, newShape)) { setCurrentShape(newShape) } } else if (e.key === "ArrowDown") { e.preventDefault() dropShape() } }, [board, currentShape, dropShape, gameOver], ) useEffect(() => { if (!gameOver && currentShape) { dropIntervalRef.current = setInterval(() => { dropShape() }, 500) return () => clearInterval(dropIntervalRef.current) } }, [dropShape, gameOver, currentShape]) useEffect(() => { window.addEventListener("keydown", handleKeyDown) return () => { window.removeEventListener("keydown", handleKeyDown) } }, [handleKeyDown]) // New function to render the game board const renderBoard = useCallback(() => { const displayBoard = board.map((row) => [...row]) if (currentShape) { const { matrix, row, col, colour, emoji } = currentShape for (let r = 0; r < matrix.length; r++) { for (let c = 0; c < matrix[r].length; c++) { if (matrix[r][c] !== 0) { const boardRow = row + r const boardCol = col + c if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) { displayBoard[boardRow][boardCol] = { colour, emoji } } } } } } return displayBoard.map((row, rowIndex) => row.map((cell, colIndex) => (

{cell && {cell.emoji}}

)), ) }, [board, currentShape]) return (

HAIL ERIS TETRIS

SCORE

{score}

LINES

{lines}

{gameOver && (

GAME OVER

)}

{renderBoard()} {clearedRows.map((rowIndex) => ( ))}

{!gameStarted && (

CONTROLS

↑ ROTATE

← → MOVE

↓ DROP

)}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This