[V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { 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 bg-background 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: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = ({ className, ...props }: DialogPrimitive.DialogPortalProps) => ( ) DialogPortal.displayName = DialogPrimitive.Portal.displayName const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescript:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isQuickEdit="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: { screens: { xs: "360px", }, 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))", }, }, 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")], } [V0_FILE]typescript:file="next.config.js" /** @type {import('next').NextConfig} / const nextConfig = { reactStrictMode: true, } module.exports = nextConfig [V0_FILE]typescript:file="tsconfig.json" { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/.ts"], "exclude": ["node_modules"] } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import "./globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Queens Game", description: "A challenging puzzle game with queens", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/stats-modal.tsx" isQuickEdit="true" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Progress } from "@/components/ui/progress" import { Trophy, Clock, Star, Calendar } from "lucide-react" import { motion } from "framer-motion" interface StatsModalProps { open: boolean onOpenChange: (open: boolean) => void stats: { gamesPlayed: number wins: number currentStreak: number bestStreak: number totalTime: number bestTime: number } } export function StatsModal({ open, onOpenChange, stats }: StatsModalProps) { const averageTime = stats.gamesPlayed > 0 ? Math.floor(stats.totalTime / stats.gamesPlayed) : 0 const winRate = stats.gamesPlayed > 0 ? Math.round((stats.wins / stats.gamesPlayed) 100) : 0 return ( Statistics

Games Played

{stats.gamesPlayed}

Win Rate

{winRate}%

Streak

{stats.currentStreak}

Best: {stats.bestStreak}

Average Time

{averageTime}s

Best: {stats.bestTime === Number.POSITIVE_INFINITY ? "N/A" : `${stats.bestTime}s`}

Progress

Games Won {stats.wins} / {stats.gamesPlayed}

Current Streak {stats.currentStreak} / {stats.bestStreak}

) } [V0_FILE]typescriptreact:file="components/achievements-modal.tsx" isFixed="true" isQuickEdit="true" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { motion } from "framer-motion" interface Achievement { id: string title: string description: string icon: JSX.Element progress: number total: number unlocked: boolean } interface AchievementsModalProps { open: boolean onOpenChange: (open: boolean) => void achievements: Achievement[] stats: { wins: number bestTime: number currentStreak: number } } export function AchievementsModal({ open, onOpenChange, achievements, stats }: AchievementsModalProps) { return ( Achievements {achievements.map((achievement, index) => (

{achievement.icon}

{achievement.title}
{achievement.unlocked && ( Unlocked )}

{achievement.description}

{achievement.progress} / {achievement.total}

))} ) } [V0_FILE]typescriptreact:file="components/game-complete-modal.tsx" isQuickEdit="true" import { Dialog, DialogContent } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Crown, Flame, Share2, Send, Copy, Star, Trophy } from "lucide-react" import { motion } from "framer-motion" interface GameCompleteModalProps { open: boolean onOpenChange: (open: boolean) => void gameNumber: number time: string averageTime: string stats: { games: number successRate: number bestTime: string currentStreak: number } } export function GameCompleteModal({ open, onOpenChange, gameNumber, time, averageTime, stats, }: GameCompleteModalProps) { return ( {/* Header /}

Queens #{gameNumber}

Well done!

{/ Stats Cards /}

{[...Array(3)].map((_, i) => ( ))}

{time}

Today's average: {averageTime}

On Fire!

{stats.currentStreak} day winning streak!

{/ Action Buttons /}

{/ Statistics /}

{stats.games}

Games

{stats.successRate}%

Win Rate

{stats.bestTime}

Best Score

{stats.currentStreak}

Win Streak

{/ Achievements /}

3 days

Star

5 days

Superstar

7 days

Champion

31 days

Icon

) } [V0_FILE]typescriptreact:file="components/tutorial-mode.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Crown, X, ChevronRight, ChevronLeft, HelpCircle } from "lucide-react" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" interface TutorialStep { instruction: string boardState: string[][] highlightCells: number[][] action?: "place" | "remove" actionCell?: number[] feedback?: string } const BOARD_SIZE = 8 const tutorialSteps: TutorialStep[] = [ { instruction: "Welcome to Queens! This tutorial will guide you through the basics of the game.", boardState: Array(BOARD_SIZE).fill(Array(BOARD_SIZE).fill("")), highlightCells: [], }, { instruction: "The goal is to place queens on the board so that there's exactly one queen in each row and column.", boardState: [ ["Q", "", "", "", "", "", "", ""], ["", "", "", "Q", "", "", "", ""], ["", "", "", "", "", "Q", "", ""], ["", "Q", "", "", "", "", "", ""], ["", "", "", "", "", "", "Q", ""], ["", "", "Q", "", "", "", "", ""], ["", "", "", "", "Q", "", "", ""], ["", "", "", "", "", "", "", "Q"], ], highlightCells: [ [0, 0], [1, 3], [2, 5], [3, 1], [4, 6], [5, 2], [6, 4], [7, 7], ], }, { instruction: "Queens can be placed diagonally, but not in adjacent squares. Let's place a queen now. Click on the highlighted cell.", boardState: Array(BOARD_SIZE).fill(Array(BOARD_SIZE).fill("")), highlightCells: [[2, 2]], action: "place", actionCell: [2, 2], }, { instruction: "Great! Now let's see which cells this queen threatens.", boardState: [ ["", "X", "X", "X", "", "", "", ""], ["X", "X", "X", "X", "X", "", "", ""], ["X", "X", "Q", "X", "X", "", "", ""], ["X", "X", "X", "X", "X", "", "", ""], ["", "X", "X", "X", "", "", "", ""], ["", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", ""], ], highlightCells: [ [0, 1], [0, 2], [0, 3], [1, 1], [1, 2], [1, 3], [1, 4], [2, 0], [2, 1], [2, 3], [2, 4], [3, 1], [3, 2], [3, 3], [3, 4], [4, 1], [4, 2], [4, 3], ], feedback: "The queen threatens all adjacent cells and cells in its row and column.", }, { instruction: "Let's remove this queen. Click on it.", boardState: [ ["", "X", "X", "X", "", "", "", ""], ["X", "X", "X", "X", "X", "", "", ""], ["X", "X", "Q", "X", "X", "", "", ""], ["X", "X", "X", "X", "X", "", "", ""], ["", "X", "X", "X", "", "", "", ""], ["", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", ""], ], highlightCells: [[2, 2]], action: "remove", actionCell: [2, 2], }, { instruction: "Now it's your turn! Place two queens on the board so they don't threaten each other.", boardState: Array(BOARD_SIZE).fill(Array(BOARD_SIZE).fill("")), highlightCells: [], feedback: "Remember, queens can't be in adjacent squares or in the same row or column.", }, ] export function TutorialMode({ onComplete }: { onComplete: () => void }) { const [currentStep, setCurrentStep] = useState(0) const [board, setBoard] = useState(tutorialSteps[0].boardState) const [placedQueens, setPlacedQueens] = useState(0) const [showFeedback, setShowFeedback] = useState(false) useEffect(() => { setBoard(tutorialSteps[currentStep].boardState) setShowFeedback(false) }, [currentStep]) const handleCellClick = (row: number, col: number) => { if (currentStep === 5) { const newBoard = JSON.parse(JSON.stringify(board)) if (newBoard[row][col] === "") { newBoard[row][col] = "Q" setPlacedQueens(placedQueens + 1) } else if (newBoard[row][col] === "Q") { newBoard[row][col] = "" setPlacedQueens(placedQueens - 1) } setBoard(newBoard) if (placedQueens === 1) { setShowFeedback(true) } } else if ( tutorialSteps[currentStep].action === "place" && row === tutorialSteps[currentStep].actionCell![0] && col === tutorialSteps[currentStep].actionCell![1] ) { const newBoard = JSON.parse(JSON.stringify(board)) newBoard[row][col] = "Q" setBoard(newBoard) setShowFeedback(true) } else if ( tutorialSteps[currentStep].action === "remove" && row === tutorialSteps[currentStep].actionCell![0] && col === tutorialSteps[currentStep].actionCell![1] ) { const newBoard = JSON.parse(JSON.stringify(board)) newBoard[row][col] = "" setBoard(newBoard) setShowFeedback(true) } } const handleNextStep = () => { if (currentStep < tutorialSteps.length - 1) { setCurrentStep(currentStep + 1) setPlacedQueens(0) } else { onComplete() } } const handlePreviousStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) setPlacedQueens(0) } } return ( onComplete()}> Tutorial

{tutorialSteps[currentStep].instruction}

{board.map((row, rowIndex) => row.map((cell, colIndex) => ( )), )}
{showFeedback && tutorialSteps[currentStep].feedback && (
{tutorialSteps[currentStep].feedback}
)}

Click on the board to place or remove queens.

Try to solve the puzzle without queens threatening each other.

) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import { QueensGame } from "@/components/queens-game" export default function Home() { return (

) } [V0_FILE]json:file="package.json" { "name": "linkedin-queens", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-tooltip": "^1.0.6", "class-variance-authority": "^0.6.0", "clsx": "^1.2.1", "framer-motion": "^10.12.16", "lucide-react": "^0.244.0", "next": "13.4.6", "next-themes": "^0.2.1", "react": "18.2.0", "react-dom": "18.2.0", "tailwind-merge": "^1.13.2", "tailwindcss-animate": "^1.0.6" }, "devDependencies": { "@types/node": "20.3.1", "@types/react": "18.2.12", "@types/react-dom": "18.2.5", "autoprefixer": "10.4.14", "eslint": "8.42.0", "eslint-config-next": "13.4.6", "postcss": "8.4.24", "tailwindcss": "3.3.2", "typescript": "5.1.3" } } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "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/tutorial-modal.tsx" isFixed="true" isQuickEdit="true" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Crown, X, ChevronRight, ChevronLeft, HelpCircle } from "lucide-react" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { useState, useEffect } from "react" interface TutorialModalProps { open: boolean onOpenChange: (open: boolean) => void onComplete: () => void } interface TutorialStep { instruction: string boardState: string[][] highlightCells: number[][] action?: "place" | "remove" actionCell?: number[] feedback?: string } const BOARD_SIZE = 8 const tutorialSteps: TutorialStep[] = [ { instruction: "Welcome to Queens! This tutorial will guide you through the basics of the game.", boardState: Array(BOARD_SIZE).fill(Array(BOARD_SIZE).fill("")), highlightCells: [], }, { instruction: "The goal is to place queens on the board so that there's exactly one queen in each row and column.", boardState: [ ["Q", "", "", "", "", "", "", ""], ["", "", "", "Q", "", "", "", ""], ["", "", "", "", "", "Q", "", ""], ["", "Q", "", "", "", "", "", ""], ["", "", "", "", "", "", "Q", ""], ["", "", "Q", "", "", "", "", ""], ["", "", "", "", "Q", "", "", ""], ["", "", "", "", "", "", "", "Q"], ], highlightCells: [ [0, 0], [1, 3], [2, 5], [3, 1], [4, 6], [5, 2], [6, 4], [7, 7], ], }, { instruction: "Queens can be placed diagonally, but not in adjacent squares. Let's place a queen now. Click on the highlighted cell.", boardState: Array(BOARD_SIZE).fill(Array(BOARD_SIZE).fill("")), highlightCells: [[2, 2]], action: "place", actionCell: [2, 2], }, // ... rest of the tutorial steps remain the same ] export function TutorialModal({ open, onOpenChange, onComplete }: TutorialModalProps) { const [currentStep, setCurrentStep] = useState(0) const [board, setBoard] = useState(tutorialSteps[0].boardState) const [showFeedback, setShowFeedback] = useState(false) useEffect(() => { setBoard(tutorialSteps[currentStep].boardState) setShowFeedback(false) }, [currentStep]) const handleCellClick = (row: number, col: number) => { if ( tutorialSteps[currentStep].action === "place" && row === tutorialSteps[currentStep].actionCell![0] && col === tutorialSteps[currentStep].actionCell![1] ) { const newBoard = JSON.parse(JSON.stringify(board)) newBoard[row][col] = "Q" setBoard(newBoard) setShowFeedback(true) } else if ( tutorialSteps[currentStep].action === "remove" && row === tutorialSteps[currentStep].actionCell![0] && col === tutorialSteps[currentStep].actionCell![1] ) { const newBoard = JSON.parse(JSON.stringify(board)) newBoard[row][col] = "" setBoard(newBoard) setShowFeedback(true) } } const handleNextStep = () => { if (currentStep < tutorialSteps.length - 1) { setCurrentStep(currentStep + 1) } else { onComplete() } } const handlePreviousStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) } } return ( Tutorial

{tutorialSteps[currentStep].instruction}

{board.map((row, rowIndex) => row.map((cell, colIndex) => ( )), )}
{showFeedback && tutorialSteps[currentStep].feedback && (
{tutorialSteps[currentStep].feedback}
)}

Click on the board to place or remove queens.

Try to solve the puzzle without queens threatening each other.

) } [V0_FILE]typescriptreact:file="components/how-to-play-modal.tsx" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Crown, X } from "lucide-react" interface HowToPlayModalProps { open: boolean onOpenChange: (open: boolean) => void } export function HowToPlayModal({ open, onOpenChange }: HowToPlayModalProps) { return ( How to Play

Queens is a puzzle game where you need to place 8 queens on an 8x8 chessboard without any queens threatening each other.

Rules:

Place exactly 8 on the board

No two queens can be in the same row, column, or diagonal

Fill all remaining squares with

How to Play:

Click on an empty square to place an

Click on an to place a{" "}

Click on a to remove it

Complete the board without any conflicts to win

Try to solve the puzzle as quickly as possible. Good luck!

) } [V0_FILE]typescriptreact:file="components/classic-game.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Crown, X } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" const BOARD_SIZE = 8 const FIXED_QUEENS = 3 type CellState = "empty" | "queen" | "marked" interface Cell { state: CellState isConflicting: boolean isFixed: boolean } interface ClassicGameProps { onComplete: (score: number, time: number) => void seed: number isCompleted?: boolean } export function ClassicGame({ onComplete, seed, isCompleted = false }: ClassicGameProps) { const [board, setBoard] = useState([]) const [startTime] = useState(Date.now()) const [queensPlaced, setQueensPlaced] = useState(FIXED_QUEENS) useEffect(() => { initializeBoard() }, []) const initializeBoard = () => { const rng = mulberry32(seed) const newBoard = Array(BOARD_SIZE) .fill(null) .map(() => Array(BOARD_SIZE) .fill(null) .map(() => ({ state: "empty" as CellState, isConflicting: false, isFixed: false, })), ) let fixedQueensPlaced = 0 while (fixedQueensPlaced < FIXED_QUEENS) { const row = Math.floor(rng() BOARD_SIZE) const col = Math.floor(rng() * BOARD_SIZE) if (newBoard[row][col].state === "empty" && !checkConflicts(newBoard, row, col)) { newBoard[row][col].state = "queen" newBoard[row][col].isFixed = true fixedQueensPlaced++ } } updateConflicts(newBoard) setBoard(newBoard) setQueensPlaced(FIXED_QUEENS) } const checkConflicts = (board: Cell[][], row: number, col: number): boolean => { for (let i = 0; i < BOARD_SIZE; i++) { if ((i !== col && board[row][i].state === "queen") || (i !== row && board[i][col].state === "queen")) { return true } } for (let i = -1; i <= 1; i++) { for (let j = -1; j <= 1; j++) { if (i === 0 && j === 0) continue const newRow = row + i const newCol = col + j if (newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE) { if (board[newRow][newCol].state === "queen") { return true } } } } return false } const updateConflicts = (newBoard: Cell[][]) => { for (let row = 0; row < BOARD_SIZE; row++) { for (let col = 0; col < BOARD_SIZE; col++) { if (newBoard[row][col].state === "queen") { newBoard[row][col].isConflicting = checkConflicts(newBoard, row, col) } else { newBoard[row][col].isConflicting = false } } } } const handleCellClick = (row: number, col: number) => { if (isCompleted) return const newBoard = JSON.parse(JSON.stringify(board)) const cell = newBoard[row][col] if (cell.isFixed) return switch (cell.state) { case "empty": cell.state = "marked" break case "marked": if (queensPlaced < BOARD_SIZE) { cell.state = "queen" setQueensPlaced(queensPlaced + 1) } break case "queen": cell.state = "marked" setQueensPlaced(queensPlaced - 1) break } updateConflicts(newBoard) setBoard(newBoard) checkWinCondition(newBoard) } const checkWinCondition = (board: Cell[][]) => { const allCellsFilled = board.every((row) => row.every((cell) => cell.state !== "empty")) const correctQueensCount = board.flat().filter((cell) => cell.state === "queen").length === BOARD_SIZE const noConflicts = !board.flat().some((cell) => cell.isConflicting) if (allCellsFilled && correctQueensCount && noConflicts) { const endTime = Date.now() const timeTaken = Math.floor((endTime - startTime) / 1000) const score = Math.max(1000 - timeTaken * 10, 100) onComplete(score, timeTaken) } } return (
{isCompleted && (

Game completed for today

)}

{board.map((row, rowIndex) => row.map((cell, colIndex) => ( handleCellClick(rowIndex, colIndex)} whileHover={{ scale: cell.isFixed ? 1 : 1.05 }} whileTap={{ scale: cell.isFixed ? 1 : 0.95 }} disabled={cell.isFixed} > {cell.state === "queen" && ( )} {cell.state === "marked" && ( )} )), )}

Queens placed: {queensPlaced}/{BOARD_SIZE}

) } function mulberry32(a: number) { return () => { let t = (a += 0x6d2b79f5) t = Math.imul(t ^ (t >>> 15), t | 1) t ^= t + Math.imul(t ^ (t >>> 7), t | 61) return ((t ^ (t >>> 14)) >>> 0) / 4294967296 } } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .main-wrapper { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; padding: 0.5rem; margin: 0; overflow: hidden; } .container { max-width: none; width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } @media (min-width: 640px) { .container { padding-left: 1rem; padding-right: 1rem; } } [V0_FILE]typescriptreact:file="components/queens-game.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Trophy, Zap, Moon, Sun, HelpCircle } from "lucide-react" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { useTheme } from "next-themes" import { TutorialModal } from "@/components/tutorial-modal" import { HowToPlayModal } from "@/components/how-to-play-modal" import { StatsModal } from "@/components/stats-modal" import { AchievementsModal } from "@/components/achievements-modal" import { GameCompleteModal } from "@/components/game-complete-modal" import { ClassicGame } from "@/components/classic-game" import { AnimatePresence } from "framer-motion" const BOARD_SIZE = 8 interface GameStats { gamesPlayed: number wins: number currentStreak: number bestStreak: number totalTime: number bestTime: number lastPlayedDate: string | null } export function QueensGame() { const [showTutorial, setShowTutorial] = useState(false) const [showStats, setShowStats] = useState(false) const [showAchievements, setShowAchievements] = useState(false) const [showGameComplete, setShowGameComplete] = useState(false) const [isTutorialMode, setIsTutorialMode] = useState(false) const [isGameCompleted, setIsGameCompleted] = useState(false) const [showHowToPlay, setShowHowToPlay] = useState(false) const { theme, setTheme } = useTheme() const [stats, setStats] = useState({ gamesPlayed: 0, wins: 0, currentStreak: 0, bestStreak: 0, totalTime: 0, bestTime: Number.POSITIVE_INFINITY, lastPlayedDate: null, }) useEffect(() => { const savedStats = localStorage.getItem("queensGameStats") if (savedStats) { setStats(JSON.parse(savedStats)) } checkDailyReset() const lastCompletedDate = localStorage.getItem("lastCompletedDate") const today = new Date().toISOString().split("T")[0] setIsGameCompleted(lastCompletedDate === today) }, []) useEffect(() => { const timer = setInterval(checkDailyReset, 60000) // Check every minute return () => clearInterval(timer) }, []) const checkDailyReset = () => { const now = new Date() const today = now.toISOString().split("T")[0] const lastCompletedDate = localStorage.getItem("lastCompletedDate") if (lastCompletedDate !== today) { setIsGameCompleted(false) localStorage.removeItem("lastCompletedDate") } } const updateStats = (newStats: Partial) => { setStats((prevStats) => { const updatedStats = { ...prevStats, ...newStats } localStorage.setItem("queensGameStats", JSON.stringify(updatedStats)) return updatedStats }) } const handleCompleteTutorial = () => { setIsTutorialMode(false) } const handleGameComplete = (score: number, time: number) => { const now = new Date() const today = now.toISOString().split("T")[0] updateStats({ gamesPlayed: stats.gamesPlayed + 1, wins: stats.wins + 1, currentStreak: stats.currentStreak + 1, bestStreak: Math.max(stats.bestStreak, stats.currentStreak + 1), totalTime: stats.totalTime + time, bestTime: Math.min(stats.bestTime, time), lastPlayedDate: today, }) setShowGameComplete(true) setIsGameCompleted(true) localStorage.setItem("lastCompletedDate", today) } const generateDailyBoard = () => { const today = new Date().toISOString().split("T")[0] const seed = today.split("-").reduce((acc, val) => acc + Number.parseInt(val), 0) return seed } return (

Queens

Toggle theme

Statistics

Achievements

{!isGameCompleted ? ( ) : (

You've already completed today's game!

Come back tomorrow for a new challenge.

)}
setIsTutorialMode(open)} onComplete={handleCompleteTutorial} /> , progress: Math.min(stats.wins, 1), total: 1, unlocked: stats.wins > 0, }, { id: "2", title: "Ten Wins", description: "Win 10 games", icon: , progress: Math.min(stats.wins, 10), total: 10, unlocked: stats.wins >= 10, }, ]} />
) } export default QueensGame

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This