From 9a12a66c0f9211d3d1c01acd28b1674ef19f10a3 Mon Sep 17 00:00:00 2001 From: Simon <9295182+grimsi@users.noreply.github.com> Date: Tue, 22 Jul 2025 21:47:55 +0200 Subject: [PATCH] Implement custom error page (#647) --- .../general/IconBackgroundPattern.tsx | 80 ++++++++-- app/src/main/frontend/routes.tsx | 6 + app/src/main/frontend/views/ErrorView.tsx | 141 ++++++++++++++++++ 3 files changed, 212 insertions(+), 15 deletions(-) create mode 100644 app/src/main/frontend/views/ErrorView.tsx diff --git a/app/src/main/frontend/components/general/IconBackgroundPattern.tsx b/app/src/main/frontend/components/general/IconBackgroundPattern.tsx index 91bceb9..8475bf3 100644 --- a/app/src/main/frontend/components/general/IconBackgroundPattern.tsx +++ b/app/src/main/frontend/components/general/IconBackgroundPattern.tsx @@ -1,32 +1,82 @@ import { Alien, + Baseball, + Basketball, CastleTurret, + DiceFive, GameController, Ghost, + IconContext, Joystick, Lego, + Medal, + PuzzlePiece, + Rocket, Skull, SoccerBall, + Star, Strategy, Sword, + Target, + ThumbsUp, TreasureChest, - Trophy + Trophy, + User, + Volleyball } from "@phosphor-icons/react"; -import React from "react"; +import React, {useEffect} from "react"; export default function IconBackgroundPattern() { - return
- - - - - - - - - - - - + + const minW = 250; + const maxW = 1920; + const minS = 16; + const maxS = 40; + + const containerRef = React.useRef(null); + const [iconSize, setIconSize] = React.useState(minS); + + useEffect(() => { + const updateSize = () => { + if (containerRef.current) { + setIconSize(getResponsiveSize(containerRef.current.offsetWidth)); + } + }; + updateSize(); + window.addEventListener('resize', updateSize); + return () => window.removeEventListener('resize', updateSize); + }, []); + + const getResponsiveSize = (width: number) => { + const w = Math.max(minW, Math.min(width, maxW)); + return minS + ((w - minW) / (maxW - minW)) * (maxS - minS); + }; + + return
+ + + + + + + + + + + + + + + + + + + + + + + + +
} \ No newline at end of file diff --git a/app/src/main/frontend/routes.tsx b/app/src/main/frontend/routes.tsx index 1508e40..75a9ccc 100644 --- a/app/src/main/frontend/routes.tsx +++ b/app/src/main/frontend/routes.tsx @@ -23,6 +23,7 @@ import SearchView from "Frontend/views/SearchView"; import RecentlyAddedView from "Frontend/views/RecentlyAddedView"; import LibraryView from "Frontend/views/LibraryView"; import {RouterConfigurationBuilder} from "@vaadin/hilla-file-router/runtime.js"; +import ErrorView from "Frontend/views/ErrorView"; export const {router, routes} = new RouterConfigurationBuilder() .withReactRoutes([ @@ -145,6 +146,11 @@ export const {router, routes} = new RouterConfigurationBuilder() element: , handle: {title: 'Confirm Email'} }, + { + path: '*', + element: , + handle: {title: 'Error'} + } ] } ]) diff --git a/app/src/main/frontend/views/ErrorView.tsx b/app/src/main/frontend/views/ErrorView.tsx new file mode 100644 index 0000000..7a8fda8 --- /dev/null +++ b/app/src/main/frontend/views/ErrorView.tsx @@ -0,0 +1,141 @@ +import {Button} from "@heroui/react"; +import {useNavigate} from "react-router"; +import { + Alien, + Compass, + Cube, + DiceFive, + FlagCheckered, + GameController, + Ghost, + Icon, + IconContext, + Joystick, + MagicWand, + PuzzlePiece, + RocketLaunch, + Skull, + SmileyXEyes, + Sword +} from "@phosphor-icons/react"; +import React, {ReactElement, useState} from "react"; +import GameyfinLogo from "Frontend/components/theming/GameyfinLogo"; +import IconBackgroundPattern from "Frontend/components/general/IconBackgroundPattern"; + +type ErrorText = { + title: string; + subtitle: string; + buttonText: string; + icon: ReactElement; +} + +export default function ErrorView() { + const navigate = useNavigate(); + + const errorTexts: ErrorText[] = [ + { + "title": "404 – Level Not Found!", + "subtitle": "You’ve wandered off the map. This level doesn’t exist—or maybe it’s still in development.", + "buttonText": "Go back to the main menu", + "icon": + }, + { + "title": "404 – Quest Failed", + "subtitle": "The path you seek does not exist. Maybe it was just a side quest after all.", + "buttonText": "Return to the guild hall", + "icon": + }, + { + "title": "404 – You’ve encountered a glitch in the system!", + "subtitle": "The page you’re looking for couldn’t load. Don’t worry, no coins were lost.", + "buttonText": "Retry mission", + "icon": + }, + { + "title": "404 – Game Cartridge Not Inserted", + "subtitle": "This page failed to load. Did you blow on the cartridge and try again?", + "buttonText": "Reset the console", + "icon": + }, + { + "title": "404 – You are in the wrong zone…", + "subtitle": "This area is off-limits… or was never meant to be explored. Tread carefully.", + "buttonText": "Find a safe path", + "icon": + }, + { + "title": "404 – You Missed the Jump!", + "subtitle": "The platform you were trying to reach isn’t here. Maybe it was a hidden level?", + "buttonText": "Respawn at Start", + "icon": + }, + { + "title": "404 – Signal Lost in Deep Space", + "subtitle": "We've lost contact with this page. All we have is static and void.", + "buttonText": "Return to Command Center", + "icon": + }, + { + "title": "404 – The Page Has Vanished in a Puff of Smoke", + "subtitle": "A forbidden spell may have erased the page from existence. Try another path.", + "buttonText": "Return to the Grimoire", + "icon": + }, + { + "title": "404 – Block Not Found", + "subtitle": "The page you're looking for hasn't been crafted yet. Gather more resources and try again.", + "buttonText": "Back to Base", + "icon": + }, + { + "title": "404 – Puzzle Piece Missing", + "subtitle": "This page doesn’t quite fit. Try rotating it… or just go back.", + "buttonText": "Solve a different puzzle", + "icon": + }, + { + "title": "404 – You Took a Wrong Turn!", + "subtitle": "You drifted off course and into the digital void.", + "buttonText": "Return to the Starting Line", + "icon": + }, + { + "title": "404 – This Page Didn’t Survive", + "subtitle": "Only ruins remain. Whatever was here is long gone.", + "buttonText": "Search for safe house", + "icon": + }, + { + "title": "404 – Instance Not Found", + "subtitle": "This dungeon has been removed or doesn’t exist on this realm.", + "buttonText": "Return to your stronghold", + "icon": + }, + { + "title": "404 – The Page Was… Never Really Here…", + "subtitle": "You were warned not to look. But you clicked anyway.", + "buttonText": "Turn Back Now", + "icon": + } + ]; + + const [errorText] = useState(errorTexts[Math.floor(Math.random() * errorTexts.length)]); + + return ( +
+ + +

{errorText.title}

+

{errorText.subtitle}

+ + + +
+ ); +} \ No newline at end of file