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.
42 lines
1.4 KiB
42 lines
1.4 KiB
import CourtSvg from '../../assets/basketball_court.svg';
|
|
import '../../style/basket_court.css';
|
|
import React, {MouseEvent, ReactElement, useRef, useState} from "react";
|
|
import Player from "./Player";
|
|
import Draggable from "react-draggable";
|
|
|
|
const TEAM_MAX_PLAYER = 5;
|
|
|
|
export function BasketCourt() {
|
|
const [players, setPlayers] = useState<ReactElement[]>([])
|
|
const divRef = useRef<HTMLDivElement>(null);
|
|
|
|
return (
|
|
<div id="court-container" ref={divRef}>
|
|
<CourtSvg
|
|
id="court-svg"
|
|
onClick={(e: MouseEvent) => {
|
|
console.log(e.target)
|
|
let bounds = divRef.current!.getBoundingClientRect();
|
|
let playerCount = players.length;
|
|
|
|
if (playerCount >= TEAM_MAX_PLAYER) {
|
|
return;
|
|
}
|
|
|
|
const player = (
|
|
<Player key={playerCount}
|
|
id={playerCount + 1}
|
|
x={e.clientX - bounds.x}
|
|
y={e.clientY - bounds.y}
|
|
bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}
|
|
/>
|
|
);
|
|
setPlayers([...players, player])
|
|
}}/>
|
|
{players}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|