import { Html } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { useNavigate } from "@tanstack/react-router";
import { useRef, useState, type ReactNode } from "react";
import * as THREE from "three";
import { LIBRARIES, type LibrarySlug } from "@/lib/libraries";
import { LIBRARY_PLACEMENTS, STORE_POSITION } from "@/lib/world-layout";
const stone = "#6a5b4c";
const plinth = "#3f3a34";
function Plinth({
children,
label,
onOpen,
}: {
children: ReactNode;
label: string;
onOpen: () => void;
}) {
const [hovered, setHovered] = useState(false);
return (
{
e.stopPropagation();
onOpen();
}}
onPointerOver={(e) => {
e.stopPropagation();
setHovered(true);
document.body.style.cursor = "pointer";
}}
onPointerOut={() => {
setHovered(false);
document.body.style.cursor = "auto";
}}
>
{children}
{hovered ? (
{label}
) : null}
);
}
function Zoetrope() {
const inner = useRef(null);
useFrame((_, dt) => {
if (inner.current) inner.current.rotation.y += dt * 1.4;
});
return (
<>
);
}
function OrbitCubes() {
const g = useRef(null);
useFrame((_, dt) => {
if (g.current) g.current.rotation.y += dt * 0.8;
});
return (
{([0, 2.1, 4.2] as const).map((a, i) => (
))}
);
}
function Storyboards() {
return (
<>
);
}
function Bust() {
return (
<>
);
}
function MiniKeep() {
return (
<>
);
}
function Crate() {
return (
<>
);
}
function Easel() {
return (
<>
);
}
function Figure() {
return (
<>
);
}
const ICONS: Record = {
"2d-animation": ,
"3d-animation": ,
concepting: ,
"character-design": ,
"level-design": ,
diy: ,
"traditional-art": ,
"life-drawing": ,
};
export function LibraryCairns() {
const navigate = useNavigate();
return (
<>
{LIBRARY_PLACEMENTS.map((p) => {
const lib = LIBRARIES.find((l) => l.slug === p.slug);
if (!lib) return null;
return (
navigate({ to: "/library/$slug", params: { slug: p.slug } })}
>
{ICONS[p.slug]}
);
})}
);
}
export function StoreTable() {
const navigate = useNavigate();
const [hovered, setHovered] = useState(false);
return (
{
e.stopPropagation();
void navigate({ to: "/store" });
}}
onPointerOver={(e) => {
e.stopPropagation();
setHovered(true);
document.body.style.cursor = "pointer";
}}
onPointerOut={() => {
setHovered(false);
document.body.style.cursor = "auto";
}}
>
{([-0.65, 0, 0.65] as const).map((x, i) => (
))}
{hovered ? (
Store
) : null}
);
}