91:I[903690,["/chat-static/_next/static/chunks/3i9cwkv75ap-1.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3x2qrc8_ae_y8.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/0u7q9wyops2xg.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/38howswsjvgon.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/0pmkowhwh3_ey.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3pk_lm2pt6hw5.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2htqlxu9398j9.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2yoqavhumda_r.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3kku96d2ka1lz.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/09bjmvlsdgntt.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3i-97b1o6hit-.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/191-4imsl9qwa.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3axpbmdw7c30d.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3g02y25nur6on.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2z73sh9fd4fk1.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2lw8fcfgn79qw.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/346rh7hczex73.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/0rr2h1ez7ud1-.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/05gop4ul8i8kb.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2tg7uu9je15bl.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q"],"ExplicitChatIdProvider"] 92:I[838238,["/chat-static/_next/static/chunks/3i9cwkv75ap-1.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3x2qrc8_ae_y8.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/0u7q9wyops2xg.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/38howswsjvgon.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/0pmkowhwh3_ey.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3pk_lm2pt6hw5.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2htqlxu9398j9.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2yoqavhumda_r.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3kku96d2ka1lz.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/09bjmvlsdgntt.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3i-97b1o6hit-.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/191-4imsl9qwa.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3axpbmdw7c30d.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3g02y25nur6on.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2z73sh9fd4fk1.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2lw8fcfgn79qw.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/346rh7hczex73.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/0rr2h1ez7ud1-.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/05gop4ul8i8kb.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q","/chat-static/_next/static/chunks/2tg7uu9je15bl.js?dpl=dpl_5M41LU15VJruYVowGop3zvU8vm3Q"],"SWRDataProvider"] 93:T2695,[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" }89:["$","$L91",null,{"chatId":"IpnuTgzDS1N","children":["$","$L92",null,{"data":{"@\"active-block\",\"IpnuTgzDS1N\",":{"id":"b_aTtavCaBENN","messageId":"BCuOn3JDBlYcHmJ6jvdFvywDYZ179OjZ","source":"$93","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"color-by-number-game","type":"code-project","project":"color-by-number-game"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"IpnuTgzDS1N\",":false,"":null},"children":"$L94"}]}]

About

Tags

Share

About

Tags

Share

More from unfarol

More Templates Like This