Julien Valverdé
105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router"
|
|
import { useEffect, useRef } from "react"
|
|
import "./index.css"
|
|
import screen1 from "./screen1.png"
|
|
import song from "./we_are_charlie_kirk.mp3"
|
|
|
|
|
|
export const Route = createFileRoute("/pazismemod/")({
|
|
component: RouteComponent,
|
|
})
|
|
|
|
const SONG_START_TIME = 46
|
|
|
|
function RouteComponent() {
|
|
const audioRef = useRef<HTMLAudioElement>(null)
|
|
|
|
useEffect(() => {
|
|
const audio = audioRef.current
|
|
|
|
if (!audio) {
|
|
return
|
|
}
|
|
|
|
const syncStartTime = () => {
|
|
if (Number.isFinite(audio.duration) && audio.duration > SONG_START_TIME) {
|
|
audio.currentTime = SONG_START_TIME
|
|
}
|
|
}
|
|
|
|
const loopFromOffset = async () => {
|
|
syncStartTime()
|
|
|
|
try {
|
|
await audio.play()
|
|
}
|
|
catch {
|
|
// Ignore autoplay failures. Some embedded browsers require user interaction.
|
|
}
|
|
}
|
|
|
|
const tryAutoplay = async () => {
|
|
syncStartTime()
|
|
|
|
try {
|
|
await audio.play()
|
|
}
|
|
catch {
|
|
// Ignore autoplay failures. Some embedded browsers require user interaction.
|
|
}
|
|
}
|
|
|
|
const gameDetails = (
|
|
_servername: string,
|
|
_serverurl: string,
|
|
_mapname: string,
|
|
_maxplayers: string,
|
|
_steamid: string,
|
|
_gamemode: string,
|
|
volume: number | string,
|
|
) => {
|
|
const parsedVolume = Number(volume)
|
|
|
|
if (Number.isFinite(parsedVolume)) {
|
|
audio.volume = Math.min(1, Math.max(0, parsedVolume))
|
|
}
|
|
}
|
|
|
|
audio.addEventListener("loadedmetadata", syncStartTime)
|
|
audio.addEventListener("ended", loopFromOffset)
|
|
void tryAutoplay()
|
|
;(window as Window & { GameDetails?: typeof gameDetails }).GameDetails = gameDetails
|
|
|
|
return () => {
|
|
audio.removeEventListener("loadedmetadata", syncStartTime)
|
|
audio.removeEventListener("ended", loopFromOffset)
|
|
|
|
if ((window as Window & { GameDetails?: typeof gameDetails }).GameDetails === gameDetails) {
|
|
delete (window as Window & { GameDetails?: typeof gameDetails }).GameDetails
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="relative h-screen w-screen overflow-hidden bg-black">
|
|
<audio ref={audioRef} src={song} preload="auto" hidden />
|
|
|
|
<img
|
|
src={screen1}
|
|
alt="Pazismemod screenshot"
|
|
className="h-full w-full object-contain"
|
|
/>
|
|
|
|
<h1
|
|
className="absolute bottom-12 left-6 leading-none text-white"
|
|
style={{
|
|
fontFamily: "\"Coolvetica\", sans-serif",
|
|
fontSize: "92px",
|
|
}}
|
|
>
|
|
pazisme mod
|
|
</h1>
|
|
</div>
|
|
)
|
|
}
|