From de698a58f55bb13418772b0debbbc83e37ec7317 Mon Sep 17 00:00:00 2001 From: maxime Date: Thu, 15 Feb 2024 20:50:35 +0100 Subject: [PATCH] bring back support of opening a specific tactic --- src/App.tsx | 8 ++-- src/model/tactic/Tactic.ts | 4 +- src/pages/Editor.tsx | 85 +++++++++++++++++++++++++++++++------- src/pages/HomePage.tsx | 4 +- 4 files changed, 81 insertions(+), 20 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 79534b3..4b31d83 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom" import loadable from "@loadable/component" import { Header } from "./pages/template/Header.tsx" +import "./style/app.css" const HomePage = loadable(() => import("./pages/HomePage.tsx")) @@ -13,8 +14,6 @@ const TeamPanelPage = loadable(() => import("./pages/TeamPanel.tsx")) const NewTacticPage = loadable(() => import("./pages/NewTacticPage.tsx")) const Editor = loadable(() => import("./pages/Editor.tsx")) -import './style/app.css' - export default function App() { return (
@@ -33,8 +32,9 @@ export default function App() { } /> } /> } /> - } /> - } /> + } /> + } /> + }/> } /> diff --git a/src/model/tactic/Tactic.ts b/src/model/tactic/Tactic.ts index dfe1190..acce6f0 100644 --- a/src/model/tactic/Tactic.ts +++ b/src/model/tactic/Tactic.ts @@ -2,15 +2,17 @@ import { Player, PlayerPhantom } from "./Player" import { Action } from "./Action" import { CourtObject } from "./CourtObjects" +export type CourtType = "HALF" | "PLAIN" + export interface Tactic { id: number name: string + courtType: CourtType content: TacticContent } export interface TacticContent { components: TacticComponent[] - //actions: Action[] } export type TacticComponent = Player | CourtObject | PlayerPhantom diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx index c8da3fd..ffdbb64 100644 --- a/src/pages/Editor.tsx +++ b/src/pages/Editor.tsx @@ -19,8 +19,8 @@ import { BallPiece } from "../components/editor/BallPiece" import { Rack } from "../components/Rack" import { PlayerPiece } from "../components/editor/PlayerPiece" -import { Tactic, TacticComponent, TacticContent } from "../model/tactic/Tactic" -import { fetchAPI } from "../Fetcher" +import { CourtType, Tactic, TacticComponent, TacticContent } from "../model/tactic/Tactic" +import { fetchAPI, fetchAPIGet } from "../Fetcher" import SavingState, { SaveState, SaveStates } from "../components/editor/SavingState" @@ -49,7 +49,7 @@ import { Action, ActionKind } from "../model/tactic/Action" import BallAction from "../components/actions/BallAction" import { changePlayerBallState, getOrigin, removePlayer } from "../editor/PlayerDomains" import { CourtBall } from "../components/editor/CourtBall" -import { getSession } from "../api/session.ts" +import { useParams } from "react-router-dom" const ERROR_STYLE: CSSProperties = { borderColor: "red", @@ -63,27 +63,81 @@ export interface EditorViewProps { tactic: Tactic onContentChange: (tactic: TacticContent) => Promise onNameChange: (name: string) => Promise - courtType: "PLAIN" | "HALF" } +type EditorCreateNewAction = { type: "new", courtType: CourtType } +type EditorOpenAction = { type: "open" } + +type EditorAction = EditorCreateNewAction | EditorOpenAction export interface EditorPageProps { - courtType: "PLAIN" | "HALF" + action: EditorAction +} + +export default function EditorPage({ action }: EditorPageProps) { + console.log(action) + if (action.type === "new") { + return + } + return } -export default function EditorPage({ courtType }: EditorPageProps) { +interface TacticDto { + id: number + name: string + courtType: CourtType + content: string +} + + +function EditorOpen() { + const { tacticId: idStr } = useParams() + const id = parseInt(idStr!) + + const [tactic, setTactic] = useState() + + useEffect(() => { + async function initialize() { + console.log("initializing") + const infoResponse = fetchAPIGet(`tactics/${id}`) + const contentResponse = fetchAPIGet(`tactics/${id}/1`) + const { name, courtType } = await (await infoResponse).json() + const { content } = await (await contentResponse).json() + + setTactic({ id, name, courtType, content }) + } + + initialize() + }, [id]) + + if (tactic) { + return + } + + return +} + +function EditorCreateNew({ courtType }: EditorCreateNewAction) { const [id, setId] = useState() useEffect(() => { async function initialize() { - const response = await fetchAPI("tactics", { name: DEFAULT_TACTIC_NAME }, "POST", getSession()) + const response = await fetchAPI("tactics", { + name: DEFAULT_TACTIC_NAME, + courtType + }, "POST") const { id } = await response.json() setId(id) } initialize() - }, []) + }, [courtType]) if (id) { return } + return +} + +function EditorLoadingScreen() { return
Loading Editor, please wait...
} @@ -101,7 +159,7 @@ export interface EditorProps { id: number name: string content: string - courtType: "PLAIN" | "HALF" + courtType: CourtType } function Editor({ id, name, courtType, content }: EditorProps) { @@ -120,6 +178,7 @@ function Editor({ id, name, courtType, content }: EditorProps) { tactic={{ name: editorName, id, + courtType, content: JSON.parse(editorContent), }} onContentChange={async (content: TacticContent) => { @@ -130,7 +189,7 @@ function Editor({ id, name, courtType, content }: EditorProps) { ) return SaveStates.Guest } - return fetchAPI(`tactics/${id}/1`, { content }, "PUT", getSession()).then((r) => + return fetchAPI(`tactics/${id}/1`, { content }, "PUT").then((r) => r.ok ? SaveStates.Ok : SaveStates.Err, ) }} @@ -139,20 +198,18 @@ function Editor({ id, name, courtType, content }: EditorProps) { localStorage.setItem(GUEST_MODE_TITLE_STORAGE_KEY, name) return true //simulate that the name has been changed } - return fetchAPI(`tactics/${id}/name`, { name }, "PUT", getSession()).then( + return fetchAPI(`tactics/${id}/name`, { name }, "PUT").then( (r) => r.ok, ) }} - courtType={courtType} /> ) } function EditorView({ - tactic: { id, name, content: initialContent }, + tactic: { id, name, content: initialContent, courtType }, onContentChange, onNameChange, - courtType, }: EditorViewProps) { const isInGuestMode = id == -1 diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index d7249a8..7fb1fa2 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -45,7 +45,9 @@ export default function HomePage() { }, []) - const lastTactics = tactics!.sort((a, b) => a.creationDate - b.creationDate).slice(0, 5) + tactics!.sort((a, b) => b.creationDate - a.creationDate) + + const lastTactics = tactics.slice(0, 5) return }