Update app.py

app.py

@@ -4,6 +4,7 @@ import random
 import time
 import os
 from streamlit_javascript import st_javascript
+from math import cos, sin, pi
 
 # Constants
 GRID_SIZE = 10
@@ -26,7 +27,7 @@ def load_game_state():
     if os.path.exists(GAME_STATE_FILE):
         with open(GAME_STATE_FILE, "r") as f:
             return json.load(f)
-    return {"players": {}}
+    return {"players": {}, "obstacles": []}
 
 # Function to save game state
 def save_game_state(state):
@@ -48,26 +49,67 @@ def update_player_position(player_name, x, y):
 def generate_svg(game_state):
     svg = f'<svg width="{GRID_SIZE * CELL_SIZE}" height="{GRID_SIZE * CELL_SIZE}" xmlns="http://www.w3.org/2000/svg">'
     
-    # Draw grid
+    # Define gradients
+    svg += '''
+    <defs>
+        <linearGradient id="grid-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#f0f0f0;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#d0d0d0;stop-opacity:1" />
+        </linearGradient>
+        <radialGradient id="player-gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+            <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.8" />
+            <stop offset="100%" style="stop-color:#000000;stop-opacity:0.1" />
+        </radialGradient>
+    </defs>
+    '''
+    
+    # Draw grid with gradient
+    svg += f'<rect width="{GRID_SIZE * CELL_SIZE}" height="{GRID_SIZE * CELL_SIZE}" fill="url(#grid-gradient)" />'
     for i in range(GRID_SIZE):
         for j in range(GRID_SIZE):
-            svg += f'<rect x="{i * CELL_SIZE}" y="{j * CELL_SIZE}" width="{CELL_SIZE}" height="{CELL_SIZE}" fill="white" stroke="gray" />'
+            svg += f'<rect x="{i * CELL_SIZE}" y="{j * CELL_SIZE}" width="{CELL_SIZE}" height="{CELL_SIZE}" fill="none" stroke="#a0a0a0" stroke-width="1" />'
     
-    # Draw players
+    # Draw players with complex shapes and animations
     for player, data in game_state["players"].items():
         x, y = data["x"] * CELL_SIZE + CELL_SIZE // 2, data["y"] * CELL_SIZE + CELL_SIZE // 2
         color = data.get("color", "#000000")
-        svg += f'<circle cx="{x}" cy="{y}" r="{PLAYER_SIZE // 2}" fill="{color}">'
-        svg += f'<animate attributeName="cx" from="{x}" to="{x}" dur="0.5s" repeatCount="1" />'
-        svg += f'<animate attributeName="cy" from="{y}" to="{y}" dur="0.5s" repeatCount="1" />'
+        player_id = f"player-{player}"
+        
+        # Create a group for the player
+        svg += f'<g id="{player_id}">'
+        
+        # Player body (hexagon)
+        points = " ".join([f"{x + PLAYER_SIZE // 2 * cos(i * pi / 3)},{y + PLAYER_SIZE // 2 * sin(i * pi / 3)}" for i in range(6)])
+        svg += f'<polygon points="{points}" fill="{color}" stroke="black" stroke-width="2">'
+        svg += f'<animate attributeName="transform" attributeType="XML" type="rotate" from="0 {x} {y}" to="360 {x} {y}" dur="10s" repeatCount="indefinite" />'
+        svg += '</polygon>'
+        
+        # Player eye (circle)
+        eye_x, eye_y = x + PLAYER_SIZE // 4, y - PLAYER_SIZE // 4
+        svg += f'<circle cx="{eye_x}" cy="{eye_y}" r="{PLAYER_SIZE // 8}" fill="white" stroke="black" stroke-width="1">'
+        svg += f'<animate attributeName="r" values="{PLAYER_SIZE // 8};{PLAYER_SIZE // 10};{PLAYER_SIZE // 8}" dur="3s" repeatCount="indefinite" />'
         svg += '</circle>'
-        svg += f'<text x="{x}" y="{y + 5}" text-anchor="middle" fill="white" font-size="12">{player[0].upper()}</text>'
+        
+        # Player name
+        svg += f'<text x="{x}" y="{y + PLAYER_SIZE // 2 + 15}" text-anchor="middle" fill="black" font-size="12" font-weight="bold">{player[:3].upper()}</text>'
+        
+        # Movement animations
+        svg += f'<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 0" dur="0.5s" repeatCount="1" />'
+        
+        svg += '</g>'
+    
+    # Draw obstacles
+    for obstacle in game_state.get("obstacles", []):
+        ox, oy = obstacle["x"] * CELL_SIZE, obstacle["y"] * CELL_SIZE
+        svg += f'<rect x="{ox}" y="{oy}" width="{CELL_SIZE}" height="{CELL_SIZE}" fill="url(#player-gradient)" stroke="black" stroke-width="2">'
+        svg += f'<animate attributeName="opacity" values="0.7;0.9;0.7" dur="{random.uniform(2,5)}s" repeatCount="indefinite" />'
+        svg += '</rect>'
     
     svg += '</svg>'
     return svg
 
 # Streamlit app
-st.set_page_config(layout="wide")
+st.set_page_config(layout="wide", page_title="Multiplayer Grid Game")
 st.title("Enhanced Multiplayer Grid Game")
 
 # Display player name and allow updates
@@ -84,25 +126,46 @@ with col2:
 # Create grid
 grid = st.empty()
 
-# JavaScript for smooth movement
+# JavaScript for smooth movement and player highlight
 js_code = """
 function movePlayer(playerId, fromX, fromY, toX, toY) {
     const player = document.getElementById(playerId);
     if (player) {
-        const animateX = player.getElementsByTagName('animate')[0];
-        const animateY = player.getElementsByTagName('animate')[1];
-        animateX.setAttribute('from', fromX);
-        animateX.setAttribute('to', toX);
-        animateY.setAttribute('from', fromY);
-        animateY.setAttribute('to', toY);
-        animateX.beginElement();
-        animateY.beginElement();
+        const animation = player.querySelector('animateTransform');
+        animation.setAttribute('from', `${fromX - toX} ${fromY - toY}`);
+        animation.setAttribute('to', '0 0');
+        animation.beginElement();
+        
+        // Update player position after animation
+        setTimeout(() => {
+            const transform = player.getAttribute('transform') || '';
+            player.setAttribute('transform', transform + ` translate(${toX - fromX} ${toY - fromY})`);
+        }, 500);
+    }
+}
+
+function pulsePlayer(playerId) {
+    const player = document.getElementById(playerId);
+    if (player) {
+        const polygon = player.querySelector('polygon');
+        const originalColor = polygon.getAttribute('fill');
+        polygon.setAttribute('fill', '#ff0000');
+        setTimeout(() => polygon.setAttribute('fill', originalColor), 300);
     }
 }
 """
 
 st.components.v1.html(f"<script>{js_code}</script>", height=0)
 
+# Initialize obstacles if not present
+game_state = load_game_state()
+if "obstacles" not in game_state:
+    game_state["obstacles"] = [
+        {"x": random.randint(0, GRID_SIZE-1), "y": random.randint(0, GRID_SIZE-1)}
+        for _ in range(5)
+    ]
+    save_game_state(game_state)
+
 # Main game loop
 while True:
     # Load current game state
@@ -117,6 +180,7 @@ while True:
     with col1:
         if st.button("Select Your Character"):
             st.session_state.selected_player = st.session_state.player_name
+            st_javascript(f"pulsePlayer('player-{st.session_state.player_name}')")
     
     with col2:
         if st.session_state.selected_player:
@@ -126,7 +190,7 @@ while True:
                 current_pos = game_state["players"].get(st.session_state.player_name, {"x": GRID_SIZE // 2, "y": GRID_SIZE // 2})
                 from_x, from_y = current_pos["x"] * CELL_SIZE + CELL_SIZE // 2, current_pos["y"] * CELL_SIZE + CELL_SIZE // 2
                 to_x, to_y = target_x * CELL_SIZE + CELL_SIZE // 2, target_y * CELL_SIZE + CELL_SIZE // 2
-                st_javascript(f"movePlayer('{st.session_state.player_name}', {from_x}, {from_y}, {to_x}, {to_y})")
+                st_javascript(f"movePlayer('player-{st.session_state.player_name}', {from_x}, {from_y}, {to_x}, {to_y})")
                 update_player_position(st.session_state.player_name, target_x, target_y)
     
     # Wait for update interval