[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.13 0.02 260); --foreground: oklch(0.95 0 0); --card: oklch(0.18 0.02 260); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.18 0.02 260); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.7 0.15 200); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.25 0.02 260); --secondary-foreground: oklch(0.9 0 0); --muted: oklch(0.22 0.02 260); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.7 0.15 200); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.6 0.2 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3 0.02 260); --input: oklch(0.25 0.02 260); --ring: oklch(0.7 0.15 200); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.75rem; --sidebar: oklch(0.16 0.02 260); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.7 0.15 200); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.25 0.02 260); --sidebar-accent-foreground: oklch(0.9 0 0); --sidebar-border: oklch(0.3 0.02 260); --sidebar-ring: oklch(0.7 0.15 200); /* Player colors */ --player-red: oklch(0.65 0.25 25); --player-blue: oklch(0.6 0.2 250); --player-green: oklch(0.65 0.2 145); } .dark { --background: oklch(0.13 0.02 260); --foreground: oklch(0.95 0 0); --card: oklch(0.18 0.02 260); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.18 0.02 260); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.7 0.15 200); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.25 0.02 260); --secondary-foreground: oklch(0.9 0 0); --muted: oklch(0.22 0.02 260); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.7 0.15 200); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.6 0.2 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3 0.02 260); --input: oklch(0.25 0.02 260); --ring: oklch(0.7 0.15 200); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.16 0.02 260); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.7 0.15 200); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.25 0.02 260); --sidebar-accent-foreground: oklch(0.9 0 0); --sidebar-border: oklch(0.3 0.02 260); --sidebar-ring: oklch(0.7 0.15 200); /* Player colors */ --player-red: oklch(0.65 0.25 25); --player-blue: oklch(0.6 0.2 250); --player-green: oklch(0.65 0.2 145); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-player-red: var(--player-red); --color-player-blue: var(--player-blue); --color-player-green: var(--player-green); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Dots & Boxes', description: 'A modern multiplayer Dots and Boxes game', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescript:file="lib/game-types.ts" isMerged="true" export interface Player { id: number name: string color: 'red' | 'blue' | 'green' score: number } export interface Line { id: string row: number col: number orientation: 'horizontal' | 'vertical' owner: number | null } export interface Box { row: number col: number owner: number | null } export interface GameState { players: Player[] currentPlayerIndex: number lines: Map boxes: Box[][] gridRows: number gridCols: number gameStarted: boolean gameOver: boolean winner: Player | null lastCompletedBox: { row: number; col: number } | null bonusTurn: boolean } export interface GameSetup { playerCount: 2 | 3 playerNames: string[] gridRows: number gridCols: number } export const PLAYER_COLORS: Record = { red: 'var(--player-red)', blue: 'var(--player-blue)', green: 'var(--player-green)', } export const PLAYER_COLOR_CLASSES: Record = { red: { bg: 'bg-player-red', text: 'text-player-red', border: 'border-player-red', }, blue: { bg: 'bg-player-blue', text: 'text-player-blue', border: 'border-player-blue', }, green: { bg: 'bg-player-green', text: 'text-player-green', border: 'border-player-green', }, } [V0_FILE]typescript:file="hooks/use-game.ts" isMerged="true" 'use client' import { useState, useCallback } from 'react' import type { GameState, GameSetup, Player, Line, Box } from '@/lib/game-types' function getLineId(row: number, col: number, orientation: 'horizontal' | 'vertical'): string { return `${orientation}-${row}-${col}` } function createInitialLines(rows: number, cols: number): Map { const lines = new Map() // Horizontal lines: (rows + 1) rows, cols per row for (let r = 0; r <= rows; r++) { for (let c = 0; c < cols; c++) { const id = getLineId(r, c, 'horizontal') lines.set(id, { id, row: r, col: c, orientation: 'horizontal', owner: null }) } } // Vertical lines: rows rows, (cols + 1) per row for (let r = 0; r < rows; r++) { for (let c = 0; c <= cols; c++) { const id = getLineId(r, c, 'vertical') lines.set(id, { id, row: r, col: c, orientation: 'vertical', owner: null }) } } return lines } function createInitialBoxes(rows: number, cols: number): Box[][] { return Array.from({ length: rows }, (_, r) => Array.from({ length: cols }, (_, c) => ({ row: r, col: c, owner: null, })) ) } export function useGame() { const [gameState, setGameState] = useState(null) const initializeGame = useCallback((setup: GameSetup) => { const colors: Array<'red' | 'blue' | 'green'> = ['red', 'blue', 'green'] const players: Player[] = Array.from({ length: setup.playerCount }, (_, i) => ({ id: i, name: setup.playerNames[i] || `Player ${i + 1}`, color: colors[i], score: 0, })) const state: GameState = { players, currentPlayerIndex: 0, lines: createInitialLines(setup.gridRows, setup.gridCols), boxes: createInitialBoxes(setup.gridRows, setup.gridCols), gridRows: setup.gridRows, gridCols: setup.gridCols, gameStarted: true, gameOver: false, winner: null, lastCompletedBox: null, bonusTurn: false, } setGameState(state) }, []) const checkBoxCompletion = useCallback( (lines: Map, boxes: Box[][], row: number, col: number): boolean => { const top = lines.get(getLineId(row, col, 'horizontal')) const bottom = lines.get(getLineId(row + 1, col, 'horizontal')) const left = lines.get(getLineId(row, col, 'vertical')) const right = lines.get(getLineId(row, col + 1, 'vertical')) return ( top?.owner !== null && bottom?.owner !== null && left?.owner !== null && right?.owner !== null ) }, [] ) const getAffectedBoxes = useCallback( (line: Line, gridRows: number, gridCols: number): Array<{ row: number; col: number }> => { const affected: Array<{ row: number; col: number }> = [] if (line.orientation === 'horizontal') { // Horizontal line can affect the box above (if not top edge) and below (if not bottom edge) if (line.row > 0) { affected.push({ row: line.row - 1, col: line.col }) } if (line.row < gridRows) { affected.push({ row: line.row, col: line.col }) } } else { // Vertical line can affect the box to the left (if not left edge) and right (if not right edge) if (line.col > 0) { affected.push({ row: line.row, col: line.col - 1 }) } if (line.col < gridCols) { affected.push({ row: line.row, col: line.col }) } } return affected }, [] ) const placeLine = useCallback( (lineId: string) => { if (!gameState || gameState.gameOver) return const line = gameState.lines.get(lineId) if (!line || line.owner !== null) return const currentPlayer = gameState.players[gameState.currentPlayerIndex] const newLines = new Map(gameState.lines) newLines.set(lineId, { ...line, owner: currentPlayer.id }) const newBoxes = gameState.boxes.map((row) => row.map((box) => ({ ...box }))) const newPlayers = gameState.players.map((p) => ({ ...p })) const affectedBoxes = getAffectedBoxes(line, gameState.gridRows, gameState.gridCols) let boxesCompleted = 0 let lastCompleted: { row: number; col: number } | null = null for (const { row, col } of affectedBoxes) { if (row >= 0 && row < gameState.gridRows && col >= 0 && col < gameState.gridCols) { if (newBoxes[row][col].owner === null && checkBoxCompletion(newLines, newBoxes, row, col)) { newBoxes[row][col].owner = currentPlayer.id boxesCompleted++ lastCompleted = { row, col } newPlayers[gameState.currentPlayerIndex].score++ } } } // Check if game is over const allBoxesFilled = newBoxes.every((row) => row.every((box) => box.owner !== null)) let winner: Player | null = null if (allBoxesFilled) { const maxScore = Math.max(...newPlayers.map((p) => p.score)) const winners = newPlayers.filter((p) => p.score === maxScore) winner = winners.length === 1 ? winners[0] : null // null means tie } // If boxes were completed, player gets another turn const nextPlayerIndex = boxesCompleted > 0 ? gameState.currentPlayerIndex : (gameState.currentPlayerIndex + 1) % gameState.players.length setGameState({ ...gameState, lines: newLines, boxes: newBoxes, players: newPlayers, currentPlayerIndex: nextPlayerIndex, gameOver: allBoxesFilled, winner, lastCompletedBox: lastCompleted, bonusTurn: boxesCompleted > 0 && !allBoxesFilled, }) }, [gameState, checkBoxCompletion, getAffectedBoxes] ) const resetGame = useCallback(() => { setGameState(null) }, []) const restartGame = useCallback(() => { if (!gameState) return const setup: GameSetup = { playerCount: gameState.players.length as 2 | 3, playerNames: gameState.players.map((p) => p.name), gridRows: gameState.gridRows, gridCols: gameState.gridCols, } initializeGame(setup) }, [gameState, initializeGame]) return { gameState, initializeGame, placeLine, resetGame, restartGame, } } [V0_FILE]typescriptreact:file="components/game/score-panel.tsx" isMerged="true" 'use client' import type { GameState } from '@/lib/game-types' import { cn } from '@/lib/utils' interface ScorePanelProps { gameState: GameState } function getPlayerColorStyle(playerId: number): string { const colors = ['var(--player-red)', 'var(--player-blue)', 'var(--player-green)'] return colors[playerId] || '' } export function ScorePanel({ gameState }: ScorePanelProps) { const { players, currentPlayerIndex, bonusTurn, gameOver } = gameState return (

{players.map((player, index) => { const isCurrentPlayer = index === currentPlayerIndex && !gameOver const color = getPlayerColorStyle(player.id) return (

{player.name}

{player.score} {isCurrentPlayer && (

Your turn {bonusTurn && ( Bonus! )}

)}

) })}

) } [V0_FILE]typescriptreact:file="components/game/result-modal.tsx" isMerged="true" 'use client' import { Button } from '@/components/ui/button' import type { GameState } from '@/lib/game-types' interface ResultModalProps { gameState: GameState onPlayAgain: () => void onNewGame: () => void } function getPlayerColorStyle(playerId: number): string { const colors = ['var(--player-red)', 'var(--player-blue)', 'var(--player-green)'] return colors[playerId] || '' } export function ResultModal({ gameState, onPlayAgain, onNewGame }: ResultModalProps) { const { players, winner } = gameState // Sort players by score (descending) const sortedPlayers = [...players].sort((a, b) => b.score - a.score) const maxScore = sortedPlayers[0]?.score ?? 0 const isTie = sortedPlayers.filter((p) => p.score === maxScore).length > 1 return (

Game Over!

{isTie ? (

{"It's a tie!"}

) : winner ? (

{winner.name} wins!

) : null}

Final Scores

{sortedPlayers.map((player, index) => { const color = getPlayerColorStyle(player.id) const isWinner = player.score === maxScore return (

#{index + 1}

{player.name}

{player.score}

) })}

) } [V0_FILE]typescriptreact:file="components/game/game-screen.tsx" isMerged="true" 'use client' import { Button } from '@/components/ui/button' import { GameBoard } from './game-board' import { ScorePanel } from './score-panel' import { ResultModal } from './result-modal' import type { GameState } from '@/lib/game-types' import { RotateCcw, Home } from 'lucide-react' interface GameScreenProps { gameState: GameState onPlaceLine: (lineId: string) => void onRestart: () => void onNewGame: () => void } export function GameScreen({ gameState, onPlaceLine, onRestart, onNewGame }: GameScreenProps) { return (

{/* Header */}

Dots & Boxes

{/* Main Content */}

{/* Score Panel */}

{/* Game Board */}

{/* Result Modal */} {gameState.gameOver && ( )}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" 'use client' import { SetupScreen } from '@/components/game/setup-screen' import { GameScreen } from '@/components/game/game-screen' import { useGame } from '@/hooks/use-game' export default function Home() { const { gameState, initializeGame, placeLine, resetGame, restartGame } = useGame() if (!gameState) { return } return ( ) } [V0_FILE]typescriptreact:file="components/game/game-board.tsx" isMerged="true" 'use client' import React, { useState, useEffect, useMemo } from 'react' import type { GameState, Line } from '@/lib/game-types' import { cn } from '@/lib/utils' interface GameBoardProps { gameState: GameState onPlaceLine: (lineId: string) => void } function getPlayerColorStyle(playerId: number | null): string { if (playerId === null) return '' const colors = ['var(--player-red)', 'var(--player-blue)', 'var(--player-green)'] return colors[playerId] || '' } export function GameBoard({ gameState, onPlaceLine }: GameBoardProps) { const { gridRows, gridCols, lines, boxes, lastCompletedBox, currentPlayerIndex } = gameState const [windowWidth, setWindowWidth] = useState(400) const [hoveredLine, setHoveredLine] = useState(null) const currentPlayerColor = getPlayerColorStyle(currentPlayerIndex) useEffect(() => { setWindowWidth(window.innerWidth) const handleResize = () => setWindowWidth(window.innerWidth) window.addEventListener('resize', handleResize) return () => window.removeEventListener('resize', handleResize) }, []) // Calculate dot spacing based on grid size const baseSize = Math.min(400, windowWidth - 64) const dotSpacing = useMemo(() => { const maxDimension = Math.max(gridRows, gridCols) return Math.max(40, Math.min(60, baseSize / maxDimension)) }, [gridRows, gridCols, baseSize]) const dotSize = 12 const lineThickness = 6 const boardWidth = gridCols * dotSpacing + dotSize const boardHeight = gridRows * dotSpacing + dotSize const handleLineClick = (line: Line) => { if (line.owner === null && !gameState.gameOver) { onPlaceLine(line.id) } } const renderDot = (row: number, col: number) => { const x = col * dotSpacing const y = row * dotSpacing return (

) } const renderHorizontalLine = (row: number, col: number) => { const lineId = `horizontal-${row}-${col}` const line = lines.get(lineId) if (!line) return null const x = col * dotSpacing + dotSize const y = row * dotSpacing + (dotSize - lineThickness) / 2 const width = dotSpacing - dotSize const isOwned = line.owner !== null const isHovered = hoveredLine === lineId && !isOwned && !gameState.gameOver const color = isOwned ? getPlayerColorStyle(line.owner) : isHovered ? currentPlayerColor : undefined return (

handleLineClick(line)} onMouseEnter={() => setHoveredLine(lineId)} onMouseLeave={() => setHoveredLine(null)} /> ) } const renderVerticalLine = (row: number, col: number) => { const lineId = `vertical-${row}-${col}` const line = lines.get(lineId) if (!line) return null const x = col * dotSpacing + (dotSize - lineThickness) / 2 const y = row * dotSpacing + dotSize const height = dotSpacing - dotSize const isOwned = line.owner !== null const isHovered = hoveredLine === lineId && !isOwned && !gameState.gameOver const color = isOwned ? getPlayerColorStyle(line.owner) : isHovered ? currentPlayerColor : undefined return (

handleLineClick(line)} onMouseEnter={() => setHoveredLine(lineId)} onMouseLeave={() => setHoveredLine(null)} /> ) } const renderBox = (row: number, col: number) => { const box = boxes[row]?.[col] if (!box || box.owner === null) return null const x = col * dotSpacing + dotSize const y = row * dotSpacing + dotSize const size = dotSpacing - dotSize const color = getPlayerColorStyle(box.owner) const isLastCompleted = lastCompletedBox?.row === row && lastCompletedBox?.col === col return (

) } // Generate all elements const dots: React.ReactNode[] = [] const horizontalLines: React.ReactNode[] = [] const verticalLines: React.ReactNode[] = [] const boxElements: React.ReactNode[] = [] // Dots: (rows + 1) x (cols + 1) for (let r = 0; r <= gridRows; r++) { for (let c = 0; c <= gridCols; c++) { dots.push(renderDot(r, c)) } } // Horizontal lines: (rows + 1) rows, cols per row for (let r = 0; r <= gridRows; r++) { for (let c = 0; c < gridCols; c++) { horizontalLines.push(renderHorizontalLine(r, c)) } } // Vertical lines: rows rows, (cols + 1) per row for (let r = 0; r < gridRows; r++) { for (let c = 0; c <= gridCols; c++) { verticalLines.push(renderVerticalLine(r, c)) } } // Boxes for (let r = 0; r < gridRows; r++) { for (let c = 0; c < gridCols; c++) { boxElements.push(renderBox(r, c)) } } return (

{boxElements} {horizontalLines} {verticalLines} {dots}

) } [V0_FILE]typescriptreact:file="components/game/setup-screen.tsx" 'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Slider } from '@/components/ui/slider' import { PLAYER_COLOR_CLASSES } from '@/lib/game-types' import type { GameSetup } from '@/lib/game-types' interface SetupScreenProps { onStartGame: (setup: GameSetup) => void } export function SetupScreen({ onStartGame }: SetupScreenProps) { const [playerCount, setPlayerCount] = useState<2 | 3>(2) const [playerNames, setPlayerNames] = useState(['', '', '']) const [gridRows, setGridRows] = useState(4) const [gridCols, setGridCols] = useState(4) const colors: Array<'red' | 'blue' | 'green'> = ['red', 'blue', 'green'] const handleStartGame = () => { const names = playerNames.slice(0, playerCount).map((name, i) => name.trim() || `Player ${i + 1}`) onStartGame({ playerCount, playerNames: names, gridRows, gridCols, }) } const updatePlayerName = (index: number, name: string) => { const newNames = [...playerNames] newNames[index] = name setPlayerNames(newNames) } return (

Dots & Boxes

Set up your game

{/* Player Count */}

Number of Players

{[2, 3].map((count) => ( ))}

{/* Player Names */}

Player Names

{Array.from({ length: playerCount }, (_, i) => (

updatePlayerName(i, e.target.value)} className="flex-1" />

))}

{/* Grid Size */}

Grid Size

Rows {gridRows}

setGridRows(value[0])} min={3} max={15} step={1} />

Columns {gridCols}

setGridCols(value[0])} min={3} max={15} step={1} />

{gridRows * gridCols} boxes total

{/* Start Button */}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This