Update app.py

app.py

@@ -1,7 +1,62 @@
 import streamlit as st
 from streamlit.components.v1 import html
+import random
+import json
 
-# Define the p5.js sketch code as a string
+# Shared state for multiplayer
+if 'game_state' not in st.session_state:
+    st.session_state.game_state = {
+        'grid': [['empty' for _ in range(15)] for _ in range(20)],
+        'buildings': [],
+        'players': {},
+        'train': {'x': 0, 'y': 5 * 40, 'dir': 1},
+        'monster_mode': False,
+        'current_monster': 'Godzilla',
+        'monster_x': 400,
+        'monster_y': 300
+    }
+
+# Random player names
+random_names = [
+    "SkyWalker", "ForestRanger", "CityBuilder", "MonsterTamer", "RailMaster",
+    "PlantWhisperer", "UrbanWizard", "NatureSage", "GridLord", "EcoWarrior"
+]
+
+# Story plot generator beginnings
+story_beginnings = [
+    ("🏠", "In a bustling city nestled between towering mountains,"),
+    ("🏃", "A lone figure darted through the streets as the sun began to set,"),
+    ("🧠", "Thoughts raced through their mind, planning the next move,"),
+    ("😲", "Shock rippled through the crowd as the ground trembled,"),
+    ("💬", "'We need to act now!' someone shouted over the chaos,"),
+    ("🔍", "A closer look revealed hidden secrets in the city’s core,"),
+    ("🎬", "A train screeched into the station, unloading its mysteries,"),
+    ("🏞️", "Lush greenery framed the skyline, a stark contrast to the urban sprawl,"),
+    ("⏩", "Events unfolded rapidly, leaving no time to breathe,"),
+    ("👁️", "The horizon glowed with an eerie, captivating light,"),
+    ("👂", "Whispers of wind carried tales of forgotten lands,"),
+    ("🗣️", "A juicy rumor spread like wildfire among the citizens,"),
+    ("🤸", "With a simple leap, the adventure began anew,"),
+    ("🧩", "The essentials of survival lay scattered across the grid,"),
+    ("🚶", "A slow walk revealed the city’s heartbeat,"),
+    ("🌊", "A journey unfolded, waves of change crashing in,"),
+    ("🎯", "Focus sharpened as the goal came into view,"),
+    ("🤔", "Neurotic thoughts plagued the planner’s restless mind,")
+]
+
+# Witty nature labels
+nature_labels = [
+    "Whispering Winds", "Sassy Sunlight", "Grumpy Gravel", "Chatty Clouds",
+    "Pensive Pines", "Witty Wetlands", "Sneaky Streams", "Bouncy Breezes",
+    "Daring Dewdrops", "Cheeky Crags"
+]
+
+# Emoji palette
+plants = ["🌱", "🌲", "🌳", "🌴", "🌵", "🌾", "🌿", "🍀", "🍁", "🍂"]
+buildings = ["🏠", "🏡", "🏢", "🏣", "🏤", "🏥", "🏦", "🏨", "🏩", "🏪"]
+creatures = ["🐾", "🐱", "🐶", "🐭", "🐰", "🦊", "🐻", "🐷", "🐮", "🐸"]
+
+# p5.js code
 p5js_code = """
 let gridSize = 40;
 let grid = [];
@@ -10,25 +65,21 @@ let train = { x: 0, y: 0, dir: 1 };
 let monsterMode = false;
 let currentMonster = 'Godzilla';
 let monsterX, monsterY;
-let angle = PI / 6; // 3D perspective angle
+let angle = PI / 6;
 let debugText = "Loading...";
+let playerId = null;
 
 function setup() {
   createCanvas(800, 600);
-  for (let i = 0; i < width / gridSize; i++) {
-    grid[i] = [];
-    for (let j = 0; j < height / gridSize; j++) {
-      grid[i][j] = 'empty';
-    }
-  }
-  for (let i = 0; i < width / gridSize; i++) {
-    grid[i][5] = 'track';
-  }
-  train.x = 0;
-  train.y = 5 * gridSize;
-  monsterX = width / 2;
-  monsterY = height / 2;
-  debugText = "Setup complete. Click to build, use M/G/R/T keys.";
+  grid = JSON.parse(document.getElementById('game_state').innerHTML);
+  buildings = JSON.parse(document.getElementById('buildings').innerHTML);
+  train = JSON.parse(document.getElementById('train').innerHTML);
+  monsterMode = JSON.parse(document.getElementById('monster_mode').innerHTML);
+  currentMonster = document.getElementById('current_monster').innerHTML;
+  monsterX = parseInt(document.getElementById('monster_x').innerHTML);
+  monsterY = parseInt(document.getElementById('monster_y').innerHTML);
+  playerId = document.getElementById('player_id').innerHTML;
+  debugText = `Player ${playerId} joined. Click to build!`;
 }
 
 function draw() {
@@ -38,7 +89,8 @@ function draw() {
   drawTrain();
   if (monsterMode) drawMonster();
   fill(0);
-  text(debugText, 10, 20); // Debug feedback
+  textSize(12);
+  text(debugText, 10, 20);
 }
 
 function drawGrid() {
@@ -55,6 +107,10 @@ function drawGrid() {
       vertex(x + gridSize * cos(angle), y + gridSize * sin(angle) - z);
       vertex(x + gridSize * (1 - cos(angle)), y + gridSize * sin(angle) - z);
       endShape(CLOSE);
+      if (grid[i][j] !== 'empty' && grid[i][j] !== 'track') {
+        textSize(20);
+        text(grid[i][j], x + 10, y + 20 - z);
+      }
     }
   }
 }
@@ -138,12 +194,21 @@ function mousePressed() {
   let j = floor(mouseY / gridSize);
   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})`;
+      let selectedEmoji = document.getElementById('selected_emoji').innerHTML;
+      if (selectedEmoji.startsWith('🏠') || selectedEmoji.startsWith('🏡') || selectedEmoji.startsWith('🏢') || 
+          selectedEmoji.startsWith('🏣') || selectedEmoji.startsWith('🏤') || selectedEmoji.startsWith('🏥') || 
+          selectedEmoji.startsWith('🏦') || selectedEmoji.startsWith('🏨') || selectedEmoji.startsWith('🏩') || 
+          selectedEmoji.startsWith('🏪')) {
+        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';
+      } else {
+        grid[i][j] = selectedEmoji;
+      }
+      debugText = `Player ${playerId} placed ${selectedEmoji} at (${i}, ${j})`;
+      updateState();
     }
   }
 }
@@ -152,36 +217,81 @@ function keyPressed() {
   if (key === 'm' || key === 'M') {
     monsterMode = !monsterMode;
     debugText = `Monster Mode: ${monsterMode}`;
+    updateState();
   }
   if (key === 'g' || key === 'G') {
     currentMonster = 'Godzilla';
     debugText = "Monster set to Godzilla";
+    updateState();
   }
   if (key === 'r' || key === 'R') {
     currentMonster = 'GiantRobot';
     debugText = "Monster set to Giant Robot";
+    updateState();
   }
   if (key === 't' || key === 'T') {
     train.dir *= -1;
     debugText = "Train direction reversed";
+    updateState();
   }
 }
 
-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";
-};
+function updateState() {
+  fetch('/update_state', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      grid: grid,
+      buildings: buildings,
+      train: train,
+      monster_mode: monsterMode,
+      current_monster: currentMonster,
+      monster_x: monsterX,
+      monster_y: monsterY,
+      player_id: playerId
+    })
+  });
+}
 """
 
-# Full HTML content with embedded p5.js
+# Player selection
+if 'player_id' not in st.session_state:
+    st.session_state.player_id = random.choice(random_names)
+player_id = st.sidebar.selectbox("Choose Player", random_names, index=random_names.index(st.session_state.player_id))
+st.session_state.player_id = player_id
+
+# Story plot generator
+st.sidebar.subheader("📜 Story Plot")
+story_emoji, story_text = random.choice(story_beginnings)
+st.sidebar.write(f"{story_emoji} {story_text} {random.choice(nature_labels)} stirred the scene.")
+
+# Palette grid
+st.sidebar.subheader("🎨 Palette")
+cols = st.sidebar.columns(5)
+selected_emoji = st.session_state.get('selected_emoji', plants[0])
+
+for i, emoji in enumerate(plants + buildings + creatures):
+    col = cols[i % 5]
+    if col.button(emoji, key=f"emoji_{i}"):
+        st.session_state.selected_emoji = emoji
+        selected_emoji = emoji
+
+# Scoreboard
+if player_id not in st.session_state.game_state['players']:
+    st.session_state.game_state['players'][player_id] = 0
+for b in st.session_state.game_state['buildings']:
+    if b.get('player') == player_id:
+        st.session_state.game_state['players'][player_id] += 1
+for i in range(len(st.session_state.game_state['grid'])):
+    for j in range(len(st.session_state.game_state['grid'][i])):
+        if st.session_state.game_state['grid'][i][j] not in ['empty', 'track', 'building']:
+            if st.session_state.game_state['grid'][i][j] in plants + creatures:
+                st.session_state.game_state['players'][player_id] += 1
+st.sidebar.subheader("🏆 Scores")
+for p, s in st.session_state.game_state['players'].items():
+    st.sidebar.write(f"{p}: {s}")
+
+# HTML content
 html_content = f"""
 <!DOCTYPE html>
 <html>
@@ -205,6 +315,15 @@ html_content = f"""
     <button onclick="reverseTrain()">Reverse Train (T)</button>
   </div>
   <div id="sketch-holder"></div>
+  <div id="game_state" style="display:none">{json.dumps(st.session_state.game_state['grid'])}</div>
+  <div id="buildings" style="display:none">{json.dumps(st.session_state.game_state['buildings'])}</div>
+  <div id="train" style="display:none">{json.dumps(st.session_state.game_state['train'])}</div>
+  <div id="monster_mode" style="display:none">{json.dumps(st.session_state.game_state['monster_mode'])}</div>
+  <div id="current_monster" style="display:none">{st.session_state.game_state['current_monster']}</div>
+  <div id="monster_x" style="display:none">{st.session_state.game_state['monster_x']}</div>
+  <div id="monster_y" style="display:none">{st.session_state.game_state['monster_y']}</div>
+  <div id="player_id" style="display:none">{player_id}</div>
+  <div id="selected_emoji" style="display:none">{selected_emoji}</div>
 
   <script>
     {p5js_code}
@@ -217,18 +336,23 @@ html_content = f"""
 </html>
 """
 
-# Streamlit app with sidebar
-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 info (no JS calls)
-with st.sidebar:
-    st.header("Controls")
-    st.subheader("🏡 Buildings")
-    st.write("Click to randomly place: Residential, Commercial, Industrial, School, Power Plant")
-    st.subheader("👾 Monsters")
-    st.write("M: Toggle Monster Mode\nG: Godzilla\nR: Giant Robot")
-    st.subheader("🚂 Train")
-    st.write("T: Reverse Train Direction")
-
-html(html_content, height=700)
+# Streamlit app
+st.title("SimCity 2000 Multiplayer Adventure")
+st.write(f"Player: {player_id}. Click to place {selected_emoji}. Use M/G/R/T keys.")
+
+html(html_content, height=700)
+
+# Note: Streamlit doesn't natively support POST endpoints, so this is a placeholder for state update logic
+# In a real app, you'd need a backend (e.g., Flask) to handle POST requests for true multiplayer sync
+def update_state(data):
+    st.session_state.game_state['grid'] = data['grid']
+    st.session_state.game_state['buildings'] = data['buildings']
+    st.session_state.game_state['train'] = data['train']
+    st.session_state.game_state['monster_mode'] = data['monster_mode']
+    st.session_state.game_state['current_monster'] = data['current_monster']
+    st.session_state.game_state['monster_x'] = data['monster_x']
+    st.session_state.game_state['monster_y'] = data['monster_y']
+    if data['player_id'] not in st.session_state.game_state['players']:
+        st.session_state.game_state['players'][data['player_id']] = 0
+    st.session_state.game_state['players'][data['player_id']] += 1
+    st.rerun()