IQBall
/
Application-Web
6
0
Fork 0
Code Issues 49 Pull Requests Packages Projects 5 Releases Wiki Activity

can assign ball to player in the code (need render and destroy ball now)
continuous-integration/drone/push Build is passing Details

Browse Source
pull/40/head
Vivien DUFOUR 1 year ago
parent dac0c54cec
commit 7ab18786cc
4 changed files with 63 additions and 73 deletions
Show Stats Download Patch File Download Diff File

2
front/components/editor/BallPiece.tsx
Unescape View File

@ -2,7 +2,7 @@ import React from "react";
import "../../style/ball.css"; import "../../style/ball.css";
import Ball from "../../assets/icon/ball.svg"; import Ball from "../../assets/icon/ball.svg?react";
export function BallPiece() { export function BallPiece() {
return ( return (

6
front/components/editor/CourtPlayer.tsx
Unescape View File

@ -21,7 +21,6 @@ export default function CourtPlayer({
player, player,
onChange, onChange,
onRemove, onRemove,
assignBall,
parentRef, parentRef,
}: PlayerProps) { }: PlayerProps) {
const pieceRef = useRef<HTMLDivElement>(null) const pieceRef = useRef<HTMLDivElement>(null)
@ -42,11 +41,12 @@ export default function CourtPlayer({
const { x, y } = calculateRatio(pieceBounds, parentBounds) const { x, y } = calculateRatio(pieceBounds, parentBounds)
onChange({ onChange({
id : player.id,
rightRatio: x, rightRatio: x,
bottomRatio: y, bottomRatio: y,
team: player.team, team: player.team,
role: player.role, role: player.role,
hasBall: false hasBall: player.hasBall
}) })
}}> }}>
<div <div
@ -57,7 +57,7 @@ export default function CourtPlayer({
left: `${x * 100}%`, left: `${x * 100}%`,
top: `${y * 100}%`, top: `${y * 100}%`,
}}> }}>
<div <div id={player.id}
tabIndex={0} tabIndex={0}
className="player-content" className="player-content"
onKeyUp={(e) => { onKeyUp={(e) => {

2
front/tactic/Player.ts
Unescape View File

@ -1,6 +1,8 @@
import { Team } from "./Team" import { Team } from "./Team"
export interface Player { export interface Player {
id : string
/** /**
* the player's team * the player's team
* */ * */

112
front/views/Editor.tsx
Unescape View File

@ -8,22 +8,23 @@ import {
} from "react" } from "react"
import "../style/editor.css" import "../style/editor.css"
import TitleInput from "../components/TitleInput" import TitleInput from "../components/TitleInput"
import { BasketCourt } from "../components/editor/BasketCourt" import {BasketCourt} from "../components/editor/BasketCourt"
import { BallPiece } from "../components/editor/BallPiece"; import {BallPiece} from "../components/editor/BallPiece";
import { Ball } from "../tactic/Ball"; import {Ball} from "../tactic/Ball";
import { Rack } from "../components/Rack" import {Rack} from "../components/Rack"
import { PlayerPiece } from "../components/editor/PlayerPiece" import {PlayerPiece} from "../components/editor/PlayerPiece"
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"
import { Team } from "../tactic/Team" import {Team} from "../tactic/Team"
import { calculateRatio } from "../Utils" import {calculateRatio} from "../Utils"
import SavingState, { import SavingState, {
SaveState, SaveState,
SaveStates, SaveStates,
} from "../components/editor/SavingState" } from "../components/editor/SavingState"
import Draggable from "react-draggable";
const ERROR_STYLE: CSSProperties = { const ERROR_STYLE: CSSProperties = {
borderColor: "red", borderColor: "red",
@ -50,7 +51,7 @@ export default function Editor({
id, id,
name, name,
content, content,
}: { }: {
id: number id: number
name: string name: string
content: string content: string
@ -66,7 +67,7 @@ export default function Editor({
return ( return (
<EditorView <EditorView
tactic={{ name: editorName, id, content: JSON.parse(editorContent) }} tactic={{name: editorName, id, content: JSON.parse(editorContent)}}
onContentChange={async (content: TacticContent) => { onContentChange={async (content: TacticContent) => {
if (isInGuestMode) { if (isInGuestMode) {
localStorage.setItem( localStorage.setItem(
@ -75,7 +76,7 @@ export default function Editor({
) )
return SaveStates.Guest return SaveStates.Guest
} }
return fetchAPI(`tactic/${id}/save`, { content }).then((r) => return fetchAPI(`tactic/${id}/save`, {content}).then((r) =>
r.ok ? SaveStates.Ok : SaveStates.Err, r.ok ? SaveStates.Ok : SaveStates.Err,
) )
}} }}
@ -84,7 +85,7 @@ export default function Editor({
localStorage.setItem(GUEST_MODE_TITLE_STORAGE_KEY, name) localStorage.setItem(GUEST_MODE_TITLE_STORAGE_KEY, name)
return true //simulate that the name has been changed return true //simulate that the name has been changed
} }
return fetchAPI(`tactic/${id}/edit/name`, { name }).then( return fetchAPI(`tactic/${id}/edit/name`, {name}).then(
(r) => r.ok, (r) => r.ok,
) )
}} }}
@ -94,10 +95,10 @@ export default function Editor({
function EditorView({ function EditorView({
tactic: { id, name, content: initialContent }, tactic: {id, name, content: initialContent},
onContentChange, onContentChange,
onNameChange, onNameChange,
}: EditorViewProps) { }: EditorViewProps) {
const isInGuestMode = id == -1 const isInGuestMode = id == -1
const [style, setStyle] = useState<CSSProperties>({}) const [style, setStyle] = useState<CSSProperties>({})
@ -113,8 +114,7 @@ function EditorView({
getRackPlayers(Team.Opponents, content.players), getRackPlayers(Team.Opponents, content.players),
) )
const ballPiece = useRef<HTMLDivElement>(null)
const [ball, setBall] = useState<Ball[]>([]);
const courtDivContentRef = useRef<HTMLDivElement>(null) const courtDivContentRef = useRef<HTMLDivElement>(null)
@ -136,13 +136,14 @@ function EditorView({
const refBounds = ref.getBoundingClientRect() const refBounds = ref.getBoundingClientRect()
const courtBounds = courtDivContentRef.current!.getBoundingClientRect() const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
const { x, y } = calculateRatio(refBounds, courtBounds) const {x, y} = calculateRatio(refBounds, courtBounds)
setContent((content) => { setContent((content) => {
return { return {
players: [ players: [
...content.players, ...content.players,
{ {
id: "player-" + content.players.length,
team: element.team, team: element.team,
role: element.key, role: element.key,
rightRatio: x, rightRatio: x,
@ -154,37 +155,22 @@ function EditorView({
}) })
} }
const canDetachBall = (ref: HTMLDivElement) => { const onElementDetachBall = () => {
const refBounds = ref.getBoundingClientRect(); const ballBounds = ballPiece.current!.getBoundingClientRect()
const courtBounds = courtDivContentRef.current!.getBoundingClientRect();
//check if we give the ball to a player on the court for (const player of content.players) {
if (!canDetach(ref)) { const playerBounds = document.getElementById(player.id)!.getBoundingClientRect()
return false; const doesNotOverlap = (
ballBounds.top > playerBounds.bottom ||
ballBounds.right < playerBounds.left ||
ballBounds.bottom < playerBounds.top ||
ballBounds.left > playerBounds.right
)
if (doesNotOverlap) {
continue
} }
/*for(const player in players) { player.hasBall = true
const rightRatio = player
}*/
return false;
} }
const onElementDetachBall = (ref: HTMLDivElement) => {
const refBounds = ref.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, {
right_percentage: xPercent,
bottom_percentage: yPercent,
}]
})
} }
@ -193,7 +179,7 @@ function EditorView({
<div id="topbar-div"> <div id="topbar-div">
<div id="topbar-left"> <div id="topbar-left">
LEFT LEFT
<SavingState state={saveState} /> <SavingState state={saveState}/>
</div> </div>
<div id="title-input-div"> <div id="title-input-div">
<TitleInput <TitleInput
@ -216,25 +202,27 @@ function EditorView({
onChange={setAllies} onChange={setAllies}
canDetach={canDetach} canDetach={canDetach}
onElementDetached={onPieceDetach} onElementDetached={onPieceDetach}
render={({ team, key }) => ( render={({team, key}) => (
<PlayerPiece team={team} text={key} key={key} /> <PlayerPiece team={team} text={key} key={key}/>
)} )}
/> />
<Rack
id="ball-rack" <Draggable
objects={ball} onStop={onElementDetachBall}
onChange={setBall} >
canDetach={canDetachBall} <div ref={ballPiece}>
onElementDetached={onElementDetachBall} <BallPiece/>
render={({pos}) => <BallPiece key={pos}/>}/> </div>
</Draggable>
<Rack <Rack
id="opponent-rack" id="opponent-rack"
objects={opponents} objects={opponents}
onChange={setOpponents} onChange={setOpponents}
canDetach={canDetach} canDetach={canDetach}
onElementDetached={onPieceDetach} onElementDetached={onPieceDetach}
render={({ team, key }) => ( render={({team, key}) => (
<PlayerPiece team={team} text={key} key={key} /> <PlayerPiece team={team} text={key} key={key}/>
)} )}
/> />
</div> </div>
@ -291,7 +279,7 @@ function getRackPlayers(team: Team, players: Player[]): RackedPlayer[] {
players.findIndex((p) => p.team == team && p.role == role) == players.findIndex((p) => p.team == team && p.role == role) ==
-1, -1,
) )
.map((key) => ({ team, key })) .map((key) => ({team, key}))
} }
function useContentState<S>( function useContentState<S>(

Write Preview
Loading…
Cancel
Save