diff --git a/front/components/editor/BallPiece.tsx b/front/components/editor/BallPiece.tsx index 8da7f5f..685705e 100644 --- a/front/components/editor/BallPiece.tsx +++ b/front/components/editor/BallPiece.tsx @@ -1,15 +1,9 @@ -<<<<<<< HEAD -======= -import React, {RefObject, useRef} from "react" - ->>>>>>> 7fa76bf (push for trying to resolve problem) import "../../style/ball.css" import BallSvg from "../../assets/icon/ball.svg?react" import { Ball } from "../../tactic/CourtObjects" export interface CourtBallProps { -<<<<<<< HEAD onMoved: (rect: DOMRect) => void onRemove: () => void ball: Ball @@ -17,24 +11,4 @@ export interface CourtBallProps { export function BallPiece() { return -======= - onDrop: (pos: DOMRect) => void -} - -export function CourtBall({ onDrop }: CourtBallProps) { - const ref = useRef() - return ( - onDrop(ref.current!.getBoundingClientRect())} nodeRef={ref}> - - - ) ->>>>>>> 7fa76bf (push for trying to resolve problem) -} - -export function BallPiece({pieceRef}: {pieceRef: RefObject}) { - return ( -
- -
- ) -} +} \ No newline at end of file diff --git a/front/components/editor/BasketCourt.tsx b/front/components/editor/BasketCourt.tsx index d5a9d21..aa7458f 100644 --- a/front/components/editor/BasketCourt.tsx +++ b/front/components/editor/BasketCourt.tsx @@ -3,7 +3,6 @@ import { RefObject } from "react" import CourtPlayer from "./CourtPlayer" import { Player } from "../../tactic/Player" -<<<<<<< HEAD import { CourtObject } from "../../tactic/CourtObjects" import { CourtBall } from "./CourtBall" @@ -12,16 +11,6 @@ export interface BasketCourtProps { objects: CourtObject[] onPlayerRemove: (p: Player) => void -======= -import {BallPiece, CourtBall} from "./BallPiece"; -import {Ball} from "../../tactic/Ball"; - -export interface BasketCourtProps { - players: Player[] - ball: Ball - onPlayerRemove: (p: Player) => void - onBallDrop: (b: DOMRect) => void ->>>>>>> 7fa76bf (push for trying to resolve problem) onPlayerChange: (p: Player) => void onBallRemove: () => void @@ -33,20 +22,15 @@ export interface BasketCourtProps { } export function BasketCourt({ - players, -<<<<<<< HEAD - objects, -======= - ball, ->>>>>>> 7fa76bf (push for trying to resolve problem) - onPlayerRemove, - onBallRemove, - onBallMoved, - onPlayerChange, - courtImage, - courtRef, -}: BasketCourtProps) { - + players, + objects, + onPlayerRemove, + onBallRemove, + onBallMoved, + onPlayerChange, + courtImage, + courtRef, + }: BasketCourtProps) { return (
) })} -<<<<<<< HEAD {objects.map((object) => { if (object.type == "ball") { @@ -80,9 +63,6 @@ export function BasketCourt({ } throw new Error("unknown court object", object.type) })} -======= - ->>>>>>> 7fa76bf (push for trying to resolve problem)
) -} +} \ No newline at end of file diff --git a/front/components/editor/CourtBall.tsx b/front/components/editor/CourtBall.tsx index f2c32e6..e050efb 100644 --- a/front/components/editor/CourtBall.tsx +++ b/front/components/editor/CourtBall.tsx @@ -28,4 +28,4 @@ export function CourtBall({ onMoved, ball, onRemove }: CourtBallProps) { ) -} +} \ No newline at end of file diff --git a/front/components/editor/CourtPlayer.tsx b/front/components/editor/CourtPlayer.tsx index 55ab101..a5f9c51 100644 --- a/front/components/editor/CourtPlayer.tsx +++ b/front/components/editor/CourtPlayer.tsx @@ -10,11 +10,7 @@ export interface PlayerProps { player: Player onChange: (p: Player) => void onRemove: () => void -<<<<<<< HEAD onBallDrop: (bounds: DOMRect) => void -======= - onBallDrop: (b: DOMRect) => void ->>>>>>> 7fa76bf (push for trying to resolve problem) parentRef: RefObject } @@ -22,13 +18,14 @@ export interface PlayerProps { * A player that is placed on the court, which can be selected, and moved in the associated bounds * */ export default function CourtPlayer({ - player, - onChange, - onRemove, - onBallDrop, - parentRef, -}: PlayerProps) { + player, + onChange, + onRemove, + onBallDrop, + parentRef, + }: PlayerProps) { const pieceRef = useRef(null) + const ballPiece = useRef(null) const x = player.rightRatio const y = player.bottomRatio @@ -71,7 +68,6 @@ export default function CourtPlayer({ }}>
{hasBall && ( -<<<<<<< HEAD @@ -84,12 +80,6 @@ export default function CourtPlayer({
-======= - onBallDrop(ball)} - pieceRef={ball} - /> ->>>>>>> 7fa76bf (push for trying to resolve problem) )} ) -} +} \ No newline at end of file diff --git a/front/tactic/CourtObjects.ts b/front/tactic/CourtObjects.ts index 585c6b2..52161cc 100644 --- a/front/tactic/CourtObjects.ts +++ b/front/tactic/CourtObjects.ts @@ -9,18 +9,9 @@ export interface Ball { /** * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle) */ -<<<<<<< HEAD:front/tactic/CourtObjects.ts readonly bottomRatio: number /** * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle) */ readonly rightRatio: number -======= - bottomRatio: number - - /** - * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle) - */ - rightRatio: number ->>>>>>> 7fa76bf (push for trying to resolve problem):front/tactic/Ball.ts -} +} \ No newline at end of file diff --git a/front/tactic/Tactic.ts b/front/tactic/Tactic.ts index 1de59af..726825b 100644 --- a/front/tactic/Tactic.ts +++ b/front/tactic/Tactic.ts @@ -1,9 +1,5 @@ import { Player } from "./Player" -<<<<<<< HEAD import { CourtObject } from "./CourtObjects" -======= -import {Ball} from "./Ball"; ->>>>>>> 7fa76bf (push for trying to resolve problem) export interface Tactic { id: number @@ -13,9 +9,5 @@ export interface Tactic { export interface TacticContent { players: Player[] -<<<<<<< HEAD objects: CourtObject[] -======= - ball : Ball ->>>>>>> 7fa76bf (push for trying to resolve problem) -} +} \ No newline at end of file diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx index f7a1865..6421bc4 100644 --- a/front/views/Editor.tsx +++ b/front/views/Editor.tsx @@ -1,11 +1,4 @@ -import { - CSSProperties, - Dispatch, - SetStateAction, - useCallback, - useRef, - useState, -} from "react" +import {CSSProperties, Dispatch, SetStateAction, useCallback, useRef, useState,} from "react" import "../style/editor.css" import TitleInput from "../components/TitleInput" import { BasketCourt } from "../components/editor/BasketCourt" @@ -16,8 +9,6 @@ import halfCourt from "../assets/court/half_court.svg" import {BallPiece, CourtBall} from "../components/editor/BallPiece"; - - import { Rack } from "../components/Rack" import { PlayerPiece } from "../components/editor/PlayerPiece" import { Player } from "../tactic/Player" @@ -66,7 +57,6 @@ interface RackedPlayer { type RackedCourtObject = { key: "ball" } - export default function Editor({ id, name, @@ -139,17 +129,12 @@ function EditorView({ const [opponents, setOpponents] = useState( getRackPlayers(Team.Opponents, content.players), ) - - const [objects, setObjects] = useState( - isBallOnCourt(content) ? [] : [{ key: "ball" }], - ) + const [objects, setObjects] = useState([{key: "ball"}]) const courtDivContentRef = useRef(null) const isBoundsOnCourt = (bounds: DOMRect) => { - const rackBallRef = useRef(null) - const [rackBall, setRackBall] = useState(true) const courtDivContentRef = useRef(null) const canDetach = (bounds: DOMRect) => { @@ -184,7 +169,6 @@ function EditorView({ hasBall: false, }, ], - ball: content.ball } }) } @@ -236,46 +220,37 @@ function EditorView({ objects: [...content.objects, courtObject], } - const onBallDetach = (pos: DOMRect) => { + const onObjectDetach = (ref: HTMLDivElement, rackedObject: RackedCourtObject) => { + const refBounds = ref.getBoundingClientRect() const courtBounds = courtDivContentRef.current!.getBoundingClientRect() - const {x, y} = calculateRatio(pos, courtBounds) + const {x, y} = calculateRatio(refBounds, courtBounds) - setContent((content) => { - return { - players: content.players, - ball: { + let courtObject: CourtObject + + + switch (rackedObject.key) { + case "ball": + courtObject = { + type: "ball", rightRatio: x, bottomRatio: y } - } - }) - } - - const onBallDrop = (ballBounds: DOMRect) => { - let ballAssigned = false + break + default: + throw new Error("unknown court object ", rackedObject.key) + } - 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} + setContent((content) => + ({ + ...content, + objects: [ + ...content.objects, + courtObject, + ] }) - return {players: players, ball: content.ball} - }) + ) } - const getPlayerCollided = ( bounds: DOMRect, players: Player[], @@ -496,7 +471,6 @@ function EditorView({ player, true, ), - ball: content.ball })) }} onPlayerRemove={(player) => { @@ -513,6 +487,7 @@ function EditorView({ ) } + function isBallOnCourt(content: TacticContent) { if (content.players.findIndex((p) => p.hasBall) != -1) { return true @@ -522,7 +497,7 @@ function isBallOnCourt(content: TacticContent) { function renderCourtObject(courtObject: RackedCourtObject) { if (courtObject.key == "ball") { - return + return } throw new Error("unknown racked court object ", courtObject.key) }