<Body lastTactics={lastTactics} allTactics={allTactics} teams={teams} /> </div> ) } export function Title({ username }: { username: string }) { return ( <div id="header"> <div id="header-left"></div> <div id="header-center"> <h1 id="IQBall" className="clickable" onClick={() => { location.pathname = "/" }}> <span id="IQ">IQ</span> <span id="Ball">Ball</span> </h1> </div> <div id="header-right"> <div className="clickable" id="clickable-header-right"> {/* <AccountSvg id="img-account" /> */} <img id="img-account" src="account.svg" onClick={() => { location.pathname = "/settings" }} /> <p id="username">{username}</p> </div> </div> </div> ) } export function Body({ lastTactics, allTactics, teams, }: { lastTactics: Tactic[] allTactics: Tactic[] teams: Team[] }) { const widthPersonalSpace = 78 const widthSideMenu = 100 - widthPersonalSpace return ( <div id="body"> <PersonalSpace width={widthPersonalSpace} allTactics={allTactics} /> <SideMenu width={widthSideMenu} lastTactics={lastTactics} teams={teams} /> </div> ) } export function SideMenu({ width, lastTactics, teams, }: { width: number lastTactics: Tactic[] teams: Team[] }) { return ( <div id="sideMenu" style={{ width: width + "%", }}> <div id="sideMenuContent"> <Team teams={teams} /> <Tactic lastTactics={lastTactics} /> </div> </div> ) } export function PersonalSpace({ width, allTactics, }: { width: number allTactics: Tactic[] }) { return ( <div id="personal-space" style={{ width: width + "%", }}> <TitlePersonalSpace /> <BodyPersonalSpace allTactics={allTactics} /> </div> ) } function TitlePersonalSpace() { return ( <div id="titlePersonalSpace"> <h2>Espace Personnel</h2> </div> ) } function TableData({ allTactics }: { allTactics: Tactic[] }) { const nbRow = Math.floor(allTactics.length / 3) + 1 let listTactic = Array(nbRow) for (let i = 0; i < nbRow; i++) { listTactic[i] = Array(0) } let i = 0 let j = 0 allTactics.forEach((tactic) => { listTactic[i].push(tactic) j++ if (j === 3) { i++ j = 0 } }) i = 0 while (i < nbRow) { listTactic[i] = listTactic[i].map((tactic: Tactic) => ( <td key={tactic.id} className="data" onClick={() => { location.pathname = "/tactic/" + tactic.id + "/edit" }}> {troncName(tactic.name, 25)} </td> )) i++ } if (nbRow == 1) { if (listTactic[0].length < 3) { for (let i = 0; i <= 3 - listTactic[0].length; i++) { listTactic[0].push(<td key={"tdNone" + i}></td>) } } } const data = listTactic.map((tactic, rowIndex) => ( <tr key={rowIndex + "row"}>{tactic}</tr> )) return data } function BodyPersonalSpace({ allTactics }: { allTactics: Tactic[] }) { let data if (allTactics.length == 0) { data = <p>Aucune tactique créé !</p> } else { data = <TableData allTactics={allTactics} /> } return ( <div id="bodyPersonalSpace"> <table> <tbody key="tbody">{data}</tbody> </table> </div> ) } export function Team({ teams }: { teams: Team[] }) { const listTeam = teams.map((team, rowIndex) => ( <li key={"team" + rowIndex}> {team.name} <button onClick={() => (location.pathname = "/team/" + team.id)}> open </button> </li> )) return ( <div id="teams"> <div className="titreSideMenu"> <h2 className="title">Mes équipes</h2> <button className="new" onClick={() => (location.pathname = "/team/new")}> + </button> </div> <SetButtonTeam teams={teams} /> </div> ) } export function Tactic({ lastTactics }: { lastTactics: Tactic[] }) { return ( <div id="tactic"> <div className="titreSideMenu"> <h2 className="title">Mes dernières stratégies</h2> <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}> + </button> </div> <SetButtonTactic tactics={lastTactics} /> </div> ) } function SetButtonTactic({ tactics }: { tactics: Tactic[] }) { const lastTactics = tactics.map((tactic) => ( <ButtonLastTactic tactic={tactic} /> )) return <div className="SetButton">{lastTactics}</div> } function SetButtonTeam({ teams }: { teams: Team[] }) { const listTeam = teams.map((teams) => <ButtonTeam team={teams} />) return <div className="SetButton">{listTeam}</div> } function ButtonTeam({ team }: { team: Team }) { const name = troncName(team.name, 20) return ( <div> <div id={"ButtonTeam" + team.id} className="buttonSideMenu data" onClick={() => { location.pathname = "/team/" + team.id }}> {name} </div> </div> ) } function ButtonLastTactic({ tactic }: { tactic: Tactic }) { const name = troncName(tactic.name, 20) return ( <div id={"Button" + tactic.id} className="buttonSideMenu data" onClick={() => { location.pathname = "/tactic/" + tactic.id + "/edit" }}> {name} </div> ) } function troncName(name: string, limit: number): string { if (name.length > limit) { name = name.substring(0, limit) + "..." } else { name = name } return name }