WIP

front/components/editor/BasketCourt.tsx

@@ -3,6 +3,7 @@ import '../../style/basket_court.css';
 import React, {MouseEvent, ReactElement, useRef, useState} from "react";
 import Player from "./Player";
 
+const TEAM_MAX_PLAYER = 5;
 
 export function BasketCourt() {
     const [players, setPlayers] = useState<ReactElement[]>([])
@@ -15,11 +16,18 @@ export function BasketCourt() {
                  backgroundImage: `url(${courtSvg})`
              }}
              onClick={(e: MouseEvent) => {
-                 let bounds = divRef.current.getBoundingClientRect();
+                 if (e.target != divRef.current)
+                     return
+                 let bounds = divRef.current!.getBoundingClientRect();
+                 let playerCount = players.length;
+
+                 if (playerCount >= TEAM_MAX_PLAYER) {
+                     return;
+                 }
 
                  const player = (
-                     <Player key={players.length}
-                             id={players.length + 1}
+                     <Player key={playerCount}
+                             id={playerCount + 1}
                              x={e.clientX - bounds.x}
                              y={e.clientY - bounds.y}
                              bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}

front/components/editor/Player.tsx

@@ -1,6 +1,6 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, {useEffect, useRef} from "react";
 import "../../style/player.css";
-import Draggable, {ControlPosition, DraggableBounds} from "react-draggable";
+import Draggable, {DraggableBounds} from "react-draggable";
 
 export default function Player({id, x, y, bounds}: {
     id: number,
@@ -9,11 +9,11 @@ export default function Player({id, x, y, bounds}: {
     bounds: DraggableBounds
 }) {
 
-    const ref = useRef<HTMLDivElement>();
+    const ref = useRef<HTMLDivElement>(null);
     useEffect(() => {
-        const playerRect = ref.current?.getBoundingClientRect();
-        bounds.bottom -= playerRect.height / 2;
-        bounds.right -= playerRect.width / 2;
+        const playerRect = ref.current!.getBoundingClientRect();
+        bounds.bottom! -= playerRect.height / 2;
+        bounds.right! -= playerRect.width / 2;
     }, [ref])
 
     return (

package.json

@@ -29,7 +29,6 @@
     ]
   },
   "devDependencies": {
-    "@svgr/webpack": "^8.1.0",
     "@vitejs/plugin-react": "^4.1.0",
     "vite-plugin-svgr": "^4.1.0"
   }

vite.config.ts

@@ -2,7 +2,6 @@ import {defineConfig} from "vite";
 import react from '@vitejs/plugin-react';
 import fs from "fs";
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
-import svgr from 'vite-plugin-svgr';
 
 
 function resolve_entries(dirname: string): [string, string][] {
@@ -40,8 +39,5 @@ export default defineConfig({
         cssInjectedByJsPlugin({
             relativeCSSInjection: true,
         }),
-        svgr({
-            include: "**/*.svg",
-        })
     ]
 })