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
}