Spaces:

awacke1
/

SimFactory2

Running

App Files Files Community

awacke1 commited on Nov 12, 2024

Commit

c4e4866

verified ·

1 Parent(s): aef21d2

Update index.html

Browse files

Files changed (1) hide show

index.html +167 -185

index.html CHANGED Viewed

@@ -1,207 +1,189 @@
 import gradio as gr
 import json
-from dataclasses import dataclass, asdict
 import numpy as np
-@dataclass
-class Building:
-    type: str
-    color: str
-    cost: dict
-    produces: str
-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"
-            )
         }
-    def to_json(self):
-        return json.dumps({
-            "grid": self.grid,
-            "resources": self.resources,
-            "buildings": {k: asdict(v) for k, v in self.buildings.items()}
-        })
-    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())
-    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!"
-        # Deduct costs
-        building = self.buildings[building_type]
-        for resource, cost in building.cost.items():
-            self.resources[resource] -= cost
-        # Place building
-        self.grid[row][col] = building_type
-        return True, "Building placed successfully!"
-    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
-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>
-        <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>
     """
-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
-if __name__ == "__main__":
-    interface = create_interface()
-    interface.launch()

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Factory Game</title>
+    <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <gradio-lite>
+        <gradio-file name="app.py" entrypoint>
 import gradio as gr
 import json
+from dataclasses import dataclass
 import numpy as np
+class GameState:
     def __init__(self):
+        self.resources = {
+            "energy": 50,
+            "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"
+            }
         }
+game_state = GameState()
+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
+    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"}
+        # Pay costs
+        for resource, cost in building["cost"].items():
+            game_state.resources[resource] -= cost
+        # Place building
+        game_state.grid[row][col] = building_type
+    return {
+        "resources": game_state.resources,
+        "grid": game_state.grid,
+        "buildings": game_state.buildings
+    }
+def create_ui():
+    html = """
+    <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="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>
+    <script>
+        let selectedBuilding = 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('');
+            // 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 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';
             }
+        }
+        function selectBuilding(type) {
+            selectedBuilding = type;
+            syncGameState("tick", null);
+        }
+        function placeBuilding(row, col) {
+            if (!selectedBuilding) {
+                document.getElementById('message').textContent = 'Select a building first!';
+                return;
             }
+            syncGameState("build", [row, col, selectedBuilding]);
+        }
+        // Resource production tick
+        setInterval(() => syncGameState("tick", null), 1000);
+        // Initial state
+        syncGameState("tick", null);
+    </script>
     """
+    return gr.HTML(html)
+def handle_action(action_type, data):
+    return json.dumps(update_game(action_type, data))
+with gr.Blocks() as demo:
+    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)) }")
+    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)));
+            }
+        }
+    """)
+demo.launch()
+        </gradio-file>
+        <gradio-requirements>
+# No additional requirements needed
+        </gradio-requirements>
+    </gradio-lite>
+</body>
+</html>