packages/backend/src/http/routes/images.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2025 Aleksander <alekswilc> Wilczyński (aleks@alekswilc.dev)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * See LICENSE for more.
+ */
+
+import { Router } from "express";
+import { SuccessResponseBuilder } from '../responseBuilder.js';
+import { generateUrl } from '../../util/imgproxy.js';
+import { trainsMap, stationsMap } from '../../util/contants.js';
+
+export class ImagesRoute {
+    static load() {
+        const app = Router();
+
+        app.get("/", async (req, res) => {
+
+            const trains: Record<string, string> = {};
+
+            Object.keys(trainsMap).forEach(x => {
+                trains[x] = generateUrl(trainsMap[x], "f:png/q:50/rs:auto:512:1024:1");
+            })
+
+            const stations: Record<string, string> = {};
+
+            Object.keys(stationsMap).forEach(x => {
+                stations[x] = generateUrl(stationsMap[x], "f:png/q:50/rs:auto:512:1024:1");
+            })
+
+            res.json(
+                new SuccessResponseBuilder()
+                    .setCode(200)
+                    .setData({
+                       trains,
+                       stations
+                    })
+                    .toJSON(),
+            );
+        });
+
+        return app;
+    }
+}

packages/frontend/src/components/mini/profile/StationStat.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2025 Aleksander <alekswilc> Wilczyński (aleks@alekswilc.dev)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * See LICENSE for more.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { formatTime } from '../../../util/time.ts'
+
+export const StationStat = ({ stationName, time, image }: { stationName: string, time: number, image: string }) => {
+    const { t } = useTranslation();
+
+    stationName = stationName === 'N/A'
+        ? "Untracked" : stationName
+
+    return <div
+        key={stationName}
+        className="flex flex-col align-center items-center rounded border border-stroke bg-stroke shadow-default dark:border-strokedark dark:bg-boxdark">
+        <div className="p-4">
+            <img className=""
+                src={image}
+                alt="station icon" />
+        </div>
+        <div className="flex flex-col p-2 align-center items-center">
+            <h4 className="mb-3 text-xl font-semibold text-black dark:text-white">
+                {stationName}
+            </h4>
+            <p className={'break-words'}>{t('profile.stations.time', { time: formatTime(time) })}</p>
+        </div>
+    </div>
+}

packages/frontend/src/components/mini/profile/TrainStat.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2025 Aleksander <alekswilc> Wilczyński (aleks@alekswilc.dev)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * See LICENSE for more.
+ */
+
+import { useTranslation } from 'react-i18next'
+import { formatTime } from '../../../util/time.ts'
+
+export const TrainStat = ({ trainName, time, distance, score, image }: { trainName: string, time: number, distance: number, score: number, image: string }) => {
+    const { t } = useTranslation();
+    trainName = trainName === 'N/A'
+        ? "Untracked" : trainName
+
+    return <div
+        key={trainName}
+        className="flex flex-col align-center items-center rounded border border-stroke bg-stroke shadow-default dark:border-strokedark dark:bg-boxdark">
+        <div className="p-4">
+            <img className=""
+                src={image}
+                alt="train icon" />
+        </div>
+        <div className="flex flex-col p-2 align-center items-center">
+            <h4 className="mb-3 text-xl font-semibold text-black dark:text-white">
+                {trainName}
+            </h4>
+            <p className={'break-words'}>{t('profile.trains.time', { time: formatTime(time) })}</p>
+            <p className={'break-words'}>{t('profile.trains.distance', { distance: Math.floor(distance / 1000) })}m</p>
+            <p className={'break-words pb-4'}>{t('profile.trains.score', { score: score })}</p>
+
+        </div>
+    </div>
+}

packages/frontend/src/types/images.ts

@@ -0,0 +1,10 @@
+export interface TImagesResponse {
+    success: boolean;
+    data: TImagesData;
+    code: number;
+}
+
+export interface TImagesData {
+    trains: Record<string, string>
+    stations: Record<string, string>
+}

packages/frontend/src/util/chunk.ts

@@ -0,0 +1,5 @@
+export function* chunk<T>(arr: T[], n: number): Generator<T[], void> {
+  for (let i = 0; i < arr.length; i += n) {
+    yield arr.slice(i, i + n);
+  }
+}