Merge pull request 'Add steps to the editor' (#114) from editor/steps into master
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
Reviewed-on: #114
commit
4f6b905f22
|
Before Width: | Height: | Size: 405 B After Width: | Height: | Size: 216 B |
@ -0,0 +1,56 @@
|
||||
import React, { ReactNode, useCallback, useRef, useState } from "react"
|
||||
|
||||
export interface SplitLayoutProps {
|
||||
children: [ReactNode, ReactNode]
|
||||
rightWidth: number
|
||||
onRightWidthChange: (w: number) => void
|
||||
}
|
||||
|
||||
export default function SplitLayout({
|
||||
children,
|
||||
rightWidth,
|
||||
onRightWidthChange,
|
||||
}: SplitLayoutProps) {
|
||||
const curtainRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const resize = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
const sliderPosX = e.clientX
|
||||
const curtainWidth =
|
||||
curtainRef.current!.getBoundingClientRect().width
|
||||
|
||||
onRightWidthChange((sliderPosX / curtainWidth) * 100)
|
||||
},
|
||||
[curtainRef, onRightWidthChange],
|
||||
)
|
||||
|
||||
const [resizing, setResizing] = useState(false)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={"curtain"}
|
||||
ref={curtainRef}
|
||||
style={{ display: "flex" }}
|
||||
onMouseMove={resizing ? resize : undefined}
|
||||
onMouseUp={() => setResizing(false)}>
|
||||
<div className={"curtain-left"} style={{ width: `${rightWidth}%` }}>
|
||||
{children[0]}
|
||||
</div>
|
||||
<div
|
||||
onMouseDown={() => setResizing(true)}
|
||||
style={{
|
||||
width: 4,
|
||||
height: "100%",
|
||||
backgroundColor: "grey",
|
||||
cursor: "col-resize",
|
||||
userSelect: "none",
|
||||
}}></div>
|
||||
|
||||
<div
|
||||
className={"curtain-right"}
|
||||
style={{ width: `${100 - rightWidth}%` }}>
|
||||
{children[1]}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,154 @@
|
||||
import "../../style/steps_tree.css"
|
||||
import { StepInfoNode } from "../../model/tactic/Tactic"
|
||||
import BendableArrow from "../arrows/BendableArrow"
|
||||
import { ReactNode, useMemo, useRef } from "react"
|
||||
import AddSvg from "../../assets/icon/add.svg?react"
|
||||
import RemoveSvg from "../../assets/icon/remove.svg?react"
|
||||
import { getStepName } from "../../editor/StepsDomain.ts"
|
||||
|
||||
export interface StepsTreeProps {
|
||||
root: StepInfoNode
|
||||
selectedStepId: number
|
||||
onAddChildren: (parent: StepInfoNode) => void
|
||||
onRemoveNode: (node: StepInfoNode) => void
|
||||
onStepSelected: (node: StepInfoNode) => void
|
||||
}
|
||||
|
||||
export default function StepsTree({
|
||||
root,
|
||||
selectedStepId,
|
||||
onAddChildren,
|
||||
onRemoveNode,
|
||||
onStepSelected,
|
||||
}: StepsTreeProps) {
|
||||
return (
|
||||
<div className="steps-tree">
|
||||
<StepsTreeNode
|
||||
node={root}
|
||||
rootNode={root}
|
||||
selectedStepId={selectedStepId}
|
||||
onAddChildren={onAddChildren}
|
||||
onRemoveNode={onRemoveNode}
|
||||
onStepSelected={onStepSelected}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface StepsTreeContentProps {
|
||||
node: StepInfoNode
|
||||
rootNode: StepInfoNode
|
||||
|
||||
selectedStepId: number
|
||||
onAddChildren: (parent: StepInfoNode) => void
|
||||
onRemoveNode: (node: StepInfoNode) => void
|
||||
onStepSelected: (node: StepInfoNode) => void
|
||||
}
|
||||
|
||||
function StepsTreeNode({
|
||||
node,
|
||||
rootNode,
|
||||
selectedStepId,
|
||||
onAddChildren,
|
||||
onRemoveNode,
|
||||
onStepSelected,
|
||||
}: StepsTreeContentProps) {
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
|
||||
return (
|
||||
<div ref={ref} className={"step-group"}>
|
||||
{node.children.map((child) => (
|
||||
<BendableArrow
|
||||
key={child.id}
|
||||
area={ref}
|
||||
startPos={"step-piece-" + node.id}
|
||||
segments={[
|
||||
{
|
||||
next: "step-piece-" + child.id,
|
||||
},
|
||||
]}
|
||||
onSegmentsChanges={() => {}}
|
||||
forceStraight={true}
|
||||
wavy={false}
|
||||
//TODO remove magic constants
|
||||
startRadius={10}
|
||||
endRadius={10}
|
||||
/>
|
||||
))}
|
||||
<StepPiece
|
||||
id={node.id}
|
||||
isSelected={selectedStepId === node.id}
|
||||
onAddButtonClicked={() => onAddChildren(node)}
|
||||
onRemoveButtonClicked={
|
||||
rootNode.id === node.id
|
||||
? undefined
|
||||
: () => onRemoveNode(node)
|
||||
}
|
||||
onSelected={() => onStepSelected(node)}>
|
||||
<p>
|
||||
{useMemo(
|
||||
() => getStepName(rootNode, node.id),
|
||||
[node.id, rootNode],
|
||||
)}
|
||||
</p>
|
||||
</StepPiece>
|
||||
<div className={"step-children"}>
|
||||
{node.children.map((child) => (
|
||||
<StepsTreeNode
|
||||
key={child.id}
|
||||
rootNode={rootNode}
|
||||
selectedStepId={selectedStepId}
|
||||
node={child}
|
||||
onAddChildren={onAddChildren}
|
||||
onRemoveNode={onRemoveNode}
|
||||
onStepSelected={onStepSelected}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface StepPieceProps {
|
||||
id: number
|
||||
isSelected: boolean
|
||||
onAddButtonClicked?: () => void
|
||||
onRemoveButtonClicked?: () => void
|
||||
onSelected: () => void
|
||||
children?: ReactNode
|
||||
}
|
||||
|
||||
function StepPiece({
|
||||
id,
|
||||
isSelected,
|
||||
onAddButtonClicked,
|
||||
onRemoveButtonClicked,
|
||||
onSelected,
|
||||
children,
|
||||
}: StepPieceProps) {
|
||||
return (
|
||||
<div
|
||||
id={"step-piece-" + id}
|
||||
tabIndex={1}
|
||||
className={
|
||||
"step-piece " + (isSelected ? "step-piece-selected" : "")
|
||||
}
|
||||
onClick={onSelected}>
|
||||
<div className="step-piece-actions">
|
||||
{onAddButtonClicked && (
|
||||
<AddSvg
|
||||
onClick={onAddButtonClicked}
|
||||
className={"add-icon"}
|
||||
/>
|
||||
)}
|
||||
{onRemoveButtonClicked && (
|
||||
<RemoveSvg
|
||||
onClick={onRemoveButtonClicked}
|
||||
className={"remove-icon"}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,112 @@
|
||||
import { StepInfoNode } from "../model/tactic/Tactic"
|
||||
|
||||
export function addStepNode(
|
||||
root: StepInfoNode,
|
||||
parent: StepInfoNode,
|
||||
child: StepInfoNode,
|
||||
): StepInfoNode {
|
||||
if (root.id === parent.id) {
|
||||
return {
|
||||
...root,
|
||||
children: root.children.concat(child),
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...root,
|
||||
children: root.children.map((c) => addStepNode(c, parent, child)),
|
||||
}
|
||||
}
|
||||
|
||||
export function getStepName(root: StepInfoNode, step: number): string {
|
||||
let ord = 1
|
||||
const nodes = [root]
|
||||
while (nodes.length > 0) {
|
||||
const node = nodes.pop()!
|
||||
|
||||
if (node.id === step) break
|
||||
|
||||
ord++
|
||||
nodes.push(...[...node.children].reverse())
|
||||
}
|
||||
|
||||
return ord.toString()
|
||||
}
|
||||
|
||||
export function getStepNode(
|
||||
root: StepInfoNode,
|
||||
stepId: number,
|
||||
): StepInfoNode | undefined {
|
||||
if (root.id === stepId) return root
|
||||
|
||||
for (const child of root.children) {
|
||||
const result = getStepNode(child, stepId)
|
||||
if (result) return result
|
||||
}
|
||||
}
|
||||
|
||||
export function removeStepNode(
|
||||
root: StepInfoNode,
|
||||
targetId: number,
|
||||
): StepInfoNode | undefined {
|
||||
const path = getPathTo(root, targetId)
|
||||
|
||||
path.reverse()
|
||||
|
||||
const [removedNode, ...pathToRoot] = path
|
||||
|
||||
let child = removedNode
|
||||
|
||||
for (const node of pathToRoot) {
|
||||
child = {
|
||||
id: node.id,
|
||||
children: node.children.flatMap((c) => {
|
||||
if (c.id === removedNode.id) return []
|
||||
else if (c.id === child.id) {
|
||||
return [child]
|
||||
}
|
||||
return [c]
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
return child
|
||||
}
|
||||
|
||||
export function getPathTo(
|
||||
root: StepInfoNode,
|
||||
targetId: number,
|
||||
): StepInfoNode[] {
|
||||
if (root.id === targetId) return [root]
|
||||
|
||||
for (const child of root.children) {
|
||||
const subPath = getPathTo(child, targetId)
|
||||
if (subPath.length > 0) return [root, ...subPath]
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an available identifier that is not already present into the given node tree
|
||||
* @param root
|
||||
*/
|
||||
export function getAvailableId(root: StepInfoNode): number {
|
||||
const acc = (root: StepInfoNode): number =>
|
||||
Math.max(root.id, ...root.children.map(acc))
|
||||
return acc(root) + 1
|
||||
}
|
||||
|
||||
export function getParent(
|
||||
root: StepInfoNode,
|
||||
node: StepInfoNode,
|
||||
): StepInfoNode | null {
|
||||
if (root.children.find((n) => n.id === node.id)) return root
|
||||
|
||||
for (const child of root.children) {
|
||||
const result = getParent(child, node)
|
||||
if (result != null) {
|
||||
return result
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
import { TacticService, ServiceError, TacticContext } from "./TacticService.ts"
|
||||
import { StepContent, StepInfoNode } from "../model/tactic/Tactic.ts"
|
||||
import { fetchAPI, fetchAPIGet } from "../Fetcher.ts"
|
||||
|
||||
export class APITacticService implements TacticService {
|
||||
private readonly tacticId: number
|
||||
|
||||
constructor(tacticId: number) {
|
||||
this.tacticId = tacticId
|
||||
}
|
||||
|
||||
async getContext(): Promise<TacticContext | ServiceError> {
|
||||
const infoResponsePromise = fetchAPIGet(`tactics/${this.tacticId}`)
|
||||
const treeResponsePromise = fetchAPIGet(`tactics/${this.tacticId}/tree`)
|
||||
|
||||
const infoResponse = await infoResponsePromise
|
||||
const treeResponse = await treeResponsePromise
|
||||
|
||||
if (infoResponse.status == 401 || treeResponse.status == 401) {
|
||||
return ServiceError.UNAUTHORIZED
|
||||
}
|
||||
const { name, courtType } = await infoResponse.json()
|
||||
const { root } = await treeResponse.json()
|
||||
|
||||
return { courtType, name, stepsTree: root }
|
||||
}
|
||||
|
||||
async addStep(
|
||||
parent: StepInfoNode,
|
||||
content: StepContent,
|
||||
): Promise<StepInfoNode | ServiceError> {
|
||||
const response = await fetchAPI(`tactics/${this.tacticId}/steps`, {
|
||||
parentId: parent.id,
|
||||
content,
|
||||
})
|
||||
if (response.status == 404) return ServiceError.NOT_FOUND
|
||||
if (response.status == 401) return ServiceError.UNAUTHORIZED
|
||||
|
||||
const { stepId } = await response.json()
|
||||
return { id: stepId, children: [] }
|
||||
}
|
||||
|
||||
async removeStep(id: number): Promise<void | ServiceError> {
|
||||
const response = await fetchAPI(
|
||||
`tactics/${this.tacticId}/steps/${id}`,
|
||||
{},
|
||||
"DELETE",
|
||||
)
|
||||
if (response.status == 404) return ServiceError.NOT_FOUND
|
||||
if (response.status == 401) return ServiceError.UNAUTHORIZED
|
||||
}
|
||||
|
||||
async setName(name: string): Promise<void | ServiceError> {
|
||||
const response = await fetchAPI(
|
||||
`tactics/${this.tacticId}/name`,
|
||||
{ name },
|
||||
"PUT",
|
||||
)
|
||||
if (response.status == 404) return ServiceError.NOT_FOUND
|
||||
if (response.status == 401) return ServiceError.UNAUTHORIZED
|
||||
}
|
||||
|
||||
async saveContent(
|
||||
step: number,
|
||||
content: StepContent,
|
||||
): Promise<void | ServiceError> {
|
||||
const response = await fetchAPI(
|
||||
`tactics/${this.tacticId}/steps/${step}`,
|
||||
{ content },
|
||||
"PUT",
|
||||
)
|
||||
if (response.status == 404) return ServiceError.NOT_FOUND
|
||||
if (response.status == 401) return ServiceError.UNAUTHORIZED
|
||||
}
|
||||
|
||||
async getContent(step: number): Promise<StepContent | ServiceError> {
|
||||
const response = await fetchAPIGet(
|
||||
`tactics/${this.tacticId}/steps/${step}`,
|
||||
)
|
||||
if (response.status == 404) return ServiceError.NOT_FOUND
|
||||
if (response.status == 401) return ServiceError.UNAUTHORIZED
|
||||
return await response.json()
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
import { TacticService, ServiceError, TacticContext } from "./TacticService.ts"
|
||||
import { StepContent, StepInfoNode } from "../model/tactic/Tactic.ts"
|
||||
import {
|
||||
addStepNode,
|
||||
getAvailableId,
|
||||
removeStepNode,
|
||||
} from "../editor/StepsDomain.ts"
|
||||
|
||||
const GUEST_MODE_STEP_CONTENT_STORAGE_KEY = "guest_mode_step"
|
||||
const GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY = "guest_mode_step_tree"
|
||||
const GUEST_MODE_TITLE_STORAGE_KEY = "guest_mode_title"
|
||||
|
||||
export class LocalStorageTacticService implements TacticService {
|
||||
private constructor() {}
|
||||
|
||||
static init(): LocalStorageTacticService {
|
||||
const root = localStorage.getItem(
|
||||
GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY,
|
||||
)
|
||||
|
||||
if (root === null) {
|
||||
localStorage.setItem(
|
||||
GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY,
|
||||
JSON.stringify(<StepInfoNode>{ id: 1, children: [] }),
|
||||
)
|
||||
}
|
||||
|
||||
return new LocalStorageTacticService()
|
||||
}
|
||||
|
||||
async getContext(): Promise<TacticContext | ServiceError> {
|
||||
const stepsTree: StepInfoNode = JSON.parse(
|
||||
localStorage.getItem(GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY)!,
|
||||
)
|
||||
const name =
|
||||
localStorage.getItem(GUEST_MODE_TITLE_STORAGE_KEY) ??
|
||||
"Nouvelle Tactique"
|
||||
return {
|
||||
stepsTree,
|
||||
name,
|
||||
courtType: "PLAIN",
|
||||
}
|
||||
}
|
||||
|
||||
async addStep(
|
||||
parent: StepInfoNode,
|
||||
content: StepContent,
|
||||
): Promise<StepInfoNode | ServiceError> {
|
||||
const root: StepInfoNode = JSON.parse(
|
||||
localStorage.getItem(GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY)!,
|
||||
)
|
||||
|
||||
const nodeId = getAvailableId(root)
|
||||
const node = { id: nodeId, children: [] }
|
||||
|
||||
const resultTree = addStepNode(root, parent, node)
|
||||
|
||||
localStorage.setItem(
|
||||
GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY,
|
||||
JSON.stringify(resultTree),
|
||||
)
|
||||
localStorage.setItem(
|
||||
GUEST_MODE_STEP_CONTENT_STORAGE_KEY + node.id,
|
||||
JSON.stringify(content),
|
||||
)
|
||||
return node
|
||||
}
|
||||
|
||||
async getContent(step: number): Promise<StepContent | ServiceError> {
|
||||
const content = localStorage.getItem(
|
||||
GUEST_MODE_STEP_CONTENT_STORAGE_KEY + step,
|
||||
)
|
||||
return content ? JSON.parse(content) : null
|
||||
}
|
||||
|
||||
async removeStep(id: number): Promise<void | ServiceError> {
|
||||
const root: StepInfoNode = JSON.parse(
|
||||
localStorage.getItem(GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY)!,
|
||||
)
|
||||
localStorage.setItem(
|
||||
GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY,
|
||||
JSON.stringify(removeStepNode(root, id)),
|
||||
)
|
||||
}
|
||||
|
||||
async saveContent(
|
||||
step: number,
|
||||
content: StepContent,
|
||||
): Promise<void | ServiceError> {
|
||||
localStorage.setItem(
|
||||
GUEST_MODE_STEP_CONTENT_STORAGE_KEY + step,
|
||||
JSON.stringify(content),
|
||||
)
|
||||
}
|
||||
|
||||
async setName(name: string): Promise<void | ServiceError> {
|
||||
localStorage.setItem(GUEST_MODE_TITLE_STORAGE_KEY, name)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
import { CourtType, StepContent, StepInfoNode } from "../model/tactic/Tactic.ts"
|
||||
|
||||
export interface TacticContext {
|
||||
stepsTree: StepInfoNode
|
||||
name: string
|
||||
courtType: CourtType
|
||||
}
|
||||
|
||||
export enum ServiceError {
|
||||
UNAUTHORIZED = "UNAUTHORIZED",
|
||||
NOT_FOUND = "NOT_FOUND",
|
||||
}
|
||||
|
||||
export interface TacticService {
|
||||
getContext(): Promise<TacticContext | ServiceError>
|
||||
|
||||
addStep(
|
||||
parent: StepInfoNode,
|
||||
content: StepContent,
|
||||
): Promise<StepInfoNode | ServiceError>
|
||||
|
||||
removeStep(id: number): Promise<void | ServiceError>
|
||||
|
||||
setName(name: string): Promise<void | ServiceError>
|
||||
|
||||
saveContent(
|
||||
step: number,
|
||||
content: StepContent,
|
||||
): Promise<void | ServiceError>
|
||||
|
||||
getContent(step: number): Promise<StepContent | ServiceError>
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
.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-selected .step-piece-actions,
|
||||
.step-piece:hover .step-piece-actions,
|
||||
.step-piece:focus-within .step-piece-actions {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.step-piece-actions {
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
column-gap: 5px;
|
||||
top: -140%;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
top: 0;
|
||||
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