Drag and Drop players in the editor #11
Merged
maxime.batista
merged 12 commits from editor/place-players into master 1 year ago
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 427 B |
@ -0,0 +1,58 @@
|
||||
import {ReactElement, useRef} from "react";
|
||||
import Draggable from "react-draggable";
|
||||
|
||||
export interface RackProps<E extends {key: string | number}> {
|
||||
id: string,
|
||||
objects: E[],
|
||||
onChange: (objects: E[]) => void,
|
||||
canDetach: (ref: HTMLDivElement) => boolean,
|
||||
onElementDetached: (ref: HTMLDivElement, el: E) => void,
|
||||
render: (e: E) => ReactElement,
|
||||
}
|
||||
|
||||
interface RackItemProps<E extends {key: string | number}> {
|
||||
item: E,
|
||||
onTryDetach: (ref: HTMLDivElement, el: E) => void,
|
||||
render: (e: E) => ReactElement,
|
||||
}
|
||||
|
||||
/**
|
||||
* A container of draggable objects
|
||||
* */
|
||||
export function Rack<E extends {key: string | number}>({id, objects, onChange, canDetach, onElementDetached, render}: RackProps<E>) {
|
||||
return (
|
||||
<div id={id} style={{
|
||||
display: "flex"
|
||||
}}>
|
||||
{objects.map(element => (
|
||||
<RackItem key={element.key}
|
||||
item={element}
|
||||
render={render}
|
||||
onTryDetach={(ref, element) => {
|
||||
if (!canDetach(ref))
|
||||
return
|
||||
|
||||
const index = objects.findIndex(o => o.key === element.key)
|
||||
onChange(objects.toSpliced(index, 1))
|
||||
|
||||
onElementDetached(ref, element)
|
||||
}}/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RackItem<E extends {key: string | number}>({item, onTryDetach, render}: RackItemProps<E>) {
|
||||
const divRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
position={{x: 0, y: 0}}
|
||||
nodeRef={divRef}
|
||||
onStop={() => onTryDetach(divRef.current!, item)}>
|
||||
<div ref={divRef}>
|
||||
{render(item)}
|
||||
</div>
|
||||
</Draggable>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import CourtSvg from '../../assets/basketball_court.svg?react';
|
||||
import '../../style/basket_court.css';
|
||||
import {useRef} from "react";
|
||||
import CourtPlayer from "./CourtPlayer";
|
||||
import {Player} from "../../data/Player";
|
||||
|
||||
export interface BasketCourtProps {
|
||||
players: Player[],
|
||||
onPlayerRemove: (p: Player) => void,
|
||||
}
|
||||
|
||||
export function BasketCourt({players, onPlayerRemove}: BasketCourtProps) {
|
||||
return (
|
||||
<div id="court-container" style={{position: "relative"}}>
|
||||
<CourtSvg id="court-svg"/>
|
||||
{players.map(player => {
|
||||
return <CourtPlayer key={player.id}
|
||||
player={player}
|
||||
onRemove={() => onPlayerRemove(player)}
|
||||
/>
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
import {useRef} from "react";
|
||||
import "../../style/player.css";
|
||||
import RemoveIcon from "../../assets/icon/remove.svg?react";
|
||||
import Draggable from "react-draggable";
|
||||
import {PlayerPiece} from "./PlayerPiece";
|
||||
import {Player} from "../../data/Player";
|
||||
|
||||
export interface PlayerProps {
|
||||
player: Player,
|
||||
onRemove: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* A player that is placed on the court, which can be selected, and moved in the associated bounds
|
||||
* */
|
||||
export default function CourtPlayer({player, onRemove}: PlayerProps) {
|
||||
|
||||
const x = player.rightRatio;
|
||||
const y = player.bottomRatio;
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
handle={".player-piece"}
|
||||
bounds="parent"
|
||||
>
|
||||
<div className={"player"}
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: `${x * 100}%`,
|
||||
top: `${y * 100}%`,
|
||||
}}>
|
||||
|
||||
<div tabIndex={0}
|
||||
className="player-content"
|
||||
onKeyUp={e => {
|
||||
if (e.key == "Delete")
|
||||
onRemove()
|
||||
}}>
|
||||
<div className="player-selection-tab">
|
||||
<RemoveIcon
|
||||
className="player-selection-tab-remove"
|
||||
onClick={onRemove}/>
|
||||
</div>
|
||||
<PlayerPiece team={player.team} text={player.role}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Draggable>
|
||||
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import '../../style/player.css'
|
||||
import {Team} from "../../data/Team";
|
||||
|
||||
|
||||
export function PlayerPiece({team, text}: { team: Team, text: string }) {
|
||||
return (
|
||||
<div className={`player-piece ${team}`}>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
import {Team} from "./Team";
|
||||
|
||||
export interface Player {
|
||||
/**
|
||||
* unique identifier of the player.
|
||||
* This identifier must be unique to the associated court.
|
||||
*/
|
||||
id: number,
|
||||
|
||||
/**
|
||||
* the player's team
|
||||
* */
|
||||
team: Team,
|
||||
|
||||
/**
|
||||
* player's position
|
||||
* */
|
||||
role: string,
|
||||
|
||||
/**
|
||||
* Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
|
||||
*/
|
||||
bottomRatio: number
|
||||
|
||||
/**
|
||||
* Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
|
||||
*/
|
||||
rightRatio: number,
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
export enum Team {
|
||||
Allies = "allies",
|
||||
Opponents = "opponents"
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
|
||||
|
||||
#court-container {
|
||||
display: flex;
|
||||
|
||||
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#court-svg {
|
||||
margin: 5%;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#court-svg * {
|
||||
stroke: var(--selected-team-secondarycolor);
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
/**
|
||||
as the .player div content is translated,
|
||||
the real .player div position is not were the user can expect.
|
||||
Disable pointer events to this div as it may overlap on other components
|
||||
on the court.
|
||||
*/
|
||||
.player {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.player-piece {
|
||||
font-family: monospace;
|
||||
pointer-events: all;
|
||||
|
||||
background-color: var(--selected-team-primarycolor);
|
||||
color: var(--selected-team-secondarycolor);
|
||||
|
||||
border-width: 2px;
|
||||
border-radius: 100px;
|
||||
border-style: solid;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.player-selection-tab {
|
||||
display: flex;
|
||||
|
||||
position: absolute;
|
||||
margin-bottom: 10%;
|
||||
justify-content: center;
|
||||
visibility: hidden;
|
||||
|
||||
width: 100%;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.player-selection-tab-remove {
|
||||
pointer-events: all;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
.player-selection-tab-remove * {
|
||||
stroke: red;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.player-selection-tab-remove:hover * {
|
||||
fill: #f1dbdb;
|
||||
stroke: #ff331a;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.player:focus-within .player-selection-tab {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.player:focus-within .player-piece {
|
||||
color: var(--selection-color);
|
||||
}
|
||||
|
||||
.player:focus-within {
|
||||
z-index: 1000;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
../front
|
||||
Loading…
Reference in new issue