diff --git a/front/assets/icon/ball.svg b/front/assets/icon/ball.svg
new file mode 100644
index 0000000..6351088
--- /dev/null
+++ b/front/assets/icon/ball.svg
@@ -0,0 +1,62 @@
+
+
+
diff --git a/front/components/editor/BallPiece.tsx b/front/components/editor/BallPiece.tsx
new file mode 100644
index 0000000..79e8148
--- /dev/null
+++ b/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 (
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/front/components/editor/CourtPlayer.tsx b/front/components/editor/CourtPlayer.tsx
index 5f05e75..21a088e 100644
--- a/front/components/editor/CourtPlayer.tsx
+++ b/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(null);
return (
diff --git a/front/data/Ball.ts b/front/data/Ball.ts
new file mode 100644
index 0000000..c312fdf
--- /dev/null
+++ b/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,
+
+}
\ No newline at end of file
diff --git a/front/data/Player.ts b/front/data/Player.ts
index 9484dd3..983b650 100644
--- a/front/data/Player.ts
+++ b/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,
+
}
\ No newline at end of file
diff --git a/front/style/ball.css b/front/style/ball.css
new file mode 100644
index 0000000..5669b07
--- /dev/null
+++ b/front/style/ball.css
@@ -0,0 +1,8 @@
+#ball * {
+ fill: #c5520d;
+}
+
+#ball {
+ width: 20px;
+ height: 20px;
+}
diff --git a/front/style/colors.css b/front/style/colors.css
index f3287cb..54ee221 100644
--- a/front/style/colors.css
+++ b/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
diff --git a/front/style/player.css b/front/style/player.css
index ebd0462..d22a35f 100644
--- a/front/style/player.css
+++ b/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;
diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx
index 05dc4a1..487ee51 100644
--- a/front/views/Editor.tsx
+++ b/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({});
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([]);
+
const [players, setPlayers] = useState([]);
const courtDivContentRef = useRef(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, 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}) => }/>
+ }/>
{
setPlayers(players => {
const idx = players.indexOf(player)