Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,112 @@
+import { useState, useEffect } from 'react'
+import Header from '../components/Header'
+import NationCard from '../components/NationCard'
+import ResourcePanel from '../components/ResourcePanel'
+import ActionButton from '../components/ActionButton'
+import { FaIndustry, FaSeedling, FaMoneyBillWave, FaFistRaised } from 'react-icons/fa'
+
+const NATIONS = [
+  { id: 1, name: 'Industrial Union', flagCode: 'us', population: 15000000 },
+  { id: 2, name: 'Agrarian Republic', flagCode: 'fr', population: 12000000 },
+  { id: 3, name: 'Mercantile Federation', flagCode: 'gb', population: 18000000 },
+  { id: 4, name: 'Military State', flagCode: 'ru', population: 20000000 },
+]
+
+export default function Home() {
+  const [selectedNation, setSelectedNation] = useState(null)
+  const [resources, setResources] = useState({
+    food: 100,
+    industry: 100,
+    commerce: 100,
+    military: 100
+  })
+  const [year, setYear] = useState(1)
+  const [isRunning, setIsRunning] = useState(false)
+
+  useEffect(() => {
+    let interval
+    if (isRunning) {
+      interval = setInterval(() => {
+        setYear(prev => prev + 1)
+        setResources(prev => ({
+          food: Math.max(0, prev.food + Math.floor(Math.random() * 10) - 3),
+          industry: Math.max(0, prev.industry + Math.floor(Math.random() * 10) - 3),
+          commerce: Math.max(0, prev.commerce + Math.floor(Math.random() * 10) - 3),
+          military: Math.max(0, prev.military + Math.floor(Math.random() * 10) - 3),
+        }))
+      }, 2000)
+    }
+    return () => clearInterval(interval)
+  }, [isRunning])
+
+  const handleAction = (resource) => {
+    setResources(prev => ({
+      ...prev,
+      [resource]: prev[resource] + 10
+    }))
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      
+      <main className="container mx-auto p-4">
+        {!selectedNation ? (
+          <div>
+            <h2 className="text-xl font-bold mb-4">Choose Your Nation</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {NATIONS.map(nation => (
+                <NationCard 
+                  key={nation.id} 
+                  nation={nation} 
+                  onSelect={setSelectedNation}
+                />
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div>
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold">{selectedNation.name}</h2>
+              <p className="text-gray-600">Year: {year}</p>
+            </div>
+
+            <ResourcePanel resources={resources} />
+
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+              <ActionButton 
+                icon={<FaSeedling />} 
+                label="Grow Food" 
+                onClick={() => handleAction('food')}
+              />
+              <ActionButton 
+                icon={<FaIndustry />} 
+                label="Build Industry" 
+                onClick={() => handleAction('industry')}
+              />
+              <ActionButton 
+                icon={<FaMoneyBillWave />} 
+                label="Develop Commerce" 
+                onClick={() => handleAction('commerce')}
+              />
+              <ActionButton 
+                icon={<FaFistRaised />} 
+                label="Train Military" 
+                onClick={() => handleAction('military')}
+              />
+            </div>
+
+            <div className="flex justify-center">
+              <button 
+                onClick={() => setIsRunning(!isRunning)}
+                className={`px-6 py-3 rounded-lg ${isRunning ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600'} text-white font-bold transition-colors`}
+              >
+                {isRunning ? 'Pause Simulation' : 'Start Simulation'}
+              </button>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}