Update app.py

app.py

@@ -9,6 +9,11 @@ from pathlib import Path
 import base64
 from io import BytesIO
 
+# Constants for game board
+GRID_WIDTH = 16
+GRID_HEIGHT = 9
+REFRESH_RATE = 5  # seconds
+
 # Fantasy name generator
 def generate_fantasy_name():
     prefixes = ['Aer', 'Bal', 'Cal', 'Dor', 'El', 'Fae', 'Gor', 'Hel', 'Il', 'Jor', 
@@ -23,13 +28,16 @@ if 'initialized' not in st.session_state:
     st.session_state.game_state = {
         'players': {},
         'chat_messages': [],
-        'tile_map': [],
         'last_sync': time.time()
     }
     st.session_state.player_name = None
     st.session_state.character_stats = None
+    st.session_state.position = {
+        'x': random.randint(0, GRID_WIDTH - 1),
+        'y': random.randint(0, GRID_HEIGHT - 1)
+    }
+    st.session_state.last_move = time.time()
 
-# Character Stats Generation
 def roll_stats():
     return {
         'STR': sum(sorted([random.randint(1, 6) for _ in range(4)])[1:]),
@@ -65,6 +73,9 @@ HP: {stats['HP']}/{stats['MAX_HP']}
 ## Score
 Current Score: {stats['score']}
 
+## Position
+X: {st.session_state.position['x']}, Y: {st.session_state.position['y']}
+
 ## Session Info
 Created: {datetime.fromtimestamp(stats['created_at']).strftime('%Y-%m-%d %H:%M:%S')}
 Last Updated: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}
@@ -81,87 +92,37 @@ def load_character_sheet(player_name):
             return f.read()
     return None
 
-def create_game_js():
-    """Create JavaScript for real-time game updates"""
-    return """
-    <script>
-    const gameState = {
-        playerName: null,
-        position: { x: 0, y: 0 },
-        velocity: { x: 0, y: 0 },
-        lastUpdate: Date.now(),
-        needsSync: false
-    };
-
-    function updateClock() {
-        const now = new Date();
-        document.getElementById('game-clock').textContent = 
-            now.toLocaleTimeString();
-    }
-
-    function handleMovement(e) {
-        const speed = 5;
-        switch(e.key.toLowerCase()) {
-            case 'w': case 'arrowup':
-                gameState.velocity.y = -speed;
-                break;
-            case 's': case 'arrowdown':
-                gameState.velocity.y = speed;
-                break;
-            case 'a': case 'arrowleft':
-                gameState.velocity.x = -speed;
-                break;
-            case 'd': case 'arrowright':
-                gameState.velocity.x = speed;
-                break;
-            case 'x':
-                gameState.velocity = { x: 0, y: 0 };
-                break;
-        }
-        gameState.needsSync = true;
-    }
-
-    function updatePosition() {
-        const now = Date.now();
-        const delta = (now - gameState.lastUpdate) / 1000;
-        
-        gameState.position.x += gameState.velocity.x * delta;
-        gameState.position.y += gameState.velocity.y * delta;
-        
-        // Boundary checks
-        gameState.position.x = Math.max(0, Math.min(gameState.position.x, 19));
-        gameState.position.y = Math.max(0, Math.min(gameState.position.y, 14));
-        
-        gameState.lastUpdate = now;
-        
-        // Update player marker position
-        const marker = document.querySelector('.player-marker');
-        if (marker) {
-            marker.style.left = `${gameState.position.x * 60 + 25}px`;
-            marker.style.top = `${gameState.position.y * 60 + 25}px`;
-        }
-    }
-
-    function syncWithServer() {
-        if (gameState.needsSync) {
-            // Send position to Streamlit
-            window.parent.postMessage({
-                type: 'streamlit:sync',
-                position: gameState.position
-            }, '*');
-            gameState.needsSync = false;
-        }
-    }
-
-    // Initialize game loop
-    setInterval(updatePosition, 16);  // ~60 FPS
-    setInterval(syncWithServer, 5000);  // Sync every 5 seconds
-    setInterval(updateClock, 1000);  // Update clock every second
-
-    // Set up event listeners
-    document.addEventListener('keydown', handleMovement);
-    </script>
-    """
+def update_position(direction):
+    """Update player position with wrapping"""
+    if direction == "up":
+        st.session_state.position['y'] = (st.session_state.position['y'] - 1) % GRID_HEIGHT
+    elif direction == "down":
+        st.session_state.position['y'] = (st.session_state.position['y'] + 1) % GRID_HEIGHT
+    elif direction == "left":
+        st.session_state.position['x'] = (st.session_state.position['x'] - 1) % GRID_WIDTH
+    elif direction == "right":
+        st.session_state.position['x'] = (st.session_state.position['x'] + 1) % GRID_WIDTH
+    
+    st.session_state.last_move = time.time()
+    if st.session_state.character_stats:
+        save_character_sheet(st.session_state.player_name, st.session_state.character_stats)
+
+def create_game_board():
+    """Create and display the game board"""
+    # Create placeholder images for tiles
+    tile_image = Image.new('RGB', (50, 50), color='green')
+    player_image = Image.new('RGB', (50, 50), color='blue')
+    
+    # Create columns for each row
+    for y in range(GRID_HEIGHT):
+        cols = st.columns(GRID_WIDTH)
+        for x in range(GRID_WIDTH):
+            # Display player or tile
+            if (x == st.session_state.position['x'] and 
+                y == st.session_state.position['y']):
+                cols[x].image(player_image, use_column_width=True)
+            else:
+                cols[x].image(tile_image, use_column_width=True)
 
 def main():
     # Sidebar for player info and controls
@@ -185,7 +146,6 @@ def main():
         if new_name != st.session_state.player_name:
             old_name = st.session_state.player_name
             st.session_state.player_name = new_name
-            # Rename character sheet
             os.rename(f"characters/{old_name}.md", 
                      f"characters/{new_name}.md")
             st.rerun()
@@ -195,26 +155,33 @@ def main():
         if character_sheet:
             st.sidebar.markdown(character_sheet)
         
-        # Movement controls with emojis
+        # Movement controls
         st.sidebar.markdown("### Movement Controls")
         move_cols = st.sidebar.columns(3)
-        move_cols[1].button("⬆️", key="up")
+        if move_cols[1].button("⬆️", key="up"):
+            update_position("up")
+            st.rerun()
         cols = st.sidebar.columns(3)
-        cols[0].button("⬅️", key="left")
-        cols[1].button("⬇️", key="down")
-        cols[2].button("➡️", key="right")
-        st.sidebar.button("🛑", key="stop")
+        if cols[0].button("⬅️", key="left"):
+            update_position("left")
+            st.rerun()
+        if cols[1].button("⬇️", key="down"):
+            update_position("down")
+            st.rerun()
+        if cols[2].button("➡️", key="right"):
+            update_position("right")
+            st.rerun()
 
     # Main game area
     st.title("Multiplayer Tile Game")
     
-    # Game clock
-    st.markdown('<div id="game-clock" style="font-size: 24px;"></div>', 
-                unsafe_allow_html=True)
+    # Display game board
+    create_game_board()
     
-    # Game board and JavaScript
-    if st.session_state.player_name:
-        st.components.v1.html(create_game_js(), height=600)
+    # Auto-refresh logic
+    if (time.time() - st.session_state.last_move) > REFRESH_RATE:
+        st.session_state.last_move = time.time()
+        st.rerun()
 
 if __name__ == "__main__":
     main()