Update app.py

app.py

@@ -1,7 +1,7 @@
 import streamlit as st
 from streamlit.components.v1 import html
 
-# Define the enhanced p5.js sketch code as a string
+# Define the p5.js sketch code as a string
 p5js_code = """
 let gridSize = 40;
 let grid = [];
@@ -11,6 +11,7 @@ let monsterMode = false;
 let currentMonster = 'Godzilla';
 let monsterX, monsterY;
 let angle = PI / 6; // 3D perspective angle
+let debugText = "Loading...";
 
 function setup() {
   createCanvas(800, 600);
@@ -27,6 +28,7 @@ function setup() {
   train.y = 5 * gridSize;
   monsterX = width / 2;
   monsterY = height / 2;
+  debugText = "Setup complete. Click to build, use M/G/R/T keys.";
 }
 
 function draw() {
@@ -35,6 +37,8 @@ function draw() {
   drawBuildings();
   drawTrain();
   if (monsterMode) drawMonster();
+  fill(0);
+  text(debugText, 10, 20); // Debug feedback
 }
 
 function drawGrid() {
@@ -42,7 +46,7 @@ function drawGrid() {
     for (let j = 0; j < grid[i].length; j++) {
       let x = i * gridSize;
       let y = j * gridSize;
-      let z = j * gridSize * sin(angle); // 3D depth effect
+      let z = j * gridSize * sin(angle);
       fill(grid[i][j] === 'track' ? 100 : 150, 200, 150);
       stroke(0);
       beginShape();
@@ -63,23 +67,23 @@ function drawBuildings() {
     fill(b.color);
     noStroke();
     beginShape();
-    if (b.type === 'Residential') { // House with chimney
+    if (b.type === 'Residential') {
       vertex(x + 10, y + 30 - z); vertex(x + 20, y + 10 - z); vertex(x + 30, y + 30 - z);
       vertex(x + 25, y + 30 - z); vertex(x + 25, y + 35 - z); vertex(x + 15, y + 35 - z);
       vertex(x + 15, y + 30 - z); vertex(x + 17, y + 25 - z); vertex(x + 23, y + 25 - z);
-    } else if (b.type === 'Commercial') { // Skyscraper with windows
+    } else if (b.type === 'Commercial') {
       vertex(x + 10, y + 35 - z); vertex(x + 15, y + 15 - z); vertex(x + 25, y + 15 - z);
       vertex(x + 30, y + 35 - z); vertex(x + 27, y + 35 - z); vertex(x + 27, y + 20 - z);
       vertex(x + 13, y + 20 - z); vertex(x + 13, y + 35 - z);
-    } else if (b.type === 'Industrial') { // Factory with smokestack
+    } else if (b.type === 'Industrial') {
       vertex(x + 5, y + 35 - z); vertex(x + 15, y + 20 - z); vertex(x + 25, y + 20 - z);
       vertex(x + 35, y + 35 - z); vertex(x + 30, y + 35 - z); vertex(x + 30, y + 15 - z);
       vertex(x + 33, y + 15 - z); vertex(x + 33, y + 35 - z);
-    } else if (b.type === 'School') { // School with flagpole
+    } else if (b.type === 'School') {
       vertex(x + 5, y + 35 - z); vertex(x + 10, y + 20 - z); vertex(x + 30, y + 20 - z);
       vertex(x + 35, y + 35 - z); vertex(x + 25, y + 35 - z); vertex(x + 25, y + 10 - z);
       vertex(x + 27, y + 10 - z); vertex(x + 27, y + 35 - z);
-    } else if (b.type === 'PowerPlant') { // Power plant with turbines
+    } else if (b.type === 'PowerPlant') {
       vertex(x + 5, y + 35 - z); vertex(x + 15, y + 15 - z); vertex(x + 25, y + 15 - z);
       vertex(x + 35, y + 35 - z); vertex(x + 30, y + 35 - z); vertex(x + 30, y + 25 - z);
       vertex(x + 20, y + 25 - z); vertex(x + 20, y + 35 - z);
@@ -109,13 +113,13 @@ function drawMonster() {
   fill(255, 0, 0);
   noStroke();
   beginShape();
-  if (currentMonster === 'Godzilla') { // Detailed Godzilla with spines
+  if (currentMonster === 'Godzilla') {
     vertex(monsterX, monsterY + 40 - mz); vertex(monsterX + 10, monsterY + 20 - mz);
     vertex(monsterX + 20, monsterY - mz); vertex(monsterX + 30, monsterY + 20 - mz);
     vertex(monsterX + 40, monsterY + 40 - mz); vertex(monsterX + 35, monsterY + 50 - mz);
     vertex(monsterX + 25, monsterY + 60 - mz); vertex(monsterX + 15, monsterY + 50 - mz);
     vertex(monsterX + 20, monsterY + 40 - mz); vertex(monsterX + 25, monsterY + 30 - mz);
-  } else if (currentMonster === 'GiantRobot') { // Detailed Robot with joints
+  } else if (currentMonster === 'GiantRobot') {
     vertex(monsterX, monsterY + 40 - mz); vertex(monsterX + 10, monsterY + 20 - mz);
     vertex(monsterX + 15, monsterY - mz); vertex(monsterX + 25, monsterY - mz);
     vertex(monsterX + 30, monsterY + 20 - mz); vertex(monsterX + 40, monsterY + 40 - mz);
@@ -132,25 +136,49 @@ function drawMonster() {
 function mousePressed() {
   let i = floor(mouseX / gridSize);
   let j = floor(mouseY / gridSize);
-  if (grid[i][j] === 'empty' && !monsterMode) {
-    let types = ['Residential', 'Commercial', 'Industrial', 'School', 'PowerPlant'];
-    let colors = [[0, 200, 0], [0, 0, 200], [200, 200, 0], [200, 0, 200], [100, 100, 100]];
-    let idx = floor(random(5));
-    buildings.push({ x: i, y: j, type: types[idx], color: colors[idx] });
-    grid[i][j] = 'building';
+  if (i >= 0 && i < grid.length && j >= 0 && j < grid[0].length) {
+    if (grid[i][j] === 'empty' && !monsterMode) {
+      let types = ['Residential', 'Commercial', 'Industrial', 'School', 'PowerPlant'];
+      let colors = [[0, 200, 0], [0, 0, 200], [200, 200, 0], [200, 0, 200], [100, 100, 100]];
+      let idx = floor(random(5));
+      buildings.push({ x: i, y: j, type: types[idx], color: colors[idx] });
+      grid[i][j] = 'building';
+      debugText = `Placed ${types[idx]} at (${i}, ${j})`;
+    }
   }
 }
 
 function keyPressed() {
-  if (key === 'm' || key === 'M') monsterMode = !monsterMode;
-  if (key === 'g' || key === 'G') currentMonster = 'Godzilla';
-  if (key === 'r' || key === 'R') currentMonster = 'GiantRobot';
-  if (key === 't' || key === 'T') train.dir *= -1;
+  if (key === 'm' || key === 'M') {
+    monsterMode = !monsterMode;
+    debugText = `Monster Mode: ${monsterMode}`;
+  }
+  if (key === 'g' || key === 'G') {
+    currentMonster = 'Godzilla';
+    debugText = "Monster set to Godzilla";
+  }
+  if (key === 'r' || key === 'R') {
+    currentMonster = 'GiantRobot';
+    debugText = "Monster set to Giant Robot";
+  }
+  if (key === 't' || key === 'T') {
+    train.dir *= -1;
+    debugText = "Train direction reversed";
+  }
 }
 
-window.toggleMonsterMode = function() { monsterMode = !monsterMode; };
-window.setMonster = function(monster) { currentMonster = monster; };
-window.reverseTrain = function() { train.dir *= -1; };
+window.toggleMonsterMode = function() { 
+  monsterMode = !monsterMode; 
+  debugText = `Monster Mode: ${monsterMode}`;
+};
+window.setMonster = function(monster) { 
+  currentMonster = monster; 
+  debugText = `Monster set to ${monster}`;
+};
+window.reverseTrain = function() { 
+  train.dir *= -1; 
+  debugText = "Train direction reversed";
+};
 """
 
 # Full HTML content with embedded p5.js
@@ -193,27 +221,14 @@ html_content = f"""
 st.title("SimCity 2000 with Monster Mode")
 st.write("Click to place buildings. Use keys: M (monster), G (Godzilla), R (Robot), T (train reverse).")
 
-# Sidebar with emoji-grouped controls
+# Sidebar with emoji-grouped info (no JS calls)
 with st.sidebar:
     st.header("Controls")
-    
-    # Building Controls
     st.subheader("🏡 Buildings")
-    st.write("Click on the grid to randomly place buildings (Residential, Commercial, Industrial, School, Power Plant).")
-    
-    # Monster Controls
+    st.write("Click to randomly place: Residential, Commercial, Industrial, School, Power Plant")
     st.subheader("👾 Monsters")
-    if st.button("Toggle Monster Mode (M)", key="monster_toggle"):
-        st.markdown('<script>toggleMonster()</script>', unsafe_allow_html=True)
-    monster_choice = st.selectbox("Choose Monster", ["Godzilla (G)", "Giant Robot (R)"], index=0)
-    if monster_choice.startswith("Godzilla"):
-        st.markdown('<script>setMonster("Godzilla")</script>', unsafe_allow_html=True)
-    else:
-        st.markdown('<script>setMonster("GiantRobot")</script>', unsafe_allow_html=True)
-    
-    # Train Controls
+    st.write("M: Toggle Monster Mode\nG: Godzilla\nR: Giant Robot")
     st.subheader("🚂 Train")
-    if st.button("Reverse Train (T)", key="train_reverse"):
-        st.markdown('<script>reverseTrain()</script>', unsafe_allow_html=True)
+    st.write("T: Reverse Train Direction")
 
 html(html_content, height=700)