95 lines
5.5 KiB
TypeScript
95 lines
5.5 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState, useRef } from 'react'
|
|
import { CardGroup } from '@/components/ui/card-group'
|
|
import {PlaneswalkerIcon, SorceryIcon, InstantIcon, CreatureIcon, EnchantmentIcon, LandIcon, ArtifactIcon} from '@/components/ui/symbols-icons'
|
|
|
|
interface PageContentProps {
|
|
bset: string
|
|
}
|
|
|
|
export default function PageContent({bset}: PageContentProps) {
|
|
const [commanderList, setCommanderList] = useState([])
|
|
const [creatureList, setCreatureList] = useState([])
|
|
const [planeswalkerList, setPlaneswalkerList] = useState([])
|
|
const [instantList, setInstantList] = useState([])
|
|
const [sorceryList, setSorceryList] = useState([])
|
|
const [artifactList, setArtifactList] = useState([])
|
|
const [enchantmentList, setEnchantmentList] = useState([])
|
|
const [landList, setLandList] = useState([])
|
|
|
|
const [scrollState, setScrollState] = useState("commander")
|
|
const CardListRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
fetch('/api/json/bset/'+bset+'.json').then((res) => {
|
|
if(res.status == 200) {
|
|
res.json().then((data) => {
|
|
const limit = 100
|
|
setCommanderList(data["commander"].slice(0,limit))
|
|
setCreatureList(data["creature"].slice(0,limit))
|
|
setPlaneswalkerList(data["planeswalker"].slice(0,limit))
|
|
setSorceryList(data["sorcery"].slice(0,limit))
|
|
setInstantList(data["instant"].slice(0,limit))
|
|
setEnchantmentList(data["enchantment"].slice(0,limit))
|
|
setLandList(data["land"].slice(0,limit))
|
|
setArtifactList(data["artifact"].slice(0,limit))
|
|
console.log(data)
|
|
})
|
|
}
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const windowHeight = window.innerHeight
|
|
const TOP_MARGIN = 0.1
|
|
const BOTTOM_MARGIN = 0.2
|
|
const card_children = CardListRef.current?.children
|
|
if (card_children) {
|
|
for (const child of card_children){
|
|
const targetBounds = child.getBoundingClientRect()
|
|
if( targetBounds.bottom > windowHeight * TOP_MARGIN && targetBounds.top < windowHeight * ( 1 - BOTTOM_MARGIN ) ) {
|
|
setScrollState(child.id)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Add event listener to the window
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
// Remove event listener when the component is unmounted
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-col items-center w-full">
|
|
<div ref={CardListRef} className="flex flex-col items-center mt-24 gap-4 max-w-6xl">
|
|
<CardGroup className="scroll-mt-16" groupName={"Commandants"} id="commander" showPercent={false} cards={commanderList} />
|
|
<CardGroup className="scroll-mt-16" groupName={"Planeswalker"} Icon={PlaneswalkerIcon} id="planeswalker" cards={planeswalkerList} />
|
|
<CardGroup className="scroll-mt-16" groupName={"Créatures"} Icon={CreatureIcon} id="creature" cards={creatureList} />
|
|
<CardGroup className="scroll-mt-16" groupName={"Rituels"} Icon={SorceryIcon} id="sorcery" cards={sorceryList} />
|
|
<CardGroup className="scroll-mt-16" groupName={"Artefacts"} Icon={ArtifactIcon} id="artifact" cards={artifactList} />
|
|
<CardGroup className="scroll-mt-16" groupName={"Éphémères"} Icon={InstantIcon} id="instant" cards={instantList} />
|
|
<CardGroup className="scroll-mt-16" groupName={"Enchantements"} Icon={EnchantmentIcon} id="enchantment" cards={enchantmentList} />
|
|
<CardGroup className="scroll-mt-16" groupName={"Terrains"} Icon={LandIcon} id="land" cards={landList} />
|
|
</div>
|
|
</div>
|
|
<div className="fixed top-80 ml-8 flex flex-col gap-2 text-stone-500">
|
|
<a href="#commander" className={ scrollState == "commander" ? "text-black text-2xl" : ""}>Commandants</a>
|
|
<a href="#planeswalker" className={`${scrollState == "planeswalker" ? "text-black text-2xl" : "neutral-svg-filter"} flex flex-row items-center gap-1`}><PlaneswalkerIcon className={scrollState == "planeswalker" ? "h-5" : "h-4"} />Planeswalker</a>
|
|
<a href="#creature" className={`${scrollState == "creature" ? "text-black text-2xl" : "neutral-svg-filter"} flex flex-row items-center gap-1`}><CreatureIcon className={scrollState == "creature" ? "h-5" : "h-4"} />Créatures</a>
|
|
<a href="#sorcery" className={`${scrollState == "sorcery" ? "text-black text-2xl" : "neutral-svg-filter"} flex flex-row items-center gap-1`}><SorceryIcon className={scrollState == "sorcery" ? "h-5" : "h-4"} />Rituels</a>
|
|
<a href="#artifact" className={`${scrollState == "artifact" ? "text-black text-2xl" : "neutral-svg-filter"} flex flex-row items-center gap-1`}><ArtifactIcon className={scrollState == "artifact" ? "h-5" : "h-4"} />Artefacts</a>
|
|
<a href="#instant" className={`${scrollState == "instant" ? "text-black text-2xl" : "neutral-svg-filter"} flex flex-row items-center gap-1`}><InstantIcon className={scrollState == "instant" ? "h-5" : "h-4"} />Éphémères</a>
|
|
<a href="#enchantment" className={`${scrollState == "enchantment" ? "text-black text-2xl" : "neutral-svg-filter"} flex flex-row items-center gap-1`}><EnchantmentIcon className={scrollState == "enchantment" ? "h-5" : "h-4"} />Enchantements</a>
|
|
<a href="#land" className={`${scrollState == "land" ? "text-black text-2xl" : "neutral-svg-filter"} flex flex-row items-center gap-1`}><LandIcon className={scrollState == "land" ? "h-5" : "h-4"} />Terrains</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|