add iqball header on all pages

src/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom"
 
 import loadable from "@loadable/component"
+import { Header } from "./pages/template/Header.tsx"
 
 
 const HomePage = loadable(() => import("./pages/HomePage.tsx"))
@@ -15,9 +16,12 @@ const Editor = loadable(() => import("./pages/Editor.tsx"))
 
 export default function App() {
 
+
     return (
         <div style={{ height: "100vh", width: "100vw" }}>
             <BrowserRouter>
+                <Header/>
+
                 <Routes>
                     <Route path={"/"} element={<HomePage />} />
                     <Route path={"/login"} element={<LoginPage />} />
@@ -29,7 +33,6 @@ export default function App() {
                     <Route path={"/tactic/new/plain"} element={<Editor courtType={"PLAIN"} />} />
                     <Route path={"/tactic/new/half"} element={<Editor courtType={"HALF"} />} />
 
-
                     <Route path={"*"} element={<NotFoundPage />} />
                 </Routes>
             </BrowserRouter>

src/index.css

@@ -1,25 +1,26 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
 
-  color-scheme: light dark;
+    color-scheme: light dark;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
+    margin: 0;
+    display: flex;
+    place-items: center;
+    overflow-x: hidden;
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+    font-size: 3.2em;
+    line-height: 1.1;
 }
 

src/pages/Editor.tsx

@@ -22,10 +22,7 @@ import { PlayerPiece } from "../components/editor/PlayerPiece"
 import { Tactic, TacticComponent, TacticContent } from "../model/tactic/Tactic"
 import { fetchAPI } from "../Fetcher"
 
-import SavingState, {
-    SaveState,
-    SaveStates,
-} from "../components/editor/SavingState"
+import SavingState, { SaveState, SaveStates } from "../components/editor/SavingState"
 
 import { BALL_TYPE } from "../model/tactic/CourtObjects"
 import { CourtAction } from "../components/editor/CourtAction"
@@ -42,32 +39,16 @@ import {
     removeBall,
     updateComponent,
 } from "../editor/TacticContentDomains"
-import {
-    BallState,
-    Player,
-    PlayerInfo,
-    PlayerLike,
-    PlayerTeam,
-} from "../model/tactic/Player"
+import { BallState, Player, PlayerInfo, PlayerLike, PlayerTeam } from "../model/tactic/Player"
 import { RackedCourtObject, RackedPlayer } from "../editor/RackedItems"
 import CourtPlayer from "../components/editor/CourtPlayer"
-import {
-    createAction,
-    getActionKind,
-    isActionValid,
-    removeAction,
-} from "../editor/ActionsDomains"
+import { createAction, getActionKind, isActionValid, removeAction } from "../editor/ActionsDomains"
 import ArrowAction from "../components/actions/ArrowAction"
 import { middlePos, Pos, ratioWithinBase } from "../geo/Pos"
 import { Action, ActionKind } from "../model/tactic/Action"
 import BallAction from "../components/actions/BallAction"
-import {
-    changePlayerBallState,
-    getOrigin,
-    removePlayer,
-} from "../editor/PlayerDomains"
+import { changePlayerBallState, getOrigin, removePlayer } from "../editor/PlayerDomains"
 import { CourtBall } from "../components/editor/CourtBall"
-import { BASE } from "../Constants"
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -439,9 +420,6 @@ function EditorView({
     return (
         <div id="main-div">
             <div id="topbar-div">
-                <button onClick={() => (location.pathname = BASE + "/")}>
-                    Home
-                </button>
                 <div id="topbar-left">
                     <SavingState state={saveState} />
                 </div>

src/pages/HomePage.tsx

@@ -1,7 +1,6 @@
 import "../style/home/home.css"
 
 // import AccountSvg from "../assets/account.svg?react"
-import { Header } from "./template/Header"
 import { BASE } from "../Constants"
 import { getSession } from "../api/session.ts"
 import { fetchAPIGet, redirect } from "../Fetcher.ts"
@@ -26,7 +25,7 @@ interface Team {
 export default function HomePage() {
 
     type UserDataResponse = {user?: User, tactics: Tactic[], teams: Team[]}
-    const [{ user, tactics, teams }, setInfo] = useState<UserDataResponse>({tactics: [], teams: []})
+    const [{tactics, teams }, setInfo] = useState<UserDataResponse>({tactics: [], teams: []})
 
 
     useLayoutEffect(() => {
@@ -46,26 +45,21 @@ export default function HomePage() {
     }, [])
 
 
-    console.log(user)
-
     const lastTactics = tactics!.sort((a, b) => a.creationDate.getMilliseconds() - b.creationDate.getMilliseconds()).slice(0, 5)
-    return <Home teams={teams!} allTactics={tactics!} lastTactics={lastTactics} username={user?.name ?? ""} />
+    return <Home teams={teams!} allTactics={tactics!} lastTactics={lastTactics}/>
 }
 
 function Home({
     lastTactics,
     allTactics,
     teams,
-    username,
 }: {
     lastTactics: Tactic[]
     allTactics: Tactic[]
     teams: Team[]
-    username: string
 }) {
     return (
         <div id="main">
-            <Header username={username} />
             <Body
                 lastTactics={lastTactics}
                 allTactics={allTactics}

src/pages/template/Header.tsx

@@ -1,24 +1,42 @@
 import { BASE } from "../../Constants"
 import accountSvg from "../../assets/account.svg"
+import "../../style/template/header.css"
+import { useEffect, useState } from "react"
+import { fetchAPIGet } from "../../Fetcher.ts"
+import { getSession } from "../../api/session.ts"
+
 /**
  *
  * @param param0 username
  * @returns Header
  */
-export function Header({ username }: { username: string }) {
+export function Header() {
+
+    const [username, setUsername] = useState("")
+
+    useEffect(() => {
+        async function getUsername() {
+            const response = await fetchAPIGet("user", getSession())
+            //TODO check if the response is ok and handle errors
+            const {name} = await response.json()
+            setUsername(name)
+        }
+
+        getUsername()
+    }, [])
+
     return (
         <div id="header">
             <div id="header-left"></div>
             <div id="header-center">
-                <h1
+                <p
                     id="iqball"
                     className="clickable"
                     onClick={() => {
                         location.pathname = BASE + "/"
                     }}>
-                    <span id="IQ">IQ</span>
-                    <span id="Ball">Ball</span>
-                </h1>
+                    IQBall
+                </p>
             </div>
             <div id="header-right">
                 <div className="clickable" id="clickable-header-right">

src/style/home/home.css

@@ -5,7 +5,9 @@
 
 body {
     /* background-color: #303030; */
+    overflow-x: hidden;
 }
+
 #main {
     /* margin-left : 10%;
     margin-right: 10%; */

src/style/template/header.css

@@ -1,49 +1,49 @@
 #header {
     text-align: center;
     background-color: var(--home-main-color);
-    margin: 0px;
-    /* border : var(--accent-color) 1px solid; */
+    margin: 0;
     display: flex;
     flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
     font-family: var(--font-title);
-    /* border-radius: 0.75cap; */
+
+    height: 50px;
 }
 
 #img-account {
-    width: 100%;
     cursor: pointer;
 }
 
-#header-right,
-#header-left {
-    width: 10%;
-    /* border: yellow 2px solid; */
+#header-left, #header-right, #header-center {
+    width: 100%;
 }
 
 #header-right {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    align-items: end;
 }
 
 #username {
     color: var(--main-contrast-color);
-    margin: 0;
+    margin-left: 10px;
 }
 
 #clickable-header-right:hover #username {
     color: var(--accent-color);
 }
 
-#header-center {
-    width: 80%;
-}
-
 #clickable-header-right {
-    width: 40%;
     border-radius: 1cap;
     padding: 2%;
+
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
 }
 
 #clickable-header-right:hover {
@@ -54,12 +54,10 @@
     cursor: pointer;
 }
 
-#img-account {
-    width: 100%;
-}
-
 #iqball {
+    margin: 0;
     color: var(--accent-color);
     font-weight: bold;
-    font-size: 45px;
+    font-size: 35px;
 }
+