[V0_FILE]typescriptreact:file="hooks/use-window-size.tsx" "use client" import { useState, useEffect } from "react" export function useWindowSize() { const [windowSize, setWindowSize] = useState<{ width: number | undefined height: number | undefined }>({ width: undefined, height: undefined, }) useEffect(() => { function handleResize() { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }) } // Add event listener window.addEventListener("resize", handleResize) // Call handler right away so state gets updated with initial window size handleResize() // Remove event listener on cleanup return () => window.removeEventListener("resize", handleResize) }, []) return windowSize } [V0_FILE]typescriptreact:file="components/game-over.tsx" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" interface GameOverProps { score: number onRestart: () => void } export default function GameOver({ score, onRestart }: GameOverProps) { return ( Game Over

{score}

Your highest score

Thanks for playing! Can you do better next time?

) } [V0_FILE]typescriptreact:file="lib/types.ts" // Types for the shop and coin system export type SkinRarity = "common" | "rare" | "epic" | "legendary" export interface Skin { id: string name: string imageUrl: string price: number rarity: SkinRarity description?: string effects?: string[] animation?: string // CSS animation name } export interface PlayerData { coins: number ownedSkins: string[] // Array of skin IDs equippedSkin: string | null highestScore: number totalKills: number gamesPlayed: number } export interface GameStats { score: number kills: number timeAlive: number position: number // Leaderboard position } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import GameCanvas from "@/components/game-canvas" import RewardScreen from "@/components/reward-screen" import StartScreen from "@/components/start-screen" import type { GameStats } from "@/lib/types" export default function Home() { const [gameOver, setGameOver] = useState(false) const [gameStarted, setGameStarted] = useState(false) const [gameStats, setGameStats] = useState({ score: 0, kills: 0, timeAlive: 0, position: 0, }) const [playerName, setPlayerName] = useState("") const handleGameOver = (stats: GameStats) => { setGameStats(stats) setGameOver(true) setGameStarted(false) } const handleRestart = () => { setGameOver(false) setGameStarted(true) } const handleStartGame = (name: string) => { setPlayerName(name || `Player${Math.floor(Math.random() * 1000)}`) setGameStarted(true) setGameOver(false) } const handleBackToMenu = () => { setGameOver(false) setGameStarted(false) } return (

{!gameStarted && !gameOver ? ( ) : !gameOver ? ( ) : ( )}

) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 3%; --card-foreground: 0 0% 100%; --popover: 0 0% 3%; --popover-foreground: 0 0% 100%; --primary: 142 71% 45%; --primary-foreground: 0 0% 100%; --secondary: 240 4% 16%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 15%; --muted-foreground: 0 0% 65%; --accent: 142 71% 45%; --accent-foreground: 0 0% 100%; --destructive: 0 63% 31%; --destructive-foreground: 0 0% 100%; --border: 240 4% 16%; --input: 240 4% 16%; --ring: 142 71% 45%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Skin animations */ .animate-rotate { animation: rotate 10s linear infinite; } .animate-pulse { animation: pulse 2s ease-in-out infinite; } .animate-glow { animation: glow 3s ease-in-out infinite; } .animate-shine { animation: shine 5s ease-in-out infinite; } .animate-rainbow { animation: rainbow 5s linear infinite; } .animate-vortex { animation: vortex 8s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } @keyframes glow { 0%, 100% { filter: brightness(1) drop-shadow(0 0 5px rgba(0, 255, 0, 0.5)); } 50% { filter: brightness(1.3) drop-shadow(0 0 15px rgba(0, 255, 0, 0.8)); } } @keyframes shine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5) contrast(1.2); } } @keyframes rainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } @keyframes vortex { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(0.9); } 100% { transform: rotate(360deg) scale(1); } } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]plaintext:file="public/skins/earth.png" url="https://placeholder.svg?height=200&width=200&text=Earth&color=blue" [V0_FILE]plaintext:file="public/skins/galaxy.png" url="https://placeholder.svg?height=200&width=200&text=Galaxy&color=purple" [V0_FILE]plaintext:file="public/skins/fire.png" url="https://placeholder.svg?height=200&width=200&text=Fire&color=red" [V0_FILE]plaintext:file="public/skins/toxic.png" url="https://placeholder.svg?height=200&width=200&text=Toxic&color=green" [V0_FILE]plaintext:file="public/skins/gold.png" url="https://placeholder.svg?height=200&width=200&text=Gold&color=yellow" [V0_FILE]plaintext:file="public/skins/rainbow.png" url="https://placeholder.svg?height=200&width=200&text=Rainbow&color=pink" [V0_FILE]plaintext:file="public/skins/black-hole.png" url="https://placeholder.svg?height=200&width=200&text=Black-Hole&color=black" [V0_FILE]typescriptreact:file="lib/player-store.ts" isQuickEdit="true" import { create } from "zustand" import { persist } from "zustand/middleware" import type { PlayerData, GameStats, Skin } from "./types" import { SKINS_DATA } from "./shop-data" interface PlayerStore extends PlayerData { // Actions addCoins: (amount: number) => void purchaseSkin: (skinId: string) => boolean equipSkin: (skinId: string) => void updateHighestScore: (score: number) => void calculateReward: (stats: GameStats) => number getSkinById: (skinId: string) => Skin | undefined getOwnedSkins: () => Skin[] getAvailableSkins: () => Skin[] getEquippedSkin: () => Skin | undefined } // Create the store with persistence export const usePlayerStore = create()( persist( (set, get) => ({ // Initial state coins: 1000, // Start with some coins ownedSkins: ["default"], // Everyone owns the default skin equippedSkin: "default", highestScore: 0, totalKills: 0, gamesPlayed: 0, // Actions addCoins: (amount) => set((state) => ({ coins: state.coins + amount })), purchaseSkin: (skinId) => { const state = get() const skin = SKINS_DATA.find((s) => s.id === skinId) if (!skin || state.ownedSkins.includes(skinId) || state.coins < skin.price) { return false } set((state) => ({ coins: state.coins - skin.price, ownedSkins: [...state.ownedSkins, skinId], })) return true }, equipSkin: (skinId) => { const state = get() if (state.ownedSkins.includes(skinId)) { set({ equippedSkin: skinId }) } }, updateHighestScore: (score) => set((state) => ({ highestScore: Math.max(state.highestScore, score), gamesPlayed: state.gamesPlayed + 1, })), calculateReward: (stats) => { // Base reward: 10% of score let reward = Math.floor(stats.score * 0.1) // Bonus for kills: 10 coins per kill reward += stats.kills * 10 // Bonus for top positions if (stats.position === 1) { reward += 100 // 1st place bonus } else if (stats.position <= 3) { reward += 50 // Top 3 bonus } else if (stats.position <= 10) { reward += 20 // Top 10 bonus } // Apply skin bonus if applicable const { equippedSkin } = get() const skin = SKINS_DATA.find((s) => s.id === equippedSkin) if (skin) { // Rainbow skin gives 10% bonus if (skin.id === "rainbow") { const bonus = Math.floor(reward * 0.1) reward += bonus } // Black hole skin gives 20% bonus else if (skin.id === "black-hole") { const bonus = Math.floor(reward * 0.2) reward += bonus } } // Update player stats set((state) => ({ totalKills: state.totalKills + stats.kills, gamesPlayed: state.gamesPlayed + 1, })) // Add the coins get().addCoins(reward) return reward }, getSkinById: (skinId) => SKINS_DATA.find((skin) => skin.id === skinId), getOwnedSkins: () => { const { ownedSkins } = get() return SKINS_DATA.filter((skin) => ownedSkins.includes(skin.id)) }, getAvailableSkins: () => { const { ownedSkins } = get() return SKINS_DATA.filter((skin) => !ownedSkins.includes(skin.id)) }, getEquippedSkin: () => { const { equippedSkin } = get() return SKINS_DATA.find((skin) => skin.id === equippedSkin) }, }), { name: "agario-player-data", // localStorage key }, ), ) [V0_FILE]plaintext:file="public/skins/bat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/stjlVp6-tkRMLHoYbmWgoXsEsE115oMpObovoQ.png" [V0_FILE]plaintext:file="public/skins/gecko.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/TPgKn6V-LgAil9F1poEgYx1OGXN98RGQNb8Ldc.png" [V0_FILE]plaintext:file="public/skins/bee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/qRq5CIg-gfsKYkNNXb40JOJiUEAPw3IxGh4Lkj.png" [V0_FILE]plaintext:file="public/skins/fly.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tq33YWv-9LGZ9xXHRhrK9sK7ig8pz6mp8OQ9b5.png" [V0_FILE]plaintext:file="public/skins/snake.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/TBpnDkh-fFs70mHOWASnW0wOMfLp3ej0Z7XZJI.png" [V0_FILE]plaintext:file="public/skins/spider.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dzQIxk0-zys8LWoooXI4xloc8Y5cHzXaO5qKHI.png" [V0_FILE]plaintext:file="public/skins/crocodile.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zvR6dUC-TIXKnMSU9gjs7DDlkzSUtfgaV0Q45r.png" [V0_FILE]plaintext:file="public/skins/wolf.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/YbmC0tv-QW5xEDZYBo4EmRchy3zIZfReGfzP1W.png" [V0_FILE]plaintext:file="public/skins/fox.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/QPCVdvQ-bYFDL196FCfLaabfhXvolpyRLkotB4.png" [V0_FILE]plaintext:file="public/skins/lion.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/YRJCaw8-r3bu23fgJo40e3MG9jzmF0rZvQ3FYw.png" [V0_FILE]plaintext:file="public/skins/panther.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/soLQdok-4oIluJD6sshDFNFjAsgRn6v4zP76w1.png" [V0_FILE]plaintext:file="public/skins/raptor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/RKtDpin-xHqodGWbcLlfnZILctUqEWJC2nfkdt.png" [V0_FILE]plaintext:file="public/skins/shark.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/nGtYZ3Z-LvfCAdcsFlNsgLU9w464xFtRKPeVck.png" [V0_FILE]plaintext:file="public/skins/octopus.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/xG5H6eL-VD4kb03g6W56qLzexs9MzNf2KKlcBE.png" [V0_FILE]plaintext:file="public/skins/cougar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/868L1t7-rAbeXu26qfNH6JPhSmz2K6dhwXETFM.png" [V0_FILE]plaintext:file="public/skins/sumo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/XD20Tc4-JvpMZExDh2bMQjeWqiD3onBm5Xs3Mv.png" [V0_FILE]plaintext:file="public/skins/trex.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/toh1uzm-mFAoyrbj48bVlyMkQyp0V8KHrjcfSv.png" [V0_FILE]plaintext:file="public/skins/bear.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/wSxNs57-rCUUClQjbadYdp3ShVvvZY1JFDQR2Z.png" [V0_FILE]plaintext:file="public/skins/mammoth.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/hmVJPmb-2YjCcVMFb2cARvWdYNtGTR2O6OQKU8.png" [V0_FILE]plaintext:file="public/skins/lumberjack.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/af3voUF-91fO4xqe5tIr68RUx8TyW2EIWUuiSZ.png" [V0_FILE]typescriptreact:file="lib/generate-placeholders.ts" // This utility generates placeholder images for skins export function generatePlaceholderUrl(skinId: string): string { // Define colors for different skin types const colors: Record = { default: "gray", earth: "blue", galaxy: "purple", fire: "red", toxic: "green", gold: "yellow", rainbow: "pink", "black-hole": "black", bat: "purple", gecko: "green", bee: "yellow", fly: "black", snake: "orange", spider: "darkblue", crocodile: "green", wolf: "gray", fox: "orange", lion: "gold", panther: "black", raptor: "tan", shark: "blue", octopus: "teal", mammoth: "brown", lumberjack: "red", cougar: "tan", trex: "brown", sumo: "black", bear: "brown", } const color = colors[skinId] || "gray" return `/placeholder.svg?height=100&width=100&text=${skinId}&color=${color}` } [V0_FILE]typescriptreact:file="store.tsx" isQuickEdit="true" import { proxy } from "valtio" const state = proxy({ playerId: null, players: {}, width: 2000, height: 2000, }) export default state [V0_FILE]plaintext:file="public/skins/default.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/I9atPkr-iF3MDTQM6OO559gcXlm2jh21MkwsSm.png" [V0_FILE]typescriptreact:file="lib/shop-data.ts" isQuickEdit="true" import type { Skin } from "./types" // Add TypeScript declaration for the skin image cache declare global { interface Window { skinImageCache?: Map } } // Update the skin descriptions from Vietnamese to English export const SKINS_DATA: Skin[] = [ { id: "default", name: "Default", imageUrl: "/skins/default.png", price: 0, rarity: "common", description: "Basic cell that everyone starts with.", }, // Animal skins { id: "bat", name: "Bat", imageUrl: "/skins/bat.png", price: 2500, rarity: "epic", description: "Mysterious creature of the night.", animation: "pulse", effects: ["Pulsing effect", "+5% speed at night"], }, { id: "gecko", name: "Gecko", imageUrl: "/skins/gecko.png", price: 2000, rarity: "rare", description: "Quick and colorful.", animation: "pulse", effects: ["Better hiding ability"], }, { id: "bee", name: "Bee", imageUrl: "/skins/bee.png", price: 3000, rarity: "epic", description: "Hardworking and dangerous.", animation: "pulse", effects: ["+5% boost speed"], }, { id: "fly", name: "Fly", imageUrl: "/skins/fly.png", price: 1500, rarity: "rare", description: "Fast and hard to catch.", animation: "pulse", effects: ["+3% movement speed"], }, { id: "snake", name: "Snake", imageUrl: "/skins/snake.png", price: 5000, rarity: "legendary", description: "Slithers and hunts.", animation: "pulse", effects: ["+10% size when eating", "+5% coin bonus"], }, { id: "spider", name: "Spider", imageUrl: "/skins/spider.png", price: 4000, rarity: "epic", description: "Scary and dangerous.", animation: "pulse", effects: ["Slows enemies on contact"], }, { id: "crocodile", name: "Crocodile", imageUrl: "/skins/crocodile.png", price: 4500, rarity: "epic", description: "Dangerous predator with sharp teeth.", animation: "pulse", effects: ["+8% damage when eating opponents", "+5% maximum size"], }, { id: "wolf", name: "Gray Wolf", imageUrl: "/skins/wolf.png", price: 3500, rarity: "rare", description: "Swift hunter of the deep forest.", animation: "pulse", effects: ["+7% speed when chasing smaller opponents"], }, { id: "fox", name: "Fox", imageUrl: "/skins/fox.png", price: 3000, rarity: "rare", description: "Agile and cunning.", animation: "pulse", effects: ["+10% hiding ability in bushes"], }, { id: "lion", name: "Lion", imageUrl: "/skins/lion.png", price: 6000, rarity: "legendary", description: "King of all beasts.", animation: "shine", effects: ["Smaller opponents flee faster", "+10% coin bonus"], }, { id: "panther", name: "Black Panther", imageUrl: "/skins/panther.png", price: 5500, rarity: "legendary", description: "Predator of the night.", animation: "pulse", effects: ["+15% speed at night", "Harder to detect"], }, { id: "raptor", name: "Raptor", imageUrl: "/skins/raptor.png", price: 7000, rarity: "legendary", description: "Prehistoric hunter with terrifying speed.", animation: "pulse", effects: ["+12% boost speed", "+8% coin bonus"], }, { id: "shark", name: "Shark", imageUrl: "/skins/shark.png", price: 6500, rarity: "legendary", description: "Ultimate predator of the ocean.", animation: "pulse", effects: ["+10% size when eating opponents", "+5% coin bonus"], }, { id: "octopus", name: "Octopus", imageUrl: "/skins/octopus.png", price: 8000, rarity: "legendary", description: "Intelligent creature with many tentacles.", animation: "pulse", effects: ["Can temporarily slow opponents", "+15% coin bonus"], }, // New additional skins { id: "mammoth", name: "Mammoth", imageUrl: "/skins/mammoth.png", price: 7500, rarity: "legendary", description: "Ancient creature with enormous strength.", animation: "pulse", effects: ["+15% maximum size", "-10% damage taken"], }, { id: "lumberjack", name: "Lumberjack", imageUrl: "/skins/lumberjack.png", price: 4000, rarity: "epic", description: "Experienced woodcutter.", animation: "pulse", effects: ["+8% boost speed", "Break bushes 20% faster"], }, { id: "cougar", name: "Cougar", imageUrl: "/skins/cougar.png", price: 5000, rarity: "epic", description: "Swift hunter with sharp fangs.", animation: "pulse", effects: ["+10% speed when chasing opponents", "+5% coin bonus"], }, { id: "trex", name: "T-Rex", imageUrl: "/skins/trex.png", price: 8500, rarity: "legendary", description: "King of the dinosaurs.", animation: "shine", effects: ["+20% damage when eating opponents", "Smaller opponents flee faster"], }, { id: "sumo", name: "Sumo Wrestler", imageUrl: "/skins/sumo.png", price: 6000, rarity: "legendary", description: "Fighter with impressive strength and technique.", animation: "pulse", effects: ["-15% damage taken", "+5% maximum size"], }, { id: "bear", name: "Brown Bear", imageUrl: "/skins/bear.png", price: 5500, rarity: "epic", description: "Powerful predator of the deep forest.", animation: "pulse", effects: ["+12% damage when eating opponents", "+5% maximum size"], }, ] // Generate placeholder skin images export const generatePlaceholderSkinUrl = (skinId: string): string => { // In a real implementation, you would have actual skin images // For now, we'll use placeholder images with different colors based on the skin ID const colors: Record = { default: "yellow", bat: "purple", gecko: "green", bee: "yellow", fly: "black", snake: "orange", spider: "darkblue", crocodile: "green", wolf: "gray", fox: "orange", lion: "gold", panther: "black", raptor: "tan", shark: "blue", octopus: "teal", mammoth: "brown", lumberjack: "red", cougar: "tan", trex: "brown", sumo: "black", bear: "brown", } const color = colors[skinId] || "gray" return `/placeholder.svg?height=100&width=100&text=${skinId}&color=${color}` } [V0_FILE]typescriptreact:file="components/reward-screen.tsx" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { usePlayerStore } from "@/lib/player-store" import type { GameStats } from "@/lib/types" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Trophy, Star, Skull, Clock, CoinsIcon as Coin } from "lucide-react" import confetti from "canvas-confetti" interface RewardScreenProps { stats: GameStats onPlayAgain: () => void onBackToMenu: () => void } export default function RewardScreen({ stats, onPlayAgain, onBackToMenu }: RewardScreenProps) { const { calculateReward, updateHighestScore, highestScore } = usePlayerStore() const [reward, setReward] = useState(0) const [isNewHighScore, setIsNewHighScore] = useState(false) const [showingStats, setShowingStats] = useState(false) useEffect(() => { // Calculate the reward const coinReward = calculateReward(stats) setReward(coinReward) // Check if this is a new high score setIsNewHighScore(stats.score > highestScore) // Update the highest score updateHighestScore(stats.score) // Animate stats appearing setTimeout(() => { setShowingStats(true) }, 500) // Trigger confetti for good scores or new high score if (stats.score > 1000 || stats.position <= 3 || stats.score > highestScore) { setTimeout(() => { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) }, 1000) } }, [stats, calculateReward, updateHighestScore, highestScore]) // Format time from seconds to MM:SS const formatTime = (seconds: number): string => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` } return ( Game Over {isNewHighScore && (

NEW HIGH SCORE!

)}

{stats.score}

Your Score

Position

#{stats.position}

Kills

{stats.kills}

Time Alive

{formatTime(stats.timeAlive)}

Coins Earned

+{reward}

Rewards Breakdown:

Base: {Math.floor(stats.score * 0.1)} coins (10% of score)
Kills: {stats.kills * 10} coins ({stats.kills} × 10)
1st Place Bonus: 100 coins
Top 3 Bonus: 50 coins
Top 10 Bonus: 20 coins
Rainbow Skin Bonus: +10% coins
Black Hole Skin Bonus: +20% coins

) } [V0_FILE]typescriptreact:file="components/start-screen.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { usePlayerStore } from "@/lib/player-store" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CoinsIcon as Coin, ShoppingBag, Trophy, User } from "lucide-react" import ShopScreen from "./shop-screen" import { SKINS_DATA } from "@/lib/shop-data" import { preloadSkinImages } from "@/lib/preload-images" interface StartScreenProps { onStartGame: (name: string) => void } const generatePlaceholderSkinUrl = (skinId: string) => `/placeholder.svg?height=48&width=48&text=${skinId}` export default function StartScreen({ onStartGame }: StartScreenProps) { const [name, setName] = useState("") const [activeTab, setActiveTab] = useState("play") const { coins, highestScore, getEquippedSkin } = usePlayerStore() const equippedSkin = getEquippedSkin() // Preload all skin images when component mounts useEffect(() => { const skinIds = SKINS_DATA.map((skin) => skin.id) preloadSkinImages(skinIds) }, []) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onStartGame(name) } return ( <> {activeTab === "shop" ? ( setActiveTab("play")} /> ) : ( Agar.io Clone

Best: {highestScore}

{coins}

Play Shop

Enter Your Name setName(e.target.value)} className="bg-gray-800 text-white border-gray-700" maxLength={15} />

{equippedSkin && (

{ console.warn(`Failed to load skin in start screen: ${equippedSkin.id}, using placeholder`) // Generate a placeholder color based on skin type const colors: Record = { default: "yellow", bat: "purple", gecko: "green", bee: "yellow", fly: "black", snake: "orange", spider: "darkblue", crocodile: "green", wolf: "gray", fox: "orange", lion: "gold", panther: "black", raptor: "tan", shark: "blue", octopus: "teal", mammoth: "brown", lumberjack: "red", cougar: "tan", trex: "brown", sumo: "black", bear: "brown", } const color = colors[equippedSkin.id] || "gray" e.currentTarget.src = `/placeholder.svg?height=100&width=100&text=${equippedSkin.id}&color=${color}` }} />

{equippedSkin.name}

Equipped Skin

)}

How to Play:

Move your cell with the mouse
Eat smaller cells to grow
Hold left mouse button to boost
Press Space to split
Hide in bushes or small viruses to become invisible
Avoid larger cells or you'll be eaten!

)} ) } [V0_FILE]typescriptreact:file="components/shop-screen.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { usePlayerStore } from "@/lib/player-store" import type { Skin } from "@/lib/types" import { SKINS_DATA } from "@/lib/shop-data" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { CoinsIcon as Coin, AlertCircle } from "lucide-react" import { preloadSkinImages } from "@/lib/preload-images" interface ShopScreenProps { onBack: () => void } export default function ShopScreen({ onBack }: ShopScreenProps) { const { coins, ownedSkins, equippedSkin, purchaseSkin, equipSkin } = usePlayerStore() const [selectedTab, setSelectedTab] = useState("all") const [loadingStates, setLoadingStates] = useState>({}) // Preload all skin images when component mounts useEffect(() => { const skinIds = SKINS_DATA.map((skin) => skin.id) preloadSkinImages(skinIds) }, []) // Filter skins based on the selected tab const filteredSkins = SKINS_DATA.filter((skin) => { if (selectedTab === "all") return true if (selectedTab === "owned") return ownedSkins.includes(skin.id) if (selectedTab === "available") return !ownedSkins.includes(skin.id) return skin.rarity === selectedTab }) const getRarityColor = (rarity: string): string => { switch (rarity) { case "common": return "bg-gray-500" case "rare": return "bg-blue-500" case "epic": return "bg-purple-500" case "legendary": return "bg-yellow-500" default: return "bg-gray-500" } } const handlePurchase = (skin: Skin) => { setLoadingStates((prev) => ({ ...prev, [skin.id]: true })) setTimeout(() => { const success = purchaseSkin(skin.id) setLoadingStates((prev) => ({ ...prev, [skin.id]: false })) if (success) { // Show success message or animation console.log(`Successfully purchased ${skin.name}!`) } else { // Show error message console.log(`Failed to purchase ${skin.name}. Not enough coins?`) } }, 300) } const handleEquip = (skinId: string) => { setLoadingStates((prev) => ({ ...prev, [skinId]: true })) setTimeout(() => { equipSkin(skinId) setLoadingStates((prev) => ({ ...prev, [skinId]: false })) }, 300) } useEffect(() => { const skinIds = SKINS_DATA.map((skin) => skin.id) preloadSkinImages(skinIds) // Force refresh the equipped skin to ensure it's properly loaded if (equippedSkin) { const currentSkin = SKINS_DATA.find((skin) => skin.id === equippedSkin) if (currentSkin) { const skinImage = new Image() skinImage.crossOrigin = "anonymous" skinImage.src = `/skins/${currentSkin.id}.png` // Make sure the skin is available in the global cache if (typeof window !== "undefined" && window.skinImageCache) { window.skinImageCache.set(currentSkin.id, skinImage) } } } }, [equippedSkin]) return (

{coins}

Skin Shop

All Owned Available Common Rare Epic Legendary

{filteredSkins.map((skin) => (

{skin.name} {skin.rarity}

{skin.description}

{ console.warn(`Failed to load skin in shop: ${skin.id}, using placeholder`) // Generate a placeholder color based on skin type const colors: Record = { default: "yellow", bat: "purple", gecko: "green", bee: "yellow", fly: "black", snake: "orange", spider: "darkblue", crocodile: "green", wolf: "gray", fox: "orange", lion: "gold", panther: "black", raptor: "tan", shark: "blue", octopus: "teal", mammoth: "brown", lumberjack: "red", cougar: "tan", trex: "brown", sumo: "black", bear: "brown", } const color = colors[skin.id] || "gray" e.currentTarget.src = `/placeholder.svg?height=100&width=100&text=${skin.id}&color=${color}` }} />

{skin.effects && skin.effects.length > 0 && (

Special Effects:

{effect}

)} {ownedSkins.includes(skin.id) ? ( ) : ( )} {coins < skin.price && !ownedSkins.includes(skin.id) && (

Not enough coins

)} ))}

) } [V0_FILE]typescriptreact:file="components/game-canvas.tsx" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import { useWindowSize } from "@/hooks/use-window-size" import { usePlayerStore } from "@/lib/player-store" import type { GameStats } from "@/lib/types" import { generatePlaceholderSkinUrl } from "@/lib/shop-data" // Game constants const FOOD_COUNT = 500 const BOT_COUNT = 40 const INITIAL_PLAYER_SIZE = 30 const FOOD_SIZE = 8 const BOOST_SPEED_MULTIPLIER = 1.5 const BOOST_SIZE_REDUCTION_RATE = 0.05 const FOOD_SPAWN_INTERVAL = 1000 const MAP_SIZE = 8000 // Increased map size const VIEWPORT_PADDING = 50 const BUSH_COUNT = 60 const GROWTH_RATE = 0.05 const BOT_GROWTH_RATE = 0.03 const SPLIT_COOLDOWN = 5000 // 5 seconds cooldown for splitting const LEADERBOARD_SIZE = 10 const MIN_SPLIT_SIZE = 35 // Minimum size required to split const MAX_PLAYER_CELLS = 16 // Maximum number of cells a player can have const SPLIT_INITIAL_SPEED = 12 // Initial speed of the split cell const MERGE_COOLDOWN = 10000 // 10 seconds before cells can merge const MERGE_DISTANCE_FACTOR = 0.75 // Cells can merge when distance is less than sum of radii * this factor const SPLIT_DECELERATION = 0.85 // How quickly split cells slow down const BASE_SPEED = 30 // Base constant for movement speed const VIRUS_COUNT = 30 // Number of initial viruses const VIRUS_SIZE = 80 // Virus size const VIRUS_FEED_COUNT = 7 // Number of feeds needed to create a new virus const VIRUS_EXPLOSION_COUNT = 8 // Number of cell fragments when hitting a virus const VIRUS_MIN_EJECT_SIZE = 60 // Minimum size of player to be exploded by virus const VIRUS_EJECT_SPEED = 15 // Speed of new virus ejection const VIRUS_COLOR = "rgba(0, 255, 0, 0.8)" // Virus color // Zoom constants const MIN_ZOOM = 0.4 // Maximum zoom out (smaller number = more zoomed out) const MAX_ZOOM = 1.5 // Maximum zoom in const ZOOM_SPEED = 0.03 // How quickly zoom transitions occur (smoother with lower value) const BASE_PLAYER_SIZE = 30 // Reference size for zoom calculation // Bot names const BOT_NAMES = [ "Destroyer", "Ninja", "Viper", "Shadow", "Titan", "Phoenix", "Dragon", "Hunter", "Falcon", "Shark", "Eagle", "Wolf", "Lion", "Tiger", "Panther", "Cobra", "Scorpion", "Hawk", "Raven", "Vulture", "Kraken", "Hydra", "Cerberus", "Medusa", "Cyclops", "Minotaur", "Pegasus", "Griffin", "Chimera", "Sphinx", ] // Bot types const BOT_TYPES = { TINY: { minSize: 15, maxSize: 25, speedMultiplier: 1.3, count: 15 }, NORMAL: { minSize: 25, maxSize: 45, speedMultiplier: 1, count: 15 }, LARGE: { minSize: 50, maxSize: 100, speedMultiplier: 0.8, count: 8 }, GIANT: { minSize: 150, maxSize: 300, speedMultiplier: 0.6, count: 2 }, } // Types type Position = { x: number y: number } type GameObject = { id: string position: Position size: number color: string velocity?: Position isBot?: boolean target?: Position splitFrom?: string splitTime?: number isControlled?: boolean name?: string botType?: string skinId?: string // Add skinId for visual representation } type Bush = { id: string position: Position size: number } type Virus = { id: string position: Position size: number feedCount: number velocity?: Position } type LeaderboardEntry = { id: string name: string size: number isPlayer: boolean } interface GameCanvasProps { onGameOver: (stats: GameStats) => void playerName: string } // Helper functions const getDistance = (pos1: Position, pos2: Position) => { const dx = pos1.x - pos2.x const dy = pos1.y - pos2.y return Math.sqrt(dx * dx + dy * dy) } const getRandomColor = () => { const hue = Math.floor(Math.random() * 360) return `hsl(${hue}, 70%, 60%)` } const getRandomBotName = () => { return BOT_NAMES[Math.floor(Math.random() * BOT_NAMES.length)] } const getRandomBotType = () => { const types = Object.keys(BOT_TYPES) return types[Math.floor(Math.random() * types.length)] } // Calculate the ideal zoom level based on player size const calculateIdealZoom = (playerSize: number): number => { // As player grows, zoom out (inverse relationship) // This formula creates a smooth curve that decreases zoom as player size increases const idealZoom = BASE_PLAYER_SIZE / Math.max(BASE_PLAYER_SIZE, Math.sqrt(playerSize) * 3) // Clamp zoom between min and max values return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, idealZoom)) } export default function GameCanvas({ onGameOver, playerName }: GameCanvasProps) { const canvasRef = useRef(null) const { width, height } = useWindowSize() const { getEquippedSkin, equippedSkin } = usePlayerStore() const currentSkin = getEquippedSkin() // Game state const [players, setPlayers] = useState([ { id: "player-main", position: { x: MAP_SIZE / 2, y: MAP_SIZE / 2 }, size: INITIAL_PLAYER_SIZE, color: getRandomColor(), isControlled: true, name: playerName || "Player", skinId: currentSkin?.id || "default", }, ]) const [food, setFood] = useState([]) const [bots, setBots] = useState([]) const [bushes, setBushes] = useState([]) const [viruses, setViruses] = useState([]) const [camera, setCamera] = useState({ x: 0, y: 0 }) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const [isBoosting, setIsBoosting] = useState(false) const [gameStarted, setGameStarted] = useState(false) const [lastSplitTime, setLastSplitTime] = useState(0) const [leaderboard, setLeaderboard] = useState([]) const [gameTime, setGameTime] = useState(0) const [killCount, setKillCount] = useState(0) const [zoom, setZoom] = useState(1) const [targetZoom, setTargetZoom] = useState(1) const [skinImageCache, setSkinImageCache] = useState>(new Map()) // Add a state to track which game objects are hidden in bushes const [hiddenInBush, setHiddenInBush] = useState>(new Set()) // Ref to track game over state to avoid setState during render const gameOverRef = useRef<{ isOver: boolean; stats: GameStats | null }>({ isOver: false, stats: null }) // Track the last equipped skin to detect changes const lastEquippedSkinRef = useRef(currentSkin?.id) // Initialize game useEffect(() => { if (!width || !height) return // Initialize food const initialFood = Array.from({ length: FOOD_COUNT }).map(() => ({ id: `food-${Math.random()}`, position: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, size: FOOD_SIZE, color: getRandomColor(), })) // Initialize viruses const initialViruses = Array.from({ length: VIRUS_COUNT }).map(() => ({ id: `virus-${Math.random()}`, position: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, size: VIRUS_SIZE, feedCount: 0, })) // Initialize bots with different types const initialBots: GameObject[] = [] // Add tiny bots for (let i = 0; i < BOT_TYPES.TINY.count; i++) { const botType = "TINY" const botSize = BOT_TYPES.TINY.minSize + Math.random() * (BOT_TYPES.TINY.maxSize - BOT_TYPES.TINY.minSize) initialBots.push({ id: `bot-tiny-${i}`, position: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, size: botSize, color: getRandomColor(), velocity: { x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2, }, isBot: true, target: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, name: getRandomBotName(), botType, }) } // Add normal bots for (let i = 0; i < BOT_TYPES.NORMAL.count; i++) { const botType = "NORMAL" const botSize = BOT_TYPES.NORMAL.minSize + Math.random() * (BOT_TYPES.NORMAL.maxSize - BOT_TYPES.NORMAL.minSize) initialBots.push({ id: `bot-normal-${i}`, position: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, size: botSize, color: getRandomColor(), velocity: { x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2, }, isBot: true, target: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, name: getRandomBotName(), botType, }) } // Add large bots for (let i = 0; i < BOT_TYPES.LARGE.count; i++) { const botType = "LARGE" const botSize = BOT_TYPES.LARGE.minSize + Math.random() * (BOT_TYPES.LARGE.maxSize - BOT_TYPES.LARGE.minSize) initialBots.push({ id: `bot-large-${i}`, position: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, size: botSize, color: getRandomColor(), velocity: { x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2, }, isBot: true, target: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, name: getRandomBotName(), botType, }) } // Add giant bots for (let i = 0; i < BOT_TYPES.GIANT.count; i++) { const botType = "GIANT" const botSize = BOT_TYPES.GIANT.minSize + Math.random() * (BOT_TYPES.GIANT.maxSize - BOT_TYPES.GIANT.minSize) initialBots.push({ id: `bot-giant-${i}`, position: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, size: botSize, color: getRandomColor(), velocity: { x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2, }, isBot: true, target: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, name: getRandomBotName(), botType, }) } // Initialize bushes const initialBushes = Array.from({ length: BUSH_COUNT }).map(() => ({ id: `bush-${Math.random()}`, position: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, size: 50 + Math.random() * 50, })) // Make sure we get the latest equipped skin const currentEquippedSkin = usePlayerStore.getState().getEquippedSkin() const skinId = currentEquippedSkin?.id || "default" // Update player with equipped skin setPlayers([ { id: "player-main", position: { x: MAP_SIZE / 2, y: MAP_SIZE / 2 }, size: INITIAL_PLAYER_SIZE, color: getRandomColor(), isControlled: true, name: playerName || "Player", skinId: skinId, }, ]) setFood(initialFood) setBots(initialBots) setBushes(initialBushes) setViruses(initialViruses) setGameStarted(true) setGameTime(0) setKillCount(0) // Initialize skin image cache const cache = new Map() setSkinImageCache(cache) // Preload the current skin if (skinId) { preloadSkin(skinId, cache) } else { preloadSkin("default", cache) } }, [width, height, playerName, currentSkin]) // Preload a skin image and add it to the cache const preloadSkin = (skinId: string, cache: Map) => { if (cache.has(skinId)) return const skinImage = new Image() skinImage.crossOrigin = "anonymous" skinImage.src = `/skins/${skinId}.png` skinImage.onload = () => { // Successfully loaded cache.set(skinId, skinImage) setSkinImageCache(new Map(cache)) } skinImage.onerror = () => { console.warn(`Failed to load skin: ${skinId}, using placeholder`) // Generate a placeholder skinImage.src = generatePlaceholderSkinUrl(skinId) cache.set(skinId, skinImage) setSkinImageCache(new Map(cache)) } } // Monitor equipped skin changes useEffect(() => { if (currentSkin?.id !== lastEquippedSkinRef.current) { // Skin has changed, update all player cells setPlayers((prevPlayers) => { return prevPlayers.map((player) => { if (player.isControlled) { return { ...player, skinId: currentSkin?.id || "default", } } return player }) }) // Preload the new skin if (currentSkin?.id) { preloadSkin(currentSkin.id, skinImageCache) } // Update the ref lastEquippedSkinRef.current = currentSkin?.id } }, [currentSkin, skinImageCache]) // Update leaderboard useEffect(() => { // Combine players and bots const allEntities = [ ...players.map((p) => ({ id: p.id, name: p.name || "Unknown", size: p.size, isPlayer: p.isControlled || false, })), ...bots.map((b) => ({ id: b.id, name: b.name || "Bot", size: b.size, isPlayer: false, })), ] // Sort by size and take top 10 const topEntities = allEntities.sort((a, b) => b.size - a.size).slice(0, LEADERBOARD_SIZE) setLeaderboard(topEntities) }, [players, bots]) // Game timer useEffect(() => { if (!gameStarted) return const timer = setInterval(() => { setGameTime((prev) => prev + 1) }, 1000) return () => clearInterval(timer) }, [gameStarted]) // Game loop useEffect(() => { if (!gameStarted) return let animationFrameId: number let lastTime = 0 let foodSpawnTimer = 0 const spawnFood = () => { setFood((prevFood) => [ ...prevFood, { id: `food-${Math.random()}`, position: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, size: FOOD_SIZE, color: getRandomColor(), }, ]) } const gameLoop = (timestamp: number) => { if (!canvasRef.current) return const deltaTime = timestamp - lastTime lastTime = timestamp // Update player position based on mouse updatePlayerPosition(deltaTime) // Update bots updateBots(deltaTime) // Update viruses with velocity updateViruses() // Check collisions checkCollisions() // Check bush collisions checkBushCollisions() // Check virus collisions checkVirusCollisions() // Spawn new food periodically foodSpawnTimer += deltaTime if (foodSpawnTimer > FOOD_SPAWN_INTERVAL) { spawnFood() foodSpawnTimer = 0 } // Update zoom based on player size updateZoom() // Render game renderGame() animationFrameId = requestAnimationFrame(gameLoop) } animationFrameId = requestAnimationFrame(gameLoop) return () => { cancelAnimationFrame(animationFrameId) } }, [gameStarted, players, food, bots, bushes, viruses, mousePosition, isBoosting, width, height, zoom, targetZoom]) // Update zoom based on player size const updateZoom = () => { // Get all controlled player cells const controlledPlayers = players.filter((p) => p.isControlled) if (controlledPlayers.length === 0) return // Calculate total mass of all player cells const totalMass = controlledPlayers.reduce((sum, player) => sum + player.size * player.size, 0) // Calculate equivalent radius of combined mass const equivalentSize = Math.sqrt(totalMass) // Calculate ideal zoom based on equivalent size const ideal = calculateIdealZoom(equivalentSize) setTargetZoom(ideal) // Smoothly transition current zoom toward target zoom if (Math.abs(zoom - targetZoom) > 0.001) { setZoom((prevZoom) => { return prevZoom + (targetZoom - prevZoom) * ZOOM_SPEED }) } } // Mouse and keyboard event handlers useEffect(() => { const handleMouseMove = (e: MouseEvent) => { // Adjust mouse position based on zoom level const adjustedX = width! / 2 + (e.clientX - width! / 2) / zoom const adjustedY = height! / 2 + (e.clientY - height! / 2) / zoom setMousePosition({ x: adjustedX, y: adjustedY }) } const handleMouseDown = (e: MouseEvent) => { if (e.button === 0) { setIsBoosting(true) } } const handleMouseUp = (e: MouseEvent) => { if (e.button === 0) { setIsBoosting(false) } } const handleKeyDown = (e: KeyboardEvent) => { if (e.code === "Space") { handleSplit() } else if (e.code === "KeyW") { handleEjectMass() } } window.addEventListener("mousemove", handleMouseMove) window.addEventListener("mousedown", handleMouseDown) window.addEventListener("mouseup", handleMouseUp) window.addEventListener("keydown", handleKeyDown) return () => { window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("mousedown", handleMouseDown) window.removeEventListener("mouseup", handleMouseUp) window.removeEventListener("keydown", handleKeyDown) } }, [players, width, height, zoom]) // Handle game over state useEffect(() => { if (gameOverRef.current.isOver && gameOverRef.current.stats) { onGameOver(gameOverRef.current.stats) } }, [players, onGameOver]) // Handle ejecting mass (W key) const handleEjectMass = () => { setPlayers((prevPlayers) => { // Find the largest player cell const controlledPlayers = prevPlayers.filter((p) => p.isControlled).sort((a, b) => b.size - a.size) if (controlledPlayers.length === 0 || controlledPlayers[0].size < 35) return prevPlayers const playerToEject = controlledPlayers[0] const newPlayers = [...prevPlayers] // Calculate ejection direction (from player to mouse position) const centerX = width! / 2 const centerY = height! / 2 const dirX = mousePosition.x - centerX const dirY = mousePosition.y - centerY // Normalize direction vector const length = Math.sqrt(dirX * dirX + dirY * dirY) const normalizedDirX = length > 0 ? dirX / length : 0 const normalizedDirY = length > 0 ? dirY / length : 0 // Reduce player size const playerIndex = newPlayers.findIndex((p) => p.id === playerToEject.id) if (playerIndex !== -1) { newPlayers[playerIndex] = { ...newPlayers[playerIndex], size: Math.max(playerToEject.size - 2, 30), // Reduce size but not below 30 } } // Create ejected food const ejectedFood = { id: `ejected-${Math.random()}`, position: { x: playerToEject.position.x + normalizedDirX * playerToEject.size, y: playerToEject.position.y + normalizedDirY * playerToEject.size, }, size: 10, color: playerToEject.color, velocity: { x: normalizedDirX * 10, y: normalizedDirY * 10, }, } // Check if food hits a virus let virusHit = false setViruses((prevViruses) => { return prevViruses.map((virus) => { const distance = getDistance(ejectedFood.position, virus.position) if (distance < virus.size + ejectedFood.size) { virusHit = true // Increase virus feed count const newFeedCount = virus.feedCount + 1 // If enough feeds, create a new virus if (newFeedCount >= VIRUS_FEED_COUNT) { // Create new virus and shoot in ejection direction const newVirus: Virus = { id: `virus-${Math.random()}`, position: { ...virus.position }, size: VIRUS_SIZE, feedCount: 0, velocity: { x: normalizedDirX * VIRUS_EJECT_SPEED, y: normalizedDirY * VIRUS_EJECT_SPEED, }, } // Add new virus to the list setTimeout(() => { setViruses((prevViruses) => [...prevViruses, newVirus]) }, 0) // Reset feed count of current virus return { ...virus, feedCount: 0 } } return { ...virus, feedCount: newFeedCount } } return virus }) }) // If not hitting a virus, add food to the list if (!virusHit) { setFood((prevFood) => [...prevFood, ejectedFood]) } return newPlayers }) } // Update virus positions with velocity const updateViruses = () => { setViruses((prevViruses) => { return prevViruses.map((virus) => { if (!virus.velocity) return virus // Update position based on velocity const newX = Math.max(0, Math.min(MAP_SIZE, virus.position.x + virus.velocity.x)) const newY = Math.max(0, Math.min(MAP_SIZE, virus.position.y + virus.velocity.y)) // Gradually reduce velocity const newVelocityX = virus.velocity.x * 0.95 const newVelocityY = virus.velocity.y * 0.95 // If velocity is too small, remove it if (Math.abs(newVelocityX) < 0.1 && Math.abs(newVelocityY) < 0.1) { return { ...virus, position: { x: newX, y: newY }, velocity: undefined, } } return { ...virus, position: { x: newX, y: newY }, velocity: { x: newVelocityX, y: newVelocityY, }, } }) }) } // Check virus collisions const checkVirusCollisions = () => { setPlayers((prevPlayers) => { let newPlayers = [...prevPlayers] // Check each player for (let i = 0; i < newPlayers.length; i++) { const player = newPlayers[i] // Check collision with each virus viruses.forEach((virus) => { const distance = getDistance(player.position, virus.position) // If player collides with virus if (distance < player.size + virus.size * 0.7) { // If player is large enough, explode into fragments if (player.size > VIRUS_MIN_EJECT_SIZE) { // Create fragments from player const fragments = createPlayerFragments(player, VIRUS_EXPLOSION_COUNT) // Remove original player newPlayers = newPlayers.filter((p) => p.id !== player.id) // Add fragments to player list newPlayers = [...newPlayers, ...fragments] // Remove the virus that was hit setViruses((prevViruses) => prevViruses.filter((v) => v.id !== virus.id)) // Create a new virus at a random position setTimeout(() => { setViruses((prevViruses) => [ ...prevViruses, { id: `virus-${Math.random()}`, position: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, size: VIRUS_SIZE, feedCount: 0, }, ]) }, 5000) // Create new virus after 5 seconds } } }) } return newPlayers }) // Check bot-virus collisions setBots((prevBots) => { let newBots = [...prevBots] // Check each bot for (let i = 0; i < newBots.length; i++) { const bot = newBots[i] // Check collision with each virus viruses.forEach((virus) => { const distance = getDistance(bot.position, virus.position) // If bot collides with virus if (distance < bot.size + virus.size * 0.7) { // If bot is large enough, explode into fragments if (bot.size > VIRUS_MIN_EJECT_SIZE) { // Create fragments from bot const fragments = createBotFragments(bot, VIRUS_EXPLOSION_COUNT) // Remove original bot newBots = newBots.filter((b) => b.id !== bot.id) // Add fragments to bot list newBots = [...newBots, ...fragments] // Remove the virus that was hit setViruses((prevViruses) => prevViruses.filter((v) => v.id !== virus.id)) // Create a new virus at a random position setTimeout(() => { setViruses((prevViruses) => [ ...prevViruses, { id: `virus-${Math.random()}`, position: { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, }, size: VIRUS_SIZE, feedCount: 0, }, ]) }, 5000) // Create new virus after 5 seconds } } }) } return newBots }) } // Create player fragments when exploding const createPlayerFragments = (player: GameObject, count: number): GameObject[] => { const fragments: GameObject[] = [] const now = Date.now() // Calculate new size for each fragment const newSize = player.size / Math.sqrt(count) for (let i = 0; i < count; i++) { // Calculate random ejection direction const angle = (i / count) * Math.PI * 2 const dirX = Math.cos(angle) const dirY = Math.sin(angle) // Create new fragment fragments.push({ id: `player-fragment-${Math.random()}`, position: { ...player.position }, size: newSize, color: player.color, velocity: { x: dirX * SPLIT_INITIAL_SPEED, y: dirY * SPLIT_INITIAL_SPEED, }, splitFrom: player.id, splitTime: now, isControlled: player.isControlled, name: player.name, skinId: player.skinId, // Preserve the skin on fragments }) } return fragments } // Create bot fragments when exploding const createBotFragments = (bot: GameObject, count: number): GameObject[] => { const fragments: GameObject[] = [] const now = Date.now() // Calculate new size for each fragment const newSize = bot.size / Math.sqrt(count) for (let i = 0; i < count; i++) { // Calculate random ejection direction const angle = (i / count) * Math.PI * 2 const dirX = Math.cos(angle) const dirY = Math.sin(angle) // Create new fragment fragments.push({ id: `bot-fragment-${Math.random()}`, position: { ...bot.position }, size: newSize, color: bot.color, velocity: { x: dirX * SPLIT_INITIAL_SPEED, y: dirY * SPLIT_INITIAL_SPEED, }, splitFrom: bot.id, splitTime: now, isBot: true, name: bot.name, botType: bot.botType, }) } return fragments } // Handle player split const handleSplit = () => { const now = Date.now() // Check if cooldown has passed if (now - lastSplitTime < SPLIT_COOLDOWN) return setPlayers((prevPlayers) => { // Get all controlled player cells const controlledPlayers = prevPlayers.filter((p) => p.isControlled) // Check if player has reached the maximum number of cells if (controlledPlayers.length >= MAX_PLAYER_CELLS) return prevPlayers // Find the largest cell that can be split (must be above minimum size) const splitCandidates = controlledPlayers.filter((p) => p.size > MIN_SPLIT_SIZE).sort((a, b) => b.size - a.size) if (splitCandidates.length === 0) return prevPlayers // Only split the largest cell const playerToSplit = splitCandidates[0] const newPlayers = [...prevPlayers] // Calculate direction vector from player to mouse const centerX = width! / 2 const centerY = height! / 2 const dirX = mousePosition.x - centerX const dirY = mousePosition.y - centerY // Normalize direction vector const length = Math.sqrt(dirX * dirX + dirY * dirY) const normalizedDirX = length > 0 ? dirX / length : 0 const normalizedDirY = length > 0 ? dirY / length : 0 // Calculate new size (mass is halved, so radius is reduced by sqrt(2)) const newSize = playerToSplit.size / Math.sqrt(2) // Update original player's size const playerIndex = newPlayers.findIndex((p) => p.id === playerToSplit.id) if (playerIndex !== -1) { newPlayers[playerIndex] = { ...newPlayers[playerIndex], size: newSize, splitTime: now, // Track when this cell was involved in a split } } // Create new split cell const newPlayer = { id: `player-${Math.random()}`, position: { x: playerToSplit.position.x, y: playerToSplit.position.y, }, size: newSize, color: playerToSplit.color, velocity: { x: normalizedDirX * SPLIT_INITIAL_SPEED, y: normalizedDirY * SPLIT_INITIAL_SPEED, }, splitFrom: playerToSplit.id, splitTime: now, isControlled: true, name: playerToSplit.name, skinId: playerToSplit.skinId, // Preserve the skin on split cells } newPlayers.push(newPlayer) return newPlayers }) setLastSplitTime(now) } // Update player position based on mouse const updatePlayerPosition = (deltaTime: number) => { if (!width || !height) return setPlayers((prevPlayers) => { return prevPlayers.map((player) => { if (!player.isControlled) return player // If this is a recently split cell with velocity if (player.velocity && player.splitTime && Date.now() - player.splitTime < 1000) { // Calculate deceleration based on time since split const timeElapsed = Date.now() - player.splitTime const decelerationFactor = Math.max(0.8, SPLIT_DECELERATION * (1 - timeElapsed / 1000)) // Apply velocity with deceleration const newX = Math.max(0, Math.min(MAP_SIZE, player.position.x + player.velocity.x)) const newY = Math.max(0, Math.min(MAP_SIZE, player.position.y + player.velocity.y)) // Slow down the velocity with non-linear deceleration for more natural movement const newVelocityX = player.velocity.x * decelerationFactor const newVelocityY = player.velocity.y * decelerationFactor return { ...player, position: { x: newX, y: newY }, velocity: { x: Math.abs(newVelocityX) < 0.1 ? 0 : newVelocityX, y: Math.abs(newVelocityY) < 0.1 ? 0 : newVelocityY, }, } } // Calculate direction vector from center of screen to mouse position const centerX = width / 2 const centerY = height / 2 const dirX = mousePosition.x - centerX const dirY = mousePosition.y - centerY // Normalize direction vector const length = Math.sqrt(dirX * dirX + dirY * dirY) const normalizedDirX = length > 0 ? dirX / length : 0 const normalizedDirY = length > 0 ? dirY / length : 0 // Calculate speed based on player size (smaller = faster) let baseSpeed = BASE_SPEED / Math.sqrt(player.size) baseSpeed = Math.max(1, Math.min(10, baseSpeed)) // Limit speed between 1 and 10 // Apply boost if active let speed = baseSpeed if (isBoosting && player.size > INITIAL_PLAYER_SIZE / 2) { speed *= BOOST_SPEED_MULTIPLIER // Reduce player size when boosting const newSize = player.size - BOOST_SIZE_REDUCTION_RATE // Spawn food behind player when boosting if (Math.random() < 0.3) { const angle = Math.atan2(normalizedDirY, normalizedDirX) + Math.PI const distance = player.size + 5 const foodPosition = { x: player.position.x + Math.cos(angle) * distance, y: player.position.y + Math.sin(angle) * distance, } setFood((prevFood) => [ ...prevFood, { id: `food-${Math.random()}`, position: foodPosition, size: FOOD_SIZE, color: player.color, }, ]) } // Update player position with boost const newX = Math.max(0, Math.min(MAP_SIZE, player.position.x + normalizedDirX * speed)) const newY = Math.max(0, Math.min(MAP_SIZE, player.position.y + normalizedDirY * speed)) return { ...player, position: { x: newX, y: newY }, size: newSize, } } else { // Update player position without boost const newX = Math.max(0, Math.min(MAP_SIZE, player.position.x + normalizedDirX * speed)) const newY = Math.max(0, Math.min(MAP_SIZE, player.position.y + normalizedDirY * speed)) return { ...player, position: { x: newX, y: newY }, } } }) }) // Update camera position to follow the average position of controlled players const controlledPlayers = players.filter((p) => p.isControlled) if (controlledPlayers.length > 0) { const avgX = controlledPlayers.reduce((sum, p) => sum + p.position.x, 0) / controlledPlayers.length const avgY = controlledPlayers.reduce((sum, p) => sum + p.position.y, 0) / controlledPlayers.length // Adjust camera position based on zoom level setCamera({ x: avgX - width / (2 * zoom), y: avgY - height / (2 * zoom), }) } } // Update bots const updateBots = (deltaTime: number) => { setBots((prevBots) => { return prevBots.map((bot) => { // Get bot type properties const botTypeProps = BOT_TYPES[bot.botType as keyof typeof BOT_TYPES] || BOT_TYPES.NORMAL // Find nearest food or smaller player to chase let nearestTarget: GameObject | null = null let minDistance = Number.POSITIVE_INFINITY // Check for nearby food food.forEach((foodItem) => { const distance = getDistance(bot.position, foodItem.position) if (distance < 200 && distance < minDistance && bot.size > foodItem.size) { nearestTarget = foodItem minDistance = distance } }) // Check for nearby smaller players players.forEach((player) => { const distance = getDistance(bot.position, player.position) if (distance < 300 && distance < minDistance && bot.size > player.size * 1.1) { nearestTarget = player minDistance = distance } }) // Check for nearby smaller bots bots.forEach((otherBot) => { if (otherBot.id !== bot.id) { const distance = getDistance(bot.position, otherBot.position) if (distance < 300 && distance < minDistance && bot.size > otherBot.size * 1.1) { nearestTarget = otherBot minDistance = distance } } }) // Run away from larger players or bots let runFrom: GameObject | null = null let runDistance = Number.POSITIVE_INFINITY // Check for nearby larger players players.forEach((player) => { const distance = getDistance(bot.position, player.position) if (distance < 200 && player.size > bot.size * 1.1 && distance < runDistance) { runFrom = player runDistance = distance } }) // Check for nearby larger bots bots.forEach((otherBot) => { if (otherBot.id !== bot.id) { const distance = getDistance(bot.position, otherBot.position) if (distance < 200 && otherBot.size > bot.size * 1.1 && distance < runDistance) { runFrom = otherBot runDistance = distance } } }) // Run away from viruses if bot is large enough to be affected if (bot.size > VIRUS_MIN_EJECT_SIZE) { viruses.forEach((virus) => { const distance = getDistance(bot.position, virus.position) if (distance < 200 && distance < runDistance) { runFrom = { id: virus.id, position: virus.position, size: virus.size, color: VIRUS_COLOR } runDistance = distance } }) } // Determine direction let dirX = 0 let dirY = 0 if (runFrom) { // Run away from danger dirX = bot.position.x - runFrom.position.x dirY = bot.position.y - runFrom.position.y } else if (nearestTarget) { // Chase target dirX = nearestTarget.position.x - bot.position.x dirY = nearestTarget.position.y - bot.position.y } else if (bot.target) { // Move toward random target dirX = bot.target.x - bot.position.x dirY = bot.target.y - bot.position.y // If close to target, set new random target if ((Math.abs(dirX) < 50 && Math.abs(dirY) < 50) || Math.random() < 0.005) { bot.target = { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, } } } else { // Set random target bot.target = { x: Math.random() * MAP_SIZE, y: Math.random() * MAP_SIZE, } } // Normalize direction const length = Math.sqrt(dirX * dirX + dirY * dirY) const normalizedDirX = length > 0 ? dirX / length : 0 const normalizedDirY = length > 0 ? dirY / length : 0 // Calculate speed based on bot size and type const baseSpeed = 2 - Math.min(1.5, bot.size / 100) const speed = baseSpeed * botTypeProps.speedMultiplier // Move bot const newX = Math.max(0, Math.min(MAP_SIZE, bot.position.x + normalizedDirX * speed)) const newY = Math.max(0, Math.min(MAP_SIZE, bot.position.y + normalizedDirY * speed)) return { ...bot, position: { x: newX, y: newY }, target: bot.target, } }) }) } // Check collisions between game objects const checkCollisions = () => { // Player-food collisions const remainingFood = food.filter((foodItem) => { let eaten = false // Check if any player eats the food players.forEach((player) => { const distance = getDistance(player.position, foodItem.position) if (distance < player.size && player.size > foodItem.size && !eaten) { // Increase player size when eating food setPlayers((prevPlayers) => { return prevPlayers.map((p) => { if (p.id === player.id) { return { ...p, size: p.size + GROWTH_RATE, } } return p }) }) eaten = true } }) // Check if any bot eats the food if (!eaten) { bots.forEach((bot) => { const distance = getDistance(bot.position, foodItem.position) if (distance < bot.size && bot.size > foodItem.size) { // Increase bot size when eating food setBots((prevBots) => { return prevBots.map((b) => { if (b.id === bot.id) { return { ...b, size: b.size + BOT_GROWTH_RATE, } } return b }) }) eaten = true } }) } return !eaten }) if (remainingFood.length !== food.length) { setFood(remainingFood) } // Player-bot collisions const remainingBots = bots.filter((bot) => { let eaten = false // Check if any player eats the bot players.forEach((player) => { const distance = getDistance(player.position, bot.position) if (distance < Math.max(player.size, bot.size)) { if (player.size > bot.size * 1.1 && !eaten) { // Player eats bot setPlayers((prevPlayers) => { return prevPlayers.map((p) => { if (p.id === player.id) { return { ...p, size: p.size + bot.size * 0.3, } } return p }) }) eaten = true // Increment kill count setKillCount((prev) => prev + 1) } else if (bot.size > player.size * 1.1) { // Bot eats player setPlayers((prevPlayers) => { const remainingPlayers = prevPlayers.filter((p) => p.id !== player.id) // If no controlled players left, game over if (remainingPlayers.filter((p) => p.isControlled).length === 0) { const totalScore = prevPlayers .filter((p) => p.isControlled) .reduce((sum, p) => sum + Math.floor(p.size), 0) // Get player position in leaderboard const position = leaderboard.findIndex((entry) => entry.isPlayer) + 1 gameOverRef.current = { isOver: true, stats: { score: totalScore, kills: killCount, timeAlive: gameTime, position: position > 0 ? position : leaderboard.length + 1, }, } } return remainingPlayers }) // Increase bot size setBots((prevBots) => { return prevBots.map((b) => { if (b.id === bot.id) { return { ...b, size: b.size + player.size * 0.3, } } return b }) }) } } return true }) return !eaten }) if (remainingBots.length !== bots.length) { setBots(remainingBots) } // Bot-bot collisions setBots((prevBots) => { const newBots = [...prevBots] for (let i = 0; i < newBots.length; i++) { for (let j = i + 1; j < newBots.length; j++) { const bot1 = newBots[i] const bot2 = newBots[j] const distance = getDistance(bot1.position, bot2.position) if (distance < Math.max(bot1.size, bot2.size)) { if (bot1.size > bot2.size * 1.1) { // Bot1 eats bot2 newBots[i] = { ...bot1, size: bot1.size + bot2.size * 0.3, } newBots.splice(j, 1) j-- } else if (bot2.size > bot1.size * 1.1) { // Bot2 eats bot1 newBots[j] = { ...bot2, size: bot2.size + bot1.size * 0.3, } newBots.splice(i, 1) i-- break } } } } return newBots }) // Player-player collisions (for split cells) setPlayers((prevPlayers) => { const newPlayers = [...prevPlayers] const now = Date.now() // Create a spatial hash grid for optimization const cellGrid = new Map() const gridSize = 100 // Size of each grid cell // Place cells in grid newPlayers.forEach((player, index) => { const gridX = Math.floor(player.position.x / gridSize) const gridY = Math.floor(player.position.y / gridSize) const key = `${gridX},${gridY}` if (!cellGrid.has(key)) { cellGrid.set(key, []) } cellGrid.get(key).push({ player, index }) }) // Check for collisions using grid (only check nearby cells) for (let i = 0; i < newPlayers.length; i++) { const player1 = newPlayers[i] if (!player1) continue // Skip if this player was already removed const gridX = Math.floor(player1.position.x / gridSize) const gridY = Math.floor(player1.position.y / gridSize) // Check surrounding grid cells for (let dx = -1; dx <= 1; dx++) { for (let dy = -1; dy <= 1; dy++) { const key = `${gridX + dx},${gridY + dy}` const cellsInGrid = cellGrid.get(key) || [] for (const { player: player2, index: j } of cellsInGrid) { if (i === j || !player2) continue // Skip self or removed players if (player1.isControlled && player2.isControlled) { // Both are controlled by the player const canMerge = // Check if they're from the same split (player1.splitFrom === player2.id || player2.splitFrom === player1.id || // Or if they're both split cells from the same player (player1.name === player2.name && player1.isControlled && player2.isControlled)) && // And enough time has passed since splitting now - (player1.splitTime || 0) > MERGE_COOLDOWN && now - (player2.splitTime || 0) > MERGE_COOLDOWN if (canMerge) { // Check if they're close enough to merge const distance = getDistance(player1.position, player2.position) const mergeThreshold = (player1.size + player2.size) * MERGE_DISTANCE_FACTOR if (distance < mergeThreshold) { // Calculate new mass (sum of both cells' masses) // Since mass is proportional to area (πr²), we need to square the radii const newSize = Math.sqrt(player1.size * player1.size + player2.size * player2.size) // Merge the cells (keep the properties of the larger cell) if (player1.size >= player2.size) { newPlayers[i] = { ...player1, size: newSize, splitFrom: undefined, splitTime: undefined, } // Remove the second cell newPlayers.splice(j, 1) // Update grid to avoid checking this cell again const cellIndex = cellGrid.get(key).findIndex((cell) => cell.index === j) if (cellIndex !== -1) { cellGrid.get(key).splice(cellIndex, 1) } } else { newPlayers[j] = { ...player2, size: newSize, splitFrom: undefined, splitTime: undefined, } // Remove the first cell newPlayers.splice(i, 1) i-- // Adjust index since we removed an element break // Break inner loop since player1 is gone } } } } else if (player1.isControlled !== player2.isControlled) { // One is player, one is not (or they're from different players) const distance = getDistance(player1.position, player2.position) if (distance < Math.max(player1.size, player2.size)) { if (player1.size > player2.size * 1.1) { // Player1 eats player2 newPlayers[i] = { ...player1, size: Math.sqrt(player1.size * player1.size + player2.size * player2.size), } newPlayers.splice(j, 1) // Update grid const cellIndex = cellGrid.get(key).findIndex((cell) => cell.index === j) if (cellIndex !== -1) { cellGrid.get(key).splice(cellIndex, 1) } } else if (player2.size > player1.size * 1.1) { // Player2 eats player1 newPlayers[j] = { ...player2, size: Math.sqrt(player2.size * player2.size + player1.size * player1.size), } newPlayers.splice(i, 1) i-- // Adjust index break // Break inner loop } } } } } } } // Check if game over (no controlled cells left) if (newPlayers.filter((p) => p.isControlled).length === 0) { const totalScore = prevPlayers.filter((p) => p.isControlled).reduce((sum, p) => sum + Math.floor(p.size), 0) // Get player position in leaderboard const position = leaderboard.findIndex((entry) => entry.isPlayer) + 1 gameOverRef.current = { isOver: true, stats: { score: totalScore, kills: killCount, timeAlive: gameTime, position: position > 0 ? position : leaderboard.length + 1, }, } } return newPlayers }) } // Check bush collisions const checkBushCollisions = () => { const newHiddenInBush = new Set() // Check which players are inside bushes players.forEach((player) => { bushes.forEach((bush) => { const distance = getDistance(player.position, bush.position) // If player is inside the bush (not breaking it) if (distance < bush.size && player.size <= bush.size * 0.7) { newHiddenInBush.add(player.id) } // If player is big enough and collides with bush if (player.size > bush.size * 0.7 && distance < player.size) { // Break bush into food const foodCount = Math.floor(bush.size / 5) const newFood = Array.from({ length: foodCount }).map(() => { const angle = Math.random() * Math.PI * 2 const distance = Math.random() * bush.size return { id: `food-${Math.random()}`, position: { x: bush.position.x + Math.cos(angle) * distance, y: bush.position.y + Math.sin(angle) * distance, }, size: FOOD_SIZE, color: `hsl(120, 70%, ${40 + Math.random() * 20}%)`, // Green food } }) setFood((prevFood) => [...prevFood, ...newFood]) // Remove the bush setBushes((prevBushes) => prevBushes.filter((b) => b.id !== bush.id)) } }) // Check for virus hiding viruses.forEach((virus) => { const distance = getDistance(player.position, virus.position) // If player is small enough to hide in virus and not large enough to trigger explosion if (distance < virus.size * 0.8 && player.size < VIRUS_MIN_EJECT_SIZE) { newHiddenInBush.add(player.id) } }) }) // Check which bots are inside bushes bots.forEach((bot) => { bushes.forEach((bush) => { const distance = getDistance(bot.position, bush.position) // If bot is inside the bush (not breaking it) if (distance < bush.size && bot.size <= bush.size * 0.7) { newHiddenInBush.add(bot.id) } // If bot is big enough and collides with bush if (bot.size > bush.size * 0.7 && distance < bot.size) { // Break bush into food const foodCount = Math.floor(bush.size / 5) const newFood = Array.from({ length: foodCount }).map(() => { const angle = Math.random() * Math.PI * 2 const distance = Math.random() * bush.size return { id: `food-${Math.random()}`, position: { x: bush.position.x + Math.cos(angle) * distance, y: bush.position.y + Math.sin(angle) * distance, }, size: FOOD_SIZE, color: `hsl(120, 70%, ${40 + Math.random() * 20}%)`, // Green food } }) setFood((prevFood) => [...prevFood, ...newFood]) // Remove the bush setBushes((prevBushes) => prevBushes.filter((b) => b.id !== bush.id)) } }) // Check for virus hiding viruses.forEach((virus) => { const distance = getDistance(bot.position, virus.position) // If bot is small enough to hide in virus and not large enough to trigger explosion if (distance < virus.size * 0.8 && bot.size < VIRUS_MIN_EJECT_SIZE) { newHiddenInBush.add(bot.id) } }) }) setHiddenInBush(newHiddenInBush) } // Render game const renderGame = () => { const canvas = canvasRef.current if (!canvas || !width || !height) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.clearRect(0, 0, width, height) // Save the current transformation matrix ctx.save() // Apply zoom transformation ctx.translate(width / 2, height / 2) // Translate to the center of the canvas ctx.scale(zoom, zoom) // Apply the zoom ctx.translate(-width / 2, -height / 2) // Translate back to the top-left // Draw grid drawGrid(ctx) // Draw bushes bushes.forEach((bush) => { drawBush(ctx, bush.position.x - camera.x, bush.position.y - camera.y, bush.size) }) // Draw food food.forEach((foodItem) => { drawCircle(ctx, foodItem.position.x - camera.x, foodItem.position.y - camera.y, foodItem.size, foodItem.color) }) // Draw viruses viruses.forEach((virus) => { drawVirus(ctx, virus.position.x - camera.x, virus.position.y - camera.y, virus.size, virus.feedCount) }) // Draw bots (only if not hidden in bush) bots.forEach((bot) => { if (!hiddenInBush.has(bot.id)) { drawCircle(ctx, bot.position.x - camera.x, bot.position.y - camera.y, bot.size, bot.color) // Draw bot name if (bot.size > 20) { drawText(ctx, bot.position.x - camera.x, bot.position.y - camera.y, bot.name || "Bot", bot.size) } } }) // Draw players (only if not hidden in bush) players.forEach((player) => { if (!hiddenInBush.has(player.id)) { // Draw player with skin if available if (player.skinId) { drawPlayerWithSkin( ctx, player.position.x - camera.x, player.position.y - camera.y, player.size, player.color, player.skinId, ) } else { drawCircle(ctx, player.position.x - camera.x, player.position.y - camera.y, player.size, player.color) } // Draw player name if (player.size > 20) { drawText( ctx, player.position.x - camera.x, player.position.y - camera.y, player.name || "Player", player.size, ) } } }) // Restore the transformation matrix to the original ctx.restore() // Calculate and update score const totalScore = players.filter((p) => p.isControlled).reduce((sum, p) => sum + Math.floor(p.size), 0) // Draw score ctx.fillStyle = "white" ctx.font = "20px Arial" ctx.fillText(`Score: ${totalScore}`, 20, 30) ctx.fillText(`Kills: ${killCount}`, 20, 60) // Format time as MM:SS const minutes = Math.floor(gameTime / 60) const seconds = gameTime % 60 const timeString = `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}` ctx.fillText(`Time: ${timeString}`, 20, 90) // Draw map boundaries ctx.strokeStyle = "rgba(255, 255, 255, 0.5)" ctx.lineWidth = 5 ctx.strokeRect(-camera.x, -camera.y, MAP_SIZE, MAP_SIZE) // Draw leaderboard drawLeaderboard(ctx) // Draw mini-map drawMiniMap(ctx) // Draw controls help ctx.fillStyle = "rgba(255, 255, 255, 0.7)" ctx.font = "14px Arial" ctx.fillText( "Controls: Mouse to move, Space to split, W to eject mass, Hold left mouse button to boost", 20, height - 20, ) // Draw zoom indicator ctx.fillStyle = "rgba(255, 255, 255, 0.7)" ctx.font = "14px Arial" ctx.fillText(`Zoom: ${zoom.toFixed(2)}x`, width - 100, height - 20) } // Draw player with skin const drawPlayerWithSkin = ( ctx: CanvasRenderingContext2D, x: number, y: number, radius: number, color: string, skinId: string, ) => { // Only draw if player is visible on screen if (x + radius < 0 || x - radius > width || y + radius < 0 || y - radius > height) { return } // Draw base circle ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2) ctx.fillStyle = color ctx.fill() // Check if skin is already in cache if (skinImageCache.has(skinId)) { const skinImage = skinImageCache.get(skinId)! // Draw skin if loaded if (skinImage.complete && skinImage.naturalWidth > 0) { ctx.save() ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2) ctx.clip() ctx.drawImage(skinImage, x - radius, y - radius, radius * 2, radius * 2) ctx.restore() } } else { // Create new image and add to cache preloadSkin(skinId, skinImageCache) // Draw a placeholder while loading ctx.save() ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2) ctx.clip() // Draw colored background based on skin type const colors: Record = { default: "#ffcc00", bat: "#9b59b6", gecko: "#2ecc71", bee: "#f1c40f", fly: "#2c3e50", snake: "#e67e22", spider: "#2980b9", crocodile: "#2ecc71", wolf: "#808080", fox: "#e67e22", lion: "#f1c40f", panther: "#2c3e50", raptor: "#d2b48c", shark: "#3498db", octopus: "#20b2aa", mammoth: "#a0522d", lumberjack: "#e74c3c", cougar: "#d2b48c", trex: "#a0522d", sumo: "#2c3e50", bear: "#a0522d", } const bgColor = colors[skinId] || "#ffcc00" ctx.fillStyle = bgColor ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2) // Draw text label ctx.fillStyle = "#ffffff" ctx.font = `${Math.max(10, radius / 2)}px Arial` ctx.textAlign = "center" ctx.fillText(skinId, x, y) ctx.restore() } } // Draw mini-map const drawMiniMap = (ctx: CanvasRenderingContext2D) => { const miniMapSize = 150 const miniMapX = width - miniMapSize - 10 const miniMapY = height - miniMapSize - 10 const scale = miniMapSize / MAP_SIZE // Draw mini-map background ctx.fillStyle = "rgba(0, 0, 0, 0.7)" ctx.fillRect(miniMapX, miniMapY, miniMapSize, miniMapSize) ctx.strokeStyle = "rgba(255, 255, 255, 0.5)" ctx.lineWidth = 1 ctx.strokeRect(miniMapX, miniMapY, miniMapSize, miniMapSize) // Draw bushes on mini-map bushes.forEach((bush) => { ctx.fillStyle = "rgba(0, 100, 0, 0.7)" ctx.beginPath() ctx.arc( miniMapX + bush.position.x * scale, miniMapY + bush.position.y * scale, Math.max(2, bush.size * scale), 0, Math.PI * 2, ) ctx.fill() }) // Draw viruses on mini-map viruses.forEach((virus) => { ctx.fillStyle = "rgba(0, 255, 0, 0.7)" ctx.beginPath() ctx.arc( miniMapX + virus.position.x * scale, miniMapY + virus.position.y * scale, Math.max(2, virus.size * scale), 0, Math.PI * 2, ) ctx.fill() }) // Draw bots on mini-map bots.forEach((bot) => { // Even hidden bots are shown on mini-map, but with lower opacity const opacity = hiddenInBush.has(bot.id) ? 0.3 : 0.7 ctx.fillStyle = bot.color.replace(")", `, ${opacity})`) ctx.beginPath() ctx.arc( miniMapX + bot.position.x * scale, miniMapY + bot.position.y * scale, Math.max(1, (bot.size * scale) / 3), 0, Math.PI * 2, ) ctx.fill() }) // Draw players on mini-map players.forEach((player) => { if (player.isControlled) { // Player's own cells are always visible on mini-map but with different opacity if hidden const opacity = hiddenInBush.has(player.id) ? 0.5 : 1.0 ctx.fillStyle = player.color.replace(")", `, ${opacity})`) ctx.beginPath() ctx.arc( miniMapX + player.position.x * scale, miniMapY + player.position.y * scale, Math.max(2, (player.size * scale) / 2), 0, Math.PI * 2, ) ctx.fill() } else { // Other player cells const opacity = hiddenInBush.has(player.id) ? 0.3 : 0.7 ctx.fillStyle = player.color.replace(")", `, ${opacity})`) ctx.beginPath() ctx.arc( miniMapX + player.position.x * scale, miniMapY + player.position.y * scale, Math.max(1, (player.size * scale) / 3), 0, Math.PI * 2, ) ctx.fill() } }) // Draw current viewport area on mini-map const viewportX = camera.x * scale const viewportY = camera.y * scale const viewportWidth = (width / zoom) * scale const viewportHeight = (height / zoom) * scale ctx.strokeStyle = "rgba(255, 255, 255, 0.8)" ctx.lineWidth = 1 ctx.strokeRect(miniMapX + viewportX, miniMapY + viewportY, viewportWidth, viewportHeight) } // Draw virus const drawVirus = (ctx: CanvasRenderingContext2D, x: number, y: number, radius: number, feedCount: number) => { // Only draw if virus is visible on screen if (x + radius < 0 || x - radius > width || y + radius < 0 || y - radius > height) { return } // Draw base circle ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2) ctx.fillStyle = VIRUS_COLOR ctx.fill() // Draw spikes const spikeCount = 20 const spikeLength = radius * 0.2 for (let i = 0; i < spikeCount; i++) { const angle = (i / spikeCount) * Math.PI * 2 const outerX = x + Math.cos(angle) * (radius + spikeLength) const outerY = y + Math.sin(angle) * (radius + spikeLength) ctx.beginPath() ctx.moveTo(x, y) ctx.lineTo(outerX, outerY) ctx.strokeStyle = VIRUS_COLOR ctx.lineWidth = 3 ctx.stroke() } // Draw feed count indicator if (feedCount > 0) { ctx.fillStyle = "white" ctx.font = "12px Arial" ctx.textAlign = "center" ctx.fillText(`${feedCount}/${VIRUS_FEED_COUNT}`, x, y) ctx.textAlign = "left" } } // Draw leaderboard const drawLeaderboard = (ctx: CanvasRenderingContext2D) => { const leaderboardWidth = 200 const leaderboardHeight = 30 + leaderboard.length * 25 const padding = 10 // Draw leaderboard background ctx.fillStyle = "rgba(0, 0, 0, 0.7)" ctx.fillRect(width - leaderboardWidth - padding, padding, leaderboardWidth, leaderboardHeight) ctx.strokeStyle = "rgba(255, 255, 255, 0.3)" ctx.lineWidth = 1 ctx.strokeRect(width - leaderboardWidth - padding, padding, leaderboardWidth, leaderboardHeight) // Draw leaderboard title ctx.fillStyle = "white" ctx.font = "bold 16px Arial" ctx.textAlign = "center" ctx.fillText("Leaderboard", width - leaderboardWidth / 2 - padding, padding + 20) ctx.textAlign = "left" // Draw leaderboard entries leaderboard.forEach((entry, index) => { const y = padding + 45 + index * 25 // Highlight player entries if (entry.isPlayer) { ctx.fillStyle = "rgba(255, 255, 255, 0.2)" ctx.fillRect(width - leaderboardWidth - padding + 5, y - 15, leaderboardWidth - 10, 20) } ctx.fillStyle = "white" ctx.font = "14px Arial" ctx.fillText(`${index + 1}. ${entry.name}`, width - leaderboardWidth - padding + 10, y) ctx.textAlign = "right" ctx.fillText(`${Math.floor(entry.size)}`, width - padding - 10, y) ctx.textAlign = "left" }) } // Draw grid const drawGrid = (ctx: CanvasRenderingContext2D) => { const gridSize = 100 const offsetX = -camera.x % gridSize const offsetY = -camera.y % gridSize ctx.strokeStyle = "rgba(255, 255, 255, 0.1)" ctx.lineWidth = 1 // Vertical lines for (let x = offsetX; x < width; x += gridSize) { ctx.beginPath() ctx.moveTo(x, 0) ctx.lineTo(x, height) ctx.stroke() } // Horizontal lines for (let y = offsetY; y < height; y += gridSize) { ctx.beginPath() ctx.moveTo(0, y) ctx.lineTo(width, y) ctx.stroke() } } // Draw circle const drawCircle = (ctx: CanvasRenderingContext2D, x: number, y: number, radius: number, color: string) => { // Only draw if circle is visible on screen if (x + radius < 0 || x - radius > width || y + radius < 0 || y - radius > height) { return } ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2) ctx.fillStyle = color ctx.fill() } // Draw text const drawText = (ctx: CanvasRenderingContext2D, x: number, y: number, text: string, size: number) => { // Only draw if position is visible on screen if (x < 0 || x > width || y < 0 || y > height) { return } const fontSize = Math.min(16, Math.max(10, size / 5)) ctx.font = `${fontSize}px Arial` ctx.fillStyle = "white" ctx.textAlign = "center" ctx.fillText(text, x, y) ctx.textAlign = "left" } // Draw bush const drawBush = (ctx: CanvasRenderingContext2D, x: number, y: number, radius: number) => { // Only draw if bush is visible on screen if (x + radius < 0 || x - radius > width || y + radius < 0 || y - radius > height) { return } // Draw base circle ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2) ctx.fillStyle = "rgba(0, 100, 0, 0.7)" ctx.fill() // Draw bush details const detail = Math.min(12, Math.max(6, Math.floor(radius / 10))) for (let i = 0; i < detail; i++) { const angle = (i / detail) * Math.PI * 2 const detailX = x + Math.cos(angle) * radius * 0.7 const detailY = y + Math.sin(angle) * radius * 0.7 const detailSize = radius * 0.5 ctx.beginPath() ctx.arc(detailX, detailY, detailSize, 0, Math.PI * 2) ctx.fillStyle = "rgba(0, 130, 0, 0.6)" ctx.fill() } } return