Update app.py

app.py

@@ -3,18 +3,23 @@ import json
 import random
 import time
 import os
+from streamlit_javascript import st_javascript
 
 # Constants
 GRID_SIZE = 10
 MAX_PLAYERS = 10
 UPDATE_INTERVAL = 3
 GAME_STATE_FILE = "game_state.json"
+CELL_SIZE = 50
+PLAYER_SIZE = 40
 
 # Initialize session state
 if "player_name" not in st.session_state:
     st.session_state.player_name = f"Player_{random.randint(1000, 9999)}"
 if "selected_player" not in st.session_state:
     st.session_state.selected_player = None
+if "player_color" not in st.session_state:
+    st.session_state.player_color = f"#{random.randint(0, 0xFFFFFF):06x}"
 
 # Function to load game state
 def load_game_state():
@@ -36,34 +41,76 @@ def update_player_position(player_name, x, y):
         state["players"][player_name]["y"] = y
     else:
         if len(state["players"]) < MAX_PLAYERS:
-            state["players"][player_name] = {"x": x, "y": y}
+            state["players"][player_name] = {"x": x, "y": y, "color": st.session_state.player_color}
     save_game_state(state)
 
+# Function to generate SVG for the game board
+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
+    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" />'
+    
+    # Draw players
+    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" />'
+        svg += '</circle>'
+        svg += f'<text x="{x}" y="{y + 5}" text-anchor="middle" fill="white" font-size="12">{player[0].upper()}</text>'
+    
+    svg += '</svg>'
+    return svg
+
 # Streamlit app
-st.title("Multiplayer Grid Game")
+st.set_page_config(layout="wide")
+st.title("Enhanced Multiplayer Grid Game")
 
 # Display player name and allow updates
-player_name = st.text_input("Your name", value=st.session_state.player_name)
-if player_name != st.session_state.player_name:
-    st.session_state.player_name = player_name
-    update_player_position(player_name, GRID_SIZE // 2, GRID_SIZE // 2)
+col1, col2 = st.columns([3, 1])
+with col1:
+    player_name = st.text_input("Your name", value=st.session_state.player_name)
+    if player_name != st.session_state.player_name:
+        st.session_state.player_name = player_name
+        update_player_position(player_name, GRID_SIZE // 2, GRID_SIZE // 2)
+
+with col2:
+    st.color_picker("Choose your color", value=st.session_state.player_color, key="player_color")
 
 # Create grid
 grid = st.empty()
 
+# JavaScript for smooth movement
+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();
+    }
+}
+"""
+
+st.components.v1.html(f"<script>{js_code}</script>", height=0)
+
 # Main game loop
 while True:
     # Load current game state
     game_state = load_game_state()
     
-    # Create grid representation
-    grid_repr = [["." for _ in range(GRID_SIZE)] for _ in range(GRID_SIZE)]
-    for player, pos in game_state["players"].items():
-        x, y = pos["x"], pos["y"]
-        grid_repr[y][x] = player[0].upper()
-    
-    # Display grid
-    grid.text("\n".join(" ".join(row) for row in grid_repr))
+    # Generate and display SVG
+    svg = generate_svg(game_state)
+    grid.markdown(svg, unsafe_allow_html=True)
     
     # Handle player movement
     col1, col2 = st.columns(2)
@@ -76,6 +123,10 @@ while True:
             target_x = st.number_input("Target X", min_value=0, max_value=GRID_SIZE-1, value=GRID_SIZE//2)
             target_y = st.number_input("Target Y", min_value=0, max_value=GRID_SIZE-1, value=GRID_SIZE//2)
             if st.button("Move"):
+                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})")
                 update_player_position(st.session_state.player_name, target_x, target_y)
     
     # Wait for update interval