From 9fd4868d0549a8b84e8ca5088b557d9bac6cfeb3 Mon Sep 17 00:00:00 2001 From: "vivien.dufour" Date: Sun, 17 Dec 2023 12:34:16 +0100 Subject: [PATCH] push for trying to resolve problem --- front/components/editor/BallPiece.tsx | 24 +++++--- front/components/editor/BasketCourt.tsx | 8 ++- front/components/editor/CourtPlayer.tsx | 12 +--- front/tactic/Ball.ts | 4 +- front/tactic/Tactic.ts | 2 + front/views/Editor.tsx | 73 +++++++++++++++---------- 6 files changed, 72 insertions(+), 51 deletions(-) diff --git a/front/components/editor/BallPiece.tsx b/front/components/editor/BallPiece.tsx index baaba70..2c3b3b0 100644 --- a/front/components/editor/BallPiece.tsx +++ b/front/components/editor/BallPiece.tsx @@ -1,21 +1,27 @@ -import React, { RefObject } from "react" +import React, {RefObject, useRef} 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 +export interface CourtBallProps { + onDrop: (pos: DOMRect) => void } -export function BallPiece({ onDrop, pieceRef }: BallPieceProps) { +export function CourtBall({ onDrop }: CourtBallProps) { + const ref = useRef() return ( - -
- -
+ onDrop(ref.current!.getBoundingClientRect())} nodeRef={ref}> + ) } + +export function BallPiece({pieceRef}: {pieceRef: RefObject}) { + return ( +
+ +
+ ) +} diff --git a/front/components/editor/BasketCourt.tsx b/front/components/editor/BasketCourt.tsx index c158d89..bca8a72 100644 --- a/front/components/editor/BasketCourt.tsx +++ b/front/components/editor/BasketCourt.tsx @@ -2,11 +2,14 @@ import "../../style/basket_court.css" import { RefObject, useRef } from "react" import CourtPlayer from "./CourtPlayer" import { Player } from "../../tactic/Player" +import {BallPiece, CourtBall} from "./BallPiece"; +import {Ball} from "../../tactic/Ball"; export interface BasketCourtProps { players: Player[] + ball: Ball onPlayerRemove: (p: Player) => void - onBallDrop: (ref: HTMLDivElement) => void + onBallDrop: (b: DOMRect) => void onPlayerChange: (p: Player) => void courtImage: string courtRef: RefObject @@ -14,12 +17,14 @@ export interface BasketCourtProps { export function BasketCourt({ players, + ball, onPlayerRemove, onBallDrop, onPlayerChange, courtImage, courtRef, }: BasketCourtProps) { + return (
) })} +
) } diff --git a/front/components/editor/CourtPlayer.tsx b/front/components/editor/CourtPlayer.tsx index 6aebdcb..5ebeedf 100644 --- a/front/components/editor/CourtPlayer.tsx +++ b/front/components/editor/CourtPlayer.tsx @@ -1,6 +1,5 @@ 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" @@ -11,7 +10,7 @@ export interface PlayerProps { player: Player onChange: (p: Player) => void onRemove: () => void - onBallDrop: (ref: HTMLDivElement) => void + onBallDrop: (b: DOMRect) => void parentRef: RefObject } @@ -26,7 +25,6 @@ export default function CourtPlayer({ parentRef, }: PlayerProps) { const pieceRef = useRef(null) - const ballPiece = useRef(null) const x = player.rightRatio const y = player.bottomRatio @@ -69,14 +67,10 @@ export default function CourtPlayer({ if (e.key == "Delete") onRemove() }}>
- {hasBall && ( onBallDrop(ballPiece.current!)} - pieceRef={ballPiece} + onDrop={() => onBallDrop(ball)} + pieceRef={ball} /> )}
diff --git a/front/tactic/Ball.ts b/front/tactic/Ball.ts index 443e4f9..c3eaa4b 100644 --- a/front/tactic/Ball.ts +++ b/front/tactic/Ball.ts @@ -2,10 +2,10 @@ 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 + bottomRatio: number /** * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle) */ - right_percentage: number + rightRatio: number } diff --git a/front/tactic/Tactic.ts b/front/tactic/Tactic.ts index bb2cd37..adf82e9 100644 --- a/front/tactic/Tactic.ts +++ b/front/tactic/Tactic.ts @@ -1,4 +1,5 @@ import { Player } from "./Player" +import {Ball} from "./Ball"; export interface Tactic { id: number @@ -8,4 +9,5 @@ export interface Tactic { export interface TacticContent { players: Player[] + ball : Ball } diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx index bb96339..c6b074e 100644 --- a/front/views/Editor.tsx +++ b/front/views/Editor.tsx @@ -16,7 +16,9 @@ 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 {BallPiece, CourtBall} from "../components/editor/BallPiece"; + + import { Player } from "../tactic/Player" import { Tactic, TacticContent } from "../tactic/Tactic" import { fetchAPI } from "../Fetcher" @@ -26,7 +28,8 @@ import SavingState, { SaveState, SaveStates, } from "../components/editor/SavingState" -import * as Console from "console"; +import {Ball} from "../tactic/Ball"; +import Draggable from "react-draggable"; const ERROR_STYLE: CSSProperties = { borderColor: "red", @@ -57,7 +60,12 @@ interface RackedPlayer { key: string } -export default function Editor({ id, name, courtType, content }: EditorProps) { +export default function Editor({ + id, + name, + courtType, + content, + }: EditorProps) { const isInGuestMode = id == -1 const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY) @@ -96,17 +104,17 @@ export default function Editor({ id, name, courtType, content }: EditorProps) { (r) => r.ok, ) }} - courtType={courtType} - /> + courtType={courtType}/> ) } function EditorView({ - tactic: { id, name, content: initialContent }, - onContentChange, - onNameChange, - courtType, -}: EditorViewProps) { + tactic: {id, name, content: initialContent}, + onContentChange, + onNameChange, + courtType, + }: EditorViewProps) { + const isInGuestMode = id == -1 const [titleStyle, setTitleStyle] = useState({}) @@ -131,16 +139,15 @@ function EditorView({ const courtDivContentRef = useRef(null) - const canDetach = (ref: HTMLDivElement) => { - const refBounds = ref.getBoundingClientRect() + const canDetach = (bounds: DOMRect) => { const courtBounds = courtDivContentRef.current!.getBoundingClientRect() // check if refBounds overlaps courtBounds return !( - refBounds.top > courtBounds.bottom || - refBounds.right < courtBounds.left || - refBounds.bottom < courtBounds.top || - refBounds.left > courtBounds.right + bounds.top > courtBounds.bottom || + bounds.right < courtBounds.left || + bounds.bottom < courtBounds.top || + bounds.left > courtBounds.right ) } @@ -163,18 +170,21 @@ function EditorView({ hasBall: false, }, ], + ball: content.ball } }) } - const onBallDrop = (ref: HTMLDivElement) => { - const ballBounds = ref.getBoundingClientRect() + + + + const onBallDrop = (ballBounds: DOMRect) => { let ballAssigned = false - setContent((content) => { - const players = content.players.map((player) => { + setContent(content => { + const players = content.players.map(player => { if (ballAssigned) { - return { ...player, hasBall: false } + return {...player, hasBall: false} } const playerBounds = document .getElementById(player.id)! @@ -190,8 +200,7 @@ function EditorView({ } return { ...player, hasBall: doesOverlap } }) - setShowBall(!ballAssigned) - return { players: players } + return {players: players, ball: content.ball} }) } @@ -200,7 +209,8 @@ function EditorView({
- + +
- {showBall && ( - onBallDrop(ballPiece.current!)} - pieceRef={ballPiece} - /> - )} + {rackBall && { + if (canDetach(pos)) { + onBallDetach(pos) + } + }}/>} { @@ -281,6 +292,7 @@ function EditorView({ player, false, ), + ball: content.ball })) let setter switch (player.team) { @@ -293,6 +305,7 @@ function EditorView({ if (player.hasBall) { setShowBall(true) } + setter((players) => [ ...players, {