Update index.html

index.html

@@ -1,159 +1,207 @@
-import React, { useState, useEffect } from 'react';
-import { AlertCircle, Axe, Box, Building, Cpu, Factory, Zap } from 'lucide-react';
+import gradio as gr
+import json
+from dataclasses import dataclass, asdict
+import numpy as np
 
-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('');
+@dataclass
+class Building:
+    type: str
+    color: str
+    cost: dict
+    produces: str
 
-  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" />
-    }
-  };
+class FactoryGame:
+    def __init__(self):
+        self.grid_size = 8
+        self.grid = [[None for _ in range(self.grid_size)] for _ in range(self.grid_size)]
+        self.resources = {"energy": 50, "minerals": 50, "circuits": 0}
+        
+        self.buildings = {
+            "solarPanel": Building(
+                type="solarPanel",
+                color="#FEF08A",  # yellow-200
+                cost={"minerals": 10},
+                produces="energy"
+            ),
+            "mineralExtractor": Building(
+                type="mineralExtractor",
+                color="#D1D5DB",  # gray-300
+                cost={"energy": 10},
+                produces="minerals"
+            ),
+            "circuitFactory": Building(
+                type="circuitFactory",
+                color="#BBF7D0",  # green-200
+                cost={"energy": 15, "minerals": 15},
+                produces="circuits"
+            )
+        }
 
-  // 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
-    );
+    def to_json(self):
+        return json.dumps({
+            "grid": self.grid,
+            "resources": self.resources,
+            "buildings": {k: asdict(v) for k, v in self.buildings.items()}
+        })
 
-    if (!canAfford) {
-      setMessage('Not enough resources!');
-      return;
-    }
+    def can_afford(self, building_type):
+        building = self.buildings[building_type]
+        return all(self.resources.get(resource, 0) >= cost 
+                  for resource, cost in building.cost.items())
 
-    // Deduct costs
-    setResources(prev => {
-      const newResources = { ...prev };
-      Object.entries(tool.cost).forEach(([resource, cost]) => {
-        newResources[resource] -= cost;
-      });
-      return newResources;
-    });
+    def place_building(self, row, col, building_type):
+        if not self.can_afford(building_type):
+            return False, "Not enough resources!"
+        
+        if self.grid[row][col] is not None:
+            return False, "Cell already occupied!"
 
-    // Place building
-    setGrid(prev => {
-      const newGrid = [...prev];
-      newGrid[rowIndex] = [...prev[rowIndex]];
-      newGrid[rowIndex][colIndex] = {
-        type: selectedTool,
-        color: tool.color
-      };
-      return newGrid;
-    });
+        # Deduct costs
+        building = self.buildings[building_type]
+        for resource, cost in building.cost.items():
+            self.resources[resource] -= cost
 
-    // Show success message
-    setMessage(`Built ${selectedTool}!`);
-    setTimeout(() => setMessage(''), 2000);
-  };
+        # Place building
+        self.grid[row][col] = building_type
+        return True, "Building placed successfully!"
 
-  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>
+    def update_resources(self):
+        for row in range(self.grid_size):
+            for col in range(self.grid_size):
+                building_type = self.grid[row][col]
+                if building_type:
+                    building = self.buildings[building_type]
+                    self.resources[building.produces] = self.resources.get(building.produces, 0) + 1
 
-      {/* 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>
-          ))}
+def create_game_html():
+    return """
+    <html>
+    <head>
+        <style>
+            .game-container { max-width: 800px; margin: 0 auto; padding: 1rem; }
+            .resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
+            .resource { padding: 0.75rem; border-radius: 0.5rem; }
+            .buildings { display: flex; gap: 1rem; margin-bottom: 1rem; }
+            .building { padding: 1rem; border-radius: 0.5rem; cursor: pointer; text-align: center; }
+            .building.selected { outline: 2px solid #3B82F6; }
+            .grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.25rem; background: #F3F4F6; padding: 0.5rem; border-radius: 0.5rem; }
+            .cell { aspect-ratio: 1; border-radius: 0.5rem; border: none; cursor: pointer; }
+            .message { text-align: center; color: #2563EB; font-weight: 500; margin: 0.5rem 0; }
+        </style>
+    </head>
+    <body>
+        <div class="game-container">
+            <div class="resources" id="resources"></div>
+            <div class="buildings" id="buildings"></div>
+            <div class="message" id="message"></div>
+            <div class="grid" id="grid"></div>
         </div>
-        {message && (
-          <div className="text-center text-sm font-medium text-blue-600 mb-2">
-            {message}
-          </div>
-        )}
-      </div>
+        <script>
+            let game = null;
+            let selectedBuilding = null;
+            
+            function updateUI() {
+                if (!game) return;
+                
+                // Update resources
+                const resourcesDiv = document.getElementById('resources');
+                resourcesDiv.innerHTML = Object.entries(game.resources)
+                    .map(([resource, amount]) => `
+                        <div class="resource" style="background: ${getResourceColor(resource)}">
+                            ${resource}: ${amount}
+                        </div>
+                    `).join('');
+                
+                // Update buildings selection
+                const buildingsDiv = document.getElementById('buildings');
+                buildingsDiv.innerHTML = Object.entries(game.buildings)
+                    .map(([type, data]) => `
+                        <button class="building ${type === selectedBuilding ? 'selected' : ''}" 
+                                style="background: ${data.color}"
+                                onclick="selectBuilding('${type}')">
+                            ${type}<br>
+                            Cost: ${Object.entries(data.cost).map(([r, c]) => `${c} ${r}`).join(', ')}
+                        </button>
+                    `).join('');
+                
+                // Update grid
+                const gridDiv = document.getElementById('grid');
+                gridDiv.innerHTML = game.grid.map((row, i) => 
+                    row.map((cell, j) => `
+                        <button class="cell" 
+                                style="background: ${cell ? game.buildings[cell].color : 'white'}"
+                                onclick="placeBuilding(${i}, ${j})">
+                        </button>
+                    `).join('')
+                ).join('');
+            }
+            
+            function getResourceColor(resource) {
+                switch(resource) {
+                    case 'energy': return '#FEF9C3';
+                    case 'minerals': return '#F3F4F6';
+                    case 'circuits': return '#DCFCE7';
+                    default: return 'white';
+                }
+            }
+            
+            function selectBuilding(type) {
+                selectedBuilding = type;
+                updateUI();
+            }
+            
+            function placeBuilding(row, col) {
+                if (!selectedBuilding) {
+                    document.getElementById('message').textContent = 'Select a building first!';
+                    return;
+                }
+                
+                gradioCallback([row, col, selectedBuilding]).then(response => {
+                    game = JSON.parse(response);
+                    updateUI();
+                });
+            }
+            
+            function initialize(gameState) {
+                game = JSON.parse(gameState);
+                updateUI();
+            }
+            
+            // Resource production tick
+            setInterval(() => {
+                if (game) {
+                    gradioCallback(['tick']).then(response => {
+                        game = JSON.parse(response);
+                        updateUI();
+                    });
+                }
+            }, 1000);
+        </script>
+    </body>
+    </html>
+    """
 
-      {/* 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>
-  );
-};
+def create_interface():
+    game = FactoryGame()
+    
+    def handle_action(action):
+        if isinstance(action, list) and len(action) == 3:
+            row, col, building_type = action
+            game.place_building(row, col, building_type)
+        elif action == 'tick':
+            game.update_resources()
+        return game.to_json()
+    
+    with gr.Blocks() as demo:
+        gr.HTML(create_game_html())
+        game_state = gr.State(game.to_json())
+        demo.load(lambda: game.to_json(), None, game_state)
+        demo.load(None, js="initialize(arguments[0])", inputs=[game_state])
+        callback = demo.load(handle_action, inputs=gr.State([]), outputs=game_state)
+        demo.load(None, js=f"window.gradioCallback = {callback}")
+    
+    return demo
 
-export default Game;
+if __name__ == "__main__":
+    interface = create_interface()
+    interface.launch()