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/pages/About.tsx | 60 +++++----- frontend/src/pages/Games.tsx | 64 +++++------ frontend/src/pages/Homepage.tsx | 32 +++--- frontend/src/pages/Maps.tsx | 22 ++-- frontend/src/pages/Profile.tsx | 46 ++++---- frontend/src/pages/Rankings.tsx | 248 ++++++++++++++++++++-------------------- frontend/src/pages/Rules.tsx | 62 +++++----- frontend/src/pages/User.tsx | 44 +++---- 8 files changed, 289 insertions(+), 289 deletions(-) (limited to 'frontend/src/pages') diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx index a8b7826..e4abdf4 100644 --- a/frontend/src/pages/About.tsx +++ b/frontend/src/pages/About.tsx @@ -1,40 +1,40 @@ -import React from 'react'; -import ReactMarkdown from 'react-markdown'; -import { Helmet } from 'react-helmet'; +import React from "react"; +import ReactMarkdown from "react-markdown"; +import { Helmet } from "react-helmet"; -import '@css/About.css'; +import "@css/About.css"; const About: React.FC = () => { - const [aboutText, setAboutText] = React.useState(""); + const [aboutText, setAboutText] = React.useState(""); - React.useEffect(() => { - const fetchReadme = async () => { - try { - const response = await fetch( - 'https://raw.githubusercontent.com/pektezol/lphub/main/README.md' - ); - if (!response.ok) { - throw new Error('Failed to fetch README'); - } - const readmeText = await response.text(); - setAboutText(readmeText); - } catch (error) { - console.error('Error fetching README:', error); - } - }; - fetchReadme(); - }, []); + React.useEffect(() => { + const fetchReadme = async () => { + try { + const response = await fetch( + "https://raw.githubusercontent.com/pektezol/lphub/main/README.md" + ); + if (!response.ok) { + throw new Error("Failed to fetch README"); + } + const readmeText = await response.text(); + setAboutText(readmeText); + } catch (error) { + console.error("Error fetching README:", error); + } + }; + fetchReadme(); + }, []); - return ( -
- - LPHUB | About - - {aboutText} -
- ); + return ( +
+ + LPHUB | About + + {aboutText} +
+ ); }; export default About; diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx index 15cc891..909ea20 100644 --- a/frontend/src/pages/Games.tsx +++ b/frontend/src/pages/Games.tsx @@ -1,46 +1,46 @@ -import React from 'react'; -import { Helmet } from 'react-helmet'; +import React from "react"; +import { Helmet } from "react-helmet"; -import GameEntry from '@components/GameEntry'; -import { Game } from '@customTypes/Game'; +import GameEntry from "@components/GameEntry"; +import { Game } from "@customTypes/Game"; import "@css/Maps.css" interface GamesProps { - games: Game[]; + games: Game[]; } const Games: React.FC = ({ games }) => { - const _page_load = () => { - const loaders = document.querySelectorAll(".loader"); - loaders.forEach((loader) => { - (loader as HTMLElement).style.display = "none"; - }); - } + const _page_load = () => { + const loaders = document.querySelectorAll(".loader"); + loaders.forEach((loader) => { + (loader as HTMLElement).style.display = "none"; + }); + } - React.useEffect(() => { - document.querySelectorAll(".games-page-item-body").forEach((game, index) => { - game.innerHTML = ""; - }); - _page_load(); - }, []); + React.useEffect(() => { + document.querySelectorAll(".games-page-item-body").forEach((game, index) => { + game.innerHTML = ""; + }); + _page_load(); + }, []); - return ( -
- - LPHUB | Games - -
-
-
- {games.map((game, index) => ( - - ))} -
-
-
+ return ( +
+ + LPHUB | Games + +
+
+
+ {games.map((game, index) => ( + + ))} +
- ); +
+
+ ); }; export default Games; diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx index 4f46af5..3f30d9a 100644 --- a/frontend/src/pages/Homepage.tsx +++ b/frontend/src/pages/Homepage.tsx @@ -1,22 +1,22 @@ -import React from 'react'; -import { Helmet } from 'react-helmet'; +import React from "react"; +import { Helmet } from "react-helmet"; const Homepage: React.FC = () => { - return ( -
- - LPHUB | Homepage - -
-

-

Welcome to Least Portals Hub!

-

At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.

-

The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.

-

By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.

-
-
- ); + return ( +
+ + LPHUB | Homepage + +
+

+

Welcome to Least Portals Hub!

+

At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.

+

The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.

+

By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.

+
+
+ ); }; export default Homepage; diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx index fb13563..8bb5b32 100644 --- a/frontend/src/pages/Maps.tsx +++ b/frontend/src/pages/Maps.tsx @@ -1,14 +1,14 @@ -import React from 'react'; -import { Link, useLocation } from 'react-router-dom'; -import { Helmet } from 'react-helmet'; - -import { PortalIcon, FlagIcon, ChatIcon } from '@images/Images'; -import Summary from '@components/Summary'; -import Leaderboards from '@components/Leaderboards'; -import Discussions from '@components/Discussions'; -import ModMenu from '@components/ModMenu'; -import { MapDiscussions, MapLeaderboard, MapSummary } from '@customTypes/Map'; -import { API } from '@api/Api'; +import React from "react"; +import { Link, useLocation } from "react-router-dom"; +import { Helmet } from "react-helmet"; + +import { PortalIcon, FlagIcon, ChatIcon } from "@images/Images"; +import Summary from "@components/Summary"; +import Leaderboards from "@components/Leaderboards"; +import Discussions from "@components/Discussions"; +import ModMenu from "@components/ModMenu"; +import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map"; +import { API } from "@api/Api"; import "@css/Maps.css"; interface MapProps { diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx index 48233bf..e7b8325 100644 --- a/frontend/src/pages/Profile.tsx +++ b/frontend/src/pages/Profile.tsx @@ -1,16 +1,16 @@ -import React from 'react'; -import { Link, useNavigate } from 'react-router-dom'; -import { Helmet } from 'react-helmet'; - -import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from '@images/Images'; -import { UserProfile } from '@customTypes/Profile'; -import { Game, GameChapters } from '@customTypes/Game'; -import { Map } from '@customTypes/Map'; -import { ticks_to_time } from '@utils/Time'; +import React from "react"; +import { Link, useNavigate } from "react-router-dom"; +import { Helmet } from "react-helmet"; + +import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from "@images/Images"; +import { UserProfile } from "@customTypes/Profile"; +import { Game, GameChapters } from "@customTypes/Game"; +import { Map } from "@customTypes/Map"; +import { ticks_to_time } from "@utils/Time"; import "@css/Profile.css"; -import { API } from '@api/Api'; -import useConfirm from '@hooks/UseConfirm'; -import useMessage from '@hooks/UseMessage'; +import { API } from "@api/Api"; +import useConfirm from "@hooks/UseConfirm"; +import useMessage from "@hooks/UseMessage"; import useMessageLoad from "@hooks/UseMessageLoad"; interface ProfileProps { @@ -193,9 +193,9 @@ const Profile: React.FC = ({ profile, token, gameData, onDeleteRec : { - setGame((document.querySelector('#select-game') as HTMLInputElement).value); + setGame((document.querySelector("#select-game") as HTMLInputElement).value); setChapter("0"); - const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement; + const chapterSelect = document.querySelector("#select-chapter") as HTMLSelectElement; if (chapterSelect) { chapterSelect.value = "0"; } @@ -182,7 +182,7 @@ const User: React.FC = ({ token, profile, gameData }) => { : chapterData === null ? :