56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { Howl } from "howler";
|
|
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
|
import playIcon from "@/assets/icons/play-outline.svg";
|
|
import openingSfx from "@/assets/audio/VO_JA_Furina_Opening_Treasure_Chest_02.ogg";
|
|
import ViewSheet from "./viewSheet";
|
|
import PageMetadata from "@/components/containers/PageMetadata";
|
|
import ArtworkListing from "./ArtworkListing";
|
|
import { useCallback } from "react";
|
|
|
|
const openingChestSfx = new Howl({
|
|
src: openingSfx,
|
|
preload: true,
|
|
});
|
|
|
|
const ArtworksPage = () => {
|
|
const { id: viewArtId } = useParams();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const goBack = useCallback(() => {
|
|
if (location.key !== "default") {
|
|
navigate(-1);
|
|
} else {
|
|
navigate("/treasures");
|
|
}
|
|
}, [location, navigate]);
|
|
|
|
return (
|
|
<div className="container py-16">
|
|
<PageMetadata title={viewArtId ? "View Artwork" : "Treasures"} />
|
|
|
|
<h1 className="text-2xl">Treasures</h1>
|
|
<div>
|
|
<p className="italic inline">Take it. Ahem... I allow you!</p>
|
|
<button
|
|
type="button"
|
|
className="bg-white rounded border-2 border-primary-300 hover:bg-gray-200 p-1 md:p-0.5 ml-2"
|
|
>
|
|
<img
|
|
src={playIcon}
|
|
alt="play"
|
|
className="h-4"
|
|
onClick={() => openingChestSfx.play()}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<ArtworkListing />
|
|
|
|
<ViewSheet isOpen={viewArtId != null} id={viewArtId} onClose={goBack} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ArtworksPage;
|