From 69aeb7889ac136a8e4fbe7de1330298e30345479 Mon Sep 17 00:00:00 2001 From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com> Date: Wed, 22 Oct 2025 13:59:12 +0400 Subject: feat/frontend: switch to vite, update node to v22 (#281) --- frontend/src/components/ConfirmDialog.tsx | 32 +++--- frontend/src/components/Discussions.tsx | 16 +-- frontend/src/components/GameCategory.tsx | 22 ++-- frontend/src/components/GameEntry.tsx | 6 +- frontend/src/components/Leaderboards.tsx | 144 +++++++++++++------------- frontend/src/components/Login.tsx | 10 +- frontend/src/components/MapEntry.tsx | 10 +- frontend/src/components/MessageDialog.tsx | 30 +++--- frontend/src/components/MessageDialogLoad.tsx | 30 +++--- frontend/src/components/ModMenu.tsx | 18 ++-- frontend/src/components/RankingEntry.tsx | 58 +++++------ frontend/src/components/Sidebar.tsx | 42 ++++---- frontend/src/components/Summary.tsx | 12 +-- frontend/src/components/UploadRunDialog.tsx | 22 ++-- 14 files changed, 226 insertions(+), 226 deletions(-) (limited to 'frontend/src/components') diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx index 44a653b..d8784d2 100644 --- a/frontend/src/components/ConfirmDialog.tsx +++ b/frontend/src/components/ConfirmDialog.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; import "@css/Dialog.css" @@ -10,22 +10,22 @@ interface ConfirmDialogProps { }; const ConfirmDialog: React.FC = ({ title, subtitle, onConfirm, onCancel }) => { - return ( -
-
-
- {title} -
-
- {subtitle} -
-
- - -
-
+ return ( +
+
+
+ {title}
- ) +
+ {subtitle} +
+
+ + +
+
+
+ ) }; export default ConfirmDialog; diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx index 17ae586..0c37355 100644 --- a/frontend/src/components/Discussions.tsx +++ b/frontend/src/components/Discussions.tsx @@ -1,12 +1,12 @@ -import React from 'react'; +import React from "react"; -import { MapDiscussion, MapDiscussions, MapDiscussionsDetail } from '@customTypes/Map'; -import { MapDiscussionCommentContent, MapDiscussionContent } from '@customTypes/Content'; -import { time_ago } from '@utils/Time'; -import { API } from '@api/Api'; +import { MapDiscussion, MapDiscussions, MapDiscussionsDetail } from "@customTypes/Map"; +import { MapDiscussionContent } from "@customTypes/Content"; +import { time_ago } from "@utils/Time"; +import { API } from "@api/Api"; import "@css/Maps.css" -import { Link } from 'react-router-dom'; -import useConfirm from '@hooks/UseConfirm'; +import { Link } from "react-router-dom"; +import useConfirm from "@hooks/UseConfirm"; interface DiscussionsProps { token?: string @@ -141,7 +141,7 @@ const Discussions: React.FC = ({ token, data, isModerator, map data ? (<> {data.discussions.filter(f => f.title.includes(discussionSearch)).sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()) - .map((e, i) => ( + .map((e) => (
- {data.pagination.current_page}/{data.pagination.total_pages} - +
+ Place + + {data.map.is_coop ? ( +
+ Blue + Orange +
+ ) : ( + Runner + )} + + Portals + Time + Date +
+
+ + + {data.pagination.current_page}/{data.pagination.total_pages} + +
-
-
-
- {data.records.map((r, index) => ( - - {r.placement} - - {r.kind === "multiplayer" ? ( -
+
+
+ {data.records.map((r, index) => ( + + {r.placement} + + {r.kind === "multiplayer" ? ( +
  {r.host.user_name}   {r.partner.user_name} -
- ) : r.kind === "singleplayer" && ( -
+
+ ) : r.kind === "singleplayer" && ( +
  {r.user.user_name} -
- )} - - {r.score_count} - - {ticks_to_time(r.score_time)} - {time_ago(new Date(r.record_date.replace("T", " ").replace("Z", "")))} - - {r.kind === "multiplayer" ? ( - - - - - - ) : r.kind === "singleplayer" && ( - - - - - - )} - - ))} -
- -
+
+ )} + + {r.score_count} + + {ticks_to_time(r.score_time)} + {time_ago(new Date(r.record_date.replace("T", " ").replace("Z", "")))} + + {r.kind === "multiplayer" ? ( + + + + + + ) : r.kind === "singleplayer" && ( + + + + + + )} + + ))} +
+ + ); }; diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx index f1628b2..89a37e1 100644 --- a/frontend/src/components/Login.tsx +++ b/frontend/src/components/Login.tsx @@ -1,9 +1,9 @@ -import React from 'react'; -import { Link, useNavigate } from 'react-router-dom'; +import React from "react"; +import { Link, useNavigate } from "react-router-dom"; -import { ExitIcon, UserIcon, LoginIcon } from '@images/Images'; -import { UserProfile } from '@customTypes/Profile'; -import { API } from '@api/Api'; +import { ExitIcon, UserIcon, LoginIcon } from "@images/Images"; +import { UserProfile } from "@customTypes/Profile"; +import { API } from "@api/Api"; import "@css/Login.css"; interface LoginProps { diff --git a/frontend/src/components/MapEntry.tsx b/frontend/src/components/MapEntry.tsx index 0f494ad..88137d8 100644 --- a/frontend/src/components/MapEntry.tsx +++ b/frontend/src/components/MapEntry.tsx @@ -1,12 +1,12 @@ -import React from 'react'; +import React from "react"; import { Link } from "react-router-dom"; const MapEntry: React.FC = () => { - return ( -
+ return ( +
-
- ) +
+ ) } export default MapEntry; diff --git a/frontend/src/components/MessageDialog.tsx b/frontend/src/components/MessageDialog.tsx index 5c85189..ae95f8d 100644 --- a/frontend/src/components/MessageDialog.tsx +++ b/frontend/src/components/MessageDialog.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; import "@css/Dialog.css" @@ -9,21 +9,21 @@ interface MessageDialogProps { }; const MessageDialog: React.FC = ({ title, subtitle, onClose }) => { - return ( -
-
-
- {title} -
-
- {subtitle} -
-
- -
-
+ return ( +
+
+
+ {title}
- ) +
+ {subtitle} +
+
+ +
+
+
+ ) } export default MessageDialog; diff --git a/frontend/src/components/MessageDialogLoad.tsx b/frontend/src/components/MessageDialogLoad.tsx index 966e064..000a2ab 100644 --- a/frontend/src/components/MessageDialogLoad.tsx +++ b/frontend/src/components/MessageDialogLoad.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; import "@css/Dialog.css" @@ -8,22 +8,22 @@ interface MessageDialogLoadProps { }; const MessageDialogLoad: React.FC = ({ title, onClose }) => { - return ( -
-
-
- {title} -
-
-
+ return ( +
+
+
+ {title} +
+
+
-
-
-
-
-
+
+
+
- ) +
+
+ ) } export default MessageDialogLoad; diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx index 925b8a8..19ce0ce 100644 --- a/frontend/src/components/ModMenu.tsx +++ b/frontend/src/components/ModMenu.tsx @@ -1,12 +1,12 @@ -import React from 'react'; -import ReactMarkdown from 'react-markdown'; -import { useNavigate } from 'react-router-dom'; +import React from "react"; +import ReactMarkdown from "react-markdown"; +import { useNavigate } from "react-router-dom"; -import { MapSummary } from '@customTypes/Map'; -import { ModMenuContent } from '@customTypes/Content'; -import { API } from '@api/Api'; +import { MapSummary } from "@customTypes/Map"; +import { ModMenuContent } from "@customTypes/Content"; +import { API } from "@api/Api"; import "@css/ModMenu.css" -import useConfirm from '@hooks/UseConfirm'; +import useConfirm from "@hooks/UseConfirm"; interface ModMenuProps { token?: string; @@ -55,10 +55,10 @@ const ModMenu: React.FC = ({ token, data, selectedRun, mapID }) => width *= 320 / height; height = 320; } - const canvas = document.createElement('canvas'); + const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; - canvas.getContext('2d')!.drawImage(img, 0, 0, width, height); + canvas.getContext("2d")!.drawImage(img, 0, 0, width, height); resolve(canvas.toDataURL(file.type, 0.6)); }; } diff --git a/frontend/src/components/RankingEntry.tsx b/frontend/src/components/RankingEntry.tsx index b899965..9ad9e1c 100644 --- a/frontend/src/components/RankingEntry.tsx +++ b/frontend/src/components/RankingEntry.tsx @@ -1,6 +1,6 @@ -import React from 'react'; +import React from "react"; import { Link } from "react-router-dom"; -import { RankingType, SteamRanking, SteamRankingType } from '@customTypes/Ranking'; +import { RankingType, SteamRankingType } from "@customTypes/Ranking"; enum RankingCategories { rankings_overall, @@ -14,33 +14,33 @@ interface RankingEntryProps { }; const RankingEntry: React.FC = (prop) => { - if ("placement" in prop.curRankingData) { - return ( -
- {prop.curRankingData.placement} -
- - - {prop.curRankingData.user.user_name} - -
- {prop.curRankingData.total_score} -
- ) - } else { - return ( -
- {prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_rank : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_rank : prop.curRankingData.overall_rank} -
- - - {prop.curRankingData.user_name} - -
- {prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_score : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_score : prop.curRankingData.overall_score} -
- ) - } + if ("placement" in prop.curRankingData) { + return ( +
+ {prop.curRankingData.placement} +
+ + + {prop.curRankingData.user.user_name} + +
+ {prop.curRankingData.total_score} +
+ ) + } else { + return ( +
+ {prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_rank : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_rank : prop.curRankingData.overall_rank} +
+ + + {prop.curRankingData.user_name} + +
+ {prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_score : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_score : prop.curRankingData.overall_score} +
+ ) + } } export default RankingEntry; diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index f972c6f..eef5bca 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,11 +1,11 @@ -import React from 'react'; -import { Link, useLocation } from 'react-router-dom'; - -import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, PortalIcon, SearchIcon, UploadIcon } from '@images/Images'; -import Login from '@components/Login'; -import { UserProfile } from '@customTypes/Profile'; -import { Search } from '@customTypes/Search'; -import { API } from '@api/Api'; +import React from "react"; +import { Link, useLocation } from "react-router-dom"; + +import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, PortalIcon, SearchIcon, UploadIcon } from "@images/Images"; +import Login from "@components/Login"; +import { UserProfile } from "@customTypes/Profile"; +import { Search } from "@customTypes/Search"; +import { API } from "@api/Api"; import "@css/Sidebar.css"; interface SidebarProps { @@ -39,7 +39,7 @@ const Sidebar: React.FC = ({ setToken, profile, setProfile, onUplo }; const _handle_sidebar_hide = () => { - var btn = document.querySelectorAll("button.sidebar-button") as NodeListOf + const btn = document.querySelectorAll("button.sidebar-button") as NodeListOf const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf const side = document.querySelector("#sidebar-list") as HTMLElement; const searchbar = document.querySelector("#searchbar") as HTMLInputElement; @@ -140,13 +140,13 @@ const Sidebar: React.FC = ({ setToken, profile, setProfile, onUplo
- -