add ball on screen

front/assets/icon/ball.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1280.000000pt" height="1276.000000pt" viewBox="0 0 1280.000000 1276.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1276.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M6085 12754 c-1124 -66 -2124 -378 -3055 -952 -113 -70 -150 -98
+-115 -88 50 14 350 37 555 43 925 24 1755 -198 2573 -691 95 -56 321 -202 502
+-322 511 -340 600 -373 753 -280 281 170 481 457 559 800 24 105 24 393 -1
+506 -59 277 -202 557 -417 813 -45 54 -91 102 -103 106 -19 8 -160 25 -411 51
+-99 11 -724 21 -840 14z"/>
+<path d="M7630 12635 c0 -2 28 -48 63 -102 210 -324 335 -626 378 -913 16
+-112 14 -310 -6 -424 -56 -328 -245 -651 -591 -1014 -79 -83 -105 -117 -98
+-127 11 -17 953 -895 959 -895 3 0 136 105 297 233 1085 863 1485 1140 2065
+1431 94 47 173 91 175 98 7 20 -232 240 -467 429 -766 616 -1654 1043 -2622
+1259 -135 31 -153 33 -153 25z"/>
+<path d="M3055 11615 c-127 -13 -262 -36 -359 -61 -69 -18 -157 -81 -397 -280
+-984 -823 -1695 -1909 -2049 -3135 -84 -291 -140 -550 -185 -854 -19 -130 -29
+-231 -23 -225 3 3 16 34 28 70 36 103 124 267 195 363 386 518 1151 901 2475
+1238 291 74 553 134 910 209 107 23 236 50 285 60 50 11 158 33 240 50 83 17
+191 39 240 50 50 10 133 28 185 39 1079 228 1599 392 1915 604 96 64 205 181
+244 262 28 57 35 82 35 135 1 62 -2 70 -44 135 -142 218 -526 495 -1019 737
+-920 449 -1941 680 -2676 603z"/>
+<path d="M10940 10674 c-63 -41 -176 -114 -250 -162 -299 -193 -798 -547
+-1215 -861 -423 -318 -899 -711 -893 -736 2 -6 189 -246 417 -532 l414 -520
+171 82 c528 255 975 375 1398 375 574 0 1060 -239 1464 -720 85 -101 219 -286
+264 -365 18 -31 34 -54 36 -52 11 11 -69 456 -120 671 -235 976 -692 1875
+-1347 2646 -54 63 -126 145 -161 182 l-63 66 -115 -74z"/>
+<path d="M7125 9833 c-70 -62 -231 -181 -327 -242 -491 -308 -1120 -531 -2106
+-746 -90 -20 -452 -94 -804 -165 -1128 -228 -1491 -317 -1978 -485 -936 -323
+-1527 -761 -1860 -1378 l-42 -78 -5 -252 c-31 -1503 472 -2974 1415 -4137 47
+-58 87 -107 88 -108 8 -11 50 35 210 233 1067 1318 2042 2408 3174 3549 953
+960 1908 1846 2933 2721 135 116 246 215 247 220 0 10 -890 905 -900 905 -3
+-1 -23 -17 -45 -37z"/>
+<path d="M8255 8618 c-886 -668 -1534 -1216 -2370 -2004 -1028 -969 -2125
+-2136 -3299 -3509 -132 -154 -265 -309 -296 -345 -142 -164 -592 -703 -596
+-715 -7 -16 300 -326 466 -471 678 -593 1425 -1020 2260 -1294 231 -75 490
+-143 730 -190 207 -40 413 -72 560 -85 62 -6 69 -4 155 38 192 94 346 209 515
+383 351 363 601 854 839 1649 58 192 158 587 211 835 40 185 114 541 190 920
+98 486 168 825 200 965 5 22 16 69 24 105 8 36 36 151 61 255 40 164 59 235
+115 435 52 187 169 532 242 715 232 582 562 1062 911 1325 25 19 45 38 44 42
+-2 8 -838 1039 -840 1037 -1 0 -56 -41 -122 -91z"/>
+<path d="M10570 8093 c-358 -54 -579 -149 -741 -319 -84 -89 -93 -106 -86
+-168 10 -100 65 -199 397 -721 368 -578 508 -818 691 -1185 379 -760 567
+-1413 611 -2132 24 -392 -30 -863 -142 -1243 -16 -54 -28 -100 -27 -102 8 -8
+297 369 419 547 722 1055 1109 2313 1108 3600 0 294 -15 490 -40 547 -30 68
+-127 228 -194 318 -240 326 -590 581 -999 729 -271 98 -498 137 -791 135 -100
+-1 -192 -3 -206 -6z"/>
+<path d="M9265 7317 c-292 -97 -541 -403 -744 -914 -174 -439 -312 -964 -521
+-1975 -16 -82 -44 -214 -60 -295 -17 -82 -39 -188 -50 -238 -11 -49 -33 -157
+-50 -240 -389 -1893 -798 -2915 -1390 -3478 -57 -54 -123 -112 -147 -130 l-45
+-32 203 -3 c568 -9 1247 95 1844 283 928 292 1741 765 2451 1423 179 166 216
+207 253 281 96 190 163 413 202 676 20 128 23 192 23 430 0 344 -22 560 -95
+927 -191 959 -696 2109 -1249 2843 -175 231 -351 410 -428 433 -64 19 -153 23
+-197 9z"/>
+</g>
+</svg>

front/components/editor/BallPiece.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import "../../style/ball.css";
+
+import Ball from "../../assets/icon/ball.svg";
+
+export function BallPiece() {
+    return (
+        <div className={`ball-div`}>
+            <Ball id={'ball'}/>
+        </div>
+    )
+}

front/components/editor/CourtPlayer.tsx

@@ -1,6 +1,7 @@
 import {useRef} from "react";
 import "../../style/player.css";
 import RemoveIcon from "../../assets/icon/remove.svg";
+import AssignBallIcon from "../../assets/icon/ball.svg";
 import Draggable, {DraggableBounds} from "react-draggable";
 import {PlayerPiece} from "./PlayerPiece";
 
@@ -10,13 +11,14 @@ export interface PlayerProps {
     x: number,
     y: number,
     bounds: DraggableBounds,
-    onRemove: () => void
+    onRemove: () => void,
+    hasBall: boolean
 }
 
 /**
  * A player that is placed on the court, which can be selected, and moved in the associated bounds
  * */
-export default function CourtPlayer({pos, team, x, y, bounds, onRemove}: PlayerProps) {
+export default function CourtPlayer({pos, team, x, y, bounds, onRemove, hasBall}: PlayerProps) {
 
     const ref = useRef<HTMLDivElement>(null);
     return (

front/data/Ball.ts

@@ -0,0 +1,15 @@
+export interface Ball {
+
+    position: string,
+
+    /**
+     * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
+     */
+    bottom_percentage: number,
+
+    /**
+     * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
+     */
+    right_percentage: number,
+
+}

front/data/Player.ts

@@ -18,10 +18,15 @@ export interface Player {
     /**
      * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
      */
-    bottomRatio: number
+    bottomRatio: number,
+
 
     /**
      * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
      */
     rightRatio: number,
+
+
+    hasBall: boolean,
+
 }

front/style/ball.css

@@ -0,0 +1,8 @@
+#ball * {
+    fill: #c5520d;
+}
+
+#ball {
+    width: 20px;
+    height: 20px;
+}

front/style/colors.css

@@ -6,7 +6,7 @@
 
     --background-color: #d2cdd3;
 
-    --selected-team-primarycolor: #ffffff;
+    --selected-team-primarycolor: #50b63a;
     --selected-team-secondarycolor: #000000;
 
     --selection-color: #3f7fc4

front/style/player.css

@@ -27,9 +27,11 @@ on the court.
     background-color: var(--selected-team-primarycolor);
     color: var(--selected-team-secondarycolor);
 
-    border-width: 2px;
     border-radius: 100px;
+    /*
+    border-width: 2px;
     border-style: solid;
+    */
 
     width: 20px;
     height: 20px;

front/views/Editor.tsx

@@ -7,6 +7,8 @@ import {BasketCourt} from "../components/editor/BasketCourt";
 import {Rack} from "../components/Rack";
 import {PlayerPiece} from "../components/editor/PlayerPiece";
 import {Player} from "../data/Player";
+import {BallPiece} from "../components/editor/BallPiece";
+import {Ball} from "../data/Ball";
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red"
@@ -24,6 +26,7 @@ export default function Editor({id, name}: { id: number, name: string }) {
     const [style, setStyle] = useState<CSSProperties>({});
 
     const positions = ["1", "2", "3", "4", "5"]
+    const positionBall = ["1"]
     const [allies, setAllies] = useState(
         positions.map(key => ({team: "allies", key}))
     )
@@ -31,6 +34,9 @@ export default function Editor({id, name}: { id: number, name: string }) {
         positions.map(key => ({team: "opponents", key}))
     )
 
+    const [ballPiece, setBallPiece] = useState(positionBall)
+    const [ball, setBall] = useState<Ball[]>([]);
+
     const [players, setPlayers] = useState<Player[]>([]);
     const courtDivContentRef = useRef<HTMLDivElement>(null);
 
@@ -63,7 +69,42 @@ export default function Editor({id, name}: { id: number, name: string }) {
                 team: element.team,
                 position: element.key,
                 rightRatio: xRatio,
-                bottomRatio: yRatio
+                bottomRatio: yRatio,
+                hasBall:false
+            }]
+        })
+    }
+
+    const canDetachBall = (ref: HTMLDivElement) => {
+        const refBounds = ref.getBoundingClientRect();
+        const courtBounds = courtDivContentRef.current!.getBoundingClientRect();
+
+        //check if we give the ball to a player on the court
+        if (!canDetach(ref)) {
+            return false;
+        }
+        for(const player in players) {
+            const rightRatio = player
+        }
+        return false;
+    }
+
+    const onElementDetachBall = (ref: RefObject<HTMLDivElement>, element: ReactElement) => {
+        const refBounds = ref.current!.getBoundingClientRect();
+        const courtBounds = courtDivContentRef.current!.getBoundingClientRect();
+
+        const relativeXPixels = refBounds.x - courtBounds.x;
+        const relativeYPixels = refBounds.y - courtBounds.y;
+
+        const xPercent = relativeXPixels / courtBounds.width;
+        const yPercent = relativeYPixels / courtBounds.height;
+
+
+        setBall(ball => {
+            return [...ball, {
+                position: element.props.text,
+                right_percentage: xPercent,
+                bottom_percentage: yPercent,
             }]
         })
     }
@@ -100,6 +141,12 @@ export default function Editor({id, name}: { id: number, name: string }) {
                           canDetach={canDetach}
                           onElementDetached={onElementDetach}
                           render={({team, key}) => <PlayerPiece team={team} text={key} key={key}/>}/>
+                    <Rack id="ball-rack"
+                          objects={ballPiece}
+                          onChange={setBallPiece}
+                          canDetach={canDetachBall}
+                          onElementDetached={onElementDetachBall}
+                          render={({pos}) => <BallPiece key={pos}/>}/>
                     <Rack id="opponent-rack"
                           objects={opponents}
                           onChange={setOpponents}
@@ -111,6 +158,7 @@ export default function Editor({id, name}: { id: number, name: string }) {
                     <div id="court-div-bounds" ref={courtDivContentRef}>
                         <BasketCourt
                             players={players}
+                            ball={ball}
                             onPlayerRemove={(player) => {
                                 setPlayers(players => {
                                     const idx = players.indexOf(player)