feat: Add player marker component with bobbing animation and label

This commit is contained in:
MayaTheShy
2026-02-20 00:19:06 -05:00
parent bc4f87f178
commit 835bfde1f5

View File

@@ -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 || []);