maxime
parent
6df90bb3aa
commit
b9bd18c331
@ -1,243 +0,0 @@
|
|||||||
import { Pos, ratioWithinBase } from "../geo/Pos"
|
|
||||||
import {
|
|
||||||
BallState,
|
|
||||||
Player,
|
|
||||||
PlayerInfo,
|
|
||||||
PlayerTeam,
|
|
||||||
} from "../model/tactic/Player"
|
|
||||||
import {
|
|
||||||
Ball,
|
|
||||||
BALL_ID,
|
|
||||||
BALL_TYPE,
|
|
||||||
CourtObject,
|
|
||||||
} from "../model/tactic/CourtObjects"
|
|
||||||
import {
|
|
||||||
ComponentId,
|
|
||||||
TacticComponent,
|
|
||||||
TacticContent,
|
|
||||||
} from "../model/tactic/Tactic"
|
|
||||||
import { overlaps } from "../geo/Box"
|
|
||||||
import { RackedCourtObject, RackedPlayer } from "./RackedItems"
|
|
||||||
import { changePlayerBallState } from "./PlayerDomains"
|
|
||||||
|
|
||||||
export function placePlayerAt(
|
|
||||||
refBounds: DOMRect,
|
|
||||||
courtBounds: DOMRect,
|
|
||||||
element: RackedPlayer,
|
|
||||||
): Player {
|
|
||||||
const { x, y } = ratioWithinBase(refBounds, courtBounds)
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: "player",
|
|
||||||
id: "player-" + element.key + "-" + element.team,
|
|
||||||
team: element.team,
|
|
||||||
role: element.key,
|
|
||||||
rightRatio: x,
|
|
||||||
bottomRatio: y,
|
|
||||||
ballState: BallState.NONE,
|
|
||||||
path: null,
|
|
||||||
actions: [],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function placeObjectAt(
|
|
||||||
refBounds: DOMRect,
|
|
||||||
courtBounds: DOMRect,
|
|
||||||
rackedObject: RackedCourtObject,
|
|
||||||
content: TacticContent,
|
|
||||||
): TacticContent {
|
|
||||||
const { x, y } = ratioWithinBase(refBounds, courtBounds)
|
|
||||||
|
|
||||||
let courtObject: CourtObject
|
|
||||||
|
|
||||||
switch (rackedObject.key) {
|
|
||||||
case BALL_TYPE:
|
|
||||||
const playerCollidedIdx = getComponentCollided(
|
|
||||||
refBounds,
|
|
||||||
content.components,
|
|
||||||
BALL_ID,
|
|
||||||
)
|
|
||||||
if (playerCollidedIdx != -1) {
|
|
||||||
return dropBallOnComponent(playerCollidedIdx, content, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
courtObject = {
|
|
||||||
type: BALL_TYPE,
|
|
||||||
id: BALL_ID,
|
|
||||||
rightRatio: x,
|
|
||||||
bottomRatio: y,
|
|
||||||
actions: [],
|
|
||||||
}
|
|
||||||
break
|
|
||||||
|
|
||||||
default:
|
|
||||||
throw new Error("unknown court object " + rackedObject.key)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...content,
|
|
||||||
components: [...content.components, courtObject],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function dropBallOnComponent(
|
|
||||||
targetedComponentIdx: number,
|
|
||||||
content: TacticContent,
|
|
||||||
setAsOrigin: boolean,
|
|
||||||
): TacticContent {
|
|
||||||
const component = content.components[targetedComponentIdx]
|
|
||||||
|
|
||||||
if (component.type === "player" || component.type === "phantom") {
|
|
||||||
const newState =
|
|
||||||
setAsOrigin ||
|
|
||||||
component.ballState === BallState.PASSED_ORIGIN ||
|
|
||||||
component.ballState === BallState.HOLDS_ORIGIN
|
|
||||||
? BallState.HOLDS_ORIGIN
|
|
||||||
: BallState.HOLDS_BY_PASS
|
|
||||||
|
|
||||||
content = changePlayerBallState(component, newState, content)
|
|
||||||
}
|
|
||||||
|
|
||||||
return removeBall(content)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function removeBall(content: TacticContent): TacticContent {
|
|
||||||
const ballObjIdx = content.components.findIndex((o) => o.type == "ball")
|
|
||||||
|
|
||||||
if (ballObjIdx == -1) {
|
|
||||||
return content
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...content,
|
|
||||||
components: content.components.toSpliced(ballObjIdx, 1),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function placeBallAt(
|
|
||||||
refBounds: DOMRect,
|
|
||||||
courtBounds: DOMRect,
|
|
||||||
content: TacticContent,
|
|
||||||
): TacticContent {
|
|
||||||
if (!overlaps(courtBounds, refBounds)) {
|
|
||||||
return removeBall(content)
|
|
||||||
}
|
|
||||||
const playerCollidedIdx = getComponentCollided(
|
|
||||||
refBounds,
|
|
||||||
content.components,
|
|
||||||
BALL_ID,
|
|
||||||
)
|
|
||||||
|
|
||||||
if (playerCollidedIdx != -1) {
|
|
||||||
return dropBallOnComponent(playerCollidedIdx, content, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const ballIdx = content.components.findIndex((o) => o.type == "ball")
|
|
||||||
|
|
||||||
const { x, y } = ratioWithinBase(refBounds, courtBounds)
|
|
||||||
|
|
||||||
const ball: Ball = {
|
|
||||||
type: BALL_TYPE,
|
|
||||||
id: BALL_ID,
|
|
||||||
rightRatio: x,
|
|
||||||
bottomRatio: y,
|
|
||||||
actions: [],
|
|
||||||
}
|
|
||||||
|
|
||||||
let components = content.components
|
|
||||||
|
|
||||||
if (ballIdx != -1) {
|
|
||||||
components = components.toSpliced(ballIdx, 1, ball)
|
|
||||||
} else {
|
|
||||||
components = components.concat(ball)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...content,
|
|
||||||
components,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function moveComponent(
|
|
||||||
newPos: Pos,
|
|
||||||
component: TacticComponent,
|
|
||||||
info: PlayerInfo,
|
|
||||||
courtBounds: DOMRect,
|
|
||||||
content: TacticContent,
|
|
||||||
removed: (content: TacticContent) => TacticContent,
|
|
||||||
): TacticContent {
|
|
||||||
const playerBounds = document
|
|
||||||
.getElementById(info.id)!
|
|
||||||
.getBoundingClientRect()
|
|
||||||
|
|
||||||
// if the piece is no longer on the court, remove it
|
|
||||||
if (!overlaps(playerBounds, courtBounds)) {
|
|
||||||
return removed(content)
|
|
||||||
}
|
|
||||||
return updateComponent(
|
|
||||||
{
|
|
||||||
...component,
|
|
||||||
rightRatio: newPos.x,
|
|
||||||
bottomRatio: newPos.y,
|
|
||||||
},
|
|
||||||
content,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function removeComponent(
|
|
||||||
componentId: ComponentId,
|
|
||||||
content: TacticContent,
|
|
||||||
): TacticContent {
|
|
||||||
return {
|
|
||||||
...content,
|
|
||||||
components: content.components.filter((c) => c.id !== componentId),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateComponent(
|
|
||||||
component: TacticComponent,
|
|
||||||
content: TacticContent,
|
|
||||||
): TacticContent {
|
|
||||||
return {
|
|
||||||
...content,
|
|
||||||
components: content.components.map((c) =>
|
|
||||||
c.id === component.id ? component : c,
|
|
||||||
),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getComponentCollided(
|
|
||||||
bounds: DOMRect,
|
|
||||||
components: TacticComponent[],
|
|
||||||
ignore?: ComponentId,
|
|
||||||
): number | -1 {
|
|
||||||
for (let i = 0; i < components.length; i++) {
|
|
||||||
const component = components[i]
|
|
||||||
|
|
||||||
if (component.id == ignore) continue
|
|
||||||
|
|
||||||
const playerBounds = document
|
|
||||||
.getElementById(component.id)!
|
|
||||||
.getBoundingClientRect()
|
|
||||||
|
|
||||||
if (overlaps(playerBounds, bounds)) {
|
|
||||||
return i
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return -1
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getRackPlayers(
|
|
||||||
team: PlayerTeam,
|
|
||||||
components: TacticComponent[],
|
|
||||||
): RackedPlayer[] {
|
|
||||||
return ["1", "2", "3", "4", "5"]
|
|
||||||
.filter(
|
|
||||||
(role) =>
|
|
||||||
components.findIndex(
|
|
||||||
(c) =>
|
|
||||||
c.type == "player" && c.team == team && c.role == role,
|
|
||||||
) == -1,
|
|
||||||
)
|
|
||||||
.map((key) => ({ team, key }))
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import { Player, PlayerPhantom } from "./Player"
|
|
||||||
import { Action } from "./Action"
|
|
||||||
import { CourtObject } from "./CourtObjects"
|
|
||||||
|
|
||||||
export interface Tactic {
|
|
||||||
id: number
|
|
||||||
name: string
|
|
||||||
content: TacticContent
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TacticContent {
|
|
||||||
components: TacticComponent[]
|
|
||||||
//actions: Action[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TacticComponent = Player | CourtObject | PlayerPhantom
|
|
||||||
export type ComponentId = string
|
|
||||||
|
|
||||||
export interface Component<T> {
|
|
||||||
/**
|
|
||||||
* The component's type
|
|
||||||
*/
|
|
||||||
readonly type: T
|
|
||||||
/**
|
|
||||||
* The component's identifier
|
|
||||||
*/
|
|
||||||
readonly id: ComponentId
|
|
||||||
/**
|
|
||||||
* Percentage of the component's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
|
|
||||||
*/
|
|
||||||
readonly bottomRatio: number
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Percentage of the component's position to the right (0 means left, 1 means right, 0.5 means middle)
|
|
||||||
*/
|
|
||||||
readonly rightRatio: number
|
|
||||||
|
|
||||||
readonly actions: Action[]
|
|
||||||
}
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
.step-piece {
|
|
||||||
position: relative;
|
|
||||||
font-family: monospace;
|
|
||||||
pointer-events: all;
|
|
||||||
|
|
||||||
background-color: var(--editor-tree-step-piece);
|
|
||||||
color: var(--selected-team-secondarycolor);
|
|
||||||
|
|
||||||
border-radius: 100px;
|
|
||||||
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
border: 2px solid var(--editor-tree-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-piece-selected {
|
|
||||||
border: 2px solid var(--selection-color-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-piece-selected,
|
|
||||||
.step-piece:focus,
|
|
||||||
.step-piece:hover {
|
|
||||||
background-color: var(--editor-tree-step-piece-hovered);
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-piece-actions {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
column-gap: 5px;
|
|
||||||
top: -140%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-piece-selected .step-piece-actions {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-icon,
|
|
||||||
.remove-icon {
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-icon {
|
|
||||||
fill: var(--add-icon-fill);
|
|
||||||
}
|
|
||||||
|
|
||||||
.remove-icon {
|
|
||||||
fill: var(--remove-icon-fill);
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-children {
|
|
||||||
margin-top: 10vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-group {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps-tree {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 10%;
|
|
||||||
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue