Browse Source
This is better. Always nice to let the professionals do all the hard lifting for ya when you're pressed for time. Also: Incorporated a pretty nice little modal pop-up. Styling sucks (at the moment), but I can fix that later.canon
8 changed files with 297 additions and 92 deletions
@ -0,0 +1,111 @@
|
||||
import * as React from "react"; |
||||
import { CardProps } from "./types"; |
||||
|
||||
export const fullcardStyles = { |
||||
content: { |
||||
backgroundColor: "#0c0c0c", |
||||
color: "#f8f8f8" |
||||
} |
||||
}; |
||||
|
||||
export const FullCard = ({ card }: { card: CardProps | null }) => { |
||||
if (card === null) { |
||||
return <></>; |
||||
} |
||||
|
||||
return ( |
||||
<div className="fullcard"> |
||||
<img src={card.imageUrl} alt={card.name} /> |
||||
<div className="content"> |
||||
<h4>{card.name}</h4> |
||||
<p className="card-text">{card.text}</p> |
||||
<table> |
||||
<tbody> |
||||
<tr> |
||||
<td> |
||||
<strong>Type</strong> |
||||
</td> |
||||
<td>{card.type}</td> |
||||
<td> |
||||
<strong>Cost</strong> |
||||
</td> |
||||
<td>{card.cost}</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<strong>Subtypes</strong> |
||||
</td> |
||||
<td>{card.subtypes.join(", ")}</td> |
||||
<td> |
||||
<strong>Power</strong> |
||||
</td> |
||||
<td>{card.power}</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<strong>Rarity</strong> |
||||
</td> |
||||
<td>{card.rarity}</td> |
||||
<td> |
||||
<strong>Health</strong> |
||||
</td> |
||||
<td>{card.health}</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<strong>Set</strong> |
||||
</td> |
||||
<td>{card.set.name}</td> |
||||
<td> |
||||
<strong>Soul Summon</strong> |
||||
</td> |
||||
<td>{card.soulSummon}</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<strong>Attributes</strong> |
||||
</td> |
||||
<td>{card.attributes.join(", ")}</td> |
||||
<td> |
||||
<strong>Soul Trap</strong> |
||||
</td> |
||||
<td>{card.soulTrap}</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<strong>Keywords</strong> |
||||
</td> |
||||
<td>{card.keywords}</td> |
||||
<td /> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
|
||||
<table> |
||||
<tbody> |
||||
<tr> |
||||
<td> |
||||
<strong>Set Name:</strong> |
||||
</td> |
||||
<td>{card.set.name}</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<strong>Type:</strong> |
||||
</td> |
||||
<td>{card.type}</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
{card.collectible ? <p>This card is considered collectible.</p> : ""} |
||||
{card.unique ? ( |
||||
<p> |
||||
This card is unique. Unique cards may only be used once per deck. |
||||
</p> |
||||
) : ( |
||||
"" |
||||
)} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -1,33 +0,0 @@
|
||||
import * as React from "react"; |
||||
import { useEffect, useCallback } from "react"; |
||||
|
||||
// From the Smashing Magazine article,
|
||||
// https://www.smashingmagazine.com/2020/03/infinite-scroll-lazy-image-loading-react/
|
||||
|
||||
// As this is new to me, I'm going to try to explain it;
|
||||
// IntersectionObserver takes a callback to be called when it's
|
||||
// triggred. It's trigged when the node it's been asked to observe
|
||||
// changes its relationship with another object or, without a
|
||||
// specified object, with the viewport. When the `intersectionRatio`
|
||||
// exceed zero, it is _intersecting_ the viewport, i.e. it is now
|
||||
// visible.
|
||||
|
||||
// useCallback is a memoizer; it only updates the contents of the
|
||||
// function its wrapped if the included function changes, which
|
||||
// it shouldn't.
|
||||
|
||||
export const useInfiniteScroll = (scrollRef: React.RefObject<HTMLElement>, stateUpdate: Function) => { |
||||
const scrollObserver = (node: HTMLElement) => { |
||||
new IntersectionObserver(entries => { |
||||
if (entries.some(en => en.intersectionRatio > 0)) { |
||||
stateUpdate(); |
||||
} |
||||
}).observe(node); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
if (scrollRef.current) { |
||||
scrollObserver(scrollRef.current); |
||||
} |
||||
}, [scrollObserver, scrollRef]); |
||||
} |
||||
Loading…
Reference in new issue