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,51 +1,69 @@
 
-import {useRef} from "react";
+import { MutableRefObject, useEffect, useRef, useState } from "react"
-import "../../style/player.css";
+import "../../style/player.css"
-import RemoveIcon from "../../assets/icon/remove.svg?react";
+import RemoveIcon from "../../assets/icon/remove.svg?react"
-import Draggable from "react-draggable";
+import Draggable from "react-draggable"
-import {PlayerPiece} from "./PlayerPiece";
+import { PlayerPiece } from "./PlayerPiece"
-import {Player} from "../../tactic/Player";
+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, setX] = useState(player.rightRatio)
-
+    const [y, setY] = useState(player.bottomRatio)
-    const x = player.rightRatio
-    const y = player.bottomRatio
 
     return (
         <Draggable
             handle={".player-piece"}
+            nodeRef={pieceRef}
             bounds="parent"
-            defaultPosition={{x, y}}
+            position={{ x, y }}
-            onStop={() => onChange({
+            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: player.rightRatio,
+                    rightRatio: x,
-                bottomRatio: player.bottomRatio,
+                    bottomRatio: y,
                     team: player.team,
-                role: player.role
+                    role: player.role,
-            })}
+                })
-        >
+            }}>
-            <div className={"player"}
+            <div
+                ref={pieceRef}
+                className={"player"}
                 style={{
                     position: "absolute",
                     left: `${x * 100}%`,
                     top: `${y * 100}%`,
                 }}>
-
+                <div
-                <div tabIndex={0}
+                    tabIndex={0}
                     className="player-content"
-                     onKeyUp={e => {
+                    onKeyUp={(e) => {
-                         if (e.key == "Delete")
+                        if (e.key == "Delete") onRemove()
-                             onRemove()
                     }}>
                     <div className="player-selection-tab">
                         <RemoveIcon

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 {x, y} = calculateRatio(refBounds, courtBounds)
-        const yRatio = relativeYPixels / courtBounds.height
 
-        setPlayers((players) => {
+        setPlayers(players => {
-            return [
+            return [...players, {
-                ...players,
-                {
                 id: players.length,
                 team: element.team,
                 role: element.key,
-                    rightRatio: xRatio,
+                rightRatio: x,
-                    bottomRatio: yRatio,
+                bottomRatio: y
-                },
+            }]
-            ]
         })
     }