Deploy Myco from CI

ui/interface.py

@@ -1,30 +1,36 @@
 import gradio as gr
-import html
 from game.engine import get_myco_narrative
 
+# Exported CSS for use in your app.launch(css=MYCO_CSS)
+MYCO_CSS = """
+#garden-canvas { 
+    width: 100%; 
+    height: 400px; 
+    background: linear-gradient(180deg, #1a2b4c 0%, #2a4c5e 50%, #4a7c59 100%); 
+    border-radius: 12px; 
+}
+#narrative-box { 
+    font-family: 'Courier New', monospace; 
+    font-size: 15px; 
+    color: #52ff6b; 
+    background: #090e0b;
+    padding: 15px; 
+    border-radius: 8px; 
+    border: 1px solid rgba(82, 255, 107, 0.3);
+    text-align: center;
+    margin-top: 10px;
+}
+"""
+
 def render_shroom_tab():
-    with gr.Blocks(css="""
-        #garden-canvas { width: 100%; height: 400px; background: linear-gradient(180deg, #1a2b4c 0%, #2a4c5e 50%, #4a7c59 100%); border-radius: 12px; }
-        #narrative-box { 
-            font-family: 'Courier New', monospace; 
-            font-size: 15px; 
-            color: #52ff6b; 
-            background: #090e0b;
-            padding: 15px; 
-            border-radius: 8px; 
-            border: 1px solid rgba(82, 255, 107, 0.3);
-            text-align: center;
-            margin-top: 10px;
-        }
-    """) as demo:
-        
+    with gr.Blocks() as demo:
         # 1. The Canvas
         gr.HTML("<canvas id='garden-canvas'></canvas>")
         
         # 2. The Narrative
         narrative = gr.Markdown(value="Waiting for the forest to wake...", elem_id="narrative-box")
         
-        # 3. Refresh Timer
+        # 3. Timer (Updates every 20s via game engine)
         gr.Timer(20).tick(fn=get_myco_narrative, outputs=narrative)
         
         # 4. Injected Animation Logic
@@ -35,8 +41,8 @@ def render_shroom_tab():
                 const ctx = canvas.getContext('2d');
                 
                 function resize() {
-                    canvas.width = canvas.clientWidth;
-                    canvas.height = canvas.clientHeight;
+                    canvas.width = canvas.parentElement.clientWidth;
+                    canvas.height = 400;
                 }
                 window.addEventListener('resize', resize);
                 resize();
@@ -57,15 +63,18 @@ def render_shroom_tab():
                     
                     ctx.fillStyle = '#4a3b32';
                     const isBlinking = (time % m.blinkInterval) < 150;
-                    if (isBlinking) { ctx.fillRect(-7, 12, 4, 2); ctx.fillRect(3, 12, 4, 2); }
-                    else { ctx.beginPath(); ctx.arc(-5, 12, 2.5, 0, Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc(5, 12, 2.5, 0, Math.PI*2); ctx.fill(); }
-                    
+                    if (isBlinking) { 
+                        ctx.fillRect(-7, 12, 4, 2); 
+                        ctx.fillRect(3, 12, 4, 2); 
+                    } else { 
+                        ctx.beginPath(); ctx.arc(-5, 12, 2.5, 0, Math.PI*2); ctx.fill(); 
+                        ctx.beginPath(); ctx.arc(5, 12, 2.5, 0, Math.PI*2); ctx.fill(); 
+                    }
                     ctx.restore();
                 }
 
                 function animate(time) {
                     ctx.clearRect(0, 0, canvas.width, canvas.height);
-                    
                     if (Math.random() < 0.02 && mushrooms.length < 20) {
                         mushrooms.push({
                             x: Math.random() * canvas.width,
@@ -77,7 +86,6 @@ def render_shroom_tab():
                             life: 500
                         });
                     }
-
                     mushrooms.forEach((m, i) => {
                         m.life--;
                         m.currentSize += (m.targetSize - m.currentSize) * 0.05;
@@ -85,7 +93,6 @@ def render_shroom_tab():
                         if (m.life < 0) m.targetSize = 0;
                         if (m.life < 0 && m.currentSize < 0.05) mushrooms.splice(i, 1);
                     });
-
                     requestAnimationFrame(animate);
                 }
                 animate(0);