/** * @license * SPDX-License-Identifier: Apache-2.0 */ import React, { useState, useEffect, useMemo } from 'react'; import { motion, AnimatePresence } from 'motion/react'; import { Castle, Sword, Shield, Store, TrendingUp, Trophy, Coins, CircleUser, Bomb, Home, ChevronRight, Flame, Dna, Skull, Crosshair, Zap, FastForward, Info, Cpu, Bot } from 'lucide-react'; import { TroopType, GameState, Building, Troop, Robot } from './types'; import { TROOPS, BATTLEFIELDS, INITIAL_GOLD, MAX_BASE_LEVEL, MIN_LIFE_POINTS, MAX_LIFE_POINTS, ROBOTS } from './constants'; const LOCAL_STORAGE_KEY = 'clash_of_empires_save'; export default function App() { const [view, setView] = useState<'base' | 'battle' | 'shop' | 'profile'>('base'); const [gameState, setGameState] = useState(() => { const saved = localStorage.getItem(LOCAL_STORAGE_KEY); if (saved) return JSON.parse(saved); return { level: 1, gold: INITIAL_GOLD, lifePoints: MIN_LIFE_POINTS, unlockedTroops: ['GOBLIN'] as TroopType[], buildings: { mainCastle: { id: 'MAIN_CASTLE', name: 'Main Citadel', level: 1, maxHealth: 1000, currentHealth: 1000, upgradeCost: 100 }, miniCastles: [ { id: 'MINI_CASTLE', name: 'West Tower', level: 1, maxHealth: 500, currentHealth: 500, upgradeCost: 50 }, { id: 'MINI_CASTLE', name: 'East Tower', level: 1, maxHealth: 500, currentHealth: 500, upgradeCost: 50 }, ], defenses: [ { id: 'CANNON', name: 'Iron Cannon', level: 1, maxHealth: 300, currentHealth: 300, upgradeCost: 75 }, { id: 'BARRACKS', name: 'Training Grounds', level: 1, maxHealth: 300, currentHealth: 300, upgradeCost: 75 }, ] }, battlefieldTier: 1 }; }); useEffect(() => { localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(gameState)); }, [gameState]); // Derived stats const currentLifePoints = useMemo(() => { // scale from 100 to 5000 based on level 1 to 50 const progress = (gameState.level - 1) / (MAX_BASE_LEVEL - 1); return Math.floor(MIN_LIFE_POINTS + progress * (MAX_LIFE_POINTS - MIN_LIFE_POINTS)); }, [gameState.level]); const addGold = (amount: number) => { setGameState(prev => ({ ...prev, gold: prev.gold + amount })); }; const levelUp = () => { if (gameState.level < MAX_BASE_LEVEL) { setGameState(prev => { const nextLevel = prev.level + 1; // Unlock new troops based on level const newUnlocks = Object.values(TROOPS) .filter(t => t.unlockedAtLevel <= nextLevel && !prev.unlockedTroops.includes(t.id)) .map(t => t.id); return { ...prev, level: nextLevel, unlockedTroops: [...prev.unlockedTroops, ...newUnlocks] }; }); } }; const upgradeBuilding = (type: 'main' | 'mini' | 'def', index?: number) => { setGameState(prev => { let b: Building | undefined; if (type === 'main') b = prev.buildings.mainCastle; if (type === 'mini' && index !== undefined) b = prev.buildings.miniCastles[index]; if (type === 'def' && index !== undefined) b = prev.buildings.defenses[index]; if (!b || prev.gold < b.upgradeCost) return prev; const newGold = prev.gold - b.upgradeCost; const newLevel = b.level + 1; const nextUpgradeCost = Math.floor(b.upgradeCost * 1.5); const newMaxHealth = Math.floor(b.maxHealth * 1.2); const updatedBuilding = { ...b, level: newLevel, upgradeCost: nextUpgradeCost, maxHealth: newMaxHealth, currentHealth: newMaxHealth }; const newBuildings = { ...prev.buildings }; if (type === 'main') newBuildings.mainCastle = updatedBuilding; if (type === 'mini' && index !== undefined) { newBuildings.miniCastles = [...prev.buildings.miniCastles]; newBuildings.miniCastles[index] = updatedBuilding; } if (type === 'def' && index !== undefined) { newBuildings.defenses = [...prev.buildings.defenses]; newBuildings.defenses[index] = updatedBuilding; } return { ...prev, gold: newGold, buildings: newBuildings }; }); }; return (

{/* Top HUD */}

{gameState.gold.toLocaleString()}

LVL {gameState.level}

{/* Main Content Area */}

{view === 'base' && (

{BATTLEFIELDS[gameState.battlefieldTier - 1].name} (Tier {gameState.battlefieldTier})

upgradeBuilding('mini', 0)} className={`w-24 h-24 castle-mini flex flex-col items-center justify-center cursor-pointer hover:brightness-110 active:scale-95 transition-all group ${gameState.gold < gameState.buildings.miniCastles[0].upgradeCost ? 'opacity-50 grayscale' : ''}`} >

{gameState.buildings.miniCastles[0].upgradeCost}

LVL {gameState.buildings.miniCastles[0].level}

{currentLifePoints} / {MAX_LIFE_POINTS} HP

upgradeBuilding('main')} className={`w-36 h-36 castle-main flex flex-col items-center justify-center cursor-pointer hover:brightness-110 active:scale-95 transition-all group ${gameState.gold < gameState.buildings.mainCastle.upgradeCost ? 'opacity-50 grayscale' : ''}`} >

{gameState.buildings.mainCastle.upgradeCost}

CITADEL LVL {gameState.buildings.mainCastle.level}

upgradeBuilding('mini', 1)} className={`w-24 h-24 castle-mini flex flex-col items-center justify-center cursor-pointer hover:brightness-110 active:scale-95 transition-all group ${gameState.gold < gameState.buildings.miniCastles[1].upgradeCost ? 'opacity-50 grayscale' : ''}`} >

{gameState.buildings.miniCastles[1].upgradeCost}

LVL {gameState.buildings.miniCastles[1].level}

upgradeBuilding('def', 0)} className="w-16 h-16 bg-rose-500 rounded-lg flex items-center justify-center shadow-lg cursor-pointer hover:brightness-110 active:scale-90 transition-all" >

upgradeBuilding('def', 1)} className="w-16 h-16 bg-cyan-500 rounded-lg flex items-center justify-center shadow-lg cursor-pointer hover:brightness-110 active:scale-90 transition-all" >

{gameState.unlockedTroops.slice(0, 4).map((id) => { const troop = TROOPS[id]; return (

{Math.ceil(troop.cost / 100)}

{id === 'GOBLIN' ? '👺' : id === 'ARCHER' ? '🏹' : id === 'BARBARIAN' ? '⚔️' : id === 'WIZARD' ? '🧙' : '🛡️'}

{troop.name}

); })}

)} {view === 'shop' && (

The War Arsenal

{/* Battlefield Upgrades */}

Terrain Mastery

{BATTLEFIELDS.map((bf) => (

= bf.id ? 'bg-black/20 border-white/10 opacity-60' : 'bg-white border-[#4d2b12] text-[#333]' }`} >

{bf.name}

STRATEGIC LAYER {bf.id}

{gameState.battlefieldTier >= bf.id ? (

Active

) : ( )}

))}

{/* Troop Roster */}

Elite Roster

{Object.values(TROOPS).map((troop) => (

{Math.ceil(troop.cost / 100)}

{troop.id === 'GOBLIN' ? '👺' : troop.id === 'ARCHER' ? '🏹' : troop.id === 'BARBARIAN' ? '⚔️' : troop.id === 'WIZARD' ? '🧙' : '🛡️'}

{troop.name}

{troop.description}

ATK {troop.damage} HP {troop.health}

{!gameState.unlockedTroops.includes(troop.id) && ( LOCKED: RANK {troop.unlockedAtLevel} )}

))}

)} {view === 'battle' && ( { addGold(reward); levelUp(); setView('base'); }} onCancel={() => setView('base')} /> )} {view === 'profile' && (

Commander {gameState.level > 10 ? 'Elite' : 'Rookie'}

Building the ultimate empire bit by bit.

Max HP

{currentLifePoints}

Troops Unlocked

{gameState.unlockedTroops.length}

)}

{/* Navigation Rail */}

); } function NavButton({ active, onClick, icon, label }: { active: boolean; onClick: () => void; icon: React.ReactNode; label: string }) { return ( ); } // Separate component for Battle to manage complex state function BattleSimulation({ gameState, onComplete, onCancel }: { gameState: GameState, onComplete: (reward: number) => void, onCancel: () => void }) { const [stage, setStage] = useState<'prep' | 'fighting' | 'result'>('prep'); const [deployedTroops, setDeployedTroops] = useState([]); const [opponent, setOpponent] = useState(() => ({ name: 'Unknown Commander', power: gameState.level * 40 })); const [isRobot, setIsRobot] = useState(false); const [result, setResult] = useState<{ win: boolean, gold: number } | null>(null); const availableTroops = gameState.unlockedTroops.map(id => TROOPS[id]); const calculateResult = () => { setStage('fighting'); // Simulate fight let playerPower = deployedTroops.reduce((acc, id) => acc + TROOPS[id].damage, 0); playerPower += (gameState.buildings.mainCastle.level * 10); let enemyPower = 0; if (isRobot && 'powerMultiplier' in opponent) { enemyPower = (gameState.level * 40) * opponent.powerMultiplier; } else { enemyPower = (opponent as any).power + Math.random() * 100; } setTimeout(() => { const isWin = playerPower >= enemyPower; const baseReward = isRobot ? 150 : 200; const reward = isWin ? baseReward + (gameState.level * 50) : 50; setResult({ win: isWin, gold: reward }); setStage('result'); }, 2000); }; return (

Tactical Front

{stage === 'prep' && ( )}

{stage === 'prep' && (

{/* Opponent Selection */}

Target Designation

{ROBOTS.map((bot) => ( ))}

Force Deployment

{availableTroops.map(t => ( ))}

War Council ({deployedTroops.length})

{deployedTroops.length === 0 &&

No troops designated...

} {deployedTroops.map((id, i) => (

{TROOPS[id].name}

))}

{deployedTroops.length === 0 && (

Deploy at least one unit to proceed

)}

)} {stage === 'fighting' && (

{isRobot ? : }

{isRobot ? `Dueling ${opponent.name}` : 'Crushing Enemy Lines...'}

Tactical Analysis Ongoing

)} {stage === 'result' && result && (

{result.win ? : }

{result.win ? 'Victorious' : 'Defeated'}

{result.win ? `You successfully dismantled the ${isRobot ? 'Robotic' : 'Commander'} threat.` : 'Your forces were overwhelmed. The machines or commanders claim dominance.'}

Gold Plundered

+{result.gold}

Renown Gained

Rank Up

)}

); }

Project Preview