Application-Web/front/views/Editor.tsx

import {CSSProperties, ReactElement, RefObject, useRef, useState} from "react";
import "../style/editor.css";
import TitleInput from "../components/TitleInput";
import {API} from "../Constants";
import {BasketCourt} from "../components/editor/BasketCourt";

import {Rack} from "../components/Rack";
import {PlayerPiece} from "../components/editor/PlayerPiece";
import {Player} from "../data/Player";

const ERROR_STYLE: CSSProperties = {
    borderColor: "red"
}

export default function Editor({id, name}: { id: number, name: string }) {
    const [style, setStyle] = useState<CSSProperties>({});

    const positions = ["1", "2", "3", "4", "5"]
    const [allies, setAllies] = useState(
        positions.map(pos => <PlayerPiece team="allies" key={pos} text={pos}/>)
    )
    const [opponents, setOpponents] = useState(
        positions.map(pos => <PlayerPiece team="opponents" key={pos} text={pos}/>)
    )

    const [players, setPlayers] = useState<Player[]>([]);
    const courtDivContentRef = useRef<HTMLDivElement>(null);

    const canDetach = (ref: RefObject<HTMLDivElement>) => {
        const refBounds = ref.current!.getBoundingClientRect();
        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
        );
    }

    const onElementDetach = (ref: RefObject<HTMLDivElement>, 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;

        setPlayers(players => {
            return [...players, {
                id: players.length,
                team: element.props.team,
                position: element.props.text,
                right_percentage: xPercent,
                bottom_percentage: yPercent
            }]
        })
    }

    return (
        <div id="main-div">
            <div id="topbar-div">
                <div>LEFT</div>
                <TitleInput style={style} default_value={name} on_validated={new_name => {
                    fetch(`${API}/tactic/${id}/edit/name`, {
                        method: "POST",
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            name: new_name,
                        })
                    }).then(response => {
                        if (response.ok) {
                            setStyle({})
                        } else {
                            setStyle(ERROR_STYLE)
                        }
                    })
                }}/>
                <div>RIGHT</div>
            </div>
            <div id="edit-div">
                <div id="racks">
                    <Rack id="allies-rack"
                          objects={[allies, setAllies]}
                          canDetach={canDetach}
                          onElementDetached={onElementDetach}/>
                    <Rack id="opponent-rack"
                          objects={[opponents, setOpponents]}
                          canDetach={canDetach}
                          onElementDetached={onElementDetach}/>
                </div>
                <div id="court-div">
                    <div ref={courtDivContentRef}>
                        <BasketCourt
                            players={players}
                            onPlayerRemove={(player) => {
                                setPlayers(players => {
                                    const idx = players.indexOf(player)
                                    return players.toSpliced(idx, 1)
                                })
                                const piece = <PlayerPiece team={player.team} key={player.position} text={player.position}/>
                                switch (player.team) {
                                    case "opponents":
                                        setOpponents(opponents => (
                                            [...opponents, piece]
                                        ))
                                        break
                                    case "allies":
                                        setAllies(allies => (
                                            [...allies, piece]
                                        ))
                                }
                            }}/>
                    </div>
                </div>
            </div>
        </div>
    )
}