[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Component from "../color-by-number-game" export default function Page() { return } [V0_FILE]typescriptreact:file="color-by-number-game.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" const colors = { 1: "#1a237e", // Deep Blue (night sky) 2: "#3949ab", // Medium Blue (sky swirls) 3: "#5c6bc0", // Light Blue (sky highlights) 4: "#ffd54f", // Yellow (stars and moon) 5: "#ffb300", // Orange (moon glow) 6: "#2e7d32", // Dark Green (cypress tree) 7: "#388e3c", // Medium Green (tree highlights) 8: "#1b5e20", // Very Dark Green (tree shadows) 9: "#424242", // Dark Gray (village buildings) 10: "#616161", // Medium Gray (building details) 11: "#ffecb3", // Light Yellow (village lights) 12: "#8d6e63", // Brown (building roofs) } // Simplified "Starry Night" pattern - 15x12 grid const starryNightPattern = [ [1, 1, 2, 4, 2, 2, 4, 2, 1, 1, 2, 4, 2, 1, 1], [1, 2, 3, 2, 3, 2, 2, 3, 2, 2, 3, 2, 3, 2, 1], [2, 3, 2, 3, 2, 5, 4, 5, 2, 3, 2, 3, 2, 3, 2], [6, 2, 3, 2, 4, 4, 4, 4, 4, 2, 3, 2, 3, 2, 1], [6, 6, 2, 3, 2, 5, 4, 5, 2, 3, 2, 3, 2, 1, 1], [7, 6, 6, 2, 3, 2, 2, 2, 3, 2, 3, 2, 1, 1, 1], [6, 7, 6, 6, 2, 3, 2, 3, 2, 3, 2, 1, 1, 1, 1], [8, 6, 7, 6, 6, 2, 3, 2, 3, 2, 1, 1, 1, 1, 1], [6, 8, 6, 7, 6, 9, 9, 9, 2, 1, 1, 1, 1, 1, 1], [6, 6, 8, 6, 9, 10, 11, 10, 9, 1, 1, 1, 1, 1, 1], [6, 6, 6, 9, 12, 11, 11, 11, 12, 9, 1, 1, 1, 1, 1], [6, 6, 9, 12, 12, 9, 9, 9, 12, 12, 9, 1, 1, 1, 1], ] export default function Component() { const [selectedColor, setSelectedColor] = useState(1) const [coloredCells, setColoredCells] = useState<{ [key: string]: number }>({}) const [isDragging, setIsDragging] = useState(false) const [dragTargetColor, setDragTargetColor] = useState(null) const handleCellStart = (row: number, col: number) => { const targetColor = starryNightPattern[row][col] if (targetColor === 0 || targetColor !== selectedColor) return const cellKey = `${row}-${col}` // Start dragging setIsDragging(true) setDragTargetColor(targetColor) // Color the starting cell setColoredCells((prev) => ({ ...prev, [cellKey]: selectedColor, })) } const handleCellEnter = (row: number, col: number) => { if (!isDragging || dragTargetColor === null) return const targetColor = starryNightPattern[row][col] if (targetColor !== dragTargetColor || targetColor !== selectedColor) return const cellKey = `${row}-${col}` // Color the cell if it matches our drag target setColoredCells((prev) => ({ ...prev, [cellKey]: selectedColor, })) } const handleDragEnd = () => { setIsDragging(false) setDragTargetColor(null) } const resetGame = () => { setColoredCells({}) } const getTotalCells = () => { return starryNightPattern.flat().filter((cell) => cell !== 0).length } const getCompletedCells = () => { return Object.keys(coloredCells).length } const isCompleted = () => { return getCompletedCells() === getTotalCells() } const getCellDisplay = (row: number, col: number) => { const targetColor = starryNightPattern[row][col] const cellKey = `${row}-${col}` const isColored = coloredCells[cellKey] if (targetColor === 0) return null return ( ) } return (

Color by Number: Starry Night

Recreate Van Gogh's masterpiece! Select a color and click the matching numbers.

{/* Color Palette */}

{Object.entries(colors).map(([number, color]) => ( ))}

💡 Pro Tip: Click and drag across cells with the same number to paint multiple cells at once!

{/* Game Grid */}

{starryNightPattern.map((row, rowIndex) => (

{row.map((cell, colIndex) => getCellDisplay(rowIndex, colIndex))}

))}

{/* Progress and Controls */}

Progress: {getCompletedCells()}/{getTotalCells()} {isCompleted() && ( 🎨 Masterpiece Complete! 🌟 )}

{selectedColor && (

Selected color:{" "} Number {selectedColor} - {getColorName(selectedColor)}

)}

{/* Painting Info */}

About "The Starry Night"

Painted by Vincent van Gogh in 1889, this masterpiece depicts a swirling night sky over a village, with a prominent cypress tree in the foreground. It's one of the most recognized paintings in the world!

) } function getColorName(colorNumber: number): string { const colorNames = { 1: "Deep Night Blue", 2: "Sky Blue", 3: "Light Blue", 4: "Star Yellow", 5: "Moon Glow", 6: "Cypress Green", 7: "Tree Highlights", 8: "Tree Shadows", 9: "Village Dark", 10: "Building Gray", 11: "Village Lights", 12: "Roof Brown", } return colorNames[colorNumber] || "Unknown" }

About

Tags

Share

More from unfarol

More Templates Like This

About

Tags

Share

About

Tags

Share

More from unfarol

More Templates Like This