You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
878 B
34 lines
878 B
import React, {useEffect, useRef} from "react";
|
|
import "../../style/player.css";
|
|
import Draggable, {DraggableBounds} from "react-draggable";
|
|
|
|
export default function Player({id, x, y, bounds}: {
|
|
id: number,
|
|
x: number,
|
|
y: number,
|
|
bounds: DraggableBounds
|
|
}) {
|
|
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
useEffect(() => {
|
|
const playerRect = ref.current!.getBoundingClientRect();
|
|
bounds.bottom! -= playerRect.height / 2;
|
|
bounds.right! -= playerRect.width / 2;
|
|
}, [ref])
|
|
|
|
return (
|
|
<Draggable
|
|
nodeRef={ref}
|
|
bounds={bounds}
|
|
defaultPosition={{x: x, y: y}}>
|
|
<div ref={ref}
|
|
className="player"
|
|
style={{
|
|
position: "absolute",
|
|
}}>
|
|
<p>{id}</p>
|
|
</div>
|
|
</Draggable>
|
|
|
|
)
|
|
} |