csgowtf/src/routes/+error.svelte

<script lang="ts">
	import { page } from '$app/stores';
	import { Home, ArrowLeft, Zap } from 'lucide-svelte';

	// Get error information
	const error = $page.error;
	const status = $page.status;

	// Flash-themed error messages
	const getErrorMessage = (statusCode: number): string => {
		switch (statusCode) {
			case 404:
				return "This page got pop-flashed out of existence. Even we can't see it.";
			case 500:
				return "The server got flashbanged. It's currently rubbing its eyes. Please wait.";
			case 503:
				return 'Service temporarily blinded. Someone threw a flash into the server room.';
			case 400:
				return 'Bad request? More like bad flash lineup. Try again.';
			case 401:
				return "You need to authenticate. Unlike flashes, you can't just walk through this.";
			case 403:
				return 'Forbidden. This area is as off-limits as throwing flashes at your own spawn.';
			default:
				return 'Something went white. Very white. Flash-in-the-face white.';
		}
	};

	const getErrorTitle = (statusCode: number): string => {
		switch (statusCode) {
			case 404:
				return "You've Been Full-Blind";
			case 500:
				return 'Server Got Flashbanged';
			case 503:
				return 'Temporarily Blinded';
			case 400:
				return 'Bad Flash Lineup';
			case 401:
				return 'Flash Authentication Required';
			case 403:
				return 'Flash Access Denied';
			default:
				return 'Unexpected Flash';
		}
	};

	// Rotating flash puns for extra fun
	const flashPuns = [
		"At least this error didn't team flash you.",
		"Error logging: You've been added to the wall of shame.",
		'Did you try turning off the flashbang and turning it back on?',
		'This error is brighter than your flash lineups.',
		'404: Your aim, also not found.',
		"The page didn't peek, but got flashed anyway.",
		'Server.exe has stopped responding to flash inputs.',
		'Have you considered not running into your own flashes?'
	];

	const randomPun = flashPuns[Math.floor(Math.random() * flashPuns.length)];
</script>

<svelte:head>
	<title>{status} - {getErrorTitle(status)} | teamflash.rip</title>
</svelte:head>

<div class="relative min-h-screen bg-void">
	<!-- Decorative Background -->
	<div class="pointer-events-none absolute inset-0 overflow-hidden">
		<!-- Blur orbs -->
		<div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-neon-gold/15 blur-[100px]"></div>
		<div
			class="absolute -right-40 bottom-20 h-80 w-80 rounded-full bg-neon-red/10 blur-[100px]"
		></div>
		<div
			class="absolute left-1/2 top-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-neon-gold/5 blur-[120px]"
		></div>
		<!-- Grid pattern -->
		<div
			class="absolute inset-0 opacity-20"
			style="background-image: linear-gradient(rgba(255, 170, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 170, 0, 0.03) 1px, transparent 1px); background-size: 60px 60px;"
		></div>
	</div>

	<!-- Content -->
	<div
		class="container relative z-10 mx-auto flex min-h-[80vh] items-center justify-center px-4 py-16"
	>
		<div class="w-full max-w-2xl rounded-xl border border-white/10 bg-void-light p-8 md:p-12">
			<div class="text-center">
				<!-- Flash Icon -->
				<div class="mb-6 flex justify-center">
					<div class="relative">
						<Zap
							class="h-20 w-20 animate-pulse text-neon-gold"
							style="filter: drop-shadow(0 0 20px rgba(255, 170, 0, 0.6));"
						/>
						<div
							class="absolute inset-0 animate-ping rounded-full bg-neon-gold/20"
							style="animation-duration: 2s;"
						></div>
					</div>
				</div>

				<!-- Error Code -->
				<div
					class="mb-4 font-mono text-8xl font-bold text-neon-gold md:text-9xl"
					style="text-shadow: 0 0 40px rgba(255, 170, 0, 0.5), 0 0 80px rgba(255, 170, 0, 0.3);"
				>
					{status}
				</div>

				<!-- Error Title -->
				<h1
					class="mb-4 text-3xl font-bold text-white"
					style="text-shadow: 0 0 20px rgba(255, 170, 0, 0.3);"
				>
					{getErrorTitle(status)}
				</h1>

				<!-- Error Message -->
				<p class="mb-4 text-lg text-white/70">
					{getErrorMessage(status)}
				</p>

				<!-- Random Flash Pun -->
				<p class="mb-8 text-sm italic text-white/40">
					"{randomPun}"
				</p>

				<!-- Debug Info (only in development) -->
				{#if import.meta.env?.DEV && error}
					<div class="mb-8 rounded-lg border border-neon-red/30 bg-neon-red/5 p-4 text-left">
						<p class="mb-2 font-mono text-sm text-neon-red">
							<strong>Flash Report (Debug):</strong>
						</p>
						<pre class="overflow-x-auto text-xs text-white/70">{JSON.stringify(
								error,
								null,
								2
							)}</pre>
					</div>
				{/if}

				<!-- Action Buttons -->
				<div class="flex flex-col justify-center gap-4 sm:flex-row">
					<button
						onclick={() => history.back()}
						class="inline-flex items-center justify-center gap-2 rounded-lg border border-white/20 px-6 py-3 font-medium text-white/80 transition-all duration-300 hover:bg-white/10 hover:text-white"
					>
						<ArrowLeft class="h-5 w-5" />
						Peek Again
					</button>

					<a
						href="/"
						class="inline-flex items-center justify-center gap-2 rounded-lg bg-neon-gold px-6 py-3 font-medium text-void transition-all duration-300 hover:shadow-[0_0_25px_rgba(255,170,0,0.4)]"
					>
						<Home class="h-5 w-5" />
						Return to Spawn
					</a>
				</div>

				<!-- Help Text -->
				<p class="mt-8 text-sm text-white/40">
					If this flash keeps happening, please
					<a
						href="https://somegit.dev/CSGOWTF/csgowtf/issues"
						target="_blank"
						rel="noopener noreferrer"
						class="text-neon-blue underline decoration-neon-blue/30 transition-colors hover:text-neon-blue hover:decoration-neon-blue"
					>
						report it on GitHub
					</a>
					(we won't flash you, we promise)
				</p>
			</div>
		</div>
	</div>
</div>