partly hardcoded but working hall of fame

beginnings of home page wrapped stats

client/package.json

@@ -45,10 +45,12 @@
     "node-polyfill-webpack-plugin": "^2.0.1",
     "react": "^18.2.0",
     "react-calendar-timeline": "^0.28.0",
+    "react-confetti": "^6.1.0",
     "react-custom-roulette": "^1.4.1",
     "react-date-range": "^1.4.0",
     "react-dom": "^18.2.0",
     "react-dragula": "^1.1.17",
+    "react-images-uploading": "^3.1.7",
     "react-markdown": "^9.0.0",
     "react-router": "^6.14.0",
     "react-router-dom": "^6.14.0",

client/src/features/dashboard/Dashboard.tsx

@@ -17,6 +17,7 @@ import CreateTournamentPage from "./CreateTournament.tsx";
 import GradientTitle from "../viewer/gradientTitle.tsx";
 import AdminOnlyPage from "./AdminOnlyBanner.tsx";
 import { LoadingBackdrop } from "../layout/LoadingBackdrop.tsx";
+import CompleteTournament from "./CompleteTournament.tsx";
 
 function DashboardPage() {
   const { data: tournament, isLoading } = useTournament("current");
@@ -40,7 +41,7 @@ function DashboardPage() {
       case "Bracket":
         return <Bracket next={nextSection} prev={prevSection} ></Bracket>;
       case "Complete":
-        return <>COngrats! You've completed {tournament.name}</>
+        return <CompleteTournament next={nextSection} prev={prevSection}></CompleteTournament>
       default:
         return <Typography>Unknown tournament state.</Typography>;
     }

client/src/features/viewer/AllTimePage.css

@@ -0,0 +1,10 @@
+.box-shadow::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: inset 0 0 100px 100px var(--copa-purple);
+    overflow: hidden;
+}

client/src/features/viewer/AllTimePage.tsx

@@ -5,19 +5,76 @@ import TimelineContent from "@mui/lab/TimelineContent";
 import TimelineDot from "@mui/lab/TimelineDot";
 import TimelineItem from "@mui/lab/TimelineItem";
 import TimelineSeparator from "@mui/lab/TimelineSeparator";
-import DevFeature from "../layout/DevelopmentFeature";
+import TimelineOppositeContent from "@mui/lab/TimelineOppositeContent";
+import { useTournament } from "../tournament/hooks";
+import { useTeam } from "../team/hooks";
+import { ObjectId } from "mongoose";
+import { Stack, Box, Typography } from "@mui/material";
+import dayjs from "dayjs";
+import { repeat } from "lodash-es";
+import "./AllTimePage.css"
+
+type TWinnerTimelineItem = {
+    teamName: string,
+    tournamentId: string,
+    picture?: string
+}
+
+const WinnerTimelineItem = ({ teamName, tournamentId, picture }: TWinnerTimelineItem) => {
+    const { data: tournament, status: tournamentStatus } = useTournament(tournamentId);
+    const { data: team, status: teamStatus } = useTeam(teamName);
+
+    if (!team || !tournament) return <>Loading</>;
+
+    return (
+        <TimelineItem sx={{ alignItems: "center", pt: 10, pb: 10 }}>
+            <Box sx={{
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: "100%",
+                height: "100%",
+                opacity: "0.2",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                zIndex: -1,
+                overflow: "hidden"
+            }} className="box-shadow">
+                <Box component="img" alt="team banner" height="100%" src="https://i.imgur.com/0beHLTA.png"></Box>
+            </Box>
+            <TimelineOppositeContent sx={{ pl: 4 }}>
+                <Stack direction={{ xs: "column", md: "row" }} spacing={{ xs: -1, md: 2 }} alignItems={"baseline"}>
+                    <Typography variant="h2">{tournament.name}</Typography>
+                    <Typography variant="h5" color="primary">{dayjs(tournament.start).year()}</Typography>
+                </Stack>
+                <Typography>{tournament.summary} "some text"</Typography>
+            </TimelineOppositeContent>
+            <TimelineSeparator>
+                {/* don't hardcode color */}
+                <TimelineDot sx={{}} />
+            </TimelineSeparator>
+            <TimelineContent sx={{ display: "flex", alignItems: "end", justifyContent: "right", pr: 4 }}>
+                <Box sx={{ position: "relative", width: "30vw" }}>
+                    <img alt="team celebrating" width="100%" src="https://i.imgur.com/h1kcv2z.png"></img>
+                </Box>
+            </TimelineContent>
+        </TimelineItem>
+    )
+}
 
 function HallOfFame() {
+    //FIXME: hard-coded for now
+    const { data: tournament } = useTournament("current")
+    const {data: team} = useTeam("PiPo IF");
+    // const { data: team } = useTeam("bluetooth 56 591");
+
+    if (!team || !tournament) return <>Error</>; //handle error case
+
     return <BannerPage title="Hall Of Fame">
-        <DevFeature></DevFeature>
-        <Timeline>
-            <TimelineItem>
-                <TimelineSeparator>
-                    <TimelineDot />
-                    <TimelineConnector />
-                </TimelineSeparator>
-                <TimelineContent></TimelineContent>
-            </TimelineItem>
+        <Timeline position="left" sx={{ position: "relative" }}>
+            <TimelineConnector sx={{ height: "45%", position: "absolute", right: "calc(50% - 1px)", bottom: "50%" }}></TimelineConnector>
+            <WinnerTimelineItem teamName={team.name} tournamentId={tournament.id} picture={""}></WinnerTimelineItem>
         </Timeline>
     </BannerPage>
 }

client/src/features/viewer/Home.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, Container, Stack, CircularProgress, useTheme, Button } from "@mui/material";
+import { Box, Typography, Container, Stack, CircularProgress, useTheme, Button, BoxProps } from "@mui/material";
 import dayjs from "dayjs";
 import { Link } from "react-router-dom";
 import { useStandings } from "../stage/hooks";
@@ -36,7 +36,7 @@ function WinnersTribute() {
 
 }
 
-function CopaBanner({ children }: { children: React.ReactNode }) {
+function CopaBanner({ children, sx }: BoxProps) {
   const { data: tournament } = useTournament("current");
 
   return (
@@ -55,7 +55,8 @@ function CopaBanner({ children }: { children: React.ReactNode }) {
         justifyContent: "center",
         width: "80vw",
         height: "80vw",
-        minHeight: "400px"
+        minHeight: "400px",
+        ...sx
       }}>
         <Stack direction="row" alignItems={"center"} width="100%" spacing={0} justifyContent={"center"}>
           <Typography variant="h1" fontWeight={800} sx={{ fontSize: "15vw!important" }} noWrap>
@@ -96,7 +97,23 @@ function HomePage() {
       </Container>
 
     case "Complete":
-      return <WinnersTribute></WinnersTribute>
+      return <Container sx={{display: "flex", direction:"row", alignItems: "center"}}>
+        <CopaBanner sx={{height: "100%"}}>
+          <Typography color="primary" fontSize={"7vw"} fontWeight={1000} sx={{
+            background: "var(--copa-pink)",
+            letterSpacing: "1vw",
+            paddingLeft: "1vw",
+            pt: 0,
+            pb: 0,
+            maxWidth: "45vw",
+            marginTop: "-0.3em",
+            lineHeight: "65%"
+          }}>WRAPPED</Typography>
+          <ArrowDropDown fontSize="large" sx={{ mt: 3 }}></ArrowDropDown>
+        </CopaBanner>
+
+        <Typography>test</Typography>
+      </Container>
     case "Registration":
       if (!tournament.registration?.from)
         return <CopaBanner>

server/controllers/mediaController.ts

@@ -25,8 +25,7 @@ export const uploadImage = expressAsyncHandler(async (req, res) => {
     const { fileName, caption, fileType } = extractMetadata(req.headers);
 
     const imageUrl = await uploadImageToBlob(fileName, req);
-    const tournament = Tournament.findByIdAndUpdate(req.params.id, {
-        summary: req.body.summary,
-        images: [imageUrl],
-    })
+    res.send({
+        address: imageUrl
+    });
 });

server/controllers/tournamentsController.ts

@@ -87,3 +87,4 @@ export const getTournamentDataById = expressAsyncHandler(async (req, res) => {
   const data = await bracketsManager.get.tournamentData(req.params.id);
   res.send(data);
 });
+

server/models/tournament.ts

@@ -35,6 +35,8 @@ export type TNotification = InferSchemaType<typeof NotificationSchema>;
 const TournamentSchema = new mongoose.Schema(
   {
     name: String,
+    summary: String,
+    images: [String],
     idx: Number,
     organizer: {
       name: String,