Merge pull request 'Assign ball to a player in the court' (#40) from editor/ball-assign into master

Reviewed-on: #40

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,21 @@
+import React, { RefObject } from "react"
+
+import "../../style/ball.css"
+
+import Ball from "../../assets/icon/ball.svg?react"
+import Draggable from "react-draggable"
+
+export interface BallPieceProps {
+    onDrop: () => void
+    pieceRef: RefObject<HTMLDivElement>
+}
+
+export function BallPiece({ onDrop, pieceRef }: BallPieceProps) {
+    return (
+        <Draggable onStop={onDrop} nodeRef={pieceRef} position={{ x: 0, y: 0 }}>
+            <div className={`ball-div`} ref={pieceRef}>
+                <Ball className={"ball"} />
+            </div>
+        </Draggable>
+    )
+}

front/components/editor/BasketCourt.tsx

@@ -1,3 +1,4 @@
+import CourtSvg from "../../assets/basketball_court.svg?react"
 import "../../style/basket_court.css"
 import { RefObject, useRef } from "react"
 import CourtPlayer from "./CourtPlayer"
@@ -6,6 +7,7 @@ import { Player } from "../../tactic/Player"
 export interface BasketCourtProps {
     players: Player[]
     onPlayerRemove: (p: Player) => void
+    onBallDrop: (ref: HTMLDivElement) => void
     onPlayerChange: (p: Player) => void
     courtImage: string
     courtRef: RefObject<HTMLDivElement>
@@ -14,6 +16,7 @@ export interface BasketCourtProps {
 export function BasketCourt({
     players,
     onPlayerRemove,
+    onBallDrop,
     onPlayerChange,
     courtImage,
     courtRef,
@@ -31,6 +34,7 @@ export function BasketCourt({
                         player={player}
                         onChange={onPlayerChange}
                         onRemove={() => onPlayerRemove(player)}
+                        onBallDrop={onBallDrop}
                         parentRef={courtRef}
                     />
                 )

front/components/editor/CourtPlayer.tsx

@@ -1,6 +1,7 @@
 import { RefObject, useRef, useState } from "react"
 import "../../style/player.css"
 import RemoveIcon from "../../assets/icon/remove.svg?react"
+import { BallPiece } from "./BallPiece"
 import Draggable from "react-draggable"
 import { PlayerPiece } from "./PlayerPiece"
 import { Player } from "../../tactic/Player"
@@ -10,6 +11,7 @@ export interface PlayerProps {
     player: Player
     onChange: (p: Player) => void
     onRemove: () => void
+    onBallDrop: (ref: HTMLDivElement) => void
     parentRef: RefObject<HTMLDivElement>
 }
 
@@ -20,12 +22,15 @@ export default function CourtPlayer({
     player,
     onChange,
     onRemove,
+    onBallDrop,
     parentRef,
 }: PlayerProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
+    const ballPiece = useRef<HTMLDivElement>(null)
 
     const x = player.rightRatio
     const y = player.bottomRatio
+    const hasBall = player.hasBall
 
     return (
         <Draggable
@@ -40,10 +45,12 @@ export default function CourtPlayer({
                 const { x, y } = calculateRatio(pieceBounds, parentBounds)
 
                 onChange({
+                    id: player.id,
                     rightRatio: x,
                     bottomRatio: y,
                     team: player.team,
                     role: player.role,
+                    hasBall: player.hasBall,
                 })
             }}>
             <div
@@ -55,6 +62,7 @@ export default function CourtPlayer({
                     top: `${y * 100}%`,
                 }}>
                 <div
+                    id={player.id}
                     tabIndex={0}
                     className="player-content"
                     onKeyUp={(e) => {
@@ -65,8 +73,18 @@ export default function CourtPlayer({
                             className="player-selection-tab-remove"
                             onClick={onRemove}
                         />
+                        {hasBall && (
+                            <BallPiece
+                                onDrop={() => onBallDrop(ballPiece.current!)}
+                                pieceRef={ballPiece}
+                            />
+                        )}
                     </div>
-                    <PlayerPiece team={player.team} text={player.role} />
+                    <PlayerPiece
+                        team={player.team}
+                        text={player.role}
+                        hasBall={hasBall}
+                    />
                 </div>
             </div>
         </Draggable>

front/components/editor/PlayerPiece.tsx

@@ -2,9 +2,20 @@ import React from "react"
 import "../../style/player.css"
 import { Team } from "../../tactic/Team"
 
-export function PlayerPiece({ team, text }: { team: Team; text: string }) {
+export interface PlayerPieceProps {
+    team: Team
+    text: string
+    hasBall: boolean
+}
+
+export function PlayerPiece({ team, text, hasBall }: PlayerPieceProps) {
+    let className = `player-piece ${team}`
+    if (hasBall) {
+        className += ` player-piece-has-ball`
+    }
+
     return (
-        <div className={`player-piece ${team}`}>
+        <div className={className}>
             <p>{text}</p>
         </div>
     )

front/style/ball.css

@@ -0,0 +1,11 @@
+.ball * {
+    fill: #c5520d;
+}
+
+.ball-div,
+.ball {
+    pointer-events: all;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}

front/style/colors.css

@@ -0,0 +1,13 @@
+:root {
+    --main-color: #ffffff;
+    --second-color: #ccde54;
+
+    --background-color: #d2cdd3;
+
+    --selected-team-primarycolor: #50b63a;
+    --selected-team-secondarycolor: #000000;
+
+    --selection-color: #3f7fc4;
+
+    --player-piece-ball-border-color: #000000;
+}

front/style/player.css

@@ -23,9 +23,7 @@ on the court.
     background-color: var(--selected-team-primarycolor);
     color: var(--selected-team-secondarycolor);
 
-    border-width: 2px;
     border-radius: 100px;
-    border-style: solid;
 
     width: 20px;
     height: 20px;
@@ -38,20 +36,28 @@ on the court.
     user-select: none;
 }
 
+.player-piece-has-ball {
+    border-width: 2px;
+    border-style: solid;
+    border-color: var(--player-piece-ball-border-color);
+}
+
 .player-selection-tab {
     display: none;
 
     position: absolute;
-    margin-bottom: 10%;
+    margin-bottom: -20%;
     justify-content: center;
 
-    width: 100%;
+    width: fit-content;
     transform: translateY(-20px);
 }
 
 .player-selection-tab-remove {
     pointer-events: all;
-    height: 25%;
+    width: 25px;
+    height: 17px;
+    justify-content: center;
 }
 
 .player-selection-tab-remove * {

front/tactic/Ball.ts

@@ -0,0 +1,11 @@
+export interface Ball {
+    /**
+     * 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/tactic/Player.ts

@@ -1,6 +1,7 @@
 import { Team } from "./Team"
 
 export interface Player {
+    id: string
     /**
      * the player's team
      * */
@@ -20,4 +21,6 @@ export interface Player {
      * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
      */
     rightRatio: number
+
+    hasBall: boolean
 }

front/views/Editor.tsx

@@ -16,6 +16,7 @@ import halfCourt from "../assets/court/half_court.svg"
 import { Rack } from "../components/Rack"
 import { PlayerPiece } from "../components/editor/PlayerPiece"
 
+import { BallPiece } from "../components/editor/BallPiece"
 import { Player } from "../tactic/Player"
 import { Tactic, TacticContent } from "../tactic/Tactic"
 import { fetchAPI } from "../Fetcher"
@@ -121,6 +122,12 @@ function EditorView({
         getRackPlayers(Team.Opponents, content.players),
     )
 
+    const [showBall, setShowBall] = useState(
+        content.players.find((p) => p.hasBall) == undefined,
+    )
+
+    const ballPiece = useRef<HTMLDivElement>(null)
+
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
     const canDetach = (ref: HTMLDivElement) => {
@@ -147,16 +154,46 @@ function EditorView({
                 players: [
                     ...content.players,
                     {
+                        id: "player-" + content.players.length,
                         team: element.team,
                         role: element.key,
                         rightRatio: x,
                         bottomRatio: y,
+                        hasBall: false,
                     },
                 ],
             }
         })
     }
 
+    const onBallDrop = (ref: HTMLDivElement) => {
+        const ballBounds = ref.getBoundingClientRect()
+        let ballAssigned = false
+
+        setContent((content) => {
+            const players = content.players.map((player) => {
+                if (ballAssigned) {
+                    return { ...player, hasBall: false }
+                }
+                const playerBounds = document
+                    .getElementById(player.id)!
+                    .getBoundingClientRect()
+                const doesOverlap = !(
+                    ballBounds.top > playerBounds.bottom ||
+                    ballBounds.right < playerBounds.left ||
+                    ballBounds.bottom < playerBounds.top ||
+                    ballBounds.left > playerBounds.right
+                )
+                if (doesOverlap) {
+                    ballAssigned = true
+                }
+                return { ...player, hasBall: doesOverlap }
+            })
+            setShowBall(!ballAssigned)
+            return { players: players }
+        })
+    }
+
     return (
         <div id="main-div">
             <div id="topbar-div">
@@ -186,9 +223,22 @@ function EditorView({
                         canDetach={canDetach}
                         onElementDetached={onPieceDetach}
                         render={({ team, key }) => (
-                            <PlayerPiece team={team} text={key} key={key} />
+                            <PlayerPiece
+                                team={team}
+                                text={key}
+                                key={key}
+                                hasBall={false}
+                            />
                         )}
                     />
+
+                    {showBall && (
+                        <BallPiece
+                            onDrop={() => onBallDrop(ballPiece.current!)}
+                            pieceRef={ballPiece}
+                        />
+                    )}
+
                     <Rack
                         id="opponent-rack"
                         objects={opponents}
@@ -196,7 +246,12 @@ function EditorView({
                         canDetach={canDetach}
                         onElementDetached={onPieceDetach}
                         render={({ team, key }) => (
-                            <PlayerPiece team={team} text={key} key={key} />
+                            <PlayerPiece
+                                team={team}
+                                text={key}
+                                key={key}
+                                hasBall={false}
+                            />
                         )}
                     />
                 </div>
@@ -204,6 +259,7 @@ function EditorView({
                     <div id="court-div-bounds">
                         <BasketCourt
                             players={content.players}
+                            onBallDrop={onBallDrop}
                             courtImage={
                                 courtType == "PLAIN" ? plainCourt : halfCourt
                             }
@@ -233,6 +289,9 @@ function EditorView({
                                     case Team.Allies:
                                         setter = setAllies
                                 }
+                                if (player.hasBall) {
+                                    setShowBall(true)
+                                }
                                 setter((players) => [
                                     ...players,
                                     {