Update app.py

app.py

@@ -7,14 +7,16 @@ import time
 import pandas as pd
 import graphviz
 from scipy.sparse import csr_matrix
+from streamlit_autorefresh import st_autorefresh
 
 # -----------------------------------------------------------------------------
-# Page Configuration
+# Page Configuration & Auto-Refresh (every 5 seconds)
 # -----------------------------------------------------------------------------
 st.set_page_config(page_title="NeuroDungeon: Cortical Column Game", layout="wide")
+st_autorefresh(interval=5000, limit=1000, key="game_refresh")
 
 # -----------------------------------------------------------------------------
-# Initialize Game & Memory State
+# Shared Game State Initialization (simulate shared memory)
 # -----------------------------------------------------------------------------
 if 'game_state' not in st.session_state:
     st.session_state.game_state = {
@@ -25,7 +27,7 @@ if 'game_state' not in st.session_state:
         'exit': {'x': 15, 'y': 11},
         'overlord': {'x': 14, 'y': 10, 'hp': 50, 'atk': 5, 'alive': True},
         'players': {},
-        'story': [],       # Memory events (episodic/semantic)
+        'story': [],
         'drawn_cards': 0,
         'turn': 0
     }
@@ -42,6 +44,14 @@ if 'deck' not in st.session_state:
         return deck
     st.session_state.deck = create_deck()
 
+# -----------------------------------------------------------------------------
+# Emoji Paintbrush Mode State (shared via hidden DOM elements)
+# -----------------------------------------------------------------------------
+if 'painting_mode' not in st.session_state:
+    st.session_state.painting_mode = False
+if 'selected_emoji' not in st.session_state:
+    st.session_state.selected_emoji = ""
+
 # -----------------------------------------------------------------------------
 # Constants and UI Elements for Both Systems
 # -----------------------------------------------------------------------------
@@ -52,6 +62,20 @@ LOOT_EMOJIS = ["⚔️", "🛡️", "💰", "🔑"]
 TRAPS = ["⚡", "🕳️"]
 SUIT_PROPERTIES = {"Hearts": "heroic", "Diamonds": "treacherous", "Clubs": "fierce", "Spades": "enigmatic"}
 
+# A palette of ~60 emojis representing various world objects:
+emoji_palette = [
+    "🏠", "🏢", "🏬", "🏭", "🏰", "🏯", "🏟️", "🏡",
+    "🚗", "🚕", "🚙", "🚌", "🚎", "🚓", "🚑", "🚒",
+    "🚐", "🚚", "🚛", "🚜", "🛵", "🚲", "🛴", "🚀",
+    "✈️", "⛵", "🚤", "🛳️", "🚂", "🚆", "🚊", "🚉",
+    "👨‍💼", "👩‍💼", "👨‍🔧", "👩‍🔧", "👨‍⚕️", "👩‍⚕️",
+    "👮‍♂️", "👮‍♀️", "👷‍♂️", "👷‍♀️", "💂‍♂️", "💂‍♀️",
+    "🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼",
+    "🐨", "🐯", "🦁", "🐮", "🐷", "🐸", "🐵", "🐔",
+    "🐧", "🐦", "🌳", "🌴", "🌵", "🍎", "🍌", "🍉",
+    "🍇", "🍓", "🍔", "🍕"
+]
+
 # -----------------------------------------------------------------------------
 # Initialize Hero if Not Already Set
 # -----------------------------------------------------------------------------
@@ -74,6 +98,28 @@ st.sidebar.subheader("🏆 Scores")
 for p, s in st.session_state.game_state['players'].items():
     st.sidebar.write(f"{p}: {s}")
 
+# -----------------------------------------------------------------------------
+# Emoji Paintbrush Sidebar Palette
+# -----------------------------------------------------------------------------
+st.sidebar.subheader("🎨 Emoji Paintbrush")
+cols = st.sidebar.columns(10)
+# Display the palette in a grid (10 per row)
+for idx, emoji in enumerate(emoji_palette):
+    col = cols[idx % 10]
+    if col.button(emoji, key=f"emoji_{idx}"):
+        st.session_state.painting_mode = True
+        st.session_state.selected_emoji = emoji
+        st.sidebar.info(f"Painting Mode: {emoji}")
+        # Break out if you want one-click activation per emoji.
+    # Every 10 emojis, refresh the row columns
+    if (idx + 1) % 10 == 0 and idx + 1 < len(emoji_palette):
+        cols = st.sidebar.columns(10)
+        
+if st.sidebar.button("Cancel Paint Mode"):
+    st.session_state.painting_mode = False
+    st.session_state.selected_emoji = ""
+    st.sidebar.info("Painting Mode Disabled")
+
 # -----------------------------------------------------------------------------
 # Utility Functions for Game Dynamics & Neural Decay
 # -----------------------------------------------------------------------------
@@ -129,26 +175,26 @@ for i in range(16):
             st.session_state.game_state['hex_grid'][i][j] = {'type': 'wall', 'emoji': '🧱', 'alive': False}
 
 # -----------------------------------------------------------------------------
-# p5.js Code for the HexCitySaga Game Rendering (with Narrative Integration)
+# p5.js Code for Rendering the Game (with Recenter & Painting Mode)
 # -----------------------------------------------------------------------------
-p5js_code = """
-const HEX_SIZE = 40;
+p5js_code = f"""
+const HEX_SIZE = {HEX_SIZE};
 const SQRT_3 = Math.sqrt(3);
 let hexGrid = [];
-let heroes = {};
+let heroes = {{}};
 let monsters = [];
 let loot = [];
-let exit = {};
-let overlord = {};
+let exit = {{}};
+let overlord = {{}};
 let playerId;
 let story = [];
 
-function setup() {
+function setup() {{
   createCanvas(640, 480);
   updateFromState();
-}
+}}
 
-function updateFromState() {
+function updateFromState() {{
   hexGrid = JSON.parse(document.getElementById('hex_grid').innerHTML);
   heroes = JSON.parse(document.getElementById('heroes').innerHTML);
   monsters = JSON.parse(document.getElementById('monsters').innerHTML);
@@ -157,46 +203,59 @@ function updateFromState() {
   overlord = JSON.parse(document.getElementById('overlord').innerHTML);
   playerId = document.getElementById('player_id').innerHTML;
   story = JSON.parse(document.getElementById('story').innerHTML);
-}
+}}
 
-function draw() {
+function draw() {{
   background(169, 169, 169);
+  push();
+  // Recenter the board so the hero is at canvas center
+  let hero = heroes[playerId];
+  if (hero) {{
+      let centerX = width / 2;
+      let centerY = height / 2;
+      let heroX = hero.x * HEX_SIZE * 1.5;
+      let heroY = hero.y * HEX_SIZE * SQRT_3 + (hero.x % 2 ? HEX_SIZE * SQRT_3 / 2 : 0);
+      let offsetX = centerX - heroX;
+      let offsetY = centerY - heroY;
+      translate(offsetX, offsetY);
+  }}
   drawHexGrid();
   drawLoot();
   drawHeroes();
   drawMonsters();
   drawExit();
   drawOverlord();
+  pop();
   drawStory();
-}
+}}
 
-function drawHexGrid() {
-  for (let i = 0; i < hexGrid.length; i++) {
-    for (let j = 0; j < hexGrid[i].length; j++) {
+function drawHexGrid() {{
+  for (let i = 0; i < hexGrid.length; i++) {{
+    for (let j = 0; j < hexGrid[i].length; j++) {{
       let x = i * HEX_SIZE * 1.5;
       let y = j * HEX_SIZE * SQRT_3 + (i % 2 ? HEX_SIZE * SQRT_3 / 2 : 0);
       fill(hexGrid[i][j].type === 'wall' ? '#555' : hexGrid[i][j].alive ? '#90EE90' : '#A9A9A9');
       stroke(0);
       drawHex(x, y);
-      if (hexGrid[i][j].emoji) {
+      if (hexGrid[i][j].emoji) {{
         textSize(20);
         text(hexGrid[i][j].emoji, x - 10, y + 5);
-      }
-    }
-  }
-}
+      }}
+    }}
+  }}
+}}
 
-function drawHex(x, y) {
+function drawHex(x, y) {{
   beginShape();
-  for (let a = 0; a < 6; a++) {
+  for (let a = 0; a < 6; a++) {{
     let angle = TWO_PI / 6 * a;
     vertex(x + HEX_SIZE * cos(angle), y + HEX_SIZE * sin(angle));
-  }
+  }}
   endShape(CLOSE);
-}
+}}
 
-function drawHeroes() {
-  Object.keys(heroes).forEach(h => {
+function drawHeroes() {{
+  Object.keys(heroes).forEach(h => {{
     let hero = heroes[h];
     let x = hero.x * HEX_SIZE * 1.5;
     let y = hero.y * HEX_SIZE * SQRT_3 + (hero.x % 2 ? HEX_SIZE * SQRT_3 / 2 : 0);
@@ -204,71 +263,86 @@ function drawHeroes() {
     ellipse(x, y, HEX_SIZE * 0.8);
     textSize(14);
     text(h.slice(0,2), x - 10, y + 5);
-  });
-}
+  }});
+}}
 
-function drawMonsters() {
-  monsters.forEach(m => {
+function drawMonsters() {{
+  monsters.forEach(m => {{
     let x = m.x * HEX_SIZE * 1.5;
     let y = m.y * HEX_SIZE * SQRT_3 + (m.x % 2 ? HEX_SIZE * SQRT_3 / 2 : 0);
     fill(255, 0, 0);
     ellipse(x, y, HEX_SIZE * 0.8);
     textSize(20);
     text(m.type === 'Godzilla' ? '🦖' : '🤖', x - 10, y + 5);
-  });
-}
+  }});
+}}
 
-function drawLoot() {
-  loot.forEach(l => {
+function drawLoot() {{
+  loot.forEach(l => {{
     let x = l.x * HEX_SIZE * 1.5;
     let y = l.y * HEX_SIZE * SQRT_3 + (l.x % 2 ? HEX_SIZE * SQRT_3 / 2 : 0);
     fill(255, 215, 0);
     ellipse(x, y, HEX_SIZE * 0.6);
     textSize(20);
     text(l.type, x - 10, y + 5);
-  });
-}
+  }});
+}}
 
-function drawExit() {
+function drawExit() {{
   let x = exit.x * HEX_SIZE * 1.5;
   let y = exit.y * HEX_SIZE * SQRT_3 + (exit.x % 2 ? HEX_SIZE * SQRT_3 / 2 : 0);
   fill(0, 191, 255);
   ellipse(x, y, HEX_SIZE * 0.8);
   textSize(20);
   text('🚪', x - 10, y + 5);
-}
+}}
 
-function drawOverlord() {
-  if (overlord.alive) {
+function drawOverlord() {{
+  if (overlord.alive) {{
     let x = overlord.x * HEX_SIZE * 1.5;
     let y = overlord.y * HEX_SIZE * SQRT_3 + (overlord.x % 2 ? HEX_SIZE * SQRT_3 / 2 : 0);
     fill(139, 0, 139);
     ellipse(x, y, HEX_SIZE * 1.2);
     textSize(20);
     text('👑', x - 10, y + 5);
-  }
-}
+  }}
+}}
 
-function drawStory() {
+function drawStory() {{
   fill(0);
   textSize(14);
-  for (let i = 0; i < Math.min(story.length, 5); i++) {
+  for (let i = 0; i < Math.min(story.length, 5); i++) {{
     text(story[story.length - 1 - i], 10, 20 + i * 20);
-  }
-}
-
-function mousePressed() {
-  let i = Math.floor(mouseX / (HEX_SIZE * 1.5));
-  let j = Math.floor((mouseY - (i % 2 ? HEX_SIZE * SQRT_3 / 2 : 0)) / (HEX_SIZE * SQRT_3));
-  if (i >= 0 && i < hexGrid.length && j >= 0 && j < hexGrid[0].length) {
-    let hero = heroes[playerId];
-    if (hexGrid[i][j].type === 'empty' && Math.abs(hero.x - i) <= 1 && Math.abs(hero.y - j) <= 1) {
-      moveHero(i, j);
-    }
-  }
-}
-
-function keyPressed() {
+  }}
+}}
+
+function mousePressed() {{
+  // Check if we're in painting mode (shared via hidden div)
+  let paintingMode = document.getElementById('painting_mode').innerHTML;
+  if (paintingMode === "true") {{
+    let i = Math.floor(mouseX / (HEX_SIZE * 1.5));
+    let j = Math.floor((mouseY - (i % 2 ? HEX_SIZE * SQRT_3 / 2 : 0)) / (HEX_SIZE * SQRT_3));
+    if (i >= 0 && i < hexGrid.length && j >= 0 && j < hexGrid[0].length) {{
+         let selectedEmoji = document.getElementById('selected_emoji').innerHTML;
+         hexGrid[i][j].emoji = selectedEmoji;
+         hexGrid[i][j].type = 'organism';
+         hexGrid[i][j].alive = true;
+         updateState();
+    }}
+  }} else {{
+    // Default behavior: move hero if adjacent cell is empty
+    let i = Math.floor(mouseX / (HEX_SIZE * 1.5));
+    let j = Math.floor((mouseY - (i % 2 ? HEX_SIZE * SQRT_3 / 2 : 0)) / (HEX_SIZE * SQRT_3));
+    if (i >= 0 && i < hexGrid.length && j >= 0 && j < hexGrid[0].length) {{
+      let hero = heroes[playerId];
+      if (hexGrid[i][j].type === 'empty' && Math.abs(hero.x - i) <= 1 && Math.abs(hero.y - j) <= 1) {{
+        moveHero(i, j);
+      }}
+    }}
+  }}
+}}
+
+function keyPressed() {{
   let hero = heroes[playerId];
   if (key === 'w' || key === 'W') moveHero(hero.x, hero.y - 1);
   if (key === 's' || key === 'S') moveHero(hero.x, hero.y + 1);
@@ -276,25 +350,25 @@ function keyPressed() {
   if (key === 'd' || key === 'D') moveHero(hero.x + 1, hero.y);
   if (key === 'q' || key === 'Q') moveHero(hero.x - 1, hero.y - 1);
   if (key === 'e' || key === 'E') moveHero(hero.x + 1, hero.y - 1);
-}
+}}
 
-function moveHero(newX, newY) {
+function moveHero(newX, newY) {{
   if (newX < 0 || newX >= hexGrid.length || newY < 0 || newY >= hexGrid[0].length) return;
   let hero = heroes[playerId];
   let cell = hexGrid[newX][newY];
-  if (cell.type === 'empty' || cell.type === 'plant') {
+  if (cell.type === 'empty' || cell.type === 'plant') {{
     hero.x = newX;
     hero.y = newY;
     handleInteractions();
     updateState();
-  }
-}
+  }}
+}}
 
-function handleInteractions() {
+function handleInteractions() {{
   let hero = heroes[playerId];
   // Loot Interaction
   let lootIdx = loot.findIndex(l => l.x === hero.x && l.y === hero.y);
-  if (lootIdx !== -1) {
+  if (lootIdx !== -1) {{
     let item = loot[lootIdx].type;
     if (item === '⚔️') hero.atk += 2;
     if (item === '🛡️') hero.def += 2;
@@ -302,66 +376,67 @@ function handleInteractions() {
     if (item === '🔑') hero.gear.push('🔑');
     loot.splice(lootIdx, 1);
     addStory('Loot', item);
-  }
+  }}
   // Trap Interaction
-  if (hexGrid[hero.x][hero.y].type === 'trap') {
+  if (hexGrid[hero.x][hero.y].type === 'trap') {{
     hero.hp -= Math.floor(random(1, 5));
     addStory('Trap', hexGrid[hero.x][hero.y].emoji);
-  }
+  }}
   // Monster Combat
   let monsterIdx = monsters.findIndex(m => m.x === hero.x && m.y === hero.y);
-  if (monsterIdx !== -1) {
+  if (monsterIdx !== -1) {{
     let monster = monsters[monsterIdx];
     let damage = Math.max(0, hero.atk - 1);
     monster.hp -= damage;
     hero.hp -= Math.max(0, monster.atk - hero.def);
-    if (monster.hp <= 0) {
+    if (monster.hp <= 0) {{
       monsters.splice(monsterIdx, 1);
       hero.xp += 10;
       addStory('Monster', monster.type + ' slain');
-    }
-  }
+    }}
+  }}
   // Overlord Combat
-  if (overlord.alive && hero.x === overlord.x && hero.y === overlord.y) {
+  if (overlord.alive && hero.x === overlord.x && hero.y === overlord.y) {{
     let damage = Math.max(0, hero.atk - 2);
     overlord.hp -= damage;
     hero.hp -= Math.max(0, overlord.atk - hero.def);
-    if (overlord.hp <= 0) {
+    if (overlord.hp <= 0) {{
       overlord.alive = false;
       hero.xp += 50;
       addStory('Monster', 'Overlord defeated');
-    }
-  }
+    }}
+  }}
   // Exit Check
-  if (hero.x === exit.x && hero.y === exit.y && hero.gear.includes('🔑')) {
+  if (hero.x === exit.x && hero.y === exit.y && hero.gear.includes('🔑')) {{
     alert('Victory! You escaped the Hex Dungeon!');
     resetGame();
-  }
+  }}
   // Level Up
-  if (hero.xp >= hero.level * 20) {
+  if (hero.xp >= hero.level * 20) {{
     hero.level += 1;
     hero.hp += 5;
     hero.atk += 1;
     hero.def += 1;
     addStory('Hero', 'leveled up');
-  }
-}
+  }}
+}}
 
-function addStory(type, word) {
+function addStory(type, word) {{
   let deck = JSON.parse(document.getElementById('deck').innerHTML);
-  let cardIndex = st.session_state.drawn_cards % 52;
+  let cardIndex = {{"drawn": st.session_state.game_state['drawn_cards']}}.drawn % 52;
   let card = deck[cardIndex];
   let suit = card[0];
-  let sentence = `A ${SUIT_PROPERTIES[suit]} event: ${type.toLowerCase()} ${word}`;
+  let sentence = `A ${{SUIT_PROPERTIES[suit]}} event: ${{type.toLowerCase()}} ${{word}}`;
   story.push(sentence);
-  st.session_state.drawn_cards += 1;
-}
+  // In a full implementation, update the drawn_cards counter server-side.
+}}
 
-function updateState() {
-  fetch('/update_state', {
+function updateState() {{
+  // Send the updated state back to Streamlit.
+  fetch('/update_state', {{
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
+    headers: {{ 'Content-Type': 'application/json' }},
+    body: JSON.stringify({{
       hex_grid: hexGrid,
       heroes: heroes,
       monsters: monsters,
@@ -370,13 +445,13 @@ function updateState() {
       overlord: overlord,
       story: story,
       player_id: playerId
-    })
-  });
-}
+    }})
+  }});
+}}
 """
 
 # -----------------------------------------------------------------------------
-# Multi-Tab UI: Cross Breeding Cortical Theory and Dungeon Crawl
+# Multi-Tab UI: Cross Breeding Cortical Theory & Dungeon Crawl
 # -----------------------------------------------------------------------------
 tabs = st.tabs(["Cortical Theory", "HexCitySaga", "Memory Integration", "Self Reward NPS", "Extra UI"])
 
@@ -419,9 +494,9 @@ with tabs[0]:
 # --- Tab 2: HexCitySaga: Dungeon Crawl Game ---
 with tabs[1]:
     st.header("HexCitySaga: Dungeon Crawl")
-    st.write(f"Hero: **{player_id}**. Use WASD/QE to move. Goal: escape (🚪) with the key (🔑) or defeat the Overlord (👑).")
-    game_html = f"""
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
+    st.write(f"Hero: **{player_id}**. Use WASD/QE to move or click on a hex (if in painting mode) to add a new organism.")
+    # The following hidden divs provide shared state info to p5.js:
+    hidden_divs = f"""
     <div id="hex_grid" style="display:none">{json.dumps(st.session_state.game_state['hex_grid'])}</div>
     <div id="heroes" style="display:none">{json.dumps(st.session_state.game_state['heroes'])}</div>
     <div id="monsters" style="display:none">{json.dumps(st.session_state.game_state['monsters'])}</div>
@@ -431,6 +506,12 @@ with tabs[1]:
     <div id="player_id" style="display:none">{player_id}</div>
     <div id="story" style="display:none">{json.dumps(st.session_state.game_state['story'])}</div>
     <div id="deck" style="display:none">{json.dumps(st.session_state.deck)}</div>
+    <div id="painting_mode" style="display:none">{str(st.session_state.painting_mode).lower()}</div>
+    <div id="selected_emoji" style="display:none">{st.session_state.selected_emoji}</div>
+    """
+    game_html = f"""
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
+    {hidden_divs}
     <script>{p5js_code}</script>
     """
     st.components.v1.html(game_html, height=500)
@@ -444,7 +525,6 @@ with tabs[2]:
         edges = []
         for idx, event in enumerate(st.session_state.game_state['story']):
             node_label = f"Event {idx+1}"
-            # Shorten the event text for node labels if needed
             safe_event = event.replace('"', '\'')
             nodes.append(f'"{node_label}" [label="{safe_event}"];')
             if idx > 0: