+
+ );
+ }
+
+ const userClicks = gameState.users[userId]?.clicks || 0;
+
+ return (
+
+ Connecting to the Bozo Network...
+
+
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/components/Background.tsx b/src/components/Background.tsx
new file mode 100644
index 0000000..a302840
--- /dev/null
+++ b/src/components/Background.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+interface BackgroundProps {
+ background: string;
+}
+
+export function Background({ background }: BackgroundProps) {
+ const getBackgroundStyle = () => {
+ switch (background) {
+ case 'rainbow':
+ return {
+ background: 'linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080)',
+ backgroundSize: '400% 400%',
+ animation: 'rainbow 10s ease infinite'
+ };
+ case 'matrix':
+ return {
+ background: 'linear-gradient(135deg, #000000 0%, #0d4a0d 50%, #000000 100%)',
+ backgroundImage: 'radial-gradient(circle at 20% 50%, #00ff00 1px, transparent 1px), radial-gradient(circle at 80% 50%, #00ff00 1px, transparent 1px)',
+ backgroundSize: '20px 20px',
+ animation: 'matrix 20s linear infinite'
+ };
+ case 'cyberpunk':
+ return {
+ background: 'linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 25%, #16213e 50%, #e94560 75%, #0f3460 100%)',
+ backgroundSize: '400% 400%',
+ animation: 'cyberpunk 15s ease infinite'
+ };
+ case 'space':
+ return {
+ background: 'radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%)',
+ backgroundImage: 'radial-gradient(2px 2px at 20px 30px, #eee, transparent), radial-gradient(2px 2px at 40px 70px, #fff, transparent), radial-gradient(1px 1px at 90px 40px, #fff, transparent)',
+ backgroundSize: '200px 100px',
+ animation: 'stars 50s linear infinite'
+ };
+ case 'glitch':
+ return {
+ background: 'linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ffff00, #ff00ff, #00ffff)',
+ backgroundSize: '400% 400%',
+ animation: 'glitch 2s ease infinite'
+ };
+ case 'ultimate':
+ return {
+ background: 'conic-gradient(from 0deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000)',
+ backgroundSize: '400% 400%',
+ animation: 'ultimate 5s linear infinite'
+ };
+ default:
+ return {
+ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+ };
+ }
+ };
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ClickButton.tsx b/src/components/ClickButton.tsx
new file mode 100644
index 0000000..f1a4903
--- /dev/null
+++ b/src/components/ClickButton.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+
+interface ClickButtonProps {
+ onClick: () => void;
+ imageUrl: string;
+ clickMultiplier: number;
+}
+
+export function ClickButton({ onClick, imageUrl, clickMultiplier }: ClickButtonProps) {
+ const [clickEffect, setClickEffect] = useState(false);
+
+ const handleClick = () => {
+ setClickEffect(true);
+ onClick();
+ setTimeout(() => setClickEffect(false), 200);
+ };
+
+ return (
+
+
+ )}
+
+
+ 🎉 {celebrationMessage} 🎉
+
+
+ {/* Header */}
+
+
+ {/* Sparkle Effects */}
+
+
+
+ {/* Main Content */}
+
+ {/* Left Column - Click Button */}
+
+
+ {/* Footer */}
+
+
+
+ {/* Middle Column - Upgrades */}
+
+
+
+ {/* Right Column - Milestones and Leaderboard */}
+
+
+
+
+
+
+ + ✨ Keep clicking, fellow bozos! ✨ +
++ This game is synchronized in real-time with all players! +
+
+ {[...Array(10)].map((_, i) => (
+
+
+ ✨
+
+ ))}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Counter.tsx b/src/components/Counter.tsx
new file mode 100644
index 0000000..2ba6de3
--- /dev/null
+++ b/src/components/Counter.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface CounterProps {
+ totalClicks: number;
+ autoClickRate: number;
+}
+
+export function Counter({ totalClicks, autoClickRate }: CounterProps) {
+ return (
+
+ 
+ {clickEffect && (
+
+
+
+
+ )}
+
+ +{clickMultiplier}
+
+
+
+
+ + Click Power: {clickMultiplier}x +
++ Click the spinning rat! +
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Leaderboard.tsx b/src/components/Leaderboard.tsx
new file mode 100644
index 0000000..469b2aa
--- /dev/null
+++ b/src/components/Leaderboard.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { GameState } from '../types';
+
+interface LeaderboardProps {
+ gameState: GameState;
+ currentUserId: string;
+}
+
+export function Leaderboard({ gameState, currentUserId }: LeaderboardProps) {
+ const sortedUsers = Object.entries(gameState.users)
+ .sort(([, a], [, b]) => b.clicks - a.clicks)
+ .slice(0, 10);
+
+ return (
+
+
+ + BOZO CLICKER +
+
+ {totalClicks.toLocaleString()} CLICKS
+
+ {autoClickRate > 0 && (
+
+ 🤖 Auto-clicking at {autoClickRate}/sec
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Milestones.tsx b/src/components/Milestones.tsx
new file mode 100644
index 0000000..f9513ca
--- /dev/null
+++ b/src/components/Milestones.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { MILESTONES } from '../config/milestones';
+import { GameState } from '../types';
+
+interface MilestonesProps {
+ gameState: GameState;
+}
+
+export function Milestones({ gameState }: MilestonesProps) {
+ const completedMilestones = MILESTONES.filter(m => gameState.milestones[m.id]);
+ const nextMilestone = MILESTONES.find(m => !gameState.milestones[m.id]);
+
+ return (
+ + 👑 BOZO LEADERBOARD 👑 +
+ +
+ {sortedUsers.map(([userId, user], index) => {
+ const isCurrentUser = userId === currentUserId;
+ const isTopThree = index < 3;
+
+ return (
+
+
+
+
+ );
+ })}
+
+
+
+
+ {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `#${index + 1}`}
+
+
+ {user.name} {isCurrentUser ? '(You)' : ''}
+
+
+
+ {user.clicks.toLocaleString()}
+
+
+
+
+ Total Players: {Object.keys(gameState.users).length}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/UpgradeShop.tsx b/src/components/UpgradeShop.tsx
new file mode 100644
index 0000000..befbc59
--- /dev/null
+++ b/src/components/UpgradeShop.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { UPGRADES } from '../config/upgrades';
+import { GameState } from '../types';
+
+interface UpgradeShopProps {
+ gameState: GameState;
+ userClicks: number;
+ onPurchase: (upgradeId: string) => void;
+}
+
+export function UpgradeShop({ gameState, userClicks, onPurchase }: UpgradeShopProps) {
+ return (
+ + 🏆 MILESTONES 🏆 +
+ + {nextMilestone && ( +
+
+ )}
+
+ {completedMilestones.length > 0 && (
+ Next Goal:
+
+
+
+ {nextMilestone.name}
+ {nextMilestone.threshold.toLocaleString()}
+
+ {nextMilestone.description}
+
+
+
+
+ {gameState.totalClicks.toLocaleString()} / {nextMilestone.threshold.toLocaleString()}
+
+
+
+ )}
+ Completed:
+
+ {completedMilestones.map((milestone) => (
+
+
+
+ ))}
+
+ {milestone.name}
+ ✅ {milestone.threshold.toLocaleString()}
+
+ {milestone.reward}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/config/milestones.ts b/src/config/milestones.ts
new file mode 100644
index 0000000..f02f59f
--- /dev/null
+++ b/src/config/milestones.ts
@@ -0,0 +1,58 @@
+import { Milestone } from '../types';
+
+export const MILESTONES: Milestone[] = [
+ {
+ threshold: 100,
+ id: 'first-hundred',
+ name: 'First Steps',
+ description: 'Welcome to the madness!',
+ background: 'rainbow',
+ image: 'https://media1.tenor.com/m/x8v1oNUOmg4AAAAd/spinning-rat-rat.gif',
+ reward: '🌈 Rainbow Background Unlocked!'
+ },
+ {
+ threshold: 500,
+ id: 'five-hundred',
+ name: 'Getting Warmed Up',
+ description: 'The rat spins faster...',
+ background: 'matrix',
+ image: 'https://media1.tenor.com/m/pV74fmh_NLgAAAAd/louie-rat-spinning-rat.gif',
+ reward: '💊 Matrix Mode Activated!'
+ },
+ {
+ threshold: 1000,
+ id: 'one-thousand',
+ name: 'Cyber Rat',
+ description: 'Welcome to the future',
+ background: 'cyberpunk',
+ image: 'https://media1.tenor.com/m/YsWlbVbRWFQAAAAd/rat-spinning.gif',
+ reward: '🦾 Cyberpunk Aesthetic Engaged!'
+ },
+ {
+ threshold: 2500,
+ id: 'epic-milestone',
+ name: 'Space Cadet',
+ description: 'To infinity and beyond!',
+ background: 'space',
+ image: 'https://media1.tenor.com/m/x8v1oNUOmg4AAAAd/spinning-rat-rat.gif',
+ reward: '🚀 Space Background Unlocked!'
+ },
+ {
+ threshold: 5000,
+ id: 'legendary',
+ name: 'Glitch in the Matrix',
+ description: 'Reality is breaking down',
+ background: 'glitch',
+ image: 'https://media1.tenor.com/m/pV74fmh_NLgAAAAd/louie-rat-spinning-rat.gif',
+ reward: '⚡ Glitch Effect Activated!'
+ },
+ {
+ threshold: 10000,
+ id: 'ultimate',
+ name: 'Ultimate Bozo',
+ description: 'You have achieved peak bozo status',
+ background: 'ultimate',
+ image: 'https://media1.tenor.com/m/YsWlbVbRWFQAAAAd/rat-spinning.gif',
+ reward: '👑 Ultimate Power Unlocked!'
+ }
+];
\ No newline at end of file
diff --git a/src/config/upgrades.ts b/src/config/upgrades.ts
new file mode 100644
index 0000000..7a44257
--- /dev/null
+++ b/src/config/upgrades.ts
@@ -0,0 +1,49 @@
+import { Upgrade } from '../types';
+
+export const UPGRADES: Upgrade[] = [
+ {
+ id: 'clickMultiplier',
+ name: '🖱️ Mega Click',
+ description: '+1 click power per purchase',
+ baseCost: 10,
+ multiplier: 1.5,
+ clickBonus: 1,
+ icon: '🖱️'
+ },
+ {
+ id: 'autoClicker',
+ name: '🤖 Auto Clicker',
+ description: '+1 click per second',
+ baseCost: 50,
+ multiplier: 2,
+ autoClickRate: 1,
+ icon: '🤖'
+ },
+ {
+ id: 'megaBonus',
+ name: '💎 Mega Bonus',
+ description: '+5 click power per purchase',
+ baseCost: 200,
+ multiplier: 2.5,
+ clickBonus: 5,
+ icon: '💎'
+ },
+ {
+ id: 'hyperClicker',
+ name: '⚡ Hyper Clicker',
+ description: '+10 auto clicks per second',
+ baseCost: 1000,
+ multiplier: 3,
+ autoClickRate: 10,
+ icon: '⚡'
+ },
+ {
+ id: 'quantumClicker',
+ name: '🌟 Quantum Clicker',
+ description: '+50 click power per purchase',
+ baseCost: 5000,
+ multiplier: 4,
+ clickBonus: 50,
+ icon: '🌟'
+ }
+];
\ No newline at end of file
diff --git a/src/hooks/usePartyKit.ts b/src/hooks/usePartyKit.ts
new file mode 100644
index 0000000..a60438c
--- /dev/null
+++ b/src/hooks/usePartyKit.ts
@@ -0,0 +1,68 @@
+import { useState, useEffect, useCallback } from 'react';
+import PartySocket from 'partysocket';
+import { GameState } from '../types';
+
+const PARTY_HOST = import.meta.env.DEV ? 'localhost:1998' : 'bozo-clicker.your-username.partykit.dev';
+
+export function usePartyKit() {
+ const [gameState, setGameState] = useState+ ✨ BOZO SHOP ✨ +
+ +
+ {UPGRADES.map((upgrade) => {
+ const owned = gameState.upgrades[upgrade.id]?.owned || 0;
+ const cost = gameState.upgrades[upgrade.id]?.cost || upgrade.baseCost;
+ const canAfford = userClicks >= cost;
+
+ return (
+
+
+ canAfford && onPurchase(upgrade.id)}
+ >
+
+ );
+ })}
+
+
+
+
+
+
+ {upgrade.icon}
+
+ {upgrade.name}
+ {owned > 0 && ( + + {owned} + + )} +{upgrade.description}
+
+
+
+ {cost.toLocaleString()}
+
+ clicks
+
+
+
+ Your Clicks: {userClicks.toLocaleString()}
+
+