Update app.py

app.py

@@ -2,11 +2,12 @@ import streamlit as st
 from streamlit.components.v1 import html
 import random
 import json
+import math
 
 # 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)],
+        'hex_grid': [[{'type': 'empty', 'emoji': ''} for _ in range(15)] for _ in range(20)],  # 20x15 hex grid
         'buildings': [],
         'players': {},
         'train': {'x': 0, 'y': 5 * 40, 'dir': 1},
@@ -56,10 +57,10 @@ plants = ["🌱", "🌲", "🌳", "🌴", "🌵", "🌾", "🌿", "🍀", "🍁"
 buildings = ["🏠", "🏡", "🏢", "🏣", "🏤", "🏥", "🏦", "🏨", "🏩", "🏪"]
 creatures = ["🐾", "🐱", "🐶", "🐭", "🐰", "🦊", "🐻", "🐷", "🐮", "🐸"]
 
-# p5.js code
+# p5.js code for hex grid and gameplay
 p5js_code = """
-let gridSize = 40;
-let grid = [];
+let hexSize = 40;
+let hexGrid = [];
 let buildings = [];
 let train = { x: 0, y: 0, dir: 1 };
 let monsterMode = false;
@@ -68,10 +69,11 @@ let monsterX, monsterY;
 let angle = PI / 6;
 let debugText = "Loading...";
 let playerId = null;
+const sqrt3 = Math.sqrt(3);
 
 function setup() {
   createCanvas(800, 600);
-  grid = JSON.parse(document.getElementById('game_state').innerHTML);
+  hexGrid = 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);
@@ -80,11 +82,15 @@ function setup() {
   monsterY = parseInt(document.getElementById('monster_y').innerHTML);
   playerId = document.getElementById('player_id').innerHTML;
   debugText = `Player ${playerId} joined. Click to build!`;
+  // Set train track on row 5
+  for (let i = 0; i < hexGrid.length; i++) {
+    hexGrid[i][5].type = 'track';
+  }
 }
 
 function draw() {
   background(220);
-  drawGrid();
+  drawHexGrid();
   drawBuildings();
   drawTrain();
   if (monsterMode) drawMonster();
@@ -93,23 +99,23 @@ function draw() {
   text(debugText, 10, 20);
 }
 
-function drawGrid() {
-  for (let i = 0; i < grid.length; i++) {
-    for (let j = 0; j < grid[i].length; j++) {
-      let x = i * gridSize;
-      let y = j * gridSize;
-      let z = j * gridSize * sin(angle);
-      fill(grid[i][j] === 'track' ? 100 : 150, 200, 150);
+function drawHexGrid() {
+  for (let i = 0; i < hexGrid.length; i++) {
+    for (let j = 0; j < hexGrid[i].length; j++) {
+      let x = i * hexSize * 1.5;
+      let y = j * hexSize * sqrt3 + (i % 2 === 1 ? hexSize * sqrt3 / 2 : 0);
+      let z = j * hexSize * sin(angle);
+      fill(hexGrid[i][j].type === 'track' ? 100 : 150, 200, 150);
       stroke(0);
       beginShape();
-      vertex(x, y - z);
-      vertex(x + gridSize, y - z);
-      vertex(x + gridSize * cos(angle), y + gridSize * sin(angle) - z);
-      vertex(x + gridSize * (1 - cos(angle)), y + gridSize * sin(angle) - z);
+      for (let k = 0; k < 6; k++) {
+        let angleRad = PI / 3 * k;
+        vertex(x + hexSize * cos(angleRad), y + hexSize * sin(angleRad) - z);
+      }
       endShape(CLOSE);
-      if (grid[i][j] !== 'empty' && grid[i][j] !== 'track') {
+      if (hexGrid[i][j].emoji) {
         textSize(20);
-        text(grid[i][j], x + 10, y + 20 - z);
+        text(hexGrid[i][j].emoji, x - 10, y + 5 - z);
       }
     }
   }
@@ -117,9 +123,9 @@ function drawGrid() {
 
 function drawBuildings() {
   buildings.forEach(b => {
-    let x = b.x * gridSize;
-    let y = b.y * gridSize;
-    let z = b.y * gridSize * sin(angle);
+    let x = b.x * hexSize * 1.5;
+    let y = b.y * hexSize * sqrt3 + (b.x % 2 === 1 ? hexSize * sqrt3 / 2 : 0);
+    let z = b.y * hexSize * sin(angle);
     fill(b.color);
     noStroke();
     beginShape();
@@ -190,10 +196,10 @@ function drawMonster() {
 }
 
 function mousePressed() {
-  let i = floor(mouseX / gridSize);
-  let j = floor(mouseY / gridSize);
-  if (i >= 0 && i < grid.length && j >= 0 && j < grid[0].length) {
-    if (grid[i][j] === 'empty' && !monsterMode) {
+  let i = floor(mouseX / (hexSize * 1.5));
+  let j = floor((mouseY - (i % 2 === 1 ? hexSize * sqrt3 / 2 : 0)) / (hexSize * sqrt3));
+  if (i >= 0 && i < hexGrid.length && j >= 0 && j < hexGrid[0].length) {
+    if (hexGrid[i][j].type === 'empty' && !monsterMode) {
       let selectedEmoji = document.getElementById('selected_emoji').innerHTML;
       if (selectedEmoji.startsWith('🏠') || selectedEmoji.startsWith('🏡') || selectedEmoji.startsWith('🏢') || 
           selectedEmoji.startsWith('🏣') || selectedEmoji.startsWith('🏤') || selectedEmoji.startsWith('🏥') || 
@@ -202,10 +208,11 @@ function mousePressed() {
         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';
+        buildings.push({ x: i, y: j, type: types[idx], color: colors[idx], player: playerId });
+        hexGrid[i][j].type = 'building';
       } else {
-        grid[i][j] = selectedEmoji;
+        hexGrid[i][j].type = 'placed';
+        hexGrid[i][j].emoji = selectedEmoji;
       }
       debugText = `Player ${playerId} placed ${selectedEmoji} at (${i}, ${j})`;
       updateState();
@@ -241,7 +248,7 @@ function updateState() {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
-      grid: grid,
+      hex_grid: hexGrid,
       buildings: buildings,
       train: train,
       monster_mode: monsterMode,
@@ -260,16 +267,19 @@ if 'player_id' not in st.session_state:
 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.")
+# Story plot generator panel
+story_html = f"""
+<div style='background: #f9f9f9; padding: 10px; border-radius: 5px; margin-bottom: 10px;'>
+  <h3>📜 Story Plot</h3>
+  <p>{random.choice(story_beginnings)[1]} {random.choice(nature_labels)} stirred the scene.</p>
+</div>
+"""
+st.sidebar.markdown(story_html, unsafe_allow_html=True)
 
 # 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}"):
@@ -282,27 +292,28 @@ if player_id not in st.session_state.game_state['players']:
 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 i in range(len(st.session_state.game_state['hex_grid'])):
+    for j in range(len(st.session_state.game_state['hex_grid'][i])):
+        if st.session_state.game_state['hex_grid'][i][j]['type'] == 'placed':
+            st.session_state.game_state['players'][player_id] += 1
+score_html = "<div style='background: #f9f9f9; padding: 10px; border-radius: 5px;'><h3>🏆 Scores</h3><ul>"
 for p, s in st.session_state.game_state['players'].items():
-    st.sidebar.write(f"{p}: {s}")
+    score_html += f"<li>{p}: {s}</li>"
+score_html += "</ul></div>"
+st.sidebar.markdown(score_html, unsafe_allow_html=True)
 
-# HTML content
-html_content = f"""
+# Main game panel
+game_html = f"""
 <!DOCTYPE html>
 <html>
 <head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
   <style>
-    body {{ font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f0f0f0; }}
-    #controls {{ margin-bottom: 20px; }}
-    button {{ padding: 10px 20px; margin: 5px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; }}
+    body {{ font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f0f0f0; }}
+    #controls {{ padding: 10px; background: #e0e0e0; }}
+    button {{ padding: 8px 16px; margin: 5px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; }}
     button:hover {{ background: #45a049; }}
-    select {{ padding: 10px; margin: 5px; border-radius: 5px; }}
+    select {{ padding: 8px; margin: 5px; border-radius: 5px; }}
   </style>
 </head>
 <body>
@@ -315,7 +326,7 @@ 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="game_state" style="display:none">{json.dumps(st.session_state.game_state['hex_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>
@@ -336,16 +347,14 @@ html_content = f"""
 </html>
 """
 
-# Streamlit app
-st.title("SimCity 2000 Multiplayer Adventure")
+# Streamlit app layout
+st.title("HexCity 2000 Multiplayer Adventure")
 st.write(f"Player: {player_id}. Click to place {selected_emoji}. Use M/G/R/T keys.")
+html(game_html, height=650)
 
-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
+# Update state function (mocked for Streamlit)
 def update_state(data):
-    st.session_state.game_state['grid'] = data['grid']
+    st.session_state.game_state['hex_grid'] = data['hex_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']
@@ -355,4 +364,8 @@ def update_state(data):
     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()
+    st.rerun()
+
+# Mock POST handler (for debugging)
+if st.session_state.get('last_update'):
+    update_state(st.session_state['last_update'])