furina.id/src/pages/home/page.tsx

99 lines
2.5 KiB
TypeScript

/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useRef, useState } from "react";
import styles from "./style.module.css";
import { cn } from "@/utility/utils";
import LoadingPage from "../misc/loading-page";
import PageMetadata from "@/components/containers/PageMetadata";
import Modal from "@/components/ui/Modal";
import useModal from "@/hooks/useModal";
const HomePage = () => {
const appRef = useRef<any>();
const cleanRef = useRef<any>();
const targetRef = useRef<HTMLDivElement>(null);
const [isReady, setReady] = useState(false);
useEffect(() => {
if (!appRef.current) {
appRef.current = true;
const init = async () => {
const { default: game } = await import("./game");
const { app, clean } = await game();
targetRef.current?.appendChild(app.view as never);
appRef.current = app;
cleanRef.current = clean;
setReady(true);
};
init();
}
return () => {
if (cleanRef.current) {
cleanRef.current();
}
};
}, [setReady]);
return (
<div>
<PageMetadata
title="Pet the Furina"
description="Play pet the furina meme game"
keywords="pet furina, pet the furina, pet the meme, furina pat pat, pat furina"
/>
{!isReady ? <LoadingPage /> : null}
<div
ref={targetRef}
className={cn(
"flex flex-col items-center justify-center",
styles.canvasContainer
)}
/>
<Credits />
</div>
);
};
const Credits = () => {
const [toggle, setToggle] = useState(false);
const modal = useModal();
return (
<div className="container pt-4 pb-16 border-t">
<button
type="button"
className="border-primary-500 border text-sm rounded-lg px-4 py-2"
onClick={modal.onOpen}
>
Assets Credits
</button>
<Modal {...modal} title="Big Thanks to:" size="xl">
<pre className="font-sans overflow-x-auto">
{`
Furina Stickers:
Guido_ (https://risibank.fr/media/297778-genshin-archon-hydro-c6-r5-soutine)
Coll5 (https://risibank.fr/media/317061-furina-focalor-genshin)
Music:
Kururin Furina Cover by Ariyutta (https://facebook.com/arbi.yudatama)
pet the peepo by NitroiF (https://www.youtube.com/shorts/ll2Au3CdV2k)
Hand Sprite:
@soapmangraylace2752 (https://www.youtube.com/shorts/HEguW7Gmu2w)
Fijiwaterhelp (https://jailbreak.fandom.com/wiki/User_blog:Fijiwaterhelp/hand_petting)
`.trim()}
</pre>
</Modal>
</div>
);
};
export default HomePage;