From 835bfde1f5822fc43234bf2a68d56c6e71356005 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Fri, 20 Feb 2026 00:19:06 -0500
Subject: [PATCH] feat: Add player marker component with bobbing animation and
 label

---
 client/src/components/Map3D.jsx | 49 +++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/client/src/components/Map3D.jsx b/client/src/components/Map3D.jsx
index 2753860..d5167be 100644
--- a/client/src/components/Map3D.jsx
+++ b/client/src/components/Map3D.jsx
@@ -506,9 +506,58 @@ function MiningArea({ area, turtle, isSelected, onClick }) {
   );
 }
 
+// Player marker component
+function PlayerMarker({ player }) {
+  const meshRef = useRef();
+  
+  // Bobbing animation
+  useFrame((state) => {
+    if (meshRef.current) {
+      meshRef.current.position.y = player.position.y + Math.sin(state.clock.elapsedTime * 2) * 0.1;
+    }
+  });
+
+  return (
+    <group position={[player.position.x, player.position.y, player.position.z]}>
+      {/* Player head (Steve-like) */}
+      <mesh ref={meshRef} position={[0, 1, 0]}>
+        <boxGeometry args={[0.6, 0.6, 0.6]} />
+        <meshStandardMaterial 
+          color="#8b7355"
+          emissive="#4a90e2"
+          emissiveIntensity={0.3}
+        />
+      </mesh>
+
+      {/* Body */}
+      <mesh position={[0, 0.2, 0]}>
+        <boxGeometry args={[0.6, 0.9, 0.3]} />
+        <meshStandardMaterial color="#4a90e2" />
+      </mesh>
+
+      {/* Glow effect */}
+      <pointLight color="#4a90e2" intensity={1} distance={3} />
+
+      {/* Label */}
+      <Text
+        position={[0, 2, 0]}
+        fontSize={0.4}
+        color="#4a90e2"
+        anchorX="center"
+        anchorY="middle"
+        outlineWidth={0.05}
+        outlineColor="#000000"
+      >
+        Player {player.playerID}
+      </Text>
+    </group>
+  );
+}
+
 // Main scene component
 function Scene() {
   const turtles = useTurtleStore((state) => state.getTurtleArray());
+  const players = useTurtleStore((state) => Object.values(state.players || {}));
   const selectedTurtleId = useTurtleStore((state) => state.selectedTurtleId);
   const selectTurtle = useTurtleStore((state) => state.selectTurtle);
   const worldBlocks = useTurtleStore((state) => state.worldBlocks || []);