push for trying to resolve problem

pull/77/head
Vivien DUFOUR 2 years ago
parent 9c07506b00
commit 9fd4868d05

@ -1,21 +1,27 @@
import React, { RefObject } from "react" import React, {RefObject, useRef} from "react"
import "../../style/ball.css" import "../../style/ball.css"
import Ball from "../../assets/icon/ball.svg?react" import Ball from "../../assets/icon/ball.svg?react"
import Draggable from "react-draggable" import Draggable from "react-draggable"
export interface BallPieceProps { export interface CourtBallProps {
onDrop: () => void onDrop: (pos: DOMRect) => void
pieceRef: RefObject<HTMLDivElement>
} }
export function BallPiece({ onDrop, pieceRef }: BallPieceProps) { export function CourtBall({ onDrop }: CourtBallProps) {
const ref = useRef<HTMLElement>()
return ( return (
<Draggable onStop={onDrop} nodeRef={pieceRef} position={{ x: 0, y: 0 }}> <Draggable onStop={() => onDrop(ref.current!.getBoundingClientRect())} nodeRef={ref}>
<div className={`ball-div`} ref={pieceRef}> <BallPiece pieceRef={ref}/>
<Ball className={"ball"} />
</div>
</Draggable> </Draggable>
) )
} }
export function BallPiece({pieceRef}: {pieceRef: RefObject<HTMLElement>}) {
return (
<div ref={pieceRef} className={`ball-div`} >
<Ball className={"ball"} />
</div>
)
}

@ -2,11 +2,14 @@ import "../../style/basket_court.css"
import { RefObject, useRef } from "react" import { RefObject, useRef } from "react"
import CourtPlayer from "./CourtPlayer" import CourtPlayer from "./CourtPlayer"
import { Player } from "../../tactic/Player" import { Player } from "../../tactic/Player"
import {BallPiece, CourtBall} from "./BallPiece";
import {Ball} from "../../tactic/Ball";
export interface BasketCourtProps { export interface BasketCourtProps {
players: Player[] players: Player[]
ball: Ball
onPlayerRemove: (p: Player) => void onPlayerRemove: (p: Player) => void
onBallDrop: (ref: HTMLDivElement) => void onBallDrop: (b: DOMRect) => void
onPlayerChange: (p: Player) => void onPlayerChange: (p: Player) => void
courtImage: string courtImage: string
courtRef: RefObject<HTMLDivElement> courtRef: RefObject<HTMLDivElement>
@ -14,12 +17,14 @@ export interface BasketCourtProps {
export function BasketCourt({ export function BasketCourt({
players, players,
ball,
onPlayerRemove, onPlayerRemove,
onBallDrop, onBallDrop,
onPlayerChange, onPlayerChange,
courtImage, courtImage,
courtRef, courtRef,
}: BasketCourtProps) { }: BasketCourtProps) {
return ( return (
<div <div
id="court-container" id="court-container"
@ -38,6 +43,7 @@ export function BasketCourt({
/> />
) )
})} })}
<CourtBall ball={ball}/>
</div> </div>
) )
} }

@ -1,6 +1,5 @@
import { RefObject, useRef, useState } from "react" import { RefObject, useRef, useState } from "react"
import "../../style/player.css" import "../../style/player.css"
import RemoveIcon from "../../assets/icon/remove.svg?react"
import { BallPiece } from "./BallPiece" import { BallPiece } from "./BallPiece"
import Draggable from "react-draggable" import Draggable from "react-draggable"
import { PlayerPiece } from "./PlayerPiece" import { PlayerPiece } from "./PlayerPiece"
@ -11,7 +10,7 @@ export interface PlayerProps {
player: Player player: Player
onChange: (p: Player) => void onChange: (p: Player) => void
onRemove: () => void onRemove: () => void
onBallDrop: (ref: HTMLDivElement) => void onBallDrop: (b: DOMRect) => void
parentRef: RefObject<HTMLDivElement> parentRef: RefObject<HTMLDivElement>
} }
@ -26,7 +25,6 @@ export default function CourtPlayer({
parentRef, parentRef,
}: PlayerProps) { }: PlayerProps) {
const pieceRef = useRef<HTMLDivElement>(null) const pieceRef = useRef<HTMLDivElement>(null)
const ballPiece = useRef<HTMLDivElement>(null)
const x = player.rightRatio const x = player.rightRatio
const y = player.bottomRatio const y = player.bottomRatio
@ -69,14 +67,10 @@ export default function CourtPlayer({
if (e.key == "Delete") onRemove() if (e.key == "Delete") onRemove()
}}> }}>
<div className="player-selection-tab"> <div className="player-selection-tab">
<RemoveIcon
className="player-selection-tab-remove"
onClick={onRemove}
/>
{hasBall && ( {hasBall && (
<BallPiece <BallPiece
onDrop={() => onBallDrop(ballPiece.current!)} onDrop={() => onBallDrop(ball)}
pieceRef={ballPiece} pieceRef={ball}
/> />
)} )}
</div> </div>

@ -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) * 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) * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
*/ */
right_percentage: number rightRatio: number
} }

@ -1,4 +1,5 @@
import { Player } from "./Player" import { Player } from "./Player"
import {Ball} from "./Ball";
export interface Tactic { export interface Tactic {
id: number id: number
@ -8,4 +9,5 @@ export interface Tactic {
export interface TacticContent { export interface TacticContent {
players: Player[] players: Player[]
ball : Ball
} }

@ -16,7 +16,9 @@ import halfCourt from "../assets/court/half_court.svg"
import { Rack } from "../components/Rack" import { Rack } from "../components/Rack"
import { PlayerPiece } from "../components/editor/PlayerPiece" 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 { Player } from "../tactic/Player"
import { Tactic, TacticContent } from "../tactic/Tactic" import { Tactic, TacticContent } from "../tactic/Tactic"
import { fetchAPI } from "../Fetcher" import { fetchAPI } from "../Fetcher"
@ -26,7 +28,8 @@ import SavingState, {
SaveState, SaveState,
SaveStates, SaveStates,
} from "../components/editor/SavingState" } from "../components/editor/SavingState"
import * as Console from "console"; import {Ball} from "../tactic/Ball";
import Draggable from "react-draggable";
const ERROR_STYLE: CSSProperties = { const ERROR_STYLE: CSSProperties = {
borderColor: "red", borderColor: "red",
@ -57,7 +60,12 @@ interface RackedPlayer {
key: string 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 isInGuestMode = id == -1
const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY) 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, (r) => r.ok,
) )
}} }}
courtType={courtType} courtType={courtType}/>
/>
) )
} }
function EditorView({ function EditorView({
tactic: { id, name, content: initialContent }, tactic: {id, name, content: initialContent},
onContentChange, onContentChange,
onNameChange, onNameChange,
courtType, courtType,
}: EditorViewProps) { }: EditorViewProps) {
const isInGuestMode = id == -1 const isInGuestMode = id == -1
const [titleStyle, setTitleStyle] = useState<CSSProperties>({}) const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
@ -131,16 +139,15 @@ function EditorView({
const courtDivContentRef = useRef<HTMLDivElement>(null) const courtDivContentRef = useRef<HTMLDivElement>(null)
const canDetach = (ref: HTMLDivElement) => { const canDetach = (bounds: DOMRect) => {
const refBounds = ref.getBoundingClientRect()
const courtBounds = courtDivContentRef.current!.getBoundingClientRect() const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
// check if refBounds overlaps courtBounds // check if refBounds overlaps courtBounds
return !( return !(
refBounds.top > courtBounds.bottom || bounds.top > courtBounds.bottom ||
refBounds.right < courtBounds.left || bounds.right < courtBounds.left ||
refBounds.bottom < courtBounds.top || bounds.bottom < courtBounds.top ||
refBounds.left > courtBounds.right bounds.left > courtBounds.right
) )
} }
@ -163,18 +170,21 @@ function EditorView({
hasBall: false, hasBall: false,
}, },
], ],
ball: content.ball
} }
}) })
} }
const onBallDrop = (ref: HTMLDivElement) => {
const ballBounds = ref.getBoundingClientRect()
const onBallDrop = (ballBounds: DOMRect) => {
let ballAssigned = false let ballAssigned = false
setContent((content) => { setContent(content => {
const players = content.players.map((player) => { const players = content.players.map(player => {
if (ballAssigned) { if (ballAssigned) {
return { ...player, hasBall: false } return {...player, hasBall: false}
} }
const playerBounds = document const playerBounds = document
.getElementById(player.id)! .getElementById(player.id)!
@ -190,8 +200,7 @@ function EditorView({
} }
return { ...player, hasBall: doesOverlap } return { ...player, hasBall: doesOverlap }
}) })
setShowBall(!ballAssigned) return {players: players, ball: content.ball}
return { players: players }
}) })
} }
@ -200,7 +209,8 @@ function EditorView({
<div id="topbar-div"> <div id="topbar-div">
<div id="topbar-left"> <div id="topbar-left">
<SavingState state={saveState} /> <SavingState state={saveState}/>
</div> </div>
<div id="title-input-div"> <div id="title-input-div">
<TitleInput <TitleInput
@ -233,12 +243,11 @@ function EditorView({
)} )}
/> />
{showBall && ( {rackBall && <CourtBall onDrop={pos => {
<BallPiece if (canDetach(pos)) {
onDrop={() => onBallDrop(ballPiece.current!)} onBallDetach(pos)
pieceRef={ballPiece} }
/> }}/>}
)}
<Rack <Rack
id="opponent-rack" id="opponent-rack"
@ -260,6 +269,7 @@ function EditorView({
<div id="court-div-bounds"> <div id="court-div-bounds">
<BasketCourt <BasketCourt
players={content.players} players={content.players}
ball={content.ball}
onBallDrop={onBallDrop} onBallDrop={onBallDrop}
courtImage={ courtImage={
courtType == "PLAIN" ? plainCourt : halfCourt courtType == "PLAIN" ? plainCourt : halfCourt
@ -272,6 +282,7 @@ function EditorView({
player, player,
true, true,
), ),
ball: content.ball
})) }))
}} }}
onPlayerRemove={(player) => { onPlayerRemove={(player) => {
@ -281,6 +292,7 @@ function EditorView({
player, player,
false, false,
), ),
ball: content.ball
})) }))
let setter let setter
switch (player.team) { switch (player.team) {
@ -293,6 +305,7 @@ function EditorView({
if (player.hasBall) { if (player.hasBall) {
setShowBall(true) setShowBall(true)
} }
setter((players) => [ setter((players) => [
...players, ...players,
{ {

Loading…
Cancel
Save