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.
57 lines
2.2 KiB
57 lines
2.2 KiB
import CourtSvg from '../../assets/basketball_court.svg';
|
|
import '../../style/basket_court.css';
|
|
import React, {MouseEvent, ReactElement, useEffect, 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) => {
|
|
const bounds = divRef.current!.getBoundingClientRect();
|
|
|
|
if (players.length >= TEAM_MAX_PLAYER) {
|
|
return;
|
|
}
|
|
|
|
// find a valid number for the player to place.
|
|
let playerIndex = players.findIndex((v, i) =>
|
|
v.key !== i.toString()
|
|
);
|
|
|
|
if (playerIndex == -1) {
|
|
playerIndex = players.length;
|
|
}
|
|
|
|
const player = (
|
|
<Player key={playerIndex}
|
|
id={playerIndex + 1}
|
|
x={e.clientX - bounds.x}
|
|
y={e.clientY - bounds.y}
|
|
bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}
|
|
onRemove={() => {
|
|
setPlayers(players => {
|
|
// recompute the player's index as it may have been moved if
|
|
// previous players were removed and added.
|
|
const playerCurrentIndex = players.findIndex(p => p.key === playerIndex.toString())
|
|
return players.toSpliced(playerCurrentIndex, 1)
|
|
})
|
|
}}
|
|
/>
|
|
);
|
|
setPlayers(players => players.toSpliced(playerIndex, 0, player))
|
|
}}/>
|
|
{players}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|