fix basket court

front/assets/basketball_court.svg

@@ -1,6 +1,7 @@
-<svg width="995" height="500" viewBox="0 0 995 500" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="992" y="497" width="494" height="494" transform="rotate(180 992 497)" fill="white" stroke="black" stroke-width="6"/>
-<rect x="3" y="3" width="494" height="494" fill="white" stroke="black" stroke-width="6"/>
+<svg class=".basketball-court-svg" width="995" height="500" viewBox="0 0 995 500" fill="white" xmlns="http://www.w3.org/2000/svg">
+    <rect x="992" y="497" width="494" height="494" transform="rotate(180 992 497)" stroke="black"
+          stroke-width="6"/>
+    <rect  x="3" y="3" width="494" height="494" stroke="black" stroke-width="6"/>
     <circle cx="496.5" cy="245.5" r="134.5" stroke="black" stroke-width="6"/>
     <path d="M137 337C184.496 337 223 298.496 223 251C223 203.504 184.496 165 137 165" stroke="black" stroke-width="6"/>
     <path d="M858 163C810.504 163 772 201.504 772 249C772 296.496 810.504 335 858 335" stroke="black" stroke-width="6"/>
@@ -15,9 +16,11 @@
     <line x1="989" y1="335" x2="858" y2="335" stroke="black" stroke-width="6"/>
     <line x1="989" y1="163" x2="858" y2="163" stroke="black" stroke-width="6"/>
     <defs>
-<filter id="filter0_d_4_24" x="14" y="230" width="50" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <filter id="filter0_d_4_24" x="14" y="230" width="50" height="50" filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB">
             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                           result="hardAlpha"/>
             <feOffset dy="4"/>
             <feGaussianBlur stdDeviation="2"/>
             <feComposite in2="hardAlpha" operator="out"/>
@@ -25,9 +28,11 @@
             <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_24"/>
             <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_24" result="shape"/>
         </filter>
-<filter id="filter1_d_4_24" x="931" y="229" width="50" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <filter id="filter1_d_4_24" x="931" y="229" width="50" height="50" filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB">
             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                           result="hardAlpha"/>
             <feOffset dy="4"/>
             <feGaussianBlur stdDeviation="2"/>
             <feComposite in2="hardAlpha" operator="out"/>

front/components/editor/BasketCourt.tsx

@@ -1,7 +1,8 @@
-import courtSvg from '../../assets/basketball_court.svg';
+import CourtSvg from '../../assets/basketball_court.svg';
 import '../../style/basket_court.css';
 import React, {MouseEvent, ReactElement, useRef, useState} from "react";
 import Player from "./Player";
+import Draggable from "react-draggable";
 
 const TEAM_MAX_PLAYER = 5;
 
@@ -10,14 +11,11 @@ export function BasketCourt() {
     const divRef = useRef<HTMLDivElement>(null);
 
     return (
-        <div id="court-container"
-             ref={divRef}
-             style={{
-                 backgroundImage: `url(${courtSvg})`
-             }}
+        <div id="court-container" ref={divRef}>
+            <CourtSvg
+                id="court-svg"
                 onClick={(e: MouseEvent) => {
-                 if (e.target != divRef.current)
-                     return
+                    console.log(e.target)
                     let bounds = divRef.current!.getBoundingClientRect();
                     let playerCount = players.length;
 
@@ -34,7 +32,7 @@ export function BasketCourt() {
                         />
                     );
                     setPlayers([...players, player])
-             }}>
+                }}/>
             {players}
         </div>
     )

front/style/basket_court.css

@@ -1,8 +1,14 @@
 
 
 #court-container {
-    background-color: rebeccapurple;
     display: flex;
-    width: 1000px;
-    height: 500px;
+}
+
+#court-svg {
+    user-select: none;
+    -webkit-user-drag: none;
+}
+
+#court-svg * {
+    stroke: var(--selected-team-secondarycolor);
 }

vite.config.ts

@@ -2,6 +2,7 @@ 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][] {
@@ -39,5 +40,8 @@ export default defineConfig({
         cssInjectedByJsPlugin({
             relativeCSSInjection: true,
         }),
+        svgr({
+            include: "**/*.svg"
+        })
     ]
 })