persist player position

front/Utils.ts

@@ -0,0 +1,9 @@
+export function calculateRatio(it: { x: number, y: number }, parent: DOMRect): { x: number, y: number } {
+    const relativeXPixels = it.x - parent.x;
+    const relativeYPixels = it.y - parent.y;
+
+    const xRatio = relativeXPixels / parent.width;
+    const yRatio = relativeYPixels / parent.height;
+
+    return {x: xRatio, y: yRatio}
+}

front/components/editor/BasketCourt.tsx

@@ -21,6 +21,7 @@ export function BasketCourt({players, onPlayerRemove, onPlayerChange}: BasketCou
                                     player={player}
                                     onChange={onPlayerChange}
                                     onRemove={() => onPlayerRemove(player)}
+                                    parentRef={divRef}
                 />
             })}
         </div>

front/components/editor/CourtPlayer.tsx

@@ -1,52 +1,70 @@
 
-import {useRef} from "react";
-import "../../style/player.css";
-import RemoveIcon from "../../assets/icon/remove.svg?react";
-import Draggable from "react-draggable";
-import {PlayerPiece} from "./PlayerPiece";
-import {Player} from "../../tactic/Player";
+import { MutableRefObject, useEffect, useRef, useState } from "react"
+import "../../style/player.css"
+import RemoveIcon from "../../assets/icon/remove.svg?react"
+import Draggable from "react-draggable"
+import { PlayerPiece } from "./PlayerPiece"
+import { Player } from "../../tactic/Player"
+import { calculateRatio } from "../../Utils"
 
 export interface PlayerProps {
     player: Player,
     onChange: (p: Player) => void,
     onRemove: () => void
+    parentRef: MutableRefObject<HTMLElement>
 }
 
 /**
  * A player that is placed on the court, which can be selected, and moved in the associated bounds
  * */
+export default function CourtPlayer({
+    player,
+    onChange,
+    onRemove,
+    parentRef,
+}: PlayerProps) {
+    const pieceRef = useRef<HTMLDivElement>(null)
 
-export default function CourtPlayer({player, onChange,  onRemove}: PlayerProps) {
-
-    const x = player.rightRatio
-    const y = player.bottomRatio
+    const [x, setX] = useState(player.rightRatio)
+    const [y, setY] = useState(player.bottomRatio)
 
     return (
         <Draggable
             handle={".player-piece"}
+            nodeRef={pieceRef}
             bounds="parent"
-            defaultPosition={{x, y}}
-            onStop={() => onChange({
-                id: player.id,
-                rightRatio: player.rightRatio,
-                bottomRatio: player.bottomRatio,
-                team: player.team,
-                role: player.role
-            })}
-        >
-            <div className={"player"}
-                 style={{
-                     position: "absolute",
-                     left: `${x * 100}%`,
-                     top: `${y * 100}%`,
-                 }}>
-
-                <div tabIndex={0}
-                     className="player-content"
-                     onKeyUp={e => {
-                         if (e.key == "Delete")
-                             onRemove()
-                     }}>
+            position={{ x, y }}
+            onStop={() => {
+                const pieceBounds = pieceRef.current!.getBoundingClientRect()
+                const parentBounds = parentRef.current!.getBoundingClientRect()
+
+                const { x, y } = calculateRatio(pieceBounds, parentBounds)
+
+                setX(x)
+                setY(y)
+
+                onChange({
+                    id: player.id,
+                    rightRatio: x,
+                    bottomRatio: y,
+                    team: player.team,
+                    role: player.role,
+                })
+            }}>
+            <div
+                ref={pieceRef}
+                className={"player"}
+                style={{
+                    position: "absolute",
+                    left: `${x * 100}%`,
+                    top: `${y * 100}%`,
+                }}>
+                <div
+                    tabIndex={0}
+                    className="player-content"
+                    onKeyUp={(e) => {
+                        if (e.key == "Delete") onRemove()
+                    }}>
                     <div className="player-selection-tab">
                         <RemoveIcon
                             className="player-selection-tab-remove"

front/views/Editor.tsx

@@ -10,6 +10,7 @@ import {Player} from "../tactic/Player";
 import {Tactic, TacticContent} from "../tactic/Tactic";
 import {fetchAPI} from "../Fetcher";
 import {Team} from "../tactic/Team";
+import {calculateRatio} from "../Utils";
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -81,23 +82,17 @@ function EditorView({tactic: {name, content}, onContentChange, onNameChange}: Ed
         const refBounds = ref.getBoundingClientRect()
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
-        const relativeXPixels = refBounds.x - courtBounds.x
-        const relativeYPixels = refBounds.y - courtBounds.y
-
-        const xRatio = relativeXPixels / courtBounds.width
-        const yRatio = relativeYPixels / courtBounds.height
-
-        setPlayers((players) => {
-            return [
-                ...players,
-                {
-                    id: players.length,
-                    team: element.team,
-                    role: element.key,
-                    rightRatio: xRatio,
-                    bottomRatio: yRatio,
-                },
-            ]
+
+        const {x, y} = calculateRatio(refBounds, courtBounds)
+
+        setPlayers(players => {
+            return [...players, {
+                id: players.length,
+                team: element.team,
+                role: element.key,
+                rightRatio: x,
+                bottomRatio: y
+            }]
         })
     }