Create index.html

index.html

@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from 'react';
+import { AlertCircle, Axe, Box, Building, Cpu, Factory, Zap } from 'lucide-react';
+
+const Game = () => {
+  const [selectedTool, setSelectedTool] = useState(null);
+  const [grid, setGrid] = useState(() => 
+    Array(8).fill().map(() => Array(8).fill({ type: null, color: 'white' }))
+  );
+  const [resources, setResources] = useState({ energy: 50, minerals: 50, circuits: 0 });
+  const [tick, setTick] = useState(0);
+  const [researchProgress, setResearchProgress] = useState({ automation: 0, speed: 0 });
+  const [message, setMessage] = useState('');
+
+  const tools = {
+    solarPanel: { 
+      cost: { minerals: 10 }, 
+      color: 'bg-yellow-200',
+      produces: 'energy',
+      icon: <Zap className="w-6 h-6" />
+    },
+    mineralExtractor: { 
+      cost: { energy: 10 }, 
+      color: 'bg-gray-300',
+      produces: 'minerals',
+      icon: <Box className="w-6 h-6" />
+    },
+    circuitFactory: { 
+      cost: { energy: 15, minerals: 15 }, 
+      color: 'bg-green-200',
+      produces: 'circuits',
+      icon: <Cpu className="w-6 h-6" />
+    }
+  };
+
+  // Game tick for resource production
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTick(t => t + 1);
+      setResources(prev => {
+        const newResources = { ...prev };
+        grid.forEach(row => {
+          row.forEach(cell => {
+            if (cell.type && tools[cell.type]) {
+              const produces = tools[cell.type].produces;
+              newResources[produces] = (newResources[produces] || 0) + 1;
+            }
+          });
+        });
+        return newResources;
+      });
+    }, 1000);
+    
+    return () => clearInterval(timer);
+  }, [grid]);
+
+  const handleCellClick = (rowIndex, colIndex) => {
+    if (!selectedTool) {
+      setMessage('Select a building first!');
+      return;
+    }
+
+    const tool = tools[selectedTool];
+    const canAfford = Object.entries(tool.cost).every(
+      ([resource, cost]) => resources[resource] >= cost
+    );
+
+    if (!canAfford) {
+      setMessage('Not enough resources!');
+      return;
+    }
+
+    // Deduct costs
+    setResources(prev => {
+      const newResources = { ...prev };
+      Object.entries(tool.cost).forEach(([resource, cost]) => {
+        newResources[resource] -= cost;
+      });
+      return newResources;
+    });
+
+    // Place building
+    setGrid(prev => {
+      const newGrid = [...prev];
+      newGrid[rowIndex] = [...prev[rowIndex]];
+      newGrid[rowIndex][colIndex] = {
+        type: selectedTool,
+        color: tool.color
+      };
+      return newGrid;
+    });
+
+    // Show success message
+    setMessage(`Built ${selectedTool}!`);
+    setTimeout(() => setMessage(''), 2000);
+  };
+
+  return (
+    <div className="p-4 max-w-4xl mx-auto">
+      {/* Resources */}
+      <div className="grid grid-cols-3 gap-4 mb-6">
+        <div className="p-3 bg-yellow-100 rounded-lg flex items-center gap-2">
+          <Zap className="w-4 h-4" />
+          <span>Energy: {resources.energy}</span>
+        </div>
+        <div className="p-3 bg-gray-100 rounded-lg flex items-center gap-2">
+          <Box className="w-4 h-4" />
+          <span>Minerals: {resources.minerals}</span>
+        </div>
+        <div className="p-3 bg-green-100 rounded-lg flex items-center gap-2">
+          <Cpu className="w-4 h-4" />
+          <span>Circuits: {resources.circuits}</span>
+        </div>
+      </div>
+
+      {/* Tool Selection */}
+      <div className="mb-6">
+        <div className="flex gap-4 mb-4">
+          {Object.entries(tools).map(([name, data]) => (
+            <button
+              key={name}
+              onClick={() => setSelectedTool(name)}
+              className={`p-4 rounded-lg flex flex-col items-center ${data.color} 
+                ${selectedTool === name ? 'ring-2 ring-blue-500' : ''}`}
+            >
+              {data.icon}
+              <span className="text-sm mt-2">{name.replace(/([A-Z])/g, ' $1').trim()}</span>
+              <span className="text-xs mt-1">
+                Cost: {Object.entries(data.cost).map(([r, c]) => `${c} ${r}`).join(', ')}
+              </span>
+            </button>
+          ))}
+        </div>
+        {message && (
+          <div className="text-center text-sm font-medium text-blue-600 mb-2">
+            {message}
+          </div>
+        )}
+      </div>
+
+      {/* Game Grid */}
+      <div className="grid grid-cols-8 gap-1 bg-gray-100 p-2 rounded-lg">
+        {grid.map((row, rowIndex) => (
+          row.map((cell, colIndex) => (
+            <button
+              key={`${rowIndex}-${colIndex}`}
+              onClick={() => handleCellClick(rowIndex, colIndex)}
+              className={`w-16 h-16 rounded-lg ${cell.type ? tools[cell.type].color : 'bg-white'} 
+                hover:bg-opacity-80 transition-colors flex items-center justify-center`}
+            >
+              {cell.type && tools[cell.type].icon}
+            </button>
+          ))
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Game;