add possibility to place back players to their racks

front/components/editor/BasketCourt.tsx

@@ -4,7 +4,7 @@ import {MouseEvent, ReactElement, useEffect, useRef, useState} from "react";
 import CourtPlayer from "./CourtPlayer";
 import {Player} from "../../data/Player";
 
-export function BasketCourt({players}: { players: Player[] }) {
+export function BasketCourt({players, onPlayerRemove}: { players: Player[], onPlayerRemove: (Player) => void }) {
     const [courtPlayers, setCourtPlayers] = useState<ReactElement[]>([])
     const divRef = useRef<HTMLDivElement>(null);
 
@@ -18,12 +18,7 @@ export function BasketCourt({players}: { players: Player[] }) {
                              y={(bounds.height * player.bottom_percentage)}
                              bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}
                              onRemove={() => {
-                                 // setCourtPlayers(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)
-                                 // })
+                                 onPlayerRemove(player)
                              }}
                 />
             )

front/data/Player.ts

@@ -5,6 +5,11 @@ export interface Player {
      */
     id: number,
 
+    /**
+     * the player's team
+     * */
+    team: "allies" | "opponents",
+
     /**
      * player's position
      * */

front/style/editor.css

@@ -31,7 +31,7 @@
     height: 100%;
 }
 
-#team-rack .player-piece , #opponent-rack .player-piece {
+#allies-rack .player-piece , #opponent-rack .player-piece {
     margin-left: 5px;
 }
 

front/views/Editor.tsx

@@ -16,11 +16,11 @@ export default function Editor({id, name}: { id: number, name: string }) {
     const [style, setStyle] = useState<CSSProperties>({});
 
     const positions = ["PG", "SG", "SF", "PF", "C"]
-    const [team, setTeams] = useState(
-        positions.map(pos => <PlayerPiece key={pos} text={pos}/>)
+    const [allies, setAllies] = useState(
+        positions.map(pos => <PlayerPiece team="allies" key={pos} text={pos}/>)
     )
     const [opponents, setOpponents] = useState(
-        positions.map(pos => <PlayerPiece key={pos} text={pos}/>)
+        positions.map(pos => <PlayerPiece team="opponents" key={pos} text={pos}/>)
     )
 
     const [players, setPlayers] = useState<Player[]>([]);
@@ -52,6 +52,7 @@ export default function Editor({id, name}: { id: number, name: string }) {
         setPlayers(players => {
             return [...players, {
                 id: players.length,
+                team: element.props.team,
                 position: element.props.text,
                 right_percentage: xPercent,
                 bottom_percentage: yPercent
@@ -85,8 +86,8 @@ export default function Editor({id, name}: { id: number, name: string }) {
             </div>
             <div id="edit-div">
                 <div id="racks">
-                    <Rack id="team-rack"
-                          objects={[team, setTeams]}
+                    <Rack id="allies-rack"
+                          objects={[allies, setAllies]}
                           canDetach={canDetach}
                           onElementDetached={onElementDetach}/>
                     <Rack id="opponent-rack"
@@ -96,7 +97,26 @@ export default function Editor({id, name}: { id: number, name: string }) {
                 </div>
                 <div id="court-div">
                     <div ref={courtDivContentRef}>
-                        <BasketCourt players={players}/>
+                        <BasketCourt
+                            players={players}
+                            onPlayerRemove={(player) => {
+                                setPlayers(players => {
+                                    const idx = players.indexOf(player)
+                                    return players.toSpliced(idx, 1)
+                                })
+                                const piece = <PlayerPiece team={player.team} key={player.position} text={player.position}/>
+                                switch (player.team) {
+                                    case "opponents":
+                                        setOpponents(opponents => (
+                                            [...opponents, piece]
+                                        ))
+                                        break
+                                    case "allies":
+                                        setAllies(allies => (
+                                            [...allies, piece]
+                                        ))
+                                }
+                            }}/>
                     </div>
                 </div>
             </div>