place 5 players on the basketball court

front/ViewRenderer.tsx

@@ -11,8 +11,6 @@ export function renderView(Component: FunctionComponent, args: {}) {
         document.getElementById('root') as HTMLElement
     );
 
-    console.log(args)
-
     root.render(
         <React.StrictMode>
             <Component {...args}/>

front/assets/basketball_court.svg

@@ -0,0 +1,39 @@
+<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>

front/components/editor/BasketCourt.tsx

@@ -0,0 +1,35 @@
+import courtSvg from '../../assets/basketball_court.svg';
+import '../../style/basket_court.css';
+import React, {MouseEvent, ReactElement, useRef, useState} from "react";
+import Player from "./Player";
+
+
+export function BasketCourt() {
+    const [players, setPlayers] = useState<ReactElement[]>([])
+    const divRef = useRef<HTMLDivElement>(null);
+
+    return (
+        <div id="court-container"
+             ref={divRef}
+             style={{
+                 backgroundImage: `url(${courtSvg})`
+             }}
+             onClick={(e: MouseEvent) => {
+                 let bounds = divRef.current.getBoundingClientRect();
+
+                 const player = (
+                     <Player key={players.length}
+                             id={players.length + 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>
+    )
+}
+
+

front/components/editor/Player.tsx

@@ -0,0 +1,34 @@
+import React, {useEffect, useRef, useState} from "react";
+import "../../style/player.css";
+import Draggable, {ControlPosition, DraggableBounds} from "react-draggable";
+
+export default function Player({id, x, y, bounds}: {
+    id: number,
+    x: number,
+    y: number,
+    bounds: DraggableBounds
+}) {
+
+    const ref = useRef<HTMLDivElement>();
+    useEffect(() => {
+        const playerRect = ref.current?.getBoundingClientRect();
+        bounds.bottom -= playerRect.height / 2;
+        bounds.right -= playerRect.width / 2;
+    }, [ref])
+
+    return (
+        <Draggable
+            nodeRef={ref}
+            bounds={bounds}
+            defaultPosition={{x: x, y: y}}>
+            <div ref={ref}
+                 className="player"
+                 style={{
+                     position: "absolute",
+                 }}>
+                <p>{id}</p>
+            </div>
+        </Draggable>
+
+    )
+}

front/style/basket_court.css

@@ -0,0 +1,8 @@
+
+
+#court-container {
+    background-color: rebeccapurple;
+    display: flex;
+    width: 1000px;
+    height: 500px;
+}

front/style/colors.css

@@ -5,4 +5,9 @@
     --second-color: #ccde54;
 
     --background-color: #d2cdd3;
+
+
+
+    --selected-team-primarycolor: #ffffff;
+    --selected-team-secondarycolor: #000000;
 }

front/style/editor.css

@@ -1,13 +1,16 @@
 @import "colors.css";
 
 
-#main {
+#main-div {
+    display: flex;
     height: 100%;
     width: 100%;
     background-color: var(--background-color);
+
+    flex-direction: column;
 }
 
-#topbar {
+#topbar-div {
     display: flex;
     background-color: var(--main-color);
 
@@ -18,3 +21,13 @@
 .title_input {
     width: 25ch;
 }
+
+#court-div {
+    background-color: var(--background-color);
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+

front/style/player.css

@@ -0,0 +1,24 @@
+.player {
+    font-family: monospace;
+
+    background-color: var(--selected-team-primarycolor);
+    color: var(--selected-team-secondarycolor);
+
+
+    border-width: 2px;
+    border-radius: 100px;
+    border-style: solid;
+
+    width: 20px;
+    height: 20px;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    /*apply a translation to */
+    transform: translate(-50%, -50%);
+
+    user-select: none;
+}

front/views/Editor.tsx

@@ -2,6 +2,7 @@ import React, {CSSProperties, useState} from "react";
 import "../style/editor.css";
 import TitleInput from "../components/TitleInput";
 import {API} from "../Constants";
+import {BasketCourt} from "../components/editor/BasketCourt";
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red"
@@ -12,8 +13,8 @@ export default function Editor({id, name}: { id: number, name: string }) {
     const [style, setStyle] = useState<CSSProperties>({});
 
     return (
-        <div id="main">
+        <div id="main-div">
-            <div id="topbar">
+            <div id="topbar-div">
                 <div>LEFT</div>
                 <TitleInput style={style} default_value={name} on_validated={new_name => {
                     fetch(`${API}/tactic/${id}/edit/name`, {
@@ -35,7 +36,9 @@ export default function Editor({id, name}: { id: number, name: string }) {
                 }}/>
                 <div>RIGHT</div>
             </div>
+            <div id="court-div">
+                <BasketCourt/>
+            </div>
         </div>
     )
 }
-

package.json

@@ -12,10 +12,10 @@
     "@types/react-dom": "^18.2.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
-    "vite-plugin-css-injected-by-js": "^3.3.0",
+    "vite-plugin-css-injected-by-js": "^3.3.0"
-    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "vite --host",
@@ -29,6 +29,8 @@
     ]
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.1.0"
+    "@svgr/webpack": "^8.1.0",
+    "@vitejs/plugin-react": "^4.1.0",
+    "vite-plugin-svgr": "^4.1.0"
   }
 }

public/front

@@ -0,0 +1 @@
+../front

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