From a7ddad4c67093ae03a1c94d5fd157d41fce70a7b Mon Sep 17 00:00:00 2001
From: Override-6 <maximebatista18@gmail.com>
Date: Wed, 8 Nov 2023 22:45:43 +0100
Subject: [PATCH] fix basket court

---
 front/assets/basketball_court.svg       | 81 +++++++++++++------------
 front/components/editor/BasketCourt.tsx | 46 +++++++-------
 front/style/basket_court.css            | 12 +++-
 vite.config.ts                          |  4 ++
 4 files changed, 78 insertions(+), 65 deletions(-)

diff --git a/front/assets/basketball_court.svg b/front/assets/basketball_court.svg
index c5378b9..25b6f6c 100644
--- a/front/assets/basketball_court.svg
+++ b/front/assets/basketball_court.svg
@@ -1,39 +1,44 @@
-<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"/>
-<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"/>
-<g filter="url(#filter0_d_4_24)">
-<circle cx="39" cy="251" r="19.5" stroke="black" stroke-width="3" shape-rendering="crispEdges"/>
-</g>
-<g filter="url(#filter1_d_4_24)">
-<circle cx="956" cy="250" r="19.5" stroke="black" stroke-width="3" shape-rendering="crispEdges"/>
-</g>
-<line x1="137" y1="165" x2="6" y2="165" stroke="black" stroke-width="6"/>
-<line x1="137" y1="337" x2="6" y2="337" stroke="black" stroke-width="6"/>
-<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">
-<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"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<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">
-<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"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_24"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_24" result="shape"/>
-</filter>
-</defs>
+<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"/>
+    <g filter="url(#filter0_d_4_24)">
+        <circle cx="39" cy="251" r="19.5" stroke="black" stroke-width="3" shape-rendering="crispEdges"/>
+    </g>
+    <g filter="url(#filter1_d_4_24)">
+        <circle cx="956" cy="250" r="19.5" stroke="black" stroke-width="3" shape-rendering="crispEdges"/>
+    </g>
+    <line x1="137" y1="165" x2="6" y2="165" stroke="black" stroke-width="6"/>
+    <line x1="137" y1="337" x2="6" y2="337" stroke="black" stroke-width="6"/>
+    <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">
+            <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"/>
+            <feOffset dy="4"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+            <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">
+            <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"/>
+            <feOffset dy="4"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_24"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_24" result="shape"/>
+        </filter>
+    </defs>
 </svg>
diff --git a/front/components/editor/BasketCourt.tsx b/front/components/editor/BasketCourt.tsx
index 768d4a5..394f403 100644
--- a/front/components/editor/BasketCourt.tsx
+++ b/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,31 +11,28 @@ export function BasketCourt() {
     const divRef = useRef<HTMLDivElement>(null);
 
     return (
-        <div id="court-container"
-             ref={divRef}
-             style={{
-                 backgroundImage: `url(${courtSvg})`
-             }}
-             onClick={(e: MouseEvent) => {
-                 if (e.target != divRef.current)
-                     return
-                 let bounds = divRef.current!.getBoundingClientRect();
-                 let playerCount = players.length;
+        <div id="court-container" ref={divRef}>
+            <CourtSvg
+                id="court-svg"
+                onClick={(e: MouseEvent) => {
+                    console.log(e.target)
+                    let bounds = divRef.current!.getBoundingClientRect();
+                    let playerCount = players.length;
 
-                 if (playerCount >= TEAM_MAX_PLAYER) {
-                     return;
-                 }
+                    if (playerCount >= TEAM_MAX_PLAYER) {
+                        return;
+                    }
 
-                 const player = (
-                     <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}}
-                     />
-                 );
-                 setPlayers([...players, player])
-             }}>
+                    const player = (
+                        <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}}
+                        />
+                    );
+                    setPlayers([...players, player])
+                }}/>
             {players}
         </div>
     )
diff --git a/front/style/basket_court.css b/front/style/basket_court.css
index b1a3e10..2e60cfd 100644
--- a/front/style/basket_court.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 34cb651..bb04351 100644
--- a/vite.config.ts
+++ b/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"
+        })
     ]
 })