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.
36 lines
1.1 KiB
36 lines
1.1 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";
|
|
|
|
|
|
export function BasketCourt() {
|
|
const [players, setPlayers] = useState<ReactElement[]>([])
|
|
const divRef = useRef<HTMLDivElement>(null);
|
|
|
|
return (
|
|
<div id="court-container"
|
|
ref={divRef}
|
|
style={{
|
|
backgroundImage: `url(${courtSvg})`
|
|
}}
|
|
onClick={(e: MouseEvent) => {
|
|
let bounds = divRef.current.getBoundingClientRect();
|
|
|
|
const player = (
|
|
<Player key={players.length}
|
|
id={players.length + 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>
|
|
)
|
|
}
|
|
|
|
|