Fixing some things, styling some things, need to add modal, and card information data to it

2022-11-04 02:26:47 -06:00
parent 009ba01a74
commit a7d15cc120
6 changed files with 102 additions and 12 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,11 @@
      "version": "0.1.0",
      "dependencies": {
        "@tauri-apps/api": "^1.1.0",
+        "@types/lodash": "^4.14.187",
        "@types/node": "18.11.9",
        "@types/react": "18.0.24",
        "@types/react-dom": "18.0.8",
+        "lodash": "^4.17.21",
        "next": "13.0.1",
        "react": "18.2.0",
        "react-dom": "18.2.0",
@@ -452,6 +454,11 @@
        "node": ">= 10"
      }
    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.187",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.187.tgz",
+      "integrity": "sha512-MrO/xLXCaUgZy3y96C/iOsaIqZSeupyTImKClHunL5GrmaiII2VwvWmLBu2hwa0Kp0sV19CsyjtrTc/Fx8rg/A=="
+    },
    "node_modules/@types/node": {
      "version": "18.11.9",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
@@ -936,6 +943,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1764,6 +1776,11 @@
      "dev": true,
      "optional": true
    },
+    "@types/lodash": {
+      "version": "4.14.187",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.187.tgz",
+      "integrity": "sha512-MrO/xLXCaUgZy3y96C/iOsaIqZSeupyTImKClHunL5GrmaiII2VwvWmLBu2hwa0Kp0sV19CsyjtrTc/Fx8rg/A=="
+    },
    "@types/node": {
      "version": "18.11.9",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
@@ -2107,6 +2124,11 @@
      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
      "dev": true
    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
    "loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -12,9 +12,11 @@
  },
  "dependencies": {
    "@tauri-apps/api": "^1.1.0",
+    "@types/lodash": "^4.14.187",
    "@types/node": "18.11.9",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
+    "lodash": "^4.17.21",
    "next": "13.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,26 +2,57 @@ import Head from 'next/head';
 import { invoke } from '@tauri-apps/api/tauri';
 import Image from 'next/image';
 import styles from '../styles/Home.module.css';
-import { useEffect } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
+import { debounce } from 'lodash';

 export default function Home() {
+
+  const [search, setSearch] = useState('');
+  const [cards, setCards] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [queryParams, setQueryParams] = useState('');
+
+  const searchForCard = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+    setSearch(event.target.value);
+    setLoading(true);
+    await fetch(`https://api.scryfall.com/cards/search?q=${encodeURIComponent(event.target.value)}`)
+      .then( res => res.json() )
+      .then( ({data}) => {
+        setCards(data);
+        setLoading(false);
+      })
+      .catch( err => console.log(err) );
+  };
+
+  const debounceSearch = useMemo( () => debounce(searchForCard, 300), [search] );
+
  useEffect(() => {
    invoke('greet', { name: 'World' }).then(console.log).catch(console.error);
-    fetch(`https://api.scryfall.com/cards/search?order=cmc&q=c%3Ared+pow%3D3`).then( data => console.log( data ) );
  }, []);
+
  return (
-    <div className="container">
+    <div>
      <Head>
        <title>Magic Card Valuator</title>
      </Head>

-      <main>
-        <h4 className="text-4xl font-bold text-red-500 underline">
-          Hello world!
-        </h4>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
+      <div className={`bg-center bg-no-repeat flex justify-center items-center mb-4 h-96 ${styles.hero}`}>
+        <div className="w-3/4 text-center">
+          <label htmlFor="search" className="block mx-auto font-bold mb-2 text-2xl">Search for a Magic Card</label>
+          <input id="search" name="search" type="text" className={`block w-1/2 mx-auto rounded-full py-2 px-4 ${styles.search}`} onChange={debounceSearch} />
+        </div>
+      </div>
+
+      <main className="container">
+        <section className="flex flex-wrap">
+          {loading && !cards.length ? 
+            <div className="spinner"></div>
+            :
+            cards && cards.map( (card: any) => <Image className="hover:scale-110 transition-transform duration-150 ease-in-out w-1/6 p-2" key={card.id} alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} /> )
+          }
+        </section>
      </main>

      <footer className={styles.footer}>
--- a/public/hero.png
+++ b/public/hero.png
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -2,15 +2,25 @@
  min-height: 100vh;
 }

+.search {
+  background-color: #333333;
+}
+
+.hero {
+  background: url("/hero.png");
+  background-size: cover;
+}
+
 .footer {
  display: flex;
  flex: 1;
  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
+  border-top: 1px solid #696969;
  justify-content: center;
  align-items: center;
 }

+
 .footer a {
  display: flex;
  justify-content: center;
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -8,6 +8,31 @@
  }
  body {
    color: white;
-    background: #0e1111;
+    background: #1c1c1c;
+  }
+}
+
+.spinner {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+.spinner:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 6px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
  }
 }