Skip to content

Commit

Permalink
Add company league matches
Browse files Browse the repository at this point in the history
  • Loading branch information
omfj committed Jan 20, 2025
1 parent e8aeafe commit 3b582c3
Show file tree
Hide file tree
Showing 6 changed files with 223 additions and 32 deletions.
1 change: 1 addition & 0 deletions apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"react": "18.3.1",
"react-confetti": "6.1.0",
"react-dom": "18.3.1",
"react-fast-marquee": "^1.6.5",
"react-hook-form": "7.53.0",
"react-icons": "5.3.0",
"react-markdown": "9.0.1",
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/app/(wrapped)/wrapped/components/Banner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ export const WrappedBanner = () => {
}

return (
<div>
<div className="relative block">
{/* When on desktop */}
<div className="hidden lg:block">
<div className="relative hidden lg:block">
<Link href="/wrapped/prescreen">
<div className="bg-wrapped-yellow absolute flex h-14 w-full cursor-pointer items-center justify-center">
<AnimatedBg />
Expand All @@ -32,7 +32,7 @@ export const WrappedBanner = () => {
</div>

{/* When on mobile */}
<div className="block lg:hidden">
<div className="relative block lg:hidden">
<div className="bg-wrapped-yellow absolute flex h-14 w-full items-center justify-center">
<AnimatedBg size={10} />
<p className="text-wrapped-black text-sm font-bold">
Expand Down
147 changes: 147 additions & 0 deletions apps/web/src/components/company-league-banner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import { format } from "date-fns";
import ky from "ky";
import Marquee from "react-fast-marquee";

import { cn } from "@/utils/cn";

const DATABRUS_FC_ID = 1003134;

type Match = {
matchId: number;
matchNo: string;
activityAreaId: number;
activityAreaLatitude: string;
activityAreaLongitude: string;
activityAreaName: string;
activityAreaNo: string;
admOrgId: number;
arrOrgId: number;
arrOrgNo: number;
arrOrgName: string;
awayteamId: number;
awayteamOrgNo: string;
awayteam: string;
awayteamOrgName: string;
awayteamOverriddenName: string;
awayteamClubOrgId: number;
hometeamId: number;
hometeam: string;
hometeamOrgName: string;
hometeamOverriddenName: string;
hometeamOrgNo: string;
hometeamClubOrgId: number;
roundId: number;
roundName: string;
seasonId: number;
tournamentName: string;
matchDate: string;
matchStartTime: number;
matchEndTime: number;
venueUnitId: number;
venueUnitNo: string;
venueId: number;
venueNo: string;
physicalAreaId: number;
matchResult: {
homeGoals: number;
awayGoals: number;
matchEndResult: string;
} | null;
liveArena: boolean;
liveClientType: string;
statusTypeId: number;
statusType: string;
lastChangeDate: string;
spectators: number;
actualMatchDate: string;
actualMatchStartTime: string;
actualMatchEndTime: string;
sportId: number;
};

type CompanyLeagueTable = {
tournamentId: number;
tournamentNo: string;
matches: Array<Match>;
};

const fetchCompanyLeagueTableMatches = async () => {
return await ky
.get(
"https://sf15-terminlister-prod-app.azurewebsites.net/ta/TournamentMatches/?tournamentId=432603",
{
headers: {
accept: "application/json",
},
body: null,
next: {
revalidate: 720,
},
},
)
.json<CompanyLeagueTable>();
};

type TeamProps = {
id: number;
name: string;
score: number | null | undefined;
};

const Team = ({ id, name, score }: TeamProps) => {
return (
<div className="flex w-full items-center gap-4">
<div
className={cn("flex-1 text-sm", {
"font-medium": id === DATABRUS_FC_ID,
"text-gray-500": id !== DATABRUS_FC_ID,
})}
>
{name}
</div>

<p
className={cn("text-sm", {
"font-medium": id === DATABRUS_FC_ID,
"text-gray-500": id !== DATABRUS_FC_ID,
})}
>
{score ?? "-"}
</p>
</div>
);
};

export const CompanyLeagueBanner = async () => {
const league = await fetchCompanyLeagueTableMatches();

return (
<div className="relative pb-8">
<Marquee gradient gradientColor="var(--background)">
{league.matches.map((match) => {
return (
<div className="flex flex-col border-r px-8" key={match.matchId}>
<p className="mb-1 text-xs">{format(new Date(match.matchDate), "dd.MM.yyyy")}</p>

<div className="flex-center flex gap-8">
<div className="flex flex-col">
<Team
id={match.hometeamId}
name={match.hometeamOrgName}
score={match.matchResult?.homeGoals}
/>

<Team
id={match.awayteamId}
name={match.awayteamOrgName}
score={match.matchResult?.awayGoals}
/>
</div>
</div>
</div>
);
})}
</Marquee>
</div>
);
};
69 changes: 40 additions & 29 deletions apps/web/src/components/event-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Image from "next/image";
import { type fetchHappeningBySlug } from "@/sanity/happening";
import { type fetchRepeatingHappening } from "@/sanity/repeating-happening";
import { CommentSection } from "./comments/comment-section";
import { CompanyLeagueBanner } from "./company-league-banner";
import { Container } from "./container";
import { HappeningSidebar } from "./happening-sidebar";
import { Markdown } from "./markdown";
Expand All @@ -19,35 +20,45 @@ type EventPageProps = {
};

export const EventPage = ({ event }: EventPageProps) => {
const isCompanyLeague = event.body?.toLowerCase().includes("databrus fc");

return (
<Container className="flex w-full gap-24 py-10 lg:max-w-[1500px] lg:flex-row">
{event?._type === "happening" && <HappeningSidebar event={event} />}
{event?._type === "repeatingHappening" && <RepeatingHappeningSidebar event={event} />}

<div>
<article>
<Heading className="mb-4">{event.title}</Heading>

{event.body ? (
<Markdown content={event.body} />
) : (
<div className="mx-auto flex w-fit flex-col gap-8 p-5">
<h3 className="text-center text-xl font-medium">Mer informasjon kommer!</h3>
<Image
className="rounded-lg"
src="/gif/wallace-construction.gif"
alt="Wallace hammering"
width={400}
height={400}
/>
</div>
)}
</article>

<Suspense fallback={null}>
<CommentSection className="mt-10" id={`event_${event._id}`} />
</Suspense>
</div>
</Container>
<div>
{isCompanyLeague && (
<div className="pt-6">
<CompanyLeagueBanner />
</div>
)}

<Container className="relative flex w-full gap-24 py-10 lg:max-w-[1500px] lg:flex-row">
{event?._type === "happening" && <HappeningSidebar event={event} />}
{event?._type === "repeatingHappening" && <RepeatingHappeningSidebar event={event} />}

<div>
<article>
<Heading className="mb-4">{event.title}</Heading>

{event.body ? (
<Markdown content={event.body} />
) : (
<div className="mx-auto flex w-fit flex-col gap-8 p-5">
<h3 className="text-center text-xl font-medium">Mer informasjon kommer!</h3>
<Image
className="rounded-lg"
src="/gif/wallace-construction.gif"
alt="Wallace hammering"
width={400}
height={400}
/>
</div>
)}
</article>

<Suspense fallback={null}>
<CommentSection className="mt-10" id={`event_${event._id}`} />
</Suspense>
</div>
</Container>
</div>
);
};
18 changes: 18 additions & 0 deletions apps/web/src/styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,24 @@
}
}

@keyframes marqueeLeft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}

@keyframes marqueeRight {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

.bg-wrapped-purple {
background-color: #a484e9;
}
Expand Down
14 changes: 14 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 3b582c3

Please sign in to comment.