Override-6
parent
2ce537b2b4
commit
37cb541df9
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,35 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import "../../style/player.css";
|
||||
import Draggable, {ControlPosition, DraggableBounds} from "react-draggable";
|
||||
|
||||
export default function Player({id, x, y, bounds}: {
|
||||
id: number,
|
||||
x: number,
|
||||
y: number,
|
||||
bounds: DraggableBounds
|
||||
}) {
|
||||
|
||||
const ref = useRef<HTMLDivElement>();
|
||||
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>
|
||||
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
|
||||
|
||||
#court-container {
|
||||
background-color: rebeccapurple;
|
||||
display: flex;
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
.player {
|
||||
font-family: monospace;
|
||||
|
||||
background-color: var(--selected-team-primarycolor);
|
||||
color: var(--selected-team-secondarycolor);
|
||||
|
||||
|
||||
border-width: 2px;
|
||||
border-radius: 100px;
|
||||
border-style: solid;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/*apply a translation to */
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
../front
|
||||
Loading…
Reference in new issue