Update app.py

app.py

@@ -3,6 +3,9 @@ import random
 import json
 import math
 
+# Set page config for a wider, immersive layout
+st.set_page_config(page_title="HexCitySaga", layout="wide")
+
 # Initialize game state
 if 'game_state' not in st.session_state:
     st.session_state.game_state = {
@@ -31,7 +34,7 @@ SENTENCE_TEMPLATES = {
     "Train": "The {property} train sped through with {word}."
 }
 
-# Game of Life rules: Conway-inspired for buildings
+# Game of Life rules
 def apply_game_of_life(grid):
     new_grid = [[cell.copy() for cell in row] for row in grid]
     for i in range(len(grid)):
@@ -181,8 +184,7 @@ function mousePressed() {
   if (i >= 0 && i < hexGrid.length && j >= 0 && j < hexGrid[0].length && hexGrid[i][j].type === 'empty') {
     let emoji = document.getElementById('selected_emoji').innerHTML;
     if (!monsterMode) {
-      if (emoji.startsWith('🏠') || emoji.startsWith('🏡') || emoji.startsWith('🏢') || 
-          emoji.startsWith('🏥') || emoji.startsWith('🏦')) {
+      if (['🏠', '🏡', '🏢', '🏥', '🏦'].includes(emoji)) {
         buildings.push({
           x: i, y: j, emoji: emoji,
           color: [random(100, 255), random(100, 255), random(100, 255)],
@@ -216,12 +218,10 @@ function keyPressed() {
 }
 
 function addStory(type, word) {
-  let card = st.session_state.deck[st.session_state.drawn_cards % 52];
+  let cardIndex = st.session_state.drawn_cards % 52;
+  let card = JSON.parse(document.getElementById('deck').innerHTML)[cardIndex];
   let suit = card[0];
-  let sentence = SENTENCE_TEMPLATES[type].format(
-    property: SUIT_PROPERTIES[suit],
-    word: word
-  );
+  let sentence = `A ${SUIT_PROPERTIES[suit]} event with ${type.toLowerCase()} ${word}`;
   story.push(sentence);
   st.session_state.drawn_cards += 1;
 }
@@ -263,7 +263,7 @@ st.sidebar.subheader("🏆 Scores")
 for p, s in st.session_state.game_state['players'].items():
     st.sidebar.write(f"{p}: {s}")
 
-# Game HTML
+# Game HTML with deck included
 game_html = f"""
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
 <div id="hex_grid" style="display:none">{json.dumps(st.session_state.game_state['hex_grid'])}</div>
@@ -276,13 +276,14 @@ game_html = f"""
 <div id="player_id" style="display:none">{player_id}</div>
 <div id="selected_emoji" style="display:none">{selected_emoji}</div>
 <div id="story" style="display:none">{json.dumps(st.session_state.game_state['story'])}</div>
-<script>{p5js_code.replace('SENTENCE_TEMPLATES[type].format', '"A " + SUIT_PROPERTIES[suit] + " event with " + word')}</script>
+<div id="deck" style="display:none">{json.dumps(st.session_state.deck)}</div>
+<script>{p5js_code}</script>
 """
 
 # Main layout
 st.title("HexCitySaga: Build, Battle, and Tell Your Tale")
 st.write(f"Player: {player_id}. Click to place {selected_emoji}. Keys: M (monster), G/R (monster type), T (train)")
-html(game_html, height=500)
+st.components.v1.html(game_html, height=500)
 
 # State update handler
 def update_state(data):
@@ -303,4 +304,4 @@ def update_state(data):
 
 # Initialize tracks
 for i in range(len(st.session_state.game_state['hex_grid'])):
-    st.session_state.game_state['hex_grid'][i][5]['type'] = 'track'
+    st.session_state.game_state['hex_grid'][i][5]['type'] = 'track'