fdel/magic-card-valuator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BIG styling changes/fixes. Additions like slight animations, etc

Browse Source
This commit is contained in:
Frank Delaguila
2022-11-06 15:47:44 -07:00
parent 66e767414e
commit be117665be
3 changed files with 106 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/modal.tsx
View File

@@ -1,3 +1,4 @@
import { forwardRef, MutableRefObject, useEffect, useState } from "react";
import Image from "next/image";
import { Pie } from "react-chartjs-2";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
@@ -5,7 +6,6 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
ChartJS.register(ArcElement, Tooltip, Legend);
import ClientOnlyPortal from "./ClientOnlyPortal";
import { forwardRef, MutableRefObject, useEffect } from "react";
interface ModalProps {
modalOpen: boolean
@@ -14,6 +14,7 @@ interface ModalProps {
}
const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, card}, ref) => {
const [randomQuote, setRandomQuote] = useState("");
const data = {
labels: ["Power", "Toughness"],
datasets: [
@@ -34,6 +35,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, c
};
useEffect(() => {
fetch('https://api.quotable.io/random').then( res => res.json() ).then( quote => setRandomQuote(`${quote.content} — ${quote.author}`));
if( (ref as MutableRefObject<HTMLDivElement>).current ) {
(ref as MutableRefObject<HTMLDivElement>).current.scrollTo(0, 0);
}
@@ -48,17 +50,17 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, c
}`}
>
<>
<button
className="fixed flex justify-center items-center left-1/2 -translate-x-2/4 -translate-y-2/4 top-12 z-50 text-2xl"
aria-label="Close the modal"
title="Close Modal"
onClick={() => {
toggleModal(false);
document.body.classList.remove("prevent-scroll");
}}>
<span className="material-symbols-outlined modal-close">cancel</span>
</button>
<div className="flex justify-center items-center relative">
<button
className={`fixed flex justify-center items-center left-1/2 -translate-x-2/4 -translate-y-2/4 ${ modalOpen ? "top-12" : "top-100" } z-50 text-2xl`}
aria-label="Close the modal"
title="Close Modal"
onClick={() => {
toggleModal(false);
document.body.classList.remove("prevent-scroll");
}}>
<span className="material-symbols-outlined modal-close">cancel</span>
</button>
<div
className="bg-cover bg-no-repeat blur-sm rounded-t-3xl w-full h-96"
style={{
@@ -67,7 +69,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, c
}}
></div>
<p className="absolute font-bold italic w-1/2 text-center modal-flavor-text">
{card.flavor_text}
{card.flavor_text || randomQuote}
</p>
</div>
<div className="container flex p-8">

34
pages/index.tsx
View File

@@ -7,7 +7,19 @@ import { debounce } from 'lodash';
import Modal from '../components/modal';
export default function Home() {
export async function getStaticProps(context) {
const res = await fetch(`https://api.scryfall.com/cards/search?q=${encodeURIComponent('knight')}`);
const {data} = await res.json();
return {
props: {
initialCards: data
}
}
}
export default function Home(props) {
const [search, setSearch] = useState('');
const [selectedCard, setSelectedCard] = useState({});
@@ -43,10 +55,8 @@ export default function Home() {
.catch( err => {
console.log(err);
setLoading(false);
if( err.code === 'not_found' ) {
setErrorMessage(err.details);
setError(true);
}
setErrorMessage(err.details);
setError(true);
} );
}
};
@@ -55,7 +65,6 @@ export default function Home() {
useEffect(() => {
invoke('greet', { name: 'World' }).then(console.log).catch(console.error);
return () => {
debounceSearch.cancel();
}
@@ -80,7 +89,18 @@ export default function Home() {
<main className="container my-4">
{ cards.length === 0 ?
<div>Please search for a card</div>
<div className="text-center search-placeholder">
<div className="card-container h-48 relative">
{props.initialCards.map( (card: any) =>
<Image
className="card"
key={card.id}
alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
).slice(0, 5)
}
</div>
<h2>Please search for a card!</h2>
</div>
:
<section className="flex flex-wrap justify-center items-center">
{loading && search !== "" ?

65
styles/globals.css
View File

@@ -42,6 +42,71 @@
top: 0;
}
.search-placeholder .card-container > .card {
@apply rounded-md;
position: absolute;
width: 120px;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: transform 0.2s ease-in-out;
}
/*
CARD POSITIONING
*/
.search-placeholder .card:nth-child(1) {
left: 50%;
transform: rotate(-2deg) translate(-95%, -55%);
}
.search-placeholder .card:nth-child(2) {
left: 50%;
transform: rotate(-1.2deg) translate(-85%, -55%);
}
.search-placeholder .card:nth-child(3) {
left: 55%;
transform: rotate(-1deg) translate(-90%, -55%);
}
.search-placeholder .card:nth-child(4) {
left: 60%;
transform: translate(-85%, -53%);
}
.search-placeholder .card:nth-child(5) {
left: 65%;
transform: rotate(2deg) translate(-80%, -50%);
}
/*
END: CARD POSITIONING
*/
/*
CARD POSITIONING ON HOVER OF CONTAINER
*/
.card-container:hover .card:nth-child(1) {
left: 50%;
transform: rotate(-2deg) translate(-105%, -54%);
}
.card-container:hover .card:nth-child(2) {
left: 50%;
transform: rotate(-1.2deg) translate(-90%, -56%);
}
.card-container:hover .card:nth-child(3) {
left: 55%;
transform: rotate(-1deg) translate(-88%, -54%);
}
.card-container:hover .card:nth-child(4) {
left: 60%;
transform: translate(-82%, -55%);
}
.card-container:hover .card:nth-child(5) {
left: 65%;
transform: rotate(2deg) translate(-78%, -55%);
}
/*
END: CARD POSITIONING ON HOVER OF CONTAINER
*/
.spinner {
display: inline-block;
width: 80px;