Update app.py

app.py

@@ -6,6 +6,43 @@ def update_ui(code):
         return f"""
         <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
             {code}
+            <script>
+                // Ensure the game reinitializes when the code is updated
+                if (typeof gameLoop !== 'undefined') {{
+                    clearInterval(gameLoop);
+                }}
+                let canvas = document.getElementById('gameCanvas');
+                let ctx = canvas.getContext('2d');
+                let snake = [{x: 10, y: 10}];
+                let food = {{x: 15, y: 15}};
+                let gameLoop;
+
+                function init() {{
+                    gameLoop = setInterval(game, 100);
+                }}
+
+                function game() {{
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    snake.unshift({{x: snake[0].x, y: snake[0].y}});
+                    snake[0].x += 1; // Simple movement for demonstration
+                    if(snake[0].x > 39) snake[0].x = 0; // Wrap around
+                    ctx.fillStyle = "green";
+                    snake.forEach(part => {{
+                        ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
+                    }});
+                    ctx.fillStyle = "red";
+                    ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
+                    if(snake[0].x == food.x && snake[0].y == food.y) {{
+                        food.x = Math.floor(Math.random() * 40);
+                        food.y = Math.floor(Math.random() * 40);
+                    }} else {{
+                        snake.pop();
+                    }}
+                }}
+
+                // Start the game
+                init();
+            </script>
         </div>
         """, None
     except Exception as e:
@@ -26,7 +63,7 @@ def interface():
             inputs=code_input, 
             outputs=[ui_preview, error_output]
         )
-
+        
         # Add example section
         with gr.Accordion("HTML/CSS/JS Code Examples", open=False):
             with gr.Column():
@@ -63,42 +100,6 @@ def interface():
                         #gameCanvas { border: 1px solid black; }
                     </style>
                     <canvas id="gameCanvas" width="400" height="400"></canvas>
-                    <script>
-                        let canvas = document.getElementById('gameCanvas');
-                        let ctx = canvas.getContext('2d');
-                        let snake = [{x: 10, y: 10}];
-                        let food = {x: 15, y: 15};
-                        let gameLoop;
-
-                        function init() {
-                            gameLoop = setInterval(game, 100);
-                        }
-
-                        function game() {
-                            ctx.clearRect(0, 0, canvas.width, canvas.height);
-                            snake.unshift({x: snake[0].x, y: snake[0].y});
-                            snake[0].x += 1; // Simple movement for demonstration
-                            if(snake[0].x > 39) snake[0].x = 0; // Wrap around
-
-                            ctx.fillStyle = "green";
-                            snake.forEach(part => {
-                                ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
-                            });
-
-                            ctx.fillStyle = "red";
-                            ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
-
-                            if(snake[0].x == food.x && snake[0].y == food.y) {
-                                food.x = Math.floor(Math.random() * 40);
-                                food.y = Math.floor(Math.random() * 40);
-                            } else {
-                                snake.pop();
-                            }
-                        }
-
-                        // Start the game
-                        init();
-                    </script>
                     """, "Snake Game"),
                 ]