Update app.py

app.py

@@ -9,10 +9,13 @@ from math import cos, sin, pi
 # Constants
 GRID_SIZE = 10
 MAX_PLAYERS = 10
-UPDATE_INTERVAL = 3
+UPDATE_INTERVAL = 0.05  # Decreased for smoother animation
 GAME_STATE_FILE = "game_state.json"
 CELL_SIZE = 50
 PLAYER_SIZE = 40
+VELOCITY_FACTOR = 0.5
+FRICTION = 0.98
+BOUNCE_FACTOR = -0.8
 
 # Initialize session state
 if "player_name" not in st.session_state:
@@ -34,15 +37,45 @@ def save_game_state(state):
     with open(GAME_STATE_FILE, "w") as f:
         json.dump(state, f)
 
-# Function to update player position
-def update_player_position(player_name, x, y):
+# Function to update player position and velocity
+def update_player_position(player_name, vx, vy):
     state = load_game_state()
     if player_name in state["players"]:
-        state["players"][player_name]["x"] = x
-        state["players"][player_name]["y"] = y
+        player = state["players"][player_name]
+        player["vx"] = player.get("vx", 0) + vx * VELOCITY_FACTOR
+        player["vy"] = player.get("vy", 0) + vy * VELOCITY_FACTOR
+        
+        # Apply friction
+        player["vx"] *= FRICTION
+        player["vy"] *= FRICTION
+        
+        # Update position
+        player["x"] += player["vx"]
+        player["y"] += player["vy"]
+        
+        # Boundary check and bounce
+        if player["x"] < 0:
+            player["x"] = 0
+            player["vx"] *= BOUNCE_FACTOR
+        elif player["x"] > GRID_SIZE - 1:
+            player["x"] = GRID_SIZE - 1
+            player["vx"] *= BOUNCE_FACTOR
+        
+        if player["y"] < 0:
+            player["y"] = 0
+            player["vy"] *= BOUNCE_FACTOR
+        elif player["y"] > GRID_SIZE - 1:
+            player["y"] = GRID_SIZE - 1
+            player["vy"] *= BOUNCE_FACTOR
     else:
         if len(state["players"]) < MAX_PLAYERS:
-            state["players"][player_name] = {"x": x, "y": y, "color": st.session_state.player_color}
+            state["players"][player_name] = {
+                "x": GRID_SIZE // 2,
+                "y": GRID_SIZE // 2,
+                "vx": 0,
+                "vy": 0,
+                "color": st.session_state.player_color
+            }
     save_game_state(state)
 
 # Function to generate SVG for the game board
@@ -93,9 +126,6 @@ def generate_svg(game_state):
         # 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
@@ -109,7 +139,7 @@ def generate_svg(game_state):
     return svg
 
 # Streamlit app
-st.set_page_config(layout="wide", page_title="Multiplayer Grid Game")
+st.set_page_config(layout="wide", page_title="Enhanced Multiplayer Grid Game")
 st.title("Enhanced Multiplayer Grid Game")
 
 # Display player name and allow updates
@@ -118,7 +148,7 @@ 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)
+        update_player_position(player_name, 0, 0)
 
 with col2:
     st.color_picker("Choose your color", value=st.session_state.player_color, key="player_color")
@@ -126,31 +156,44 @@ with col2:
 # Create grid
 grid = st.empty()
 
-# JavaScript for smooth movement and player highlight
+# JavaScript for smooth movement and player control
 js_code = """
-function movePlayer(playerId, fromX, fromY, toX, toY) {
-    const player = document.getElementById(playerId);
-    if (player) {
-        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);
+let keyState = {};
+let lastUpdateTime = Date.now();
+
+document.addEventListener('keydown', (e) => {
+    keyState[e.key.toLowerCase()] = true;
+});
+
+document.addEventListener('keyup', (e) => {
+    keyState[e.key.toLowerCase()] = false;
+});
+
+function updatePlayerPosition() {
+    const now = Date.now();
+    const dt = (now - lastUpdateTime) / 1000;  // Time difference in seconds
+    lastUpdateTime = now;
+
+    let vx = 0, vy = 0;
+    if (keyState['w']) vy -= 1;
+    if (keyState['s']) vy += 1;
+    if (keyState['a']) vx -= 1;
+    if (keyState['d']) vx += 1;
+
+    if (vx !== 0 || vy !== 0) {
+        const magnitude = Math.sqrt(vx * vx + vy * vy);
+        vx /= magnitude;
+        vy /= magnitude;
+        window.Streamlit.setComponentValue({vx: vx * dt, vy: vy * dt});
     }
 }
 
-function pulsePlayer(playerId) {
+setInterval(updatePlayerPosition, 50);  // Update every 50ms for smooth movement
+
+function movePlayer(playerId, x, y) {
     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);
+        player.setAttribute('transform', `translate(${x * 50} ${y * 50})`);
     }
 }
 """
@@ -166,33 +209,43 @@ if "obstacles" not in game_state:
     ]
     save_game_state(game_state)
 
+# Movement buttons
+col1, col2, col3 = st.columns(3)
+with col1:
+    if st.button("↑"):
+        update_player_position(st.session_state.player_name, 0, -1)
+with col2:
+    if st.button("←"):
+        update_player_position(st.session_state.player_name, -1, 0)
+    if st.button("→"):
+        update_player_position(st.session_state.player_name, 1, 0)
+with col3:
+    if st.button("↓"):
+        update_player_position(st.session_state.player_name, 0, 1)
+
 # Main game loop
-while True:
-    # Load current game state
-    game_state = load_game_state()
-    
-    # Generate and display SVG
-    svg = generate_svg(game_state)
-    grid.markdown(svg, unsafe_allow_html=True)
-    
-    # Handle player movement
-    col1, col2 = st.columns(2)
-    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:
-            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('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
-    time.sleep(UPDATE_INTERVAL)
-    st.experimental_rerun()
+def main():
+    while True:
+        # Load current game state
+        game_state = load_game_state()
+        
+        # Generate and display SVG
+        svg = generate_svg(game_state)
+        grid.markdown(svg, unsafe_allow_html=True)
+        
+        # Handle player movement from JavaScript
+        js_result = st.session_state.get('js_result', None)
+        if js_result:
+            vx, vy = js_result.get('vx', 0), js_result.get('vy', 0)
+            update_player_position(st.session_state.player_name, vx, vy)
+        
+        # Update player positions on the client side
+        for player, data in game_state["players"].items():
+            st_javascript(f"movePlayer('player-{player}', {data['x']}, {data['y']})")
+        
+        # Wait for update interval
+        time.sleep(UPDATE_INTERVAL)
+        st.experimental_rerun()
+
+if __name__ == "__main__":
+    main()