Skip to content

Commit 7878fac

Browse files
PArnsPArns
committed
Added CoasterStats
1 parent a830f57 commit 7878fac

File tree

6 files changed

+182
-58
lines changed

6 files changed

+182
-58
lines changed

‎app/(desktop)/[lng]/@me/(.)/me/page.tsx

Lines changed: 55 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import TypeWriter from "@/components/type-writer";
77
import JumbotronPic from "@/public/images/profilePic-exempt.png";
88
import { getPageAlternates } from "@/helper/localization";
99

10-
import { fetchCoasterStats } from "@/data-provider/coastercloud/provider/ride-statistics-provider";
11-
import { RideStatistic } from "@/data-provider/coastercloud/types/TypeRideStatistics";
10+
import { WindowTitle } from "@/components/os/windowManager";
11+
import CoasterStats from "@/components/coaster-stats";
1212

1313
export async function generateMetadata({
1414
params,
@@ -29,69 +29,68 @@ export async function generateMetadata({
2929
},
3030
};
3131
}
32-
33-
export function getCount(stats: RideStatistic | null, key: String): Number {
34-
if (stats === null) return 0;
35-
36-
const count = stats.counts.find((item) => item.key === key);
37-
return count ? count.value : 0;
38-
}
39-
4032
export default async function AboutMe({ params }: { params: { lng: string } }) {
41-
const coasterStats = await fetchCoasterStats();
33+
const { t } = await initTranslations({
34+
locale: params.lng,
35+
namespaces: ["titles"],
36+
});
4237

4338
return (
44-
<div className="mx-auto p-4 @container">
45-
<div className="relative flex flex-row">
46-
<div className="flex w-full items-center justify-center">
47-
<div>
48-
<h1 className="text-xl font-bold @md:text-3xl @xl:text-5xl">
49-
<div>Life is simple</div>
50-
<div className="width-32text-clip text-sky-500 @md:mt-3">
51-
<TypeWriter
52-
words={[
53-
"Eat,",
54-
"Sleep,",
55-
"Code,",
56-
"Amusement Parks",
57-
"& Repeat!",
58-
]}
59-
loop={true}
60-
cursor
61-
cursorStyle="|"
62-
typeSpeed={100}
63-
deleteSpeed={50}
64-
delaySpeed={1500}
65-
/>
66-
</div>
67-
</h1>
39+
<div className="flex flex-col p-2 @container">
40+
<WindowTitle id="me" title={t("aboutMe")} />
41+
42+
<div className="relative w-full overflow-hidden rounded-lg bg-cover bg-no-repeat text-center">
43+
<div className="relative flex flex-row">
44+
<div className="flex w-full items-center justify-center">
45+
<div>
46+
<h1 className="text-xl font-bold @md:text-3xl @xl:text-5xl">
47+
<div>Life is simple</div>
48+
<div className="width-32text-clip text-sky-500 @md:mt-3">
49+
<TypeWriter
50+
words={[
51+
"Eat,",
52+
"Sleep,",
53+
"Code,",
54+
"Amusement Parks",
55+
"& Repeat!",
56+
]}
57+
loop={true}
58+
cursor
59+
cursorStyle="|"
60+
typeSpeed={100}
61+
deleteSpeed={50}
62+
delaySpeed={1500}
63+
/>
64+
</div>
65+
</h1>
66+
</div>
67+
</div>
68+
<div className="w-max @md:pr-4">
69+
<Image
70+
src={JumbotronPic}
71+
alt="Patrick"
72+
height={500}
73+
placeholder="blur"
74+
/>
6875
</div>
6976
</div>
70-
<div className="w-max @md:pr-4">
71-
<Image
72-
src={JumbotronPic}
73-
alt="Patrick"
74-
height={500}
75-
placeholder="blur"
77+
</div>
78+
79+
<div className="flex gap-2">
80+
<div className="flex w-full flex-col rounded-md bg-white p-4 @3xl:w-3/4 dark:bg-neutral-800">
81+
<h1 className="mb-2 text-2xl">More to come!</h1>
82+
<p>This page is under construction ...</p>
83+
<br />
84+
<BlogTeaserSpecific
85+
locale={params.lng}
86+
postId="3L8OVL4Eq4SRF2DPRcGvcR"
7687
/>
7788
</div>
78-
</div>
79-
<article className="rounded-md bg-white p-4 dark:bg-neutral-800">
80-
<h1 className="mb-2 text-2xl">More to come!</h1>
81-
<p>This page is under construction ...</p>
82-
<br />
83-
<BlogTeaserSpecific
84-
locale={params.lng}
85-
postId="3L8OVL4Eq4SRF2DPRcGvcR"
86-
/>
8789

88-
<h2>Coaster Stats</h2>
89-
<div className="flex flex-col">
90-
<div>Parks: {`${getCount(coasterStats, "totalParks")}`}</div>
91-
<div>Rides: {`${getCount(coasterStats, "totalRides")}`}</div>
92-
<div>Visits: {`${getCount(coasterStats, "totalVisits")}`}</div>
90+
<div className="hidden h-min w-1/4 flex-col rounded-md bg-white p-4 @3xl:flex dark:bg-neutral-800">
91+
<CoasterStats lng={params.lng} />
9392
</div>
94-
</article>
93+
</div>
9594
</div>
9695
);
9796
}

‎components/coaster-stats/index.tsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import Image from "next/image";
2+
3+
import { fetchCoasterStats } from "@/data-provider/coastercloud/provider/ride-statistics-provider";
4+
import { RideStatistic } from "@/data-provider/coastercloud/types/TypeRideStatistics";
5+
6+
import CoasterCloudLogo from "@/public/images/CoasterCloud.png";
7+
import initTranslations from "../translate/i18n";
8+
9+
export function getCount(stats: RideStatistic | null, key: string): Number {
10+
if (stats === null) return 0;
11+
12+
const count = stats.counts.find((item) => item.key === key);
13+
return count ? count.value : 0;
14+
}
15+
16+
export function getRideFact(stats: RideStatistic | null, key: string): string {
17+
if (stats === null) return "";
18+
19+
const item = stats.rideFacts.find((item) => item.key === key);
20+
return item ? item.valueAsString : "";
21+
}
22+
23+
export default async function CoasterStats({ lng }: { lng: string }) {
24+
const { t } = await initTranslations({
25+
locale: lng,
26+
namespaces: ["coasterStats"],
27+
});
28+
29+
const coasterStats = await fetchCoasterStats();
30+
const coasterWithHighestCount =
31+
coasterStats?.attractionRides.items[0].attraction;
32+
const coasterImageWithHighestCount =
33+
coasterWithHighestCount?.images[0].url.replaceAll("square80", "square250");
34+
const coasterImageWithHighestCountCopyRight = `(c) ${coasterWithHighestCount?.images[0].license.name} - ${coasterWithHighestCount?.images[0].contributor.username}`;
35+
36+
return (
37+
<div className="relative mb-4">
38+
<h2 className="pb-1 text-xl">{t("coasterStats")}</h2>
39+
<table className="min-w-full">
40+
<tbody>
41+
<tr>
42+
<td>{t("visits")}:</td>
43+
<td>{`${getCount(coasterStats, "totalVisits")}`}</td>
44+
</tr>
45+
<tr>
46+
<td>{t("countries")}:</td>
47+
<td>{`${getCount(coasterStats, "totalCountries")}`}</td>
48+
</tr>
49+
<tr>
50+
<td>{t("parks")}:</td>
51+
<td>{`${getCount(coasterStats, "totalParks")}`}</td>
52+
</tr>
53+
<tr>
54+
<td>{t("rides")}:</td>
55+
<td>{`${getCount(coasterStats, "totalRides")}`}</td>
56+
</tr>
57+
<tr>
58+
<td>{t("inversions")}:</td>
59+
<td>{`${getRideFact(coasterStats, "totalRideInversions")}`}</td>
60+
</tr>
61+
<tr>
62+
<td>{t("length")}:</td>
63+
<td>{`${getRideFact(coasterStats, "totalRideLength")}`}</td>
64+
</tr>
65+
</tbody>
66+
</table>
67+
68+
<div className="mt-2 flex flex-col">
69+
<div>
70+
<h3 className="mb-1">{t("mostCounts")}</h3>
71+
</div>
72+
<div>
73+
<Image
74+
src={coasterImageWithHighestCount || ""}
75+
alt={coasterWithHighestCount?.name || "Coaster"}
76+
title={coasterImageWithHighestCountCopyRight}
77+
width={250}
78+
height={190}
79+
className="rounded-lg"
80+
/>
81+
</div>
82+
<div className="w-full text-center text-sm text-neutral-700 dark:text-neutral-300">
83+
{coasterWithHighestCount?.name}
84+
</div>
85+
</div>
86+
<a
87+
className="absolute -right-2 flex w-full place-content-end pt-2 text-xs text-neutral-500"
88+
href="https://coaster.cloud"
89+
target="_blank"
90+
title="coaster.cloud"
91+
>
92+
<div>Powered by</div>
93+
<div>
94+
<Image
95+
src={CoasterCloudLogo}
96+
alt="coaster.cloud Logo"
97+
width={20}
98+
className="-mt-1 ml-1 grayscale"
99+
/>
100+
</div>
101+
</a>
102+
</div>
103+
);
104+
}

‎i18n/locales/de/coasterStats.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"coasterStats": "Achterbahnen",
3+
"visits": "Besuche",
4+
"countries": "Länder",
5+
"parks": "Parks",
6+
"rides": "Bahnen",
7+
"inversions": "Inversionen",
8+
"length": "Länge",
9+
"mostCounts": "Meiste Fahrten"
10+
}

‎i18n/locales/en/coasterStats.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"coasterStats": "Coaster Count",
3+
"visits": "Visits",
4+
"countries": "Countries",
5+
"parks": "Parks",
6+
"rides": "Rides",
7+
"inversions": "Inversions",
8+
"length": "Length",
9+
"mostCounts": "Most Counts"
10+
}
11+

‎next.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ const nextConfig = {
33
images: {
44
remotePatterns: [
55
{ hostname: "images.ctfassets.net" },
6-
{ hostname: "source.unsplash.com" },
6+
{ hostname: "media.coaster.cloud" },
77
],
8-
minimumCacheTTL: 86400
8+
minimumCacheTTL: 86400,
99
},
1010
};
1111

‎public/images/CoasterCloud.png

48.7 KB
Loading

0 commit comments

Comments
 (0)