Drag and Drop players in the editor #11

This pull request adds a court in the tactic editor, with players that can be drag and dropped to the court.

You can also move the players inside the court by dragging them wherever you want

React elements shouldn't be stored in a state. The state represents the data, and a React element represents the rendered view, that isn't properly typed. It also not play well when passing the initial data to the component, and when exposing the state to the consumers. I would highly recommend separating them by mapping the array each time.

Great!

 export interface RackInput {
     id: string,
     objects: [ReactElement[], Dispatch<SetStateAction<ReactElement[]>>],
     canDetach: (ref: RefObject<HTMLDivElement>) => boolean,

             handle={".player-piece"}
             nodeRef={ref}
             bounds={bounds}
             defaultPosition={{x: x, y: y}}

     /**
      * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
      */
     bottom_percentage: number

     useEffect(() => {
         const bounds = divRef.current!.getBoundingClientRect();
         setCourtPlayers(players.map(player => {

 import Draggable, {DraggableBounds} from "react-draggable";
 import {PlayerPiece} from "./PlayerPiece";
 export interface PlayerOptions {

     const positions = ["1", "2", "3", "4", "5"]
     const [allies, setAllies] = useState(
         positions.map(pos => <PlayerPiece team="allies" key={pos} text={pos}/>)

 }
 export function BasketCourt({players, onPlayerRemove}: BasketCourtProps) {
     const divRef = useRef<HTMLDivElement>(null);

  * */
 export default function CourtPlayer({player, onRemove}: PlayerProps) {
     const ref = useRef<HTMLDivElement>(null);

				`import React, {CSSProperties, useState} from "react";`
				`import {CSSProperties, ReactElement, RefObject, useRef, useState} from "react";`

Drag and Drop players in the editor #11

Reviewers