[V0_FILE]plaintext:file=".env.local" isEdit="true" isMerged="true" NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=karas [V0_FILE]png:file="public/images/ocean-background.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/ocean-background-FWzsvVkNw9C2kiX5sVlcrR4WBQOhv8.png" isMerged="true" [V0_FILE]png:file="public/images/admiral-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/admiral-avatar-wFpgsvTVBLFcA67hC8FQrMkt8mTkfa.png" isMerged="true" [V0_FILE]png:file="public/images/carrier.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/carrier-6ureCD7qwYJL9uvF9ucvchpg5BPLXa.png" isMerged="true" [V0_FILE]png:file="public/images/battleship.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/images/cruiser.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/images/submarine.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/images/destroyer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]typescriptreact:file="components/game/turn-indicator.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import { motion } from "framer-motion" import Image from "next/image" interface TurnIndicatorProps { isPlayerTurn: boolean playerName: string className?: string } export function TurnIndicator({ isPlayerTurn, playerName, className }: TurnIndicatorProps) { return (

{/* Player side */}

{playerName}

{/* Enemy side */}

Enemy

{/* Indicator arrow */}

) } [V0_FILE]typescriptreact:file="components/game/battle-stats.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import { Target, Crosshair } from "lucide-react" interface BattleStatsProps { playerShotsFired: number playerHits: number opponentShotsFired: number opponentHits: number className?: string } export function BattleStats({ playerShotsFired, playerHits, opponentShotsFired, opponentHits, className, }: BattleStatsProps) { const playerAccuracy = playerShotsFired > 0 ? Math.round((playerHits / playerShotsFired) * 100) : 0 const opponentAccuracy = opponentShotsFired > 0 ? Math.round((opponentHits / opponentShotsFired) * 100) : 0 return (

Your Stats

Shots Fired {playerShotsFired}

Hits {playerHits}

Accuracy

{playerAccuracy}%

Enemy Stats

Shots Fired {opponentShotsFired}

Hits {opponentHits}

Accuracy

{opponentAccuracy}%

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]jpg:file="public/images/coastal-city.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ob7miW3mUreePYfXdVwkpFWHthzoR5.svg?height=800&width=1200&query=coastal%20city%20silhouette%20with%20naval%20base" isMerged="true" [V0_FILE]png:file="public/images/enemy-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ob7miW3mUreePYfXdVwkpFWHthzoR5.svg?height=200&width=200&query=naval%20commander%20enemy%20portrait%20with%20hat" isMerged="true" [V0_FILE]typescriptreact:file="components/home/user-settings.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { LogOut, User, Volume2, VolumeX, Moon, Sun, Bell, BellOff, HelpCircle, Shield, Languages } from "lucide-react" import { useState } from "react" import { motion } from "framer-motion" interface UserSettingsProps { onClose: () => void onLogout: () => void } export function UserSettings({ onClose, onLogout }: UserSettingsProps) { const [soundEnabled, setSoundEnabled] = useState(true) const [darkMode, setDarkMode] = useState(false) const [notificationsEnabled, setNotificationsEnabled] = useState(true) return (

Settings

) } [V0_FILE]typescriptreact:file="components/home/mission-tracker.tsx" isMerged="true" "use client" import { Trophy } from "lucide-react" import { motion } from "framer-motion" interface Mission { id: string title: string progress: number total: number reward: number rewardType: "coin" | "star" } export function MissionTracker() { const missions: Mission[] = [ { id: "mission1", title: "Get the first hit in 2 games", progress: 0, total: 2, reward: 1, rewardType: "star", }, { id: "mission2", title: "Play 2 games in the Fort St. Angelo arena", progress: 0, total: 2, reward: 1, rewardType: "coin", }, { id: "mission3", title: "Get a hit with your first shot in 2 games", progress: 0, total: 2, reward: 2, rewardType: "coin", }, ] return (

Daily Missions

{missions.map((mission) => (

{mission.title}

{mission.progress}/{mission.total}

{mission.reward} {mission.rewardType === "coin" ? (

) : (

⭐

)}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" export default function Home() { const router = useRouter() useEffect(() => { router.push("/home") }, [router]) return null } [V0_FILE]png:file="public/images/commander.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/commander-w1fg0aDfGdbhKpWfx1H7doy8ZQDo0U.png" isMerged="true" [V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" import { useRouter } from "next/navigation" type User = { id: string email: string name: string } type AuthContextType = { user: User | null isLoading: boolean login: (email: string, password: string) => Promise<{ success: boolean; error?: string }> logout: () => void } const AuthContext = createContext(undefined) // Simple in-memory user database (would use a real DB in production) const USERS = [ { id: "1", email: "demo@example.com", name: "Demo User", password: "password", // In a real app, never store plain text passwords }, ] export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) const router = useRouter() // Check for existing session on mount useEffect(() => { const storedUser = localStorage.getItem("battleship_user") if (storedUser) { try { setUser(JSON.parse(storedUser)) } catch (error) { console.error("Failed to parse stored user:", error) localStorage.removeItem("battleship_user") } } setIsLoading(false) }, []) const login = async (email: string, password: string) => { // Find user with matching email const foundUser = USERS.find((u) => u.email === email) if (!foundUser) { return { success: false, error: "Invalid email or password" } } // Check password (in a real app, use proper password hashing) if (foundUser.password !== password) { return { success: false, error: "Invalid email or password" } } // Create user object without password const userWithoutPassword = { id: foundUser.id, email: foundUser.email, name: foundUser.name, } // Store user in state and localStorage setUser(userWithoutPassword) localStorage.setItem("battleship_user", JSON.stringify(userWithoutPassword)) return { success: true } } const logout = () => { setUser(null) localStorage.removeItem("battleship_user") router.push("/login") } return {children} } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="app/game/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]png:file="public/images/battleship-silhouette.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/battleship-silhouette-YipX7vapXa72PqqyC6tKbaBcbQ8PHm.png" isMerged="true" [V0_FILE]typescriptreact:file="utils/debug-logger.ts" isMerged="true" // Debug logger utility export const debugLogger = { log: (message: string, ...args: any[]) => { console.log(`[DEBUG] ${message}`, ...args) }, error: (message: string, ...args: any[]) => { console.error(`[ERROR] ${message}`, ...args) }, warn: (message: string, ...args: any[]) => { console.warn(`[WARN] ${message}`, ...args) }, info: (message: string, ...args: any[]) => { console.info(`[INFO] ${message}`, ...args) }, } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { 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: { 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))", }, // New fantasy theme colors fantasy: { purple: { light: "#c4b5fd", DEFAULT: "#8b5cf6", dark: "#7c3aed", }, teal: { light: "#99f6e4", DEFAULT: "#2dd4bf", dark: "#14b8a6", }, navy: { light: "#334155", DEFAULT: "#1e293b", dark: "#0f172a", }, }, }, 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", }, backgroundImage: { "fantasy-gradient": "linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(45, 212, 191, 0.8))", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="components/game/turn-header.tsx" isEdit="true" isMerged="true" "use client" import { cn } from "@/lib/utils" import type { GameStatus } from "@/types/game" interface TurnHeaderProps { status: GameStatus playerName: string className?: string } export function TurnHeader({ status, playerName, className }: TurnHeaderProps) { const isPlayerTurn = status === "playerTurn" const isOpponentTurn = status === "opponentTurn" const isGameOver = status === "playerWon" || status === "opponentWon" const getHeaderText = () => { if (isPlayerTurn) return `${playerName.toUpperCase()}'S TURN` if (isOpponentTurn) return "ENEMY'S TURN" if (status === "playerWon") return "VICTORY!" if (status === "opponentWon") return "DEFEAT!" return "BATTLESHIP" } const getHeaderColor = () => { if (isPlayerTurn) return "bg-gradient-to-r from-fantasy-purple to-fantasy-purple-dark" if (isOpponentTurn) return "bg-gradient-to-r from-fantasy-teal to-fantasy-teal-dark" if (status === "playerWon") return "bg-gradient-to-r from-green-700 to-green-600" if (status === "opponentWon") return "bg-gradient-to-r from-red-700 to-red-600" return "bg-gradient-to-r from-fantasy-navy-light to-fantasy-navy" } return (

{getHeaderText()}

{isPlayerTurn && (

)} {isOpponentTurn && (

)}

) } [V0_FILE]png:file="public/images/ocean-fantasy-bg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/ocean-fantasy-bg-Ozju59YtO1VXBEG7tTsSOhVh052ePR.png" isMerged="true" [V0_FILE]png:file="public/images/commander-stylized.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/commander-stylized-xnujkRheUW9LBDDUsntxsYxC4cxxEv.png" isMerged="true" [V0_FILE]css:file="app/cursors.css" isMerged="true" /* Custom cursors for the Battleship game */ /* Base cursor styles */ .cursor-default { cursor: url("data:image/svg+xml;utf8,") 12 12, auto; } /* Ship placement cursor */ .cursor-ship-placement { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } /* Ship rotation cursor */ .cursor-ship-rotate { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } /* Target cursor for firing */ .cursor-target { cursor: url("data:image/svg+xml;utf8,") 16 16, crosshair; } /* Waiting cursor */ .cursor-waiting { cursor: url("data:image/svg+xml;utf8,") 16 16, wait; } /* Not allowed cursor */ .cursor-not-allowed { cursor: url("data:image/svg+xml;utf8,") 16 16, not-allowed; } /* Auto-place cursor */ .cursor-auto-place { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } /* Ready cursor */ .cursor-ready { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } /* Reset game cursor */ .cursor-reset { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } /* Info cursor */ .cursor-info { cursor: url("data:image/svg+xml;utf8,") 16 16, help; } /* Settings cursor */ .cursor-settings { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } /* Logout cursor */ .cursor-logout { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } /* Home cursor */ .cursor-home { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } /* Sound cursor */ .cursor-sound { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } /* Debug cursor */ .cursor-debug { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } /* Hover effect for buttons */ .fantasy-button:hover { cursor: url("data:image/svg+xml;utf8,") 16 16, pointer; } [V0_FILE]png:file="public/friendly-naval-commander.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/friendly-naval-commander-VOkS6aIDMStwfqrLdmkP9a5kIHSHsa.png" isMerged="true" [V0_FILE]typescriptreact:file="components/game/ship-selector.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import type { Ship, ShipType } from "@/types/game" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { RotateCw, Zap } from "lucide-react" import { useState } from "react" interface ShipSelectorProps { ships: Ship[] selectedShipType: ShipType | null onSelectShip: (shipType: ShipType) => void orientation: "horizontal" | "vertical" onToggleOrientation: () => void onAutoPlace?: () => void disabled?: boolean } export function ShipSelector({ ships, selectedShipType, onSelectShip, orientation, onToggleOrientation, onAutoPlace, disabled = false, }: ShipSelectorProps) { const [draggedShip, setDraggedShip] = useState(null) const handleDragStart = (e: React.DragEvent, shipType: ShipType) => { // Only allow dragging if the ship hasn't been placed yet const ship = ships.find((s) => s.type === shipType) if (ship && ship.positions.length > 0) return // Set the dragged ship type setDraggedShip(shipType) // Select the ship onSelectShip(shipType) // Set drag data e.dataTransfer.setData("text/plain", shipType) // Set a custom drag image (optional) const dragImage = document.createElement("div") dragImage.className = "bg-fantasy-purple/80 rounded-md p-2 text-white text-xs" dragImage.textContent = `${shipType} (${ships.find((s) => s.type === shipType)?.size})` document.body.appendChild(dragImage) e.dataTransfer.setDragImage(dragImage, 0, 0) setTimeout(() => document.body.removeChild(dragImage), 0) // Set the drag effect e.dataTransfer.effectAllowed = "move" } const handleDragEnd = () => { setDraggedShip(null) } return (

DEPLOY YOUR FLEET

{onAutoPlace && ( )}

{ships.map((ship) => (

0 && "opacity-50 cursor-not-allowed", !ship.positions.length && "hover:bg-fantasy-navy-light/80 cursor-ship-placement", draggedShip === ship.type && "opacity-70 scale-95", )} onClick={() => !ship.positions.length && !disabled && onSelectShip(ship.type)} draggable={!ship.positions.length && !disabled} onDragStart={(e) => !ship.positions.length && !disabled && handleDragStart(e, ship.type)} onDragEnd={handleDragEnd} >

{ship.type} ({ship.size})

{/* Ship details */} {orientation === "horizontal" || selectedShipType !== ship.type ? ( <>

) : ( <>

)}

{ship.positions.length > 0 && (

DEPLOYED

)}

))}

) } [V0_FILE]typescriptreact:file="components/game/game-status.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type { GameStatus as GameStatusType, Ship } from "@/types/game" import { Button } from "@/components/ui/button" import { Target, Zap } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" interface GameStatusProps { status: GameStatusType message: string playerShips: Ship[] opponentShips: Ship[] onStartGame?: () => void onEndTurn?: () => void onResetGame?: () => void onPlayerReady?: () => void onAutoPlaceShips?: () => void phase: "playerSetup" | "enemySetup" | "playing" | "gameOver" playerName?: string } export function GameStatus({ status, message, playerShips, opponentShips, onStartGame, onEndTurn, onResetGame, onPlayerReady, onAutoPlaceShips, phase, playerName = "Admiral", }: GameStatusProps) { const allShipsPlaced = playerShips.every((ship) => ship.positions.length > 0) const isPlayerTurn = status === "playerTurn" return (

{/* Message box */}

{message}

{/* Action buttons */} {phase === "playerSetup" && (

{allShipsPlaced ? ( ) : ( )}

)} {phase === "gameOver" && ( )}

) } [V0_FILE]typescriptreact:file="types/game.ts" isEdit="true" isMerged="true" export type ShipType = "carrier" | "battleship" | "cruiser" | "submarine" | "destroyer" export interface Ship { id: string type: ShipType size: number positions: Position[] hits: number isSunk: boolean } export interface Position { x: number y: number } export type CellState = "empty" | "ship" | "hit" | "miss" export interface Cell { x: number y: number state: CellState shipId?: string } export type Board = Cell[][] export type GamePhase = "playerSetup" | "enemySetup" | "playing" | "gameOver" export type GameStatus = "waiting" | "playerTurn" | "opponentTurn" | "playerWon" | "opponentWon" export type GameAction = | "player_hit" | "player_miss" | "player_sink" | "opponent_hit" | "opponent_miss" | "opponent_sink" | "player_win" | "opponent_win" | "place_ship" | "auto_place" | "player_ready" | "enemy_ready" | "start_game" | "end_turn" | "reset_game" | "player_repeat" | "opponent_repeat" export interface GameState { phase: GamePhase status: GameStatus playerBoard: Board opponentBoard: Board playerShips: Ship[] opponentShips: Ship[] selectedShip: Ship | null shipOrientation: "horizontal" | "vertical" message: string playerShotsFired: number playerHits: number opponentShotsFired: number opponentHits: number playerReady: boolean enemyReady: boolean lastShotPosition: Position | null lastAction: GameAction | null aiHuntingMode: boolean } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="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: 221.2 83.2% 53.3%; --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: 221.2 83.2% 53.3%; --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: 217.2 91.2% 59.8%; --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: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom styles for the game */ .ship-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; } .ship-cell { aspect-ratio: 1 / 1; border: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.2s; } .ship-cell:hover { background-color: rgba(0, 0, 0, 0.05); } .ship-cell.hit { background-color: #ef4444; } .ship-cell.miss { background-color: #e5e7eb; } .ship-cell.ship { background-color: #6b7280; } /* New custom styles */ .ocean-grid { background-image: linear-gradient(to right, rgba(129, 140, 248, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, 0.1) 1px, transparent 1px); background-size: 32px 32px; } .small-ocean-grid { background-image: linear-gradient(to right, rgba(129, 140, 248, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, 0.1) 1px, transparent 1px); background-size: 16px 16px; } .hit-marker { animation: pulse-hit 2s infinite; box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.4); } @keyframes pulse-hit { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .miss-marker { animation: pulse-miss 2s infinite; } @keyframes pulse-miss { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .radar-sweep { position: relative; overflow: hidden; } .radar-sweep::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: translateX(-100%); animation: radar-sweep 3s linear infinite; } @keyframes radar-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .water-animation { position: relative; overflow: hidden; } .water-animation::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 20, 50 10 T 100 10' stroke='rgba(255,255,255,0.1)' fill='none'/%3E%3C/svg%3E"); background-size: 100px 20px; animation: water-move 10s linear infinite; opacity: 0.3; } @keyframes water-move { 0% { background-position: 0 0; } 100% { background-position: 100px 0; } } .glass-effect { backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .neon-border { box-shadow: 0 0 5px rgba(139, 92, 246, 0.5), 0 0 10px rgba(139, 92, 246, 0.3), inset 0 0 5px rgba(139, 92, 246, 0.2); } .neon-border-orange { box-shadow: 0 0 5px rgba(236, 72, 153, 0.5), 0 0 10px rgba(236, 72, 153, 0.3), inset 0 0 5px rgba(236, 72, 153, 0.2); } .ship-shadow { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.4)); } .last-shot-highlight { animation: highlight-pulse 1.5s ease-in-out infinite; } @keyframes highlight-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.7); } 50% { box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.3); } } /* Enhanced targeting styles */ button[data-state="empty"]:hover, button[data-state="ship"]:hover, button[data-state="hit"]:hover, button[data-state="miss"]:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.05); transition: all 0.1s ease-in-out; cursor: pointer; } button[data-state="empty"]:active, button[data-state="ship"]:active, button[data-state="hit"]:active, button[data-state="miss"]:active { background-color: rgba(255, 255, 255, 0.3); transform: scale(0.95); } /* Targeting crosshair animation */ @keyframes pulse-target { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .targeting-crosshair { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; } button:hover .targeting-crosshair { opacity: 1; animation: pulse-target 1.5s infinite; } .targeting-crosshair::before, .targeting-crosshair::after { content: ""; position: absolute; background-color: rgba(255, 255, 255, 0.7); } .targeting-crosshair::before { width: 1px; height: 80%; } .targeting-crosshair::after { width: 80%; height: 1px; } /* Unrestricted hit placement styles */ .board-cell { position: relative; cursor: pointer !important; transition: all 0.2s ease; } .board-cell:hover { background-color: rgba(255, 255, 255, 0.25) !important; z-index: 10; } .board-cell:active { transform: scale(0.9); } /* Targeting indicator */ .targeting-indicator { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .targeting-indicator::before { content: ""; width: 70%; height: 70%; border: 2px dashed rgba(255, 255, 255, 0.6); border-radius: 50%; animation: rotate 4s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Add these animations to the end of your globals.css file */ /* Hit explosion animation */ @keyframes explosion { 0% { transform: scale(0.1); opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 50% { transform: scale(1.5); opacity: 0.8; box-shadow: 0 0 30px 10px rgba(239, 68, 68, 0.5); } 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .hit-explosion { animation: explosion 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } /* Ship sinking animation */ @keyframes sink { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 25% { transform: translateY(2px) rotate(2deg); } 50% { transform: translateY(4px) rotate(-2deg); } 75% { transform: translateY(6px) rotate(2deg); opacity: 0.8; } 100% { transform: translateY(10px) rotate(0deg); opacity: 0; } } .ship-sinking { animation: sink 1.5s ease-in forwards; } /* Water splash animation */ @keyframes splash { 0% { transform: scale(0.1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } } .water-splash { position: absolute; inset: -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(173, 216, 230, 0.4) 50%, transparent 70%); animation: splash 0.8s ease-out forwards; pointer-events: none; z-index: 20; } /* Fire effect for hit ships */ .fire-effect { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 69, 0, 1) 0%, rgba(255, 140, 0, 0.8) 50%, transparent 70%); border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; filter: blur(1px); box-shadow: 0 0 10px 5px rgba(255, 69, 0, 0.5); animation: flicker 0.5s ease-in-out infinite alternate; z-index: 15; } @keyframes flicker { 0% { opacity: 0.7; height: 20px; } 100% { opacity: 1; height: 25px; } } /* Smoke effect for damaged ships */ .smoke-effect { position: absolute; top: -15px; left: 40%; width: 10px; height: 10px; background: rgba(200, 200, 200, 0.8); border-radius: 50%; filter: blur(2px); opacity: 0; animation: smoke 2s ease-out infinite; z-index: 14; } .smoke-effect:nth-child(2) { left: 60%; animation-delay: 0.6s; } @keyframes smoke { 0% { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: 0.8; } 50% { transform: translateY(-15px) scale(1.5); opacity: 0.4; } 100% { transform: translateY(-30px) scale(2); opacity: 0; } } /* Shockwave effect for hits */ @keyframes shockwave { 0% { transform: scale(0.1); opacity: 0; border: 2px solid rgba(255, 255, 255, 0.8); } 25% { opacity: 0.8; } 100% { transform: scale(2); opacity: 0; border: 2px solid rgba(255, 255, 255, 0); } } .shockwave { position: absolute; inset: 0; border-radius: 50%; animation: shockwave 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; pointer-events: none; z-index: 20; } /* Ship destruction animation */ @keyframes destroy { 0% { filter: brightness(1) contrast(1); transform: scale(1) rotate(0deg); } 10% { filter: brightness(2) contrast(1.5); transform: scale(1.05) rotate(1deg); } 20% { transform: scale(0.95) rotate(-1deg); } 30% { filter: brightness(1.5) contrast(1.2); transform: scale(1.02) rotate(1deg); } 100% { filter: brightness(0.8) contrast(1); transform: scale(1) rotate(0deg); } } .ship-destroy { animation: destroy 0.8s cubic-bezier(0.215, 0.61, 0.44, 1) forwards; } /* New fantasy theme styles */ .fantasy-gradient { background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(45, 212, 191, 0.8)); } .fantasy-border { border: 2px solid rgba(139, 92, 246, 0.5); box-shadow: 0 0 15px rgba(139, 92, 246, 0.3), inset 0 0 5px rgba(139, 92, 246, 0.2); } .fantasy-glow { filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.5)); } .fantasy-text-glow { text-shadow: 0 0 5px rgba(139, 92, 246, 0.7); } .fantasy-button { background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(124, 58, 237, 0.8)); border: 1px solid rgba(139, 92, 246, 0.5); box-shadow: 0 0 10px rgba(139, 92, 246, 0.3); transition: all 0.3s ease; } .fantasy-button:hover { background: linear-gradient(135deg, rgba(124, 58, 237, 0.8), rgba(109, 40, 217, 0.8)); box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); transform: translateY(-2px); } .fantasy-panel { background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(139, 92, 246, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); } .shimmer-effect { position: relative; overflow: hidden; } .shimmer-effect::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to bottom right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100% ); transform: rotate(30deg); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%) rotate(30deg); } 100% { transform: translateX(100%) rotate(30deg); } } .starry-bg { position: relative; } .starry-bg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; } .floating-animation { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .ripple-effect { position: relative; overflow: hidden; } .ripple-effect::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); opacity: 0; border-radius: 100%; transform: scale(1); animation: ripple 2s infinite; } @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(50); opacity: 0; } } /* Add these styles to the end of your globals.css file */ /* Drag and drop styles */ .ship-dragging { opacity: 0.6; transform: scale(0.95); transition: all 0.2s ease; } .drop-valid { background-color: rgba(34, 197, 94, 0.3) !important; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5); } .drop-invalid { background-color: rgba(239, 68, 68, 0.3) !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5); } .ship-preview { position: absolute; pointer-events: none; z-index: 50; transition: all 0.1s ease; } .ship-preview.valid { background-color: rgba(34, 197, 94, 0.4); border: 2px solid rgba(34, 197, 94, 0.7); } .ship-preview.invalid { background-color: rgba(239, 68, 68, 0.4); border: 2px solid rgba(239, 68, 68, 0.7); } /* Drag ghost customization */ .drag-ghost { background-color: rgba(139, 92, 246, 0.8); color: white; padding: 0.5rem; border-radius: 0.375rem; font-weight: bold; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* AI Hunting Mode Animations */ @keyframes ai-hunting-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } } @keyframes ai-hunting-glow { 0%, 100% { text-shadow: 0 0 5px rgba(239, 68, 68, 0.8), 0 0 10px rgba(239, 68, 68, 0.6); } 50% { text-shadow: 0 0 10px rgba(239, 68, 68, 1), 0 0 20px rgba(239, 68, 68, 0.8); } } @keyframes ai-hunting-border { 0% { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 5px rgba(239, 68, 68, 0.3); } 50% { border-color: rgba(239, 68, 68, 1); box-shadow: 0 0 15px rgba(239, 68, 68, 0.7); } 100% { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 5px rgba(239, 68, 68, 0.3); } } .ai-hunting-active { animation: ai-hunting-pulse 2s infinite, ai-hunting-glow 2s infinite; } .ai-hunting-border { animation: ai-hunting-border 2s infinite; } /* Radar scanning effect for hunting mode */ @keyframes radar-scan { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .radar-scan { animation: radar-scan 3s linear infinite; } /* Targeting reticle animation */ @keyframes targeting-reticle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; } 50% { transform: scale(1.1) rotate(180deg); opacity: 1; } } .targeting-reticle { animation: targeting-reticle 1.5s ease-in-out infinite; } /* Warning flash effect */ @keyframes warning-flash { 0%, 100% { background-color: rgba(239, 68, 68, 0.1); } 50% { background-color: rgba(239, 68, 68, 0.3); } } .warning-flash { animation: warning-flash 1s ease-in-out infinite; } [V0_FILE]typescriptreact:file="components/game/ai-hunting-indicator.tsx" isEdit="true" isMerged="true" "use client" import { motion, AnimatePresence } from "framer-motion" import { Target, Crosshair, Zap, Volume2, VolumeX } from "lucide-react" import { cn } from "@/lib/utils" import { useEffect, useState } from "react" import { soundManager } from "@/utils/sound-manager" interface AIHuntingIndicatorProps { isHunting: boolean isOpponentTurn: boolean soundEnabled?: boolean className?: string } export function AIHuntingIndicator({ isHunting, isOpponentTurn, soundEnabled = true, className, }: AIHuntingIndicatorProps) { const [previousHuntingState, setPreviousHuntingState] = useState(false) const [showSoundIcon, setShowSoundIcon] = useState(false) // Handle hunting mode state changes and play appropriate sounds useEffect(() => { // Only play sounds if sound is enabled if (!soundEnabled) return // AI enters hunting mode if (isHunting && !previousHuntingState && isOpponentTurn) { console.log("AI entered hunting mode - playing sound") soundManager.playHuntingModeStart() setShowSoundIcon(true) // Hide sound icon after animation setTimeout(() => setShowSoundIcon(false), 2000) } // AI exits hunting mode if (!isHunting && previousHuntingState) { console.log("AI exited hunting mode - playing sound") soundManager.playHuntingModeEnd() setShowSoundIcon(true) // Hide sound icon after animation setTimeout(() => setShowSoundIcon(false), 1500) } setPreviousHuntingState(isHunting) }, [isHunting, isOpponentTurn, soundEnabled, previousHuntingState]) // Play targeting sound periodically while hunting useEffect(() => { if (!isHunting || !isOpponentTurn || !soundEnabled) return const targetingInterval = setInterval(() => { soundManager.playTargeting() }, 3000) // Play targeting sound every 3 seconds while hunting return () => clearInterval(targetingInterval) }, [isHunting, isOpponentTurn, soundEnabled]) return ( {isHunting && isOpponentTurn && (

AI HUNTING MODE Enemy has locked onto your ship!

{/* Sound indicator */} {showSoundIcon && (

{soundEnabled ? ( ) : ( )}

)}

{/* Animated border effect */} {/* Sound wave effect when playing audio */} {showSoundIcon && ( {[...Array(3)].map((_, i) => ( ))} )} )} ) } [V0_FILE]typescriptreact:file="utils/sound-manager.ts" isEdit="true" isMerged="true" // Sound manager for the game class SoundManager { private sounds: Map = new Map() private enabled = true private isClient = false constructor() { // Check if we're running on the client side this.isClient = typeof window !== "undefined" // Only preload sounds on the client side if (this.isClient) { this.preloadSounds() } } private preloadSounds() { // Only run on client side if (!this.isClient) return // These would be actual sound files in a production app const soundFiles = { hit: "/sounds/hit.mp3", miss: "/sounds/splash.mp3", sink: "/sounds/explosion.mp3", victory: "/sounds/victory.mp3", defeat: "/sounds/defeat.mp3", place: "/sounds/place.mp3", ready: "/sounds/ready.mp3", turn: "/sounds/turn.mp3", aiHuntingStart: "/sounds/ai-hunting-start.mp3", aiHuntingEnd: "/sounds/ai-hunting-end.mp3", aiTargeting: "/sounds/ai-targeting.mp3", warning: "/sounds/warning.mp3", } // In a real implementation, we would preload these sounds // For now, we'll create the audio elements and use Web Audio API to generate sounds Object.entries(soundFiles).forEach(([key, path]) => { const audio = new Audio() audio.preload = "auto" // In a real implementation, we would set audio.src = path this.sounds.set(key, audio) }) // Generate synthetic sounds using Web Audio API this.generateSyntheticSounds() } private generateSyntheticSounds() { // Only run on client side if (!this.isClient) return // Create AudioContext for generating synthetic sounds if ("AudioContext" in window || "webkitAudioContext" in window) { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() // Generate AI Hunting Start sound (dramatic alert) this.createSyntheticSound("aiHuntingStart", () => { const duration = 1.5 const oscillator1 = audioContext.createOscillator() const oscillator2 = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator1.connect(gainNode) oscillator2.connect(gainNode) gainNode.connect(audioContext.destination) // Create a dramatic rising tone oscillator1.frequency.setValueAtTime(220, audioContext.currentTime) oscillator1.frequency.exponentialRampToValueAtTime(440, audioContext.currentTime + 0.3) oscillator1.frequency.exponentialRampToValueAtTime(660, audioContext.currentTime + 0.6) oscillator1.type = "sawtooth" oscillator2.frequency.setValueAtTime(110, audioContext.currentTime) oscillator2.frequency.exponentialRampToValueAtTime(220, audioContext.currentTime + 0.3) oscillator2.frequency.exponentialRampToValueAtTime(330, audioContext.currentTime + 0.6) oscillator2.type = "square" // Envelope gainNode.gain.setValueAtTime(0, audioContext.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.3, audioContext.currentTime + 0.1) gainNode.gain.exponentialRampToValueAtTime(0.1, audioContext.currentTime + 0.8) gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration) oscillator1.start(audioContext.currentTime) oscillator2.start(audioContext.currentTime) oscillator1.stop(audioContext.currentTime + duration) oscillator2.stop(audioContext.currentTime + duration) }) // Generate AI Hunting End sound (relief tone) this.createSyntheticSound("aiHuntingEnd", () => { const duration = 1.0 const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.connect(gainNode) gainNode.connect(audioContext.destination) // Create a descending relief tone oscillator.frequency.setValueAtTime(440, audioContext.currentTime) oscillator.frequency.exponentialRampToValueAtTime(220, audioContext.currentTime + 0.5) oscillator.frequency.exponentialRampToValueAtTime(110, audioContext.currentTime + duration) oscillator.type = "sine" // Envelope gainNode.gain.setValueAtTime(0, audioContext.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.2, audioContext.currentTime + 0.1) gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration) oscillator.start(audioContext.currentTime) oscillator.stop(audioContext.currentTime + duration) }) // Generate AI Targeting sound (subtle beeping) this.createSyntheticSound("aiTargeting", () => { const duration = 0.3 const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.connect(gainNode) gainNode.connect(audioContext.destination) oscillator.frequency.setValueAtTime(800, audioContext.currentTime) oscillator.type = "square" // Quick beep envelope gainNode.gain.setValueAtTime(0, audioContext.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.15, audioContext.currentTime + 0.05) gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration) oscillator.start(audioContext.currentTime) oscillator.stop(audioContext.currentTime + duration) }) // Generate Warning sound (urgent beeps) this.createSyntheticSound("warning", () => { const beepDuration = 0.15 const pauseDuration = 0.1 const totalBeeps = 3 for (let i = 0; i < totalBeeps; i++) { const startTime = audioContext.currentTime + i * (beepDuration + pauseDuration) const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.connect(gainNode) gainNode.connect(audioContext.destination) oscillator.frequency.setValueAtTime(1000, startTime) oscillator.type = "square" gainNode.gain.setValueAtTime(0, startTime) gainNode.gain.exponentialRampToValueAtTime(0.2, startTime + 0.02) gainNode.gain.exponentialRampToValueAtTime(0.01, startTime + beepDuration) oscillator.start(startTime) oscillator.stop(startTime + beepDuration) } }) } } private createSyntheticSound(key: string, soundGenerator: () => void) { // Only run on client side if (!this.isClient) return // Create a custom audio element that triggers the synthetic sound const audio = new Audio() audio.addEventListener("play", (e) => { e.preventDefault() if (this.enabled) { try { soundGenerator() } catch (error) { console.warn(`Failed to play synthetic sound ${key}:`, error) } } }) this.sounds.set(key, audio) } public play(soundName: string) { // Only run on client side if (!this.isClient || !this.enabled) return const sound = this.sounds.get(soundName) if (sound) { // Reset the audio to the beginning sound.currentTime = 0 // Play the sound sound.play().catch((error) => { console.error(`Error playing sound ${soundName}:`, error) }) } else { console.warn(`Sound ${soundName} not found`) } } public playWithDelay(soundName: string, delay: number) { // Only run on client side if (!this.isClient) return setTimeout(() => { this.play(soundName) }, delay) } public toggle() { this.enabled = !this.enabled return this.enabled } public setEnabled(enabled: boolean) { this.enabled = enabled return this.enabled } public isEnabled() { return this.enabled } // Play a sequence of sounds for dramatic effect public playSequence(sounds: Array<{ name: string; delay: number }>) { // Only run on client side if (!this.isClient) return sounds.forEach(({ name, delay }) => { this.playWithDelay(name, delay) }) } // Play hunting mode entrance with dramatic sequence public playHuntingModeStart() { if (!this.isClient || !this.enabled) return this.playSequence([ { name: "warning", delay: 0 }, { name: "aiHuntingStart", delay: 500 }, ]) } // Play hunting mode exit with relief sound public playHuntingModeEnd() { if (!this.isClient || !this.enabled) return this.play("aiHuntingEnd") } // Play targeting sound during hunting public playTargeting() { if (!this.isClient || !this.enabled) return this.play("aiTargeting") } } // Create a singleton instance - but only initialize on client side let soundManagerInstance: SoundManager | null = null export const soundManager = (() => { if (typeof window !== "undefined" && !soundManagerInstance) { soundManagerInstance = new SoundManager() } return ( soundManagerInstance || { // Provide a fallback object for server-side rendering play: () => {}, playWithDelay: () => {}, toggle: () => true, setEnabled: () => true, isEnabled: () => true, playSequence: () => {}, playHuntingModeStart: () => {}, playHuntingModeEnd: () => {}, playTargeting: () => {}, } ) })() [V0_FILE]css:file="app/tech.css" isMerged="true" /* Tech-themed, blockchain-inspired UI skin for Battleship */ /* Background layers */ .tech-bg { position: relative; } .tech-bg .layer { position: absolute; inset: 0; pointer-events: none; } .tech-grid { background-image: radial-gradient( circle at center, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0.02) 45%, transparent 70% ), linear-gradient(to right, rgba(45, 212, 191, 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(45, 212, 191, 0.12) 1px, transparent 1px); background-size: cover, 40px 40px, 40px 40px; mix-blend-mode: screen; } .tech-hex { background-image: url("data:image/svg+xml,%3Csvg width='120' height='104' viewBox='0 0 120 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(99,102,241,0.18)' stroke-width='1'%3E%3Cpath d='M30 1 90 1 120 52 90 103 30 103 0 52z' /%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 104px; opacity: 0.5; animation: tech-pan 60s linear infinite; } @keyframes tech-pan { from { background-position: 0 0; } to { background-position: 1200px 800px; } } .tech-circuit { background-image: linear-gradient(45deg, rgba(16, 185, 129, 0.08) 0 1px, transparent 1px), linear-gradient(-45deg, rgba(99, 102, 241, 0.08) 0 1px, transparent 1px); background-size: 12px 12px, 12px 12px; opacity: 0.6; mask-image: radial-gradient(circle at 70% 30%, rgba(0, 0, 0, 0.75), transparent 65%); } .scanlines { background: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04) 2px, transparent 2px, transparent 4px ); mix-blend-mode: overlay; opacity: 0.25; } .noise { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.04 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.15; mix-blend-mode: soft-light; } /* Panels and buttons */ .terminal-panel { background: rgba(6, 14, 29, 0.75); border: 1.5px solid rgba(16, 185, 129, 0.35); box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08) inset, 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(16, 185, 129, 0.15); backdrop-filter: blur(10px); } .terminal-slim { background: rgba(6, 14, 29, 0.6); border: 1px dashed rgba(99, 102, 241, 0.35); box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.08) inset, 0 0 18px rgba(99, 102, 241, 0.12); } .tech-button { position: relative; background: linear-gradient(135deg, rgba(16, 185, 129, 0.85), rgba(59, 130, 246, 0.25)); border: 1.5px solid rgba(16, 185, 129, 0.55); color: white !important; text-shadow: 0 0 8px rgba(16, 185, 129, 0.6); box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15) inset, 0 10px 20px rgba(16, 185, 129, 0.2); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .tech-button:hover { transform: translateY(-1px); border-color: rgba(16, 185, 129, 0.9); box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25) inset, 0 12px 28px rgba(16, 185, 129, 0.28), 0 0 24px rgba(59, 130, 246, 0.18); } .tech-chip { background: linear-gradient(180deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)); border: 1px solid rgba(16, 185, 129, 0.45); box-shadow: 0 0 16px rgba(16, 185, 129, 0.18); } /* HUD/status */ .hud-title { letter-spacing: 0.18em; color: #d1fae5; text-shadow: 0 0 10px rgba(16, 185, 129, 0.65), 0 0 24px rgba(59, 130, 246, 0.35); } .hud-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.7), transparent); } /* Glitch effect for headings */ .glitch { position: relative; display: inline-block; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .glitch::before { animation: glitch-anim 2s infinite linear alternate-reverse; clip-path: polygon(0 2%, 100% 2%, 100% 33%, 0 33%); color: rgba(59, 130, 246, 0.8); } .glitch::after { animation: glitch-anim-2 3s infinite linear alternate-reverse; clip-path: polygon(0 66%, 100% 66%, 100% 98%, 0 98%); color: rgba(16, 185, 129, 0.8); } @keyframes glitch-anim { 0% { transform: translate(0, 0); } 20% { transform: translate(-2px, 1px); } 40% { transform: translate(1px, -1px); } 60% { transform: translate(3px, 2px); } 80% { transform: translate(-1px, -2px); } 100% { transform: translate(0, 0); } } @keyframes glitch-anim-2 { 0% { transform: translate(0, 0); } 25% { transform: translate(1px, 2px); } 50% { transform: translate(-2px, -1px); } 75% { transform: translate(2px, -2px); } 100% { transform: translate(0, 0); } } /* Subtle pulse border for active indicators */ .pulse-border { position: relative; } .pulse-border::after { content: ""; position: absolute; inset: -2px; border-radius: 10px; border: 1px solid rgba(16, 185, 129, 0.6); animation: pulse-outline 2.2s ease-in-out infinite; } @keyframes pulse-outline { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); opacity: 1; } 50% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); opacity: 0.6; } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); opacity: 1; } } /* Minimal scrollbar for logs/panels */ .tech-scroll::-webkit-scrollbar { height: 8px; width: 8px; } .tech-scroll::-webkit-scrollbar-thumb { background: rgba(16, 185, 129, 0.35); border-radius: 6px; } .tech-scroll::-webkit-scrollbar-track { background: rgba(6, 14, 29, 0.35); } [V0_FILE]typescriptreact:file="components/common/data-ticker.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useMemo, useRef, useState } from "react" import { ActivitySquare, CuboidIcon as Cube, Network, Shield, Zap } from "lucide-react" import { cn } from "@/lib/utils" type Item = { key: string label: string value: string icon: React.ReactNode } export function DataTicker({ className }: { className?: string }) { const [tick, setTick] = useState(0) const intervalRef = useRef(null) const items = useMemo(() => { const base = Date.now() const block = Math.floor(base / 5000) % 100000 const gas = (Math.abs(Math.sin(base / 100000)) * 120 + 20).toFixed(0) const peers = (Math.abs(Math.cos(base / 150000)) * 8 + 3).toFixed(0) const latency = (Math.abs(Math.sin(base / 250000)) * 60 + 20).toFixed(0) return [ { key: "block", label: "Block", value: `#${block}`, icon: }, { key: "gas", label: "Gas", value: `${gas} gwei`, icon: }, { key: "peers", label: "Peers", value: `${peers}`, icon: }, { key: "lat", label: "Latency", value: `${latency}ms`, icon: , }, { key: "sec", label: "Sec", value: "PoS ✓", icon: }, ] }, [tick]) useEffect(() => { intervalRef.current = window.setInterval(() => setTick((t) => t + 1), 1500) return () => { if (intervalRef.current) window.clearInterval(intervalRef.current) } }, []) return (

{items.map((it) => (

{it.label}: {it.value}

))}

) } [V0_FILE]typescriptreact:file="components/common/wallet-badge.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Wallet } from "lucide-react" export function WalletBadge() { const [connected, setConnected] = useState(false) const [addr] = useState("0xABCD...EF12") return (

{connected ? (

Connected {addr} Chain: 31337

) : ( )}

) } [V0_FILE]typescriptreact:file="components/home/mode-card.tsx" isMerged="true" "use client" import type React from "react" import Link from "next/link" import { motion } from "framer-motion" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface ModeCardProps { href: string title: string description: string icon: React.ReactNode accent?: "emerald" | "indigo" | "fuchsia" className?: string } export function ModeCard({ href, title, description, icon, accent = "emerald", className }: ModeCardProps) { const accentRing = accent === "emerald" ? "ring-emerald-400/40 hover:ring-emerald-300/60" : accent === "indigo" ? "ring-indigo-400/40 hover:ring-indigo-300/60" : "ring-fuchsia-400/40 hover:ring-fuchsia-300/60" const accentGlow = accent === "emerald" ? "shadow-[0_0_24px_rgba(16,185,129,0.2)]" : accent === "indigo" ? "shadow-[0_0_24px_rgba(99,102,241,0.2)]" : "shadow-[0_0_24px_rgba(217,70,239,0.2)]" return ( {/* Moving border sheen */}

{icon}

{title}

{description}

{/* Scanline accent */}

) } [V0_FILE]typescriptreact:file="components/home/stats-marquee.tsx" isMerged="true" "use client" import { DataTicker } from "@/components/common/data-ticker" import { motion } from "framer-motion" export function StatsMarquee() { return ( ) } [V0_FILE]typescriptreact:file="components/home/holographic-ocean.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import Image from "next/image" export function HolographicOcean() { return (

{/* Ocean map backdrop */}

{/* Radar sweeps */} {[0, 1].map((i) => ( ))} {/* Pulsing targets */} {[ { x: "25%", y: "35%" }, { x: "70%", y: "55%" }, { x: "45%", y: "75%" }, ].map((p, idx) => ( ))} {/* Silhouette overlay */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import "./globals.css" import "./tech.css" import "./cursors.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import { AuthProvider } from "@/contexts/auth-context" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Battleship Game", description: "A classic Battleship game built with Next.js", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/common/tech-wrapper.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type { PropsWithChildren } from "react" import { DataTicker } from "./data-ticker" import { WalletBadge } from "./wallet-badge" import { cn } from "@/lib/utils" type TechWrapperProps = PropsWithChildren<{ className?: string denseTopbar?: boolean showHud?: boolean }> export function TechWrapper({ children, className, denseTopbar = false, showHud = true }: TechWrapperProps) { return (

{/* Background layers */}

{/* HUD/topbar */} {showHud && (

BATTLESHIP.NAVAL.NET

)} {/* Content */}

{children}

) } [V0_FILE]typescriptreact:file="contexts/game-context.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useReducer, type ReactNode, useEffect, useRef } from "react" import type { GameState, Ship, Position, Board, ShipType, Cell } from "@/types/game" import { debugLogger } from "@/utils/debug-logger" import { soundManager } from "@/utils/sound-manager" // Initial ships configuration const initialShips: Ship[] = [ { id: "carrier", type: "carrier", size: 5, positions: [], hits: 0, isSunk: false }, { id: "battleship", type: "battleship", size: 4, positions: [], hits: 0, isSunk: false }, { id: "cruiser", type: "cruiser", size: 3, positions: [], hits: 0, isSunk: false }, { id: "submarine", type: "submarine", size: 3, positions: [], hits: 0, isSunk: false }, { id: "destroyer", type: "destroyer", size: 2, positions: [], hits: 0, isSunk: false }, ] // Create a 10x10 empty board const createEmptyBoard = (): Board => { const board: Board = [] for (let y = 0; y < 10; y++) { const row: Cell[] = [] for (let x = 0; x < 10; x++) { row.push({ x, y, state: "empty" }) } board.push(row) } return board } // Initial game state const initialState: GameState = { phase: "playerSetup", status: "waiting", playerBoard: createEmptyBoard(), opponentBoard: createEmptyBoard(), playerShips: JSON.parse(JSON.stringify(initialShips)), opponentShips: JSON.parse(JSON.stringify(initialShips)), selectedShip: null, shipOrientation: "horizontal", message: "Place your ships on the board", playerShotsFired: 0, playerHits: 0, opponentShotsFired: 0, opponentHits: 0, playerReady: false, enemyReady: false, lastShotPosition: null, lastAction: null, aiHuntingMode: false, } // AI targeting state - not part of the main game state to avoid re-renders type AITargetingState = { lastHit: Position | null successfulHits: Position[] targetQueue: Position[] huntingDirection: "horizontal" | "vertical" | null huntingMode: boolean } const initialAIState: AITargetingState = { lastHit: null, successfulHits: [], targetQueue: [], huntingDirection: null, huntingMode: false, } // Strategic ship placement for the opponent const placeOpponentShipsStrategically = (state: GameState): GameState => { const newState = { ...state } const board = createEmptyBoard() const ships = JSON.parse(JSON.stringify(initialShips)) // Sort ships by size (largest first) for better placement ships.sort((a, b) => b.size - a.size) // Create a heatmap to track desirability of each cell // Higher values = more desirable for ship placement const heatmap = Array(10) .fill(0) .map(() => Array(10).fill(10)) // Make edges less desirable (ships at edges are easier to find) for (let i = 0; i < 10; i++) { heatmap[0][i] -= 3 // Top edge heatmap[9][i] -= 3 // Bottom edge heatmap[i][0] -= 3 // Left edge heatmap[i][9] -= 3 // Right edge } // Make corners even less desirable heatmap[0][0] -= 2 // Top-left heatmap[0][9] -= 2 // Top-right heatmap[9][0] -= 2 // Bottom-left heatmap[9][9] -= 2 // Bottom-right // Slightly prefer the center of the board for (let y = 3; y < 7; y++) { for (let x = 3; x < 7; x++) { heatmap[y][x] += 2 } } // Place each ship for (const ship of ships) { let placed = false let attempts = 0 const maxAttempts = 100 // Prevent infinite loop // Create a copy of the heatmap for this ship const shipHeatmap = heatmap.map((row) => [...row]) while (!placed && attempts < maxAttempts) { attempts++ // Choose orientation with some randomness but prefer horizontal for larger ships // and vertical for smaller ships (makes patterns less predictable) let orientation: "horizontal" | "vertical" if (ship.size >= 4) { orientation = Math.random() < 0.7 ? "horizontal" : "vertical" } else { orientation = Math.random() < 0.4 ? "horizontal" : "vertical" } // Find the best position based on the heatmap let bestScore = -1000 let bestPositions: Position[] = [] // Check all possible positions for (let y = 0; y < 10; y++) { for (let x = 0; x < 10; x++) { if (canPlaceShip(board, ship, { x, y }, orientation)) { // Calculate score for this position let score = 0 const positions: Position[] = [] // Check each cell the ship would occupy for (let i = 0; i < ship.size; i++) { const newX = orientation === "horizontal" ? x + i : x const newY = orientation === "vertical" ? y + i : y // Add position to the list positions.push({ x: newX, y: newY }) // Add the heatmap value to the score score += shipHeatmap[newY][newX] } // If this is the best score so far, save it if (score > bestScore) { bestScore = score bestPositions = positions } } } } // If we found a valid position, place the ship if (bestPositions.length === ship.size) { // Place the ship for (const pos of bestPositions) { board[pos.y][pos.x].state = "ship" board[pos.y][pos.x].shipId = ship.id } ship.positions = bestPositions // Update the heatmap to make adjacent cells less desirable // This helps spread out the ships for (const pos of bestPositions) { for (let dy = -2; dy <= 2; dy++) { for (let dx = -2; dx <= 2; dx++) { const ny = pos.y + dy const nx = pos.x + dx // Check if the position is valid if (nx >= 0 && nx < 10 && ny >= 0 && ny < 10) { // Adjacent cells (direct neighbors) are less desirable if (Math.abs(dx) <= 1 && Math.abs(dy) <= 1) { heatmap[ny][nx] -= 5 } // Cells 2 away are slightly less desirable else { heatmap[ny][nx] -= 2 } } } } } placed = true } } // If we couldn't place the ship strategically after max attempts, fall back to random placement if (!placed) { debugLogger.log(`Couldn't place ${ship.type} strategically, falling back to random placement`) while (!placed) { const orientation = Math.random() > 0.5 ? "horizontal" : "vertical" const x = Math.floor(Math.random() * 10) const y = Math.floor(Math.random() * 10) if (canPlaceShip(board, ship, { x, y }, orientation)) { placeShip(board, ship, { x, y }, orientation) placed = true } } } } // Sort ships back to original order for consistency ships.sort((a, b) => { const typeOrder = { carrier: 0, battleship: 1, cruiser: 2, submarine: 3, destroyer: 4 } return typeOrder[a.type as keyof typeof typeOrder] - typeOrder[b.type as keyof typeof typeOrder] }) newState.opponentBoard = board newState.opponentShips = ships return newState } // Check if a ship can be placed at a position with given orientation const canPlaceShip = ( board: Board, ship: Ship, position: Position, orientation: "horizontal" | "vertical", ): boolean => { const { x, y } = position for (let i = 0; i < ship.size; i++) { const newX = orientation === "horizontal" ? x + i : x const newY = orientation === "vertical" ? y + i : y // Check if position is out of bounds if (newX < 0 || newX >= 10 || newY < 0 || newY >= 10) { return false } // Check if position is already occupied if (board[newY][newX].state !== "empty") { return false } // Check adjacent cells (no ships should touch) for (let dx = -1; dx <= 1; dx++) { for (let dy = -1; dy <= 1; dy++) { const adjX = newX + dx const adjY = newY + dy if (adjX >= 0 && adjX < 10 && adjY >= 0 && adjY < 10 && board[adjY][adjX].state === "ship") { return false } } } } return true } // Place a ship on the board const placeShip = (board: Board, ship: Ship, position: Position, orientation: "horizontal" | "vertical"): void => { const { x, y } = position const positions: Position[] = [] for (let i = 0; i < ship.size; i++) { const newX = orientation === "horizontal" ? x + i : x const newY = orientation === "vertical" ? y + i : y board[newY][newX].state = "ship" board[newY][newX].shipId = ship.id positions.push({ x: newX, y: newY }) } ship.positions = positions } // Check if all ships are sunk const areAllShipsSunk = (ships: Ship[]): boolean => { return ships.every((ship) => ship.isSunk) } // Add this function at the top level of the component const debugGameState = (state: GameState) => { debugLogger.log("=== GAME STATE DEBUG ===") debugLogger.log("Phase:", state.phase) debugLogger.log("Status:", state.status) debugLogger.log("Last Action:", state.lastAction) debugLogger.log("Last Shot Position:", state.lastShotPosition) debugLogger.log("Player Hits:", state.playerHits) debugLogger.log("Opponent Hits:", state.opponentHits) debugLogger.log("AI Hunting Mode:", state.aiHuntingMode) debugLogger.log("========================") } // Check if a position is valid (within bounds) const isValidPosition = (pos: Position): boolean => { return pos.x >= 0 && pos.x < 10 && pos.y >= 0 && pos.y < 10 } // Get adjacent positions (up, right, down, left) const getAdjacentPositions = (pos: Position): Position[] => { const { x, y } = pos const adjacent: Position[] = [ { x, y: y - 1 }, // up { x: x + 1, y }, // right { x, y: y + 1 }, // down { x: x - 1, y }, // left ] // Filter out positions that are out of bounds return adjacent.filter(isValidPosition) } // Check if a position has already been targeted const hasBeenTargeted = (board: Board, pos: Position): boolean => { return board[pos.y][pos.x].state === "hit" || board[pos.y][pos.x].state === "miss" } // Game reducer type GameAction = | { type: "SELECT_SHIP"; payload: { shipType: ShipType } } | { type: "TOGGLE_ORIENTATION" } | { type: "PLACE_SHIP"; payload: { position: Position } } | { type: "PLAYER_READY" } | { type: "ENEMY_SETUP" } | { type: "ENEMY_READY" } | { type: "START_GAME" } | { type: "PLAYER_FIRE"; payload: { position: Position } } | { type: "END_PLAYER_TURN" } | { type: "OPPONENT_FIRE"; payload: { position: Position } } | { type: "RESET_GAME" } | { type: "AUTO_PLACE_SHIPS" } | { type: "SET_AI_HUNTING"; payload: { hunting: boolean } } const gameReducer = (state: GameState, action: GameAction): GameState => { switch (action.type) { case "SELECT_SHIP": { const ship = state.playerShips.find((s) => s.type === action.payload.shipType && s.positions.length === 0) return { ...state, selectedShip: ship || null, message: ship ? `Place your ${ship.type} (${ship.size} cells)` : state.message, } } case "TOGGLE_ORIENTATION": { return { ...state, shipOrientation: state.shipOrientation === "horizontal" ? "vertical" : "horizontal", } } case "PLACE_SHIP": { if (!state.selectedShip) return state const newState = { ...state } const { position } = action.payload if (canPlaceShip(newState.playerBoard, state.selectedShip, position, state.shipOrientation)) { const newBoard = JSON.parse(JSON.stringify(newState.playerBoard)) const newShips = JSON.parse(JSON.stringify(newState.playerShips)) const shipIndex = newShips.findIndex((s) => s.id === state.selectedShip!.id) placeShip(newBoard, newShips[shipIndex], position, state.shipOrientation) const allShipsPlaced = newShips.every((ship) => ship.positions.length > 0) return { ...newState, playerBoard: newBoard, playerShips: newShips, selectedShip: null, message: allShipsPlaced ? "All ships placed! Click 'Ready' to continue" : "Select another ship to place", lastAction: "place_ship", } } return { ...newState, message: "Cannot place ship here. Try another position.", } } case "AUTO_PLACE_SHIPS": { const newState = { ...state } const newBoard = createEmptyBoard() const newShips = JSON.parse(JSON.stringify(initialShips)) for (const ship of newShips) { let placed = false while (!placed) { const orientation = Math.random() > 0.5 ? "horizontal" : "vertical" const x = Math.floor(Math.random() * 10) const y = Math.floor(Math.random() * 10) if (canPlaceShip(newBoard, ship, { x, y }, orientation)) { placeShip(newBoard, ship, { x, y }, orientation) placed = true } } } return { ...newState, playerBoard: newBoard, playerShips: newShips, selectedShip: null, message: "Ships auto-placed! Click 'Ready' to continue", lastAction: "auto_place", } } case "PLAYER_READY": { const allShipsPlaced = state.playerShips.every((ship) => ship.positions.length > 0) if (!allShipsPlaced) return state return { ...state, playerReady: true, phase: "enemySetup", message: "Waiting for enemy to place ships...", lastAction: "player_ready", } } case "ENEMY_SETUP": { return { ...state, message: "Enemy is placing ships...", } } case "ENEMY_READY": { // Use strategic placement instead of random const newState = placeOpponentShipsStrategically(state) return { ...newState, enemyReady: true, message: "Enemy is ready! Starting game...", lastAction: "enemy_ready", } } case "START_GAME": { if (!state.playerReady || !state.enemyReady) return state return { ...state, phase: "playing", status: "playerTurn", message: "Your turn! Fire at the opponent's board.", lastAction: "start_game", } } case "PLAYER_FIRE": { debugLogger.log("PLAYER_FIRE action received with position:", action.payload.position) // Only allow firing during playing phase and player's turn if (state.phase !== "playing" || state.status !== "playerTurn") { debugLogger.log("Cannot fire - not player's turn or not in playing phase") return state } const { position } = action.payload const { x, y } = position // Validate position is within bounds if (x < 0 || x >= 10 || y < 0 || y >= 10) { debugLogger.log("Invalid position:", x, y) return { ...state, message: "Invalid target position. Try again.", } } // Create deep copies to avoid mutation const newState = { ...state } const newOpponentBoard = JSON.parse(JSON.stringify(state.opponentBoard)) const newOpponentShips = JSON.parse(JSON.stringify(state.opponentShips)) // Always update the last shot position newState.lastShotPosition = position // Get the current cell state const cell = newOpponentBoard[y][x] debugLogger.log("Target cell state:", cell.state) // Check if the cell was already hit or missed if (cell.state === "hit" || cell.state === "miss") { newState.message = "You already fired at this position. Try another one." newState.lastAction = "player_repeat" return newState } // Increment shots fired newState.playerShotsFired = state.playerShotsFired + 1 let shipSunk = false let hitShipType = "" let isHit = false // Update cell state based on current state if (cell.state === "ship") { debugLogger.log("HIT!") newOpponentBoard[y][x].state = "hit" // Increment hits newState.playerHits = state.playerHits + 1 newState.lastAction = "player_hit" isHit = true const hitShipIndex = newOpponentShips.findIndex((s) => s.id === cell.shipId) if (hitShipIndex !== -1) { hitShipType = newOpponentShips[hitShipIndex].type newOpponentShips[hitShipIndex].hits += 1 if (newOpponentShips[hitShipIndex].hits === newOpponentShips[hitShipIndex].size) { newOpponentShips[hitShipIndex].isSunk = true shipSunk = true newState.message = `You sunk the opponent's ${newOpponentShips[hitShipIndex].type}! Fire again.` newState.lastAction = "player_sink" } else { newState.message = "Hit! Fire again." } } } else if (cell.state === "empty") { debugLogger.log("MISS!") newOpponentBoard[y][x].state = "miss" newState.message = "Miss! Opponent's turn." newState.lastAction = "player_miss" // Automatically end player's turn on miss newState.status = "opponentTurn" } newState.opponentBoard = newOpponentBoard newState.opponentShips = newOpponentShips if (areAllShipsSunk(newOpponentShips)) { newState.phase = "gameOver" newState.status = "playerWon" newState.message = "Congratulations! You won the game!" newState.lastAction = "player_win" } return newState } case "END_PLAYER_TURN": { if (state.phase !== "playing" || state.status !== "playerTurn") return state return { ...state, status: "opponentTurn", message: "Opponent's turn. They are planning their attack...", lastShotPosition: null, lastAction: "end_turn", } } case "OPPONENT_FIRE": { if (state.phase !== "playing" || state.status !== "opponentTurn") { debugLogger.log("Cannot fire - not opponent's turn or not in playing phase") return state } debugLogger.log("OPPONENT_FIRE action received with position:", action.payload.position) const newState = { ...state } const newPlayerBoard = JSON.parse(JSON.stringify(state.playerBoard)) const newPlayerShips = JSON.parse(JSON.stringify(state.playerShips)) // Get the target position from the action payload const { x, y } = action.payload.position // Update the last shot position newState.lastShotPosition = { x, y } // Get the cell at the target position const cell = newPlayerBoard[y][x] // Increment opponent shots fired newState.opponentShotsFired = state.opponentShotsFired + 1 let shipSunk = false let hitShipType = "" let isHit = false if (cell.state === "ship") { newPlayerBoard[y][x].state = "hit" // Increment opponent hits newState.opponentHits = state.opponentHits + 1 newState.lastAction = "opponent_hit" isHit = true debugLogger.log("Opponent hit at", x, y, "- Opponent hits:", newState.opponentHits) const hitShipIndex = newPlayerShips.findIndex((s) => s.id === cell.shipId) if (hitShipIndex !== -1) { hitShipType = newPlayerShips[hitShipIndex].type newPlayerShips[hitShipIndex].hits += 1 if (newPlayerShips[hitShipIndex].hits === newPlayerShips[hitShipIndex].size) { newPlayerShips[hitShipIndex].isSunk = true shipSunk = true newState.message = `Opponent sunk your ${newPlayerShips[hitShipIndex].type}! They will fire again.` newState.lastAction = "opponent_sink" } else { newState.message = "Opponent hit your ship! They will fire again." } } // IMPORTANT: Keep it as opponent's turn when they hit newState.status = "opponentTurn" debugLogger.log("Hit detected! Keeping opponent's turn. Status set to:", newState.status) } else if (cell.state === "empty") { newPlayerBoard[y][x].state = "miss" newState.message = "Opponent missed! Your turn now." newState.lastAction = "opponent_miss" // Switch to player's turn on miss newState.status = "playerTurn" } newState.playerBoard = newPlayerBoard newState.playerShips = newPlayerShips if (areAllShipsSunk(newPlayerShips)) { newState.phase = "gameOver" newState.status = "opponentWon" newState.message = "Game over! The opponent sunk all your ships." newState.lastAction = "opponent_win" } debugLogger.log( "OPPONENT_FIRE action complete. Final status:", newState.status, "lastAction:", newState.lastAction, ) return newState } case "RESET_GAME": { return { ...initialState, playerBoard: createEmptyBoard(), opponentBoard: createEmptyBoard(), playerShips: JSON.parse(JSON.stringify(initialShips)), opponentShips: JSON.parse(JSON.stringify(initialShips)), playerShotsFired: 0, playerHits: 0, opponentShotsFired: 0, opponentHits: 0, playerReady: false, enemyReady: false, lastShotPosition: null, lastAction: "reset_game", aiHuntingMode: false, } } case "SET_AI_HUNTING": { return { ...state, aiHuntingMode: action.payload.hunting, } } default: return state } } // Create context type GameContextType = { state: GameState selectShip: (shipType: ShipType) => void toggleOrientation: () => void placeShip: (position: Position) => void playerReady: () => void startGame: () => void playerFire: (position: Position) => void endPlayerTurn: () => void resetGame: () => void autoPlaceShips: () => void handleShipDrop: (position: Position, shipType: string) => void } const GameContext = createContext(undefined) // Provider component export function GameProvider({ children }: { children: ReactNode }) { const [state, dispatch] = useReducer(gameReducer, initialState) const prevActionRef = useRef(null) const opponentFireTimeoutRef = useRef(null) const lastPhaseStatusRef = useRef<{ phase: string; status: string }>({ phase: "", status: "" }) const opponentHitCountRef = useRef(0) const isMountedRef = useRef(true) const consecutiveHitsRef = useRef(0) // AI targeting state const aiStateRef = useRef({ ...initialAIState }) // Set isMounted on mount/unmount useEffect(() => { isMountedRef.current = true // Reset AI state when component mounts aiStateRef.current = { ...initialAIState } return () => { isMountedRef.current = false } }, []) // Reset AI state when game is reset useEffect(() => { if (state.lastAction === "reset_game") { aiStateRef.current = { ...initialAIState } debugLogger.log("AI targeting state reset") } }, [state.lastAction]) // Debug state changes - FIXED to avoid infinite loop useEffect(() => { // Only log when phase or status actually changes if (state.phase !== lastPhaseStatusRef.current.phase || state.status !== lastPhaseStatusRef.current.status) { debugLogger.log("Game state updated:", state.phase, state.status) debugGameState(state) // Update the ref to current values lastPhaseStatusRef.current = { phase: state.phase, status: state.status } } }, [state.phase, state.status]) // Handle enemy setup phase useEffect(() => { if (state.phase === "enemySetup" && state.playerReady && !state.enemyReady) { // Simulate enemy placing ships, then mark ready const timer = setTimeout(() => { if (!isMountedRef.current) return dispatch({ type: "ENEMY_READY" }) // Start the game after enemy is ready const startTimer = setTimeout(() => { if (!isMountedRef.current) return dispatch({ type: "START_GAME" }) }, 1500) // cleanup nested timer return () => clearTimeout(startTimer) }, 2000) return () => clearTimeout(timer) } }, [state.phase, state.playerReady, state.enemyReady]) // Smart AI targeting function const getSmartTarget = (board: Board): Position => { const ai = aiStateRef.current let targetPosition: Position // If we're in hunting mode (found a hit but not sunk the ship yet) if (ai.huntingMode && ai.lastHit) { debugLogger.log("AI is in hunting mode") // If we have targets in the queue, use them first if (ai.targetQueue.length > 0) { // Get the next target from the queue targetPosition = ai.targetQueue.shift()! debugLogger.log("AI targeting from queue:", targetPosition) // If this target has already been tried, find a new one while (ai.targetQueue.length > 0 && hasBeenTargeted(board, targetPosition)) { targetPosition = ai.targetQueue.shift()! debugLogger.log("Target already tried, getting next from queue:", targetPosition) } // If we've exhausted the queue and still don't have a valid target if (hasBeenTargeted(board, targetPosition)) { debugLogger.log("Queue exhausted, switching to random targeting") ai.huntingMode = false return getRandomTarget(board) } return targetPosition } // If queue is empty but we're still hunting, try to determine direction else if (ai.successfulHits.length >= 2) { // Determine if the hits are in a horizontal or vertical line const hits = ai.successfulHits const isHorizontal = hits.some((h) => h.y === hits[0].y && h.x !== hits[0].x) const isVertical = hits.some((h) => h.x === hits[0].x && h.y !== hits[0].y) if (isHorizontal) { ai.huntingDirection = "horizontal" // Find the leftmost and rightmost hits const minX = Math.min(...hits.map((h) => h.x)) const maxX = Math.max(...hits.map((h) => h.x)) // Try to extend left const leftTarget = { x: minX - 1, y: hits[0].y } if (isValidPosition(leftTarget) && !hasBeenTargeted(board, leftTarget)) { debugLogger.log("AI extending horizontal search left:", leftTarget) return leftTarget } // Try to extend right const rightTarget = { x: maxX + 1, y: hits[0].y } if (isValidPosition(rightTarget) && !hasBeenTargeted(board, rightTarget)) { debugLogger.log("AI extending horizontal search right:", rightTarget) return rightTarget } } else if (isVertical) { ai.huntingDirection = "vertical" // Find the topmost and bottommost hits const minY = Math.min(...hits.map((h) => h.y)) const maxY = Math.max(...hits.map((h) => h.y)) // Try to extend up const upTarget = { x: hits[0].x, y: minY - 1 } if (isValidPosition(upTarget) && !hasBeenTargeted(board, upTarget)) { debugLogger.log("AI extending vertical search up:", upTarget) return upTarget } // Try to extend down const downTarget = { x: hits[0].x, y: maxY + 1 } if (isValidPosition(downTarget) && !hasBeenTargeted(board, downTarget)) { debugLogger.log("AI extending vertical search down:", downTarget) return downTarget } } // If we can't extend in the determined direction, reset hunting debugLogger.log("Can't extend in determined direction, resetting hunt") ai.huntingMode = false ai.successfulHits = [] ai.lastHit = null ai.huntingDirection = null return getRandomTarget(board) } // If we only have one hit, check all adjacent cells else { // Get all valid adjacent positions const adjacentPositions = getAdjacentPositions(ai.lastHit).filter((pos) => !hasBeenTargeted(board, pos)) if (adjacentPositions.length > 0) { // Pick a random adjacent position targetPosition = adjacentPositions[Math.floor(Math.random() * adjacentPositions.length)] debugLogger.log("AI targeting adjacent cell:", targetPosition) return targetPosition } else { // If no valid adjacent positions, reset hunting debugLogger.log("No valid adjacent positions, resetting hunt") ai.huntingMode = false return getRandomTarget(board) } } } // If not in hunting mode or no valid hunting targets, use random targeting return getRandomTarget(board) } // Random targeting function const getRandomTarget = (board: Board): Position => { // Get all untargeted cells const untargetedCells: Position[] = [] for (let y = 0; y < 10; y++) { for (let x = 0; x < 10; x++) { if (board[y][x].state !== "hit" && board[y][x].state !== "miss") { untargetedCells.push({ x, y }) } } } // If there are untargeted cells, pick one randomly if (untargetedCells.length > 0) { const randomIndex = Math.floor(Math.random() * untargetedCells.length) return untargetedCells[randomIndex] } // Fallback (should never happen in a valid game) return { x: Math.floor(Math.random() * 10), y: Math.floor(Math.random() * 10) } } // Handle opponent's turn with proper continuous firing and smart targeting useEffect(() => { // Clear any existing timeout when component unmounts or dependencies change const cleanupTimeout = () => { if (opponentFireTimeoutRef.current) { clearTimeout(opponentFireTimeoutRef.current) opponentFireTimeoutRef.current = null } } cleanupTimeout() // Only proceed if it's the opponent's turn in the playing phase if (state.phase === "playing" && state.status === "opponentTurn") { debugLogger.log("Opponent's turn effect triggered, lastAction:", state.lastAction) // Track consecutive hits for debugging if (state.lastAction === "opponent_hit" || state.lastAction === "opponent_sink") { consecutiveHitsRef.current++ debugLogger.log(`Consecutive hits: ${consecutiveHitsRef.current}`) } else if (state.lastAction === "opponent_miss" || state.lastAction === "end_turn") { consecutiveHitsRef.current = 0 } // Add a delay before the opponent fires to simulate thinking // Use a variable delay based on consecutive hits to make it feel more natural const thinkingDelay = Math.max(1000, 2000 - consecutiveHitsRef.current * 200) debugLogger.log(`Opponent thinking for ${thinkingDelay}ms before firing...`) opponentFireTimeoutRef.current = setTimeout(() => { if (!isMountedRef.current) return // Double-check it's still opponent's turn (defensive programming) if (state.phase === "playing" && state.status === "opponentTurn") { debugLogger.log("Opponent firing now...") // Get the target using smart AI targeting const target = getSmartTarget(state.playerBoard) debugLogger.log("AI selected target:", target) // Dispatch the OPPONENT_FIRE action with the target position dispatch({ type: "OPPONENT_FIRE", payload: { position: target }, }) // Update AI state based on the result (this will happen in the next render) // The actual hit/miss processing happens in the reducer if (state.playerBoard[target.y][target.x].state === "ship") { // This is a hit - AI state will be updated in the next useEffect debugLogger.log("AI hit detected at", target) } else { debugLogger.log("AI missed at", target) } } else { debugLogger.log("Opponent turn cancelled - state changed while waiting") } }, thinkingDelay) } else { // Reset consecutive hits when it's not opponent's turn if (state.status !== "opponentTurn") { consecutiveHitsRef.current = 0 } } // Cleanup function return cleanupTimeout }, [state.phase, state.status, state.lastAction, state.playerBoard]) // Update AI targeting state after opponent's action useEffect(() => { // Only update AI state after an opponent action if ( state.lastAction === "opponent_hit" || state.lastAction === "opponent_sink" || state.lastAction === "opponent_miss" ) { const ai = aiStateRef.current if (state.lastShotPosition) { const { x, y } = state.lastShotPosition // If it was a hit if (state.lastAction === "opponent_hit") { debugLogger.log("Updating AI state for hit at", x, y) // Enter hunting mode ai.huntingMode = true ai.lastHit = { x, y } ai.successfulHits.push({ x, y }) // Update the game state to reflect hunting mode if (!state.aiHuntingMode) { // Use a timeout to update state in the next tick to avoid state mutation during render setTimeout(() => { dispatch({ type: "SET_AI_HUNTING", payload: { hunting: true } }) }, 0) } // If this is the first hit, add adjacent cells to the target queue if (ai.successfulHits.length === 1) { ai.targetQueue = getAdjacentPositions({ x, y }).filter((pos) => !hasBeenTargeted(state.playerBoard, pos)) debugLogger.log("Added adjacent cells to target queue:", ai.targetQueue) } } // If a ship was sunk else if (state.lastAction === "opponent_sink") { debugLogger.log("Updating AI state for sink at", x, y) // Reset hunting mode since we sunk the ship ai.huntingMode = false ai.successfulHits = [] ai.lastHit = null ai.targetQueue = [] ai.huntingDirection = null // Update the game state to reflect hunting mode ended if (state.aiHuntingMode) { setTimeout(() => { dispatch({ type: "SET_AI_HUNTING", payload: { hunting: false } }) }, 0) } debugLogger.log("Reset AI targeting after sinking a ship") } } } }, [state.lastAction, state.lastShotPosition, state.playerBoard, state.aiHuntingMode]) // Track opponent hits and misses useEffect(() => { if (state.lastAction === "opponent_hit" || state.lastAction === "opponent_sink") { opponentHitCountRef.current += 1 debugLogger.log("Opponent hit count increased to:", opponentHitCountRef.current) } else if (state.lastAction === "opponent_miss") { opponentHitCountRef.current = 0 debugLogger.log("Opponent hit count reset to 0") } }, [state.lastAction]) // Play sound effects based on game actions useEffect(() => { if (state.lastAction && state.lastAction !== prevActionRef.current) { prevActionRef.current = state.lastAction // Play appropriate sound effect based on the action switch (state.lastAction) { case "player_hit": debugLogger.log("Playing hit sound effect") soundManager.play("hit") break case "player_miss": debugLogger.log("Playing miss sound effect") soundManager.play("miss") break case "player_sink": debugLogger.log("Playing ship sinking sound effect") soundManager.play("sink") break case "opponent_hit": debugLogger.log("Playing opponent hit sound effect") soundManager.play("hit") break case "opponent_sink": debugLogger.log("Playing opponent sink sound effect") soundManager.play("sink") break case "player_win": debugLogger.log("Playing victory sound effect") soundManager.play("victory") break case "opponent_win": debugLogger.log("Playing defeat sound effect") soundManager.play("defeat") break case "place_ship": debugLogger.log("Playing ship placement sound effect") soundManager.play("place") break case "player_ready": debugLogger.log("Playing ready sound effect") soundManager.play("ready") break case "start_game": debugLogger.log("Playing game start sound effect") soundManager.play("turn") break } } }, [state.lastAction]) const selectShip = (shipType: ShipType) => { dispatch({ type: "SELECT_SHIP", payload: { shipType } }) } const toggleOrientation = () => { dispatch({ type: "TOGGLE_ORIENTATION" }) } const placeShip = (position: Position) => { dispatch({ type: "PLACE_SHIP", payload: { position } }) } const playerReady = () => { dispatch({ type: "PLAYER_READY" }) } const startGame = () => { dispatch({ type: "START_GAME" }) } const playerFire = (position: Position) => { debugLogger.log("playerFire called with position:", position) // Directly dispatch the action without any restrictions dispatch({ type: "PLAYER_FIRE", payload: { position } }) } const endPlayerTurn = () => { dispatch({ type: "END_PLAYER_TURN" }) } const resetGame = () => { dispatch({ type: "RESET_GAME" }) } const autoPlaceShips = () => { dispatch({ type: "AUTO_PLACE_SHIPS" }) } const handleShipDrop = (position: Position, shipType: string) => { // Find the ship by type const ship = state.playerShips.find((s) => s.type === (shipType as ShipType)) if (ship) { // Select the ship first dispatch({ type: "SELECT_SHIP", payload: { shipType: ship.type } }) // Then place it at the position dispatch({ type: "PLACE_SHIP", payload: { position } }) } } return ( {children} ) } // Custom hook to use the game context export function useGame() { const context = useContext(GameContext) if (context === undefined) { throw new Error("useGame must be used within a GameProvider") } return context } [V0_FILE]typescriptreact:file="lib/points.ts" isMerged="true" export type LeaderEntry = { id: string name: string points: number seasonId: string updatedAt: number } const LB_PREFIX = "bship_leaderboard" function getISOWeek(date = new Date()) { const tmp = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())) const dayNum = tmp.getUTCDay() || 7 tmp.setUTCDate(tmp.getUTCDate() + 4 - dayNum) const yearStart = new Date(Date.UTC(tmp.getUTCFullYear(), 0, 1)) return Math.ceil(((tmp.getTime() - yearStart.getTime()) / 86400000 + 1) / 7) } export function getCurrentSeasonId() { const now = new Date() const year = now.getUTCFullYear() const week = getISOWeek(now) return `S${year}-W${String(week).padStart(2, "0")}` } function getKey(seasonId: string) { return `${LB_PREFIX}:${seasonId}` } export function getLeaderboard(seasonId = getCurrentSeasonId()): LeaderEntry[] { if (typeof window === "undefined") return [] const raw = localStorage.getItem(getKey(seasonId)) if (!raw) return [] try { const arr = JSON.parse(raw) as LeaderEntry[] return Array.isArray(arr) ? arr : [] } catch { return [] } } function saveLeaderboard(entries: LeaderEntry[], seasonId = getCurrentSeasonId()) { if (typeof window === "undefined") return localStorage.setItem(getKey(seasonId), JSON.stringify(entries)) } // Seed demo NPCs if board is empty export function ensureSeedLeaderboard(seasonId = getCurrentSeasonId()) { if (typeof window === "undefined") return const current = getLeaderboard(seasonId) if (current.length > 0) return const seed: LeaderEntry[] = [ { id: "npc-kraken", name: "Kraken AI", points: 160, seasonId, updatedAt: Date.now() }, { id: "npc-poseidon", name: "Poseidon", points: 130, seasonId, updatedAt: Date.now() }, { id: "npc-leviathan", name: "Leviathan", points: 110, seasonId, updatedAt: Date.now() }, ] saveLeaderboard(seed, seasonId) } export function getUserPoints(userId: string, seasonId = getCurrentSeasonId()) { const lb = getLeaderboard(seasonId) const found = lb.find((e) => e.id === userId) return found?.points ?? 0 } export function addUserPoints(userId: string, name: string, delta: number, seasonId = getCurrentSeasonId()) { const lb = getLeaderboard(seasonId) const idx = lb.findIndex((e) => e.id === userId) if (idx === -1) { const points = Math.max(0, delta) const entry: LeaderEntry = { id: userId, name, points, seasonId, updatedAt: Date.now() } const merged = [...lb, entry] saveLeaderboard(merged, seasonId) return { points, rank: computeRank(userId, merged) } } else { const updated = { ...lb[idx] } updated.name = name updated.points = Math.max(0, updated.points + delta) updated.updatedAt = Date.now() const merged = [...lb] merged[idx] = updated saveLeaderboard(merged, seasonId) return { points: updated.points, rank: computeRank(userId, merged) } } } export function computeRank(userId: string, entries?: LeaderEntry[], seasonId = getCurrentSeasonId()) { const lb = entries ?? getLeaderboard(seasonId) const sorted = [...lb].sort((a, b) => b.points - a.points || a.updatedAt - b.updatedAt) const rank = sorted.findIndex((e) => e.id === userId) return rank === -1 ? null : rank + 1 } export function getTopN(n = 10, seasonId = getCurrentSeasonId()) { const lb = getLeaderboard(seasonId) return [...lb].sort((a, b) => b.points - a.points || a.updatedAt - b.updatedAt).slice(0, n) } [V0_FILE]typescriptreact:file="components/common/points-floater.tsx" isMerged="true" "use client" import { motion, AnimatePresence } from "framer-motion" import { useEffect, useState } from "react" import { cn } from "@/lib/utils" export function PointsFloater({ delta, onDone }: { delta: number; onDone?: () => void }) { const [visible, setVisible] = useState(true) useEffect(() => { const t = setTimeout(() => { setVisible(false) setTimeout(() => onDone?.(), 300) }, 1700) return () => clearTimeout(t) }, [onDone]) const positive = delta >= 0 return ( {visible && ( {positive ? "+" : "-"} {Math.abs(delta)} pts )} ) } [V0_FILE]typescriptreact:file="components/home/season-leaderboard.tsx" isMerged="true" "use client" import { useEffect, useMemo, useState } from "react" import { Trophy, Crown } from "lucide-react" import { ensureSeedLeaderboard, getCurrentSeasonId, getTopN, computeRank, getUserPoints } from "@/lib/points" import { cn } from "@/lib/utils" type Props = { userId: string userName: string className?: string } export function SeasonLeaderboard({ userId, userName, className }: Props) { const [version, setVersion] = useState(0) const seasonId = getCurrentSeasonId() useEffect(() => { ensureSeedLeaderboard(seasonId) const onStorage = (e: StorageEvent) => { if (e.key && e.key.startsWith("bship_leaderboard")) setVersion((v) => v + 1) } window.addEventListener("storage", onStorage) return () => window.removeEventListener("storage", onStorage) }, [seasonId]) const top = useMemo(() => getTopN(10, seasonId), [version, seasonId]) const myRank = useMemo(() => computeRank(userId, undefined, seasonId), [userId, version, seasonId]) const myPoints = useMemo(() => getUserPoints(userId, seasonId), [userId, version, seasonId]) const maxPoints = Math.max(1, ...top.map((t) => t.points)) return (

Season Leaderboard

{seasonId}

{top.length === 0 &&

No entries yet.

} {top.map((entry, idx) => (

#{idx + 1}

{entry.name}

{idx === 0 && }

{entry.points} pts

))}

Your Season

{userName}

{myPoints} pts {myRank ? `(Rank #${myRank})` : ""}

) } [V0_FILE]typescriptreact:file="app/pvp/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { useRouter } from "next/navigation" import { useAuth } from "@/contexts/auth-context" import { TechWrapper } from "@/components/common/tech-wrapper" type Room = { code: string hostId: string hostName: string guestId?: string guestName?: string status: "waiting" | "ready" | "started" updatedAt: number } const ROOMS_KEY = "bship_rooms" function getRooms(): Record { if (typeof window === "undefined") return {} const raw = localStorage.getItem(ROOMS_KEY) if (!raw) return {} try { const obj = JSON.parse(raw) as Record return obj ?? {} } catch { return {} } } function saveRooms(rooms: Record) { if (typeof window === "undefined") return localStorage.setItem(ROOMS_KEY, JSON.stringify(rooms)) } function randomCode() { const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789" let out = "" for (let i = 0; i < 6; i++) out += chars[Math.floor(Math.random() * chars.length)] return out } export default function PvPPage() { const router = useRouter() const { user } = useAuth() const [joinCode, setJoinCode] = useState("") const [creating, setCreating] = useState(false) const [joining, setJoining] = useState(false) const handleCreate = () => { if (!user) return setCreating(true) setTimeout(() => { const code = randomCode() const rooms = getRooms() rooms[code] = { code, hostId: user.id, hostName: user.name, status: "waiting", updatedAt: Date.now(), } saveRooms(rooms) setCreating(false) router.push(`/pvp/room/${code}`) }, 200) } const handleJoin = () => { if (!user || joinCode.trim().length < 4) return setJoining(true) setTimeout(() => { const code = joinCode.trim().toUpperCase() const rooms = getRooms() const room = rooms[code] if (!room) { alert("Room not found.") setJoining(false) return } if (room.guestId && room.guestId !== user.id) { alert("Room is full.") setJoining(false) return } room.guestId = user.id room.guestName = user.name room.status = "ready" room.updatedAt = Date.now() rooms[code] = room saveRooms(rooms) router.push(`/pvp/room/${code}`) }, 200) } return (

PvP with Code Create a room or join with a code. This local demo syncs across tabs in the same browser. To enable cross-device play, connect these flows to a shared backend later.

Create

Join

setJoinCode(e.target.value.toUpperCase())} className="bg-fantasy-navy-light/50 border-fantasy-purple/50 text-white" />

) } [V0_FILE]typescriptreact:file="app/pvp/room/[code]/page.tsx" isMerged="true" "use client" import { useEffect, useMemo, useState } from "react" import { useParams, useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { useAuth } from "@/contexts/auth-context" import { TechWrapper } from "@/components/common/tech-wrapper" import { Copy, Check } from "lucide-react" type Room = { code: string hostId: string hostName: string guestId?: string guestName?: string status: "waiting" | "ready" | "started" updatedAt: number } const ROOMS_KEY = "bship_rooms" function getRooms(): Record { if (typeof window === "undefined") return {} const raw = localStorage.getItem(ROOMS_KEY) if (!raw) return {} try { const obj = JSON.parse(raw) as Record return obj ?? {} } catch { return {} } } function saveRooms(rooms: Record) { if (typeof window === "undefined") return localStorage.setItem(ROOMS_KEY, JSON.stringify(rooms)) } export default function RoomPage() { const params = useParams<{ code: string }>() const router = useRouter() const { user } = useAuth() const [room, setRoom] = useState(null) const [copied, setCopied] = useState(false) const code = (params?.code || "").toUpperCase() // Load and subscribe useEffect(() => { const load = () => { const rooms = getRooms() setRoom(rooms[code] || null) } load() const onStorage = (e: StorageEvent) => { if (e.key === ROOMS_KEY) load() } window.addEventListener("storage", onStorage) const iv = setInterval(load, 1000) return () => { window.removeEventListener("storage", onStorage) clearInterval(iv) } }, [code]) const isHost = useMemo(() => room && user && room.hostId === user.id, [room, user]) const handleStart = () => { if (!room || !user) return const rooms = getRooms() const r = rooms[code] if (!r) return r.status = "started" r.updatedAt = Date.now() rooms[code] = r saveRooms(rooms) // Launch game in PvP mode; this demo still runs AI logic but tags the mode/room. router.push(`/game?mode=pvp&room=${code}`) } const copyCode = async () => { await navigator.clipboard.writeText(code) setCopied(true) setTimeout(() => setCopied(false), 1000) } if (!room) { return (

Room not found.

) } return (

Room {code}

Code:

{code}

Players

Host: {room.hostName}

Guest: {room.guestName || "Waiting..."}

Status

{room.status}

) } [V0_FILE]typescriptreact:file="app/game/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState, useCallback, useRef, useMemo } from "react" import { useRouter, useSearchParams } from "next/navigation" import { useAuth } from "@/contexts/auth-context" import { GameProvider, useGame } from "@/contexts/game-context" import { Board } from "@/components/game/board" import { ShipSelector } from "@/components/game/ship-selector" import { GameStatus } from "@/components/game/game-status" import { TurnHeader } from "@/components/game/turn-header" import type { Position } from "@/types/game" import { Button } from "@/components/ui/button" import { LogOut, Home, Volume2, VolumeX, Bug, Menu, X } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { cn } from "@/lib/utils" import Link from "next/link" import type { GameState } from "@/types/game" import { AIHuntingIndicator } from "@/components/game/ai-hunting-indicator" import { soundManager } from "@/utils/sound-manager" import { TechWrapper } from "@/components/common/tech-wrapper" import { addUserPoints, getCurrentSeasonId } from "@/lib/points" import { PointsFloater } from "@/components/common/points-floater" import Image from "next/image" type SunkEffect = { key: string board: "player" | "opponent" cells: Position[] time: number } function GameContent() { const { user, logout } = useAuth() const searchParams = useSearchParams() const gameMode = searchParams.get("mode") || "single" const { state, selectShip, toggleOrientation, placeShip, playerReady, startGame, playerFire, endPlayerTurn, resetGame, autoPlaceShips, } = useGame() const [debugMode, setDebugMode] = useState(false) const [soundEnabled, setSoundEnabled] = useState(true) const [gameLog, setGameLog] = useState([]) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const prevStateRef = useRef(null) const [sunkEffects, setSunkEffects] = useState([]) const [pointsDelta, setPointsDelta] = useState(null) const awardedRef = useRef(false) // Sync sound manager with sound enabled state useEffect(() => { soundManager.setEnabled(soundEnabled) }, [soundEnabled]) // Log entries and detect newly sunk ships to run cinematic effects useEffect(() => { if (!prevStateRef.current) { prevStateRef.current = state return } // Append to battle log only when action changes if (state.lastAction !== prevStateRef.current.lastAction) { let logEntry = "" switch (state.lastAction) { case "player_hit": if (state.lastShotPosition) { logEntry = `You hit at ${String.fromCharCode(65 + state.lastShotPosition.y)}${state.lastShotPosition.x}!` } break case "player_miss": if (state.lastShotPosition) { logEntry = `You missed at ${String.fromCharCode(65 + state.lastShotPosition.y)}${state.lastShotPosition.x}.` } break case "player_sink": logEntry = `You sunk an enemy ship!` break case "opponent_hit": if (state.lastShotPosition) { logEntry = `Enemy hit at ${String.fromCharCode(65 + state.lastShotPosition.y)}${state.lastShotPosition.x}!` } break case "opponent_miss": if (state.lastShotPosition) { logEntry = `Enemy missed at ${String.fromCharCode(65 + state.lastShotPosition.y)}${state.lastShotPosition.x}.` } break case "opponent_sink": logEntry = `Enemy sunk your ship!` break } if (logEntry) setGameLog((prev) => [...prev.slice(-9), logEntry]) // Detect newly sunk ship and register effect if (state.lastAction === "player_sink") { const prevShips = prevStateRef.current.opponentShips const newlySunk = state.opponentShips.find((s) => s.isSunk && !prevShips.find((p) => p.id === s.id && p.isSunk)) if (newlySunk) { setSunkEffects((prev) => [ ...prev, { key: `opp-${newlySunk.id}-${Date.now()}`, board: "opponent", cells: newlySunk.positions, time: Date.now(), }, ]) } } else if (state.lastAction === "opponent_sink") { const prevShips = prevStateRef.current.playerShips const newlySunk = state.playerShips.find((s) => s.isSunk && !prevShips.find((p) => p.id === s.id && p.isSunk)) if (newlySunk) { setSunkEffects((prev) => [ ...prev, { key: `ply-${newlySunk.id}-${Date.now()}`, board: "player", cells: newlySunk.positions, time: Date.now() }, ]) } } } prevStateRef.current = state }, [state]) useEffect(() => { if (state.phase === "gameOver" && !awardedRef.current && user) { awardedRef.current = true const delta = state.status === "playerWon" ? 25 : -10 try { addUserPoints(user.id, user.name, delta, getCurrentSeasonId()) } catch (e) { console.warn("Failed to update points:", e) } setPointsDelta(delta) // Auto-hide after a bit const t = setTimeout(() => setPointsDelta(null), 2200) return () => clearTimeout(t) } if (state.phase !== "gameOver") { awardedRef.current = false } }, [state.phase, state.status, user]) // Cleanup sunk effects after 2.5s useEffect(() => { if (sunkEffects.length === 0) return const ttl = 2500 const iv = setInterval(() => { const now = Date.now() setSunkEffects((prev) => { const filtered = prev.filter((e) => now - e.time < ttl) return filtered.length === prev.length ? prev : filtered }) }, 250) return () => clearInterval(iv) }, [sunkEffects.length]) // Debug state useEffect(() => { if (debugMode) { console.log("State:", state.phase, state.status, state.lastAction) } }, [debugMode, state.phase, state.status, state.lastAction]) const handlePlayerBoardClick = useCallback( (position: Position) => { if (state.phase === "playerSetup" && state.selectedShip) { placeShip(position) } }, [state.phase, state.selectedShip, placeShip], ) const handleShipDrop = useCallback( (position: Position, shipType: string) => { if (state.phase === "playerSetup") { localStorage.setItem("draggedShipType", shipType) placeShip(position) } }, [state.phase, placeShip], ) const handleOpponentBoardClick = useCallback( (position: Position) => { if (state.phase === "playing" && state.status === "playerTurn") { playerFire(position) } }, [state.phase, state.status, playerFire], ) const isPlayerTurn = state.status === "playerTurn" const isOpponentTurn = state.status === "opponentTurn" const isPlayerSetup = state.phase === "playerSetup" const isEnemySetup = state.phase === "enemySetup" const isGameOver = state.phase === "gameOver" // Active effect payloads for each board const opponentBoardEffects = useMemo( () => sunkEffects .filter((e) => e.board === "opponent") .map(({ key, cells }) => ({ key, type: "sink" as const, cells })), [sunkEffects], ) const playerBoardEffects = useMemo( () => sunkEffects.filter((e) => e.board === "player").map(({ key, cells }) => ({ key, type: "sink" as const, cells })), [sunkEffects], ) // Toggle debug mode with keyboard shortcut (Ctrl+D) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.ctrlKey && e.key === "d") { e.preventDefault() setDebugMode((prev) => !prev) } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, []) return (

{/* Immersive neon ocean background */}

{/* Parallax subtle motion */} Neon night ocean with holographic grid

{/* Soft color wash to align with theme */}

{/* Radial vignette for focus */}

{/* Subtle scanlines shimmer */}

{/* Game content */}

{/* Header - Desktop */}

{user?.name?.slice(0, 2).toUpperCase() || "AD"}

{/* Turn header */}

{/* Header - Mobile */}

{user?.name?.slice(0, 2).toUpperCase() || "AD"}

{/* Mobile menu */} {mobileMenuOpen && (

Game Menu

)} {/* Game mode indicator */}

{gameMode === "single" && ( SINGLE PLAYER )} {gameMode === "online" && ( ONLINE MULTIPLAYER )} {gameMode === "friends" && ( PLAYING WITH FRIENDS )}

{/* AI Hunting Indicator */}

{/* Rules reminder */}

{isPlayerTurn ? "HIT = CONTINUE FIRING • MISS = OPPONENT'S TURN" : "WAITING FOR OPPONENT..."}

{/* Main content grid */}

{/* Main section */}

{isPlayerSetup && (

PLACE YOUR SHIPS

)} {isEnemySetup && (

ENEMY IS PLACING SHIPS

Enemy is setting up their fleet...

)} {state.phase === "playing" && isPlayerTurn && (

ENEMY'S FLEET

)} {state.phase === "playing" && isOpponentTurn && (

YOUR FLEET

)} {isGameOver && (

{state.status === "playerWon" ? "VICTORY!" : "DEFEAT!"}

YOUR FLEET

ENEMY'S FLEET

)}

{/* Side panel */}

{/* Mini-map and AI indicator */} {state.phase === "playing" && (

{isPlayerTurn ? "YOUR FLEET" : "ENEMY'S FLEET"}

)} {/* Battle log */} {state.phase === "playing" && (

Battle Log

{gameLog.length > 0 ? ( gameLog.map((log, index) => (

{log}

)) ) : (

No battle actions yet...

)}

)} {/* Status + Controls */}

{pointsDelta !== null && setPointsDelta(null)} />}

) } export default function GamePage() { const { user, isLoading } = useAuth() const router = useRouter() useEffect(() => { if (!isLoading && !user) { router.push("/login") } }, [isLoading, user, router]) if (isLoading) { return (

) } if (!user) return null // Use TechWrapper to provide subtle tech background; no heavy image layers in main game return ( ) } [V0_FILE]png:file="public/images/tech-ocean-neon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/tech-ocean-neon-VhJbfrVL99G65Fi5zbCwPtdqBwqBUg.png" isMerged="true" [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/contexts/auth-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { AlertCircle } from "lucide-react" import { TechWrapper } from "@/components/common/tech-wrapper" function TechBattleshipCanvas() { const canvasRef = useRef(null) const rafRef = useRef(null) const resizeRef = useRef<() => void>() useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const state = { w: 0, h: 0, dpr: Math.max(1, Math.min(2, window.devicePixelRatio || 1)), t: 0, gridOffset: 0, ships: [] as Array<{ x: number; y: number; speed: number; amp: number; phase: number; w: number; h: number }>, blocks: [] as Array<{ x: number; y: number; vx: number; vy: number; life: number; maxLife: number }>, } const setSize = () => { const { dpr } = state state.w = canvas.clientWidth state.h = canvas.clientHeight canvas.width = Math.floor(state.w * dpr) canvas.height = Math.floor(state.h * dpr) ctx.setTransform(dpr, 0, 0, dpr, 0, 0) } resizeRef.current = setSize setSize() // Seed ships (silhouette bars) const seedShips = () => { state.ships = Array.from({ length: 4 }).map((_, i) => { const w = 90 + Math.random() * 80 const h = 6 + Math.random() * 6 return { x: Math.random() * state.w, y: state.h * (0.35 + 0.4 * Math.random()), speed: 12 + Math.random() * 20, amp: 4 + Math.random() * 6, phase: Math.random() * Math.PI * 2, w, h, } }) } seedShips() // Create blockchain-like particles const spawnBlock = () => { const x = Math.random() * state.w state.blocks.push({ x, y: state.h + 10, vx: (Math.random() - 0.5) * 10, vy: -20 - Math.random() * 20, life: 0, maxLife: 3 + Math.random() * 2, }) if (state.blocks.length > 120) state.blocks.shift() } // Draw hex grid const drawHexGrid = (t: number) => { const spacing = 64 const r = spacing * 0.5 const hexH = Math.sqrt(3) * r state.gridOffset = (t * 0.02) % (spacing * 2) ctx.save() ctx.translate(-state.gridOffset, -state.gridOffset * 0.6) ctx.lineWidth = 1 ctx.strokeStyle = "rgba(45,212,191,0.14)" // teal for (let y = -hexH; y < state.h + hexH; y += hexH) { for (let x = -r; x < state.w + r; x += spacing * 1.5) { const offsetX = ((Math.floor(y / hexH) % 2) + 2) % 2 ? spacing * 0.75 : 0 drawHex(x + offsetX, y, r * 0.78) } } // Subtle indigo second pass ctx.strokeStyle = "rgba(99,102,241,0.08)" ctx.globalCompositeOperation = "lighter" for (let y = -hexH; y < state.h + hexH; y += hexH) { for (let x = -r; x < state.w + r; x += spacing * 1.5) { const offsetX = ((Math.floor(y / hexH) % 2) + 2) % 2 ? spacing * 0.75 : 0 drawHex(x + offsetX + 8, y + 4, r * 0.78) } } ctx.restore() function drawHex(cx: number, cy: number, rad: number) { ctx.beginPath() for (let i = 0; i < 6; i++) { const a = (Math.PI / 3) * i const px = cx + rad * Math.cos(a) const py = cy + rad * Math.sin(a) if (i === 0) ctx.moveTo(px, py) else ctx.lineTo(px, py) } ctx.closePath() ctx.stroke() } } // Radar sweeps const drawSweeps = (t: number) => { const cx = state.w * 0.5 const cy = state.h * 0.4 const rMax = Math.min(state.w, state.h) * 0.7 ctx.save() ctx.globalCompositeOperation = "lighter" for (let i = 0; i < 2; i++) { const angle = ((t * 0.0008 + i * 0.5) % 1) * Math.PI * 2 const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, rMax) grad.addColorStop(0, "rgba(16,185,129,0.08)") grad.addColorStop(1, "rgba(16,185,129,0)") ctx.fillStyle = grad ctx.beginPath() ctx.moveTo(cx, cy) ctx.arc(cx, cy, rMax, angle, angle + 0.6) ctx.closePath() ctx.fill() } ctx.restore() } // Ships silhouettes const drawShips = (dt: number, t: number) => { ctx.save() for (const s of state.ships) { s.x += s.speed * dt * 0.06 const bob = Math.sin(t * 0.003 + s.phase) * s.amp if (s.x - s.w > state.w + 40) { s.x = -s.w - 40 s.y = state.h * (0.35 + 0.4 * Math.random()) } // hull ctx.fillStyle = "rgba(148,163,184,0.18)" // slate-ish roundRect(ctx, s.x, s.y + bob, s.w, s.h, 3, true) // mast ctx.fillStyle = "rgba(148,163,184,0.24)" ctx.fillRect(s.x + s.w * 0.6, s.y + bob - s.h * 1.5, 2, s.h * 1.5) } ctx.restore() function roundRect( c: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number, fill = false, ) { c.beginPath() c.moveTo(x + r, y) c.arcTo(x + w, y, x + w, y + h, r) c.arcTo(x + w, y + h, x, y + h, r) c.arcTo(x, y + h, x, y, r) c.arcTo(x, y, x + w, y, r) c.closePath() if (fill) c.fill() } } // Blocks (web3 vibe) const drawBlocks = (dt: number) => { if (Math.random() < 0.25) spawnBlock() ctx.save() for (const b of state.blocks) { b.x += b.vx * dt * 0.06 b.y += b.vy * dt * 0.06 b.life += dt const p = Math.min(1, b.life / b.maxLife) const size = 4 + 6 * (1 - p) const alpha = 0.55 * (1 - p) ctx.fillStyle = `rgba(16,185,129,${alpha})` ctx.fillRect(b.x, b.y, size, size) // outline glow ctx.strokeStyle = `rgba(99,102,241,${alpha * 0.5})` ctx.strokeRect(b.x - 0.5, b.y - 0.5, size + 1, size + 1) } state.blocks = state.blocks.filter((b) => b.life < b.maxLife && b.y + 12 > -12) ctx.restore() } // Depth gradient/edge vignette const drawOverlays = () => { const g1 = ctx.createLinearGradient(0, 0, 0, state.h) g1.addColorStop(0, "rgba(2,6,23,0.65)") g1.addColorStop(0.6, "rgba(2,6,23,0.25)") g1.addColorStop(1, "rgba(2,6,23,0.7)") ctx.fillStyle = g1 ctx.fillRect(0, 0, state.w, state.h) // soft radial center focus const cx = state.w * 0.5 const cy = state.h * 0.35 const r = Math.min(state.w, state.h) * 0.8 const g2 = ctx.createRadialGradient(cx, cy, 0, cx, cy, r) g2.addColorStop(0, "rgba(124,58,237,0.10)") g2.addColorStop(0.5, "rgba(45,212,191,0.07)") g2.addColorStop(1, "rgba(2,6,23,0.55)") ctx.fillStyle = g2 ctx.fillRect(0, 0, state.w, state.h) } let last = performance.now() const loop = (now: number) => { const dt = Math.min(32, now - last) last = now state.t += dt ctx.clearRect(0, 0, state.w, state.h) // subtle background wash ctx.fillStyle = "rgba(2,6,23,1)" // slate-950 ctx.fillRect(0, 0, state.w, state.h) drawHexGrid(state.t) drawSweeps(state.t) drawShips(dt, state.t) drawBlocks(dt) drawOverlays() rafRef.current = requestAnimationFrame(loop) } rafRef.current = requestAnimationFrame(loop) const onResize = () => resizeRef.current?.() window.addEventListener("resize", onResize) return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current) window.removeEventListener("resize", onResize) } }, []) return (

) } export default function LoginPage() { const router = useRouter() const { user, isLoading, login } = useAuth() const [email, setEmail] = useState("demo@example.com") const [password, setPassword] = useState("password") const [error, setError] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) // If already authenticated, redirect to home if (!isLoading && user) { router.push("/home") return null } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) setError("") try { const result = await login(email, password) if (!result.success) { setError(result.error || "An error occurred during login") setIsSubmitting(false) return } router.push("/home") // Redirect to home page instead of game } catch (error) { console.error("Login error:", error) setError("An unexpected error occurred. Please try again.") setIsSubmitting(false) } } if (isLoading) { return (

) } return (

{/* Background canvas animation */}

BATTLESHIP

Naval Combat Strategy Game

Commander Login Enter your credentials to access the fleet

{error && ( {error} )}

Email setEmail(e.target.value)} required className="bg-fantasy-navy-light/50 border-fantasy-purple/50 text-white placeholder:text-fantasy-teal-light/50" />

Password setPassword(e.target.value)} required className="bg-fantasy-navy-light/50 border-fantasy-purple/50 text-white" />

Demo credentials: demo@example.com / password

) } [V0_FILE]typescriptreact:file="app/home/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/contexts/auth-context" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Settings, Target, Users, Radio, LogOut, X } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { TechWrapper } from "@/components/common/tech-wrapper" import { WalletBadge } from "@/components/common/wallet-badge" import { UserSettings } from "@/components/home/user-settings" import { SeasonLeaderboard } from "@/components/home/season-leaderboard" function HomeBgCanvas() { const canvasRef = useRef(null) const rafRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const state = { w: 0, h: 0, dpr: Math.min(2, window.devicePixelRatio || 1), t: 0, gridOffset: 0, // few drifting hex particles for subtle motion hexParts: [] as Array<{ x: number y: number r: number rot: number vr: number vx: number vy: number hue: number life: number maxLife: number }>, } const setSize = () => { state.w = canvas.clientWidth state.h = canvas.clientHeight canvas.width = Math.floor(state.w * state.dpr) canvas.height = Math.floor(state.h * state.dpr) ctx.setTransform(state.dpr, 0, 0, state.dpr, 0, 0) } const spawnHex = () => { state.hexParts.push({ x: Math.random() * state.w, y: state.h + 20, r: 6 + Math.random() * 10, rot: Math.random() * Math.PI * 2, vr: (Math.random() - 0.5) * 0.01, vx: (Math.random() - 0.5) * 8, vy: -20 - Math.random() * 20, hue: Math.random() < 0.6 ? 160 : 260, // teal or indigo life: 0, maxLife: 3 + Math.random() * 2, }) if (state.hexParts.length > 80) state.hexParts.shift() } const seed = () => { for (let i = 0; i < 24; i++) spawnHex() } setSize() seed() const onResize = () => setSize() window.addEventListener("resize", onResize) const drawHex = (cx: number, cy: number, rad: number, rot = 0) => { ctx.beginPath() for (let i = 0; i < 6; i++) { const a = rot + (Math.PI / 3) * i const px = cx + rad * Math.cos(a) const py = cy + rad * Math.sin(a) if (i === 0) ctx.moveTo(px, py) else ctx.lineTo(px, py) } ctx.closePath() } const drawHexGrid = (t: number) => { // animated offset to create slow movement state.gridOffset = (t * 0.02) % 48 const spacing = 56 const r = spacing * 0.45 const hexH = Math.sqrt(3) * r ctx.save() ctx.translate(-state.gridOffset, -state.gridOffset * 0.6) ctx.lineWidth = 1 ctx.strokeStyle = "rgba(45,212,191,0.12)" // teal for (let y = -hexH; y < state.h + hexH; y += hexH) { for (let x = -r; x < state.w + r; x += spacing * 1.5) { const oddRow = ((Math.floor(y / hexH) % 2) + 2) % 2 const ox = oddRow ? spacing * 0.75 : 0 drawHex(x + ox, y, r * 0.78) ctx.stroke() } } // a soft second pass in indigo for depth ctx.strokeStyle = "rgba(99,102,241,0.08)" ctx.globalCompositeOperation = "lighter" for (let y = -hexH; y < state.h + hexH; y += hexH) { for (let x = -r; x < state.w + r; x += spacing * 1.5) { const oddRow = ((Math.floor(y / hexH) % 2) + 2) % 2 const ox = oddRow ? spacing * 0.75 : 0 drawHex(x + ox + 6, y + 3, r * 0.72) ctx.stroke() } } ctx.restore() } const drawHexParticles = (dt: number) => { if (Math.random() < 0.2) spawnHex() for (const p of state.hexParts) { p.x += p.vx * dt * 0.06 p.y += p.vy * dt * 0.06 p.rot += p.vr * dt p.life += dt if (p.y < -20) { p.y = state.h + 20 p.x = Math.random() * state.w p.life = 0 } const lifeP = Math.min(1, p.life / p.maxLife) const alpha = 0.35 * (1 - lifeP) const glow = 0.5 * (1 - lifeP) const col = p.hue === 160 ? `rgba(45,212,191,${alpha})` : `rgba(99,102,241,${alpha})` const outline = p.hue === 160 ? `rgba(45,212,191,${alpha + 0.15})` : `rgba(99,102,241,${alpha + 0.15})` // glow ctx.save() ctx.shadowColor = col ctx.shadowBlur = 8 * glow ctx.strokeStyle = outline ctx.lineWidth = 1.25 drawHex(p.x, p.y, p.r, p.rot) ctx.stroke() ctx.restore() // inner dot for sparkle ctx.fillStyle = col ctx.beginPath() ctx.arc(p.x, p.y, Math.max(0.5, p.r * 0.22), 0, Math.PI * 2) ctx.fill() } } const drawOverlays = () => { // base dark wash const g0 = ctx.createLinearGradient(0, 0, 0, state.h) g0.addColorStop(0, "rgba(2,6,23,0.6)") g0.addColorStop(1, "rgba(2,6,23,0.35)") ctx.fillStyle = g0 ctx.fillRect(0, 0, state.w, state.h) // soft radial center to keep content readable const cx = state.w * 0.5 const cy = state.h * 0.28 const r = Math.min(state.w, state.h) * 0.85 const gR = ctx.createRadialGradient(cx, cy, 0, cx, cy, r) gR.addColorStop(0, "rgba(124,58,237,0.08)") gR.addColorStop(0.45, "rgba(16,185,129,0.06)") gR.addColorStop(1, "rgba(2,6,23,0.55)") ctx.fillStyle = gR ctx.fillRect(0, 0, state.w, state.h) } let last = performance.now() const loop = (now: number) => { const dt = Math.min(32, now - last) last = now state.t += dt ctx.clearRect(0, 0, state.w, state.h) // background ctx.fillStyle = "rgba(2,6,23,1)" ctx.fillRect(0, 0, state.w, state.h) drawHexGrid(state.t) drawHexParticles(dt) drawOverlays() rafRef.current = requestAnimationFrame(loop) } rafRef.current = requestAnimationFrame(loop) return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current) window.removeEventListener("resize", onResize) } }, []) return

About

Tags

Share

About

Tags

Share

More from karasbuilder

More Templates Like This

About

Tags

Share

About

Tags

Share

More from karasbuilder

More Templates Like This