Update index.html

index.html

@@ -19,8 +19,8 @@
         <gradio-file name="app.py" entrypoint>
 import gradio as gr
 import json
-from dataclasses import dataclass
-import numpy as np
+
+GRID_SIZE = 8
 
 class GameState:
     def __init__(self):
@@ -29,160 +29,177 @@ class GameState:
             "minerals": 50,
             "circuits": 0
         }
-        self.grid = [[None for _ in range(8)] for _ in range(8)]
-        self.buildings = {
-            "solarPanel": {
-                "cost": {"minerals": 10},
-                "produces": "energy",
-                "color": "#FEF08A"
-            },
-            "mineralExtractor": {
-                "cost": {"energy": 10},
-                "produces": "minerals",
-                "color": "#D1D5DB"
-            },
-            "circuitFactory": {
-                "cost": {"energy": 15, "minerals": 15},
-                "produces": "circuits",
-                "color": "#BBF7D0"
-            }
-        }
+        self.grid = [[None for _ in range(GRID_SIZE)] for _ in range(GRID_SIZE)]
+        self.message = ""
 
-game_state = GameState()
+    def to_json(self):
+        return json.dumps({
+            "resources": self.resources,
+            "grid": self.grid,
+            "message": self.message
+        })
 
-def update_game(action_type, data):
-    if action_type == "tick":
-        # Update resources based on buildings
-        for row in range(8):
-            for col in range(8):
-                building_type = game_state.grid[row][col]
-                if building_type:
-                    produces = game_state.buildings[building_type]["produces"]
-                    game_state.resources[produces] += 1
+def process_click(row, col, building_type, state_json):
+    if not state_json:
+        return GameState().to_json()
+        
+    state = json.loads(state_json)
+    game = GameState()
+    game.resources = state["resources"]
+    game.grid = state["grid"]
     
-    elif action_type == "build":
-        row, col, building_type = data
-        if game_state.grid[row][col] is not None:
-            return {"error": "Cell already occupied"}
-            
-        building = game_state.buildings[building_type]
-        # Check if can afford
-        for resource, cost in building["cost"].items():
-            if game_state.resources[resource] < cost:
-                return {"error": "Not enough resources"}
+    # Building costs
+    costs = {
+        "solarPanel": {"minerals": 10},
+        "mineralExtractor": {"energy": 10},
+        "circuitFactory": {"energy": 15, "minerals": 15}
+    }
+    
+    # Check if we can afford the building
+    if building_type in costs:
+        can_afford = True
+        for resource, cost in costs[building_type].items():
+            if game.resources[resource] < cost:
+                can_afford = False
+                game.message = f"Not enough {resource}!"
+                break
                 
-        # Pay costs
-        for resource, cost in building["cost"].items():
-            game_state.resources[resource] -= cost
+        if can_afford:
+            # Deduct resources
+            for resource, cost in costs[building_type].items():
+                game.resources[resource] -= cost
             
-        # Place building
-        game_state.grid[row][col] = building_type
+            # Place building
+            if game.grid[row][col] is None:
+                game.grid[row][col] = building_type
+                game.message = f"Placed {building_type}"
+            else:
+                game.message = "Space already occupied!"
     
-    return {
-        "resources": game_state.resources,
-        "grid": game_state.grid,
-        "buildings": game_state.buildings
-    }
+    # Produce resources from buildings
+    for r in range(GRID_SIZE):
+        for c in range(GRID_SIZE):
+            building = game.grid[r][c]
+            if building == "solarPanel":
+                game.resources["energy"] += 1
+            elif building == "mineralExtractor":
+                game.resources["minerals"] += 1
+            elif building == "circuitFactory":
+                game.resources["circuits"] += 1
+    
+    return game.to_json()
 
 def create_ui():
-    html = """
+    building_colors = {
+        "solarPanel": "#FEF08A",
+        "mineralExtractor": "#D1D5DB",
+        "circuitFactory": "#BBF7D0"
+    }
+    
+    html = f"""
     <div style="max-width: 800px; margin: 0 auto; padding: 1rem;">
-        <div id="resources" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem;"></div>
-        <div id="buildings" style="display: flex; gap: 1rem; margin-bottom: 1rem;"></div>
+        <div id="resources" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem;">
+            <div style="padding: 0.75rem; border-radius: 0.5rem; background: #FEF9C3;">Energy: <span id="energy">50</span></div>
+            <div style="padding: 0.75rem; border-radius: 0.5rem; background: #F3F4F6;">Minerals: <span id="minerals">50</span></div>
+            <div style="padding: 0.75rem; border-radius: 0.5rem; background: #DCFCE7;">Circuits: <span id="circuits">0</span></div>
+        </div>
+        
+        <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
+            <button onclick="window.selectedBuilding='solarPanel'" style="padding: 1rem; border-radius: 0.5rem; background: #FEF08A;">
+                Solar Panel<br>Cost: 10 minerals
+            </button>
+            <button onclick="window.selectedBuilding='mineralExtractor'" style="padding: 1rem; border-radius: 0.5rem; background: #D1D5DB;">
+                Mineral Extractor<br>Cost: 10 energy
+            </button>
+            <button onclick="window.selectedBuilding='circuitFactory'" style="padding: 1rem; border-radius: 0.5rem; background: #BBF7D0;">
+                Circuit Factory<br>Cost: 15 energy, 15 minerals
+            </button>
+        </div>
+        
         <div id="message" style="text-align: center; color: #2563EB; font-weight: 500; margin: 0.5rem 0;"></div>
-        <div id="grid" style="display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.25rem; background: #F3F4F6; padding: 0.5rem; border-radius: 0.5rem;"></div>
+        
+        <div id="grid" style="display: grid; grid-template-columns: repeat({GRID_SIZE}, 1fr); gap: 0.25rem; background: #F3F4F6; padding: 0.5rem; border-radius: 0.5rem;">
+            {''''.join(f'''
+                <button 
+                    onclick="placeBuilding({r}, {c})" 
+                    id="cell-{r}-{c}"
+                    style="aspect-ratio: 1; border-radius: 0.5rem; border: none; cursor: pointer; background: white;">
+                </button>
+            ''' for r in range(GRID_SIZE) for c in range(GRID_SIZE))}
+        </div>
     </div>
 
     <script>
-        let selectedBuilding = null;
+        window.selectedBuilding = null;
+        window.gameState = null;
         
-        function updateUI(gameState) {
-            // Update resources
-            document.getElementById('resources').innerHTML = Object.entries(gameState.resources)
-                .map(([resource, amount]) => `
-                    <div style="padding: 0.75rem; border-radius: 0.5rem; background: ${getResourceColor(resource)}">
-                        ${resource}: ${amount}
-                    </div>
-                `).join('');
+        function updateUI(state) {
+            window.gameState = state;
             
-            // Update buildings
-            document.getElementById('buildings').innerHTML = Object.entries(gameState.buildings)
-                .map(([type, data]) => `
-                    <button onclick="selectBuilding('${type}')"
-                            style="padding: 1rem; border-radius: 0.5rem; cursor: pointer; background: ${data.color};
-                                   ${type === selectedBuilding ? 'outline: 2px solid #3B82F6;' : ''}">
-                        ${type}<br>
-                        Cost: ${Object.entries(data.cost).map(([r, c]) => `${c} ${r}`).join(', ')}
-                    </button>
-                `).join('');
+            // Update resources
+            document.getElementById('energy').textContent = state.resources.energy;
+            document.getElementById('minerals').textContent = state.resources.minerals;
+            document.getElementById('circuits').textContent = state.resources.circuits;
             
             // Update grid
-            document.getElementById('grid').innerHTML = gameState.grid.map((row, i) => 
-                row.map((cell, j) => `
-                    <button onclick="placeBuilding(${i}, ${j})"
-                            style="aspect-ratio: 1; border-radius: 0.5rem; border: none; cursor: pointer;
-                                   background: ${cell ? gameState.buildings[cell].color : 'white'}">
-                    </button>
-                `).join('')
-            ).join('');
-        }
-        
-        function getResourceColor(resource) {
-            switch(resource) {
-                case 'energy': return '#FEF9C3';
-                case 'minerals': return '#F3F4F6';
-                case 'circuits': return '#DCFCE7';
-                default: return 'white';
-            }
-        }
+            for (let r = 0; r < {GRID_SIZE}; r++) {{
+                for (let c = 0; c < {GRID_SIZE}; c++) {{
+                    const cell = document.getElementById(`cell-${{r}}-${{c}}`);
+                    const building = state.grid[r][c];
+                    cell.style.background = building ? buildingColors[building] : 'white';
+                }}
+            }}
+            
+            // Update message
+            document.getElementById('message').textContent = state.message;
+        }}
         
-        function selectBuilding(type) {
-            selectedBuilding = type;
-            syncGameState("tick", null);
-        }
+        const buildingColors = {json.dumps(building_colors)};
         
-        function placeBuilding(row, col) {
-            if (!selectedBuilding) {
+        function placeBuilding(row, col) {{
+            if (!window.selectedBuilding) {{
                 document.getElementById('message').textContent = 'Select a building first!';
                 return;
-            }
-            syncGameState("build", [row, col, selectedBuilding]);
-        }
-        
-        // Resource production tick
-        setInterval(() => syncGameState("tick", null), 1000);
+            }}
+            send_click(row, col, window.selectedBuilding, JSON.stringify(window.gameState));
+        }}
         
-        // Initial state
-        syncGameState("tick", null);
+        // Production tick
+        setInterval(() => {{
+            if (window.gameState) {{
+                send_click(-1, -1, null, JSON.stringify(window.gameState));
+            }}
+        }}, 1000);
     </script>
     """
     return gr.HTML(html)
 
-def handle_action(action_type, data):
-    return json.dumps(update_game(action_type, data))
-
 with gr.Blocks() as demo:
+    state = gr.State()
+    click_handler = gr.Interface(
+        fn=process_click,
+        inputs=[
+            gr.Number(label="Row"),
+            gr.Number(label="Col"),
+            gr.Text(label="Building"),
+            gr.Text(label="State")
+        ],
+        outputs=gr.Text(label="New State"),
+        live=True
+    )
+    
     ui = create_ui()
-    action = gr.State("tick")
-    data = gr.State(None)
     
-    demo.load(lambda: handle_action("tick", None), None, _js="(o) => { updateUI(JSON.parse(o)) }")
+    def update_ui(value):
+        return value
     
-    demo.load(None, None, _js="""
-        function(arg) {
-            window.syncGameState = function(actionType, actionData) {
-                gradioApp().querySelector("gradio-app").props.action_type = actionType;
-                gradioApp().querySelector("gradio-app").props.action_data = actionData;
-                updateUI(JSON.parse(handle_action(actionType, actionData)));
-            }
-        }
-    """)
+    click_handler.load(lambda: GameState().to_json())
+    demo.load(lambda: None, None, _js="() => { window.send_click = (row, col, building, state) => { "+click_handler.jsfn+"(row, col, building, state).then((v) => updateUI(JSON.parse(v))) } }")
 
 demo.launch()
         </gradio-file>
 
         <gradio-requirements>
-# No additional requirements needed
         </gradio-requirements>
     </gradio-lite>
 </body>