change amount + pictures

src/App.jsx

@@ -1,121 +1,12 @@
-import { useState } from 'react'
+import React from 'react';
-import reactLogo from './assets/react.svg'
+import HomePage from './pages/HomePage';
-import viteLogo from './assets/vite.svg'
-import heroImg from './assets/hero.png'
-import './App.css'
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
     <div>
-          <h1>Get started</h1>
+      <HomePage />
-          <p>
-            Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
-          </p>
     </div>
-        <button
+  );
-          className="counter"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          Count is {count}
-        </button>
-      </section>
-
-      <div className="ticks"></div>
-
-      <section id="next-steps">
-        <div id="docs">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#documentation-icon"></use>
-          </svg>
-          <h2>Documentation</h2>
-          <p>Your questions, answered</p>
-          <ul>
-            <li>
-              <a href="https://vite.dev/" target="_blank">
-                <img className="logo" src={viteLogo} alt="" />
-                Explore Vite
-              </a>
-            </li>
-            <li>
-              <a href="https://react.dev/" target="_blank">
-                <img className="button-icon" src={reactLogo} alt="" />
-                Learn more
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div id="social">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#social-icon"></use>
-          </svg>
-          <h2>Connect with us</h2>
-          <p>Join the Vite community</p>
-          <ul>
-            <li>
-              <a href="https://github.com/vitejs/vite" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#github-icon"></use>
-                </svg>
-                GitHub
-              </a>
-            </li>
-            <li>
-              <a href="https://chat.vite.dev/" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#discord-icon"></use>
-                </svg>
-                Discord
-              </a>
-            </li>
-            <li>
-              <a href="https://x.com/vite_js" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#x-icon"></use>
-                </svg>
-                X.com
-              </a>
-            </li>
-            <li>
-              <a href="https://bsky.app/profile/vite.dev" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#bluesky-icon"></use>
-                </svg>
-                Bluesky
-              </a>
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      <div className="ticks"></div>
-      <section id="spacer"></section>
-    </>
-  )
 }
 
-export default App
+export default App;

src/components/CardRow/CardRow.jsx

@@ -0,0 +1,36 @@
+import React, { useContext } from 'react';
+import { CardContext } from '../../store/CardContext';
+import PrintingRow from '../PrintingRow/PrintingRow';
+
+function CardRow({ card }) {
+  const { expandedCardId, setExpandedCardId } = useContext(CardContext);
+  const isExpanded = expandedCardId === card.id;
+
+  const toggleExpand = () => setExpandedCardId(isExpanded ? null : card.id);
+
+  return (
+    <div style={{ borderBottom: '1px solid #eee', padding: '0.5rem' }}>
+      <div
+        style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between' }}
+        onClick={toggleExpand}
+      >
+        <span>{card.name}</span>
+        <span>{card.type}</span>
+      </div>
+
+      {isExpanded && card.printings?.length > 0 && (
+        <div style={{ marginTop: '0.5rem', paddingLeft: '1rem' }}>
+          {card.printings.map(printing => (
+            <PrintingRow
+              key={`${card.id}-${printing.set_id}-${printing.rarity_id}`}
+              card_id={card.id}
+              printing={printing}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CardRow;

src/components/PrintingRow/PrintingRow.jsx

@@ -0,0 +1,63 @@
+import React, { useContext, useState } from 'react';
+import { CardContext } from '../../store/CardContext';
+
+function PrintingRow({ card_id, printing }) {
+  const { ownedAmounts, updateAmount } = useContext(CardContext);
+  const [loading, setLoading] = useState(false);
+
+  // Current amount from context, fallback to DB value
+  const currentAmount = ownedAmounts[card_id]?.[printing.set_id] ?? printing.amount_owned ?? 0;
+
+  const updateBackend = async (newAmount) => {
+    const { set_id, rarity_id } = printing;
+
+    if (card_id == null || set_id == null || rarity_id == null) return;
+
+    setLoading(true);
+    try {
+      const response = await fetch('http://localhost:3000/collection/amount', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          card_id,
+          set_id,
+          rarity_id,
+          amount_owned: newAmount
+        })
+      });
+
+      if (response.ok) {
+        updateAmount(card_id, set_id, newAmount);
+      }
+    } catch (err) {
+      // silently fail or handle elsewhere
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const increment = () => updateBackend(currentAmount + 1);
+  const decrement = () => {
+    if (currentAmount > 0) updateBackend(currentAmount - 1);
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: '0.25rem 0',
+        opacity: loading ? 0.6 : 1
+      }}
+    >
+      <span>{printing.set_name} {printing.rarity_name}</span>
+      <div>
+        <button onClick={decrement} disabled={loading || currentAmount === 0}>–</button>
+        <span style={{ margin: '0 0.5rem' }}>{currentAmount}</span>
+        <button onClick={increment} disabled={loading}>+</button>
+      </div>
+    </div>
+  );
+}
+
+export default PrintingRow;

src/main.jsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
+import { CardProvider } from './store/CardContext'  // <-- import your context provider
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
+    <CardProvider>
       <App />
+    </CardProvider>
   </StrictMode>,
 )

src/pages/HomePage.jsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState, useContext } from 'react';
+import CardRow from '../components/CardRow/CardRow';
+import { fetchCards } from '../services/api';
+import { CardContext } from '../store/CardContext';
+
+function HomePage() {
+  const [cards, setCards] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const { expandedCardId, cardImages, setCardImage } = useContext(CardContext);
+
+  useEffect(() => {
+    fetchCards()
+      .then(data => setCards(data))
+      .catch(err => setError(err.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Load image for the currently expanded card
+  useEffect(() => {
+    if (!expandedCardId || cardImages[expandedCardId]) return;
+
+    fetch(`http://localhost:3000/cardImage/${expandedCardId}`)
+      .then(res => res.json())
+      .then(data => {
+        if (data.image) setCardImage(expandedCardId, data.image);
+      })
+      .catch(err => console.error('Failed to load card image', err));
+  }, [expandedCardId, cardImages, setCardImage]);
+
+  if (loading) return <p>Loading cards...</p>;
+  if (error) return <p>Error: {error}</p>;
+
+  const expandedCard = cards.find(c => c.id === expandedCardId);
+
+  return (
+    <div style={{ display: 'flex', height: '100vh' }}>
+      {/* Left panel: card list */}
+      <div style={{ flex: 1, borderRight: '1px solid #ccc', padding: '1rem', overflowY: 'auto' }}>
+        <h2>Card List</h2>
+        {cards.map(card => (
+          <CardRow key={card.id} card={card} />
+        ))}
+      </div>
+
+      {/* Right panel: card image */}
+      <div style={{ flex: 1, padding: '1rem' }}>
+        <h2>Card Image / Details</h2>
+        {expandedCardId && expandedCard ? (
+          cardImages[expandedCardId] ? (
+            <img
+              src={cardImages[expandedCardId]}
+              alt={expandedCard.name}
+              style={{ maxWidth: '100%', maxHeight: '80vh' }}
+            />
+          ) : (
+            <p>Loading image...</p>
+          )
+        ) : (
+          <p>Click a card to see its image</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default HomePage;

src/services/api.jsx

@@ -0,0 +1,7 @@
+const API_BASE = 'http://localhost:3000'; // Backend URL
+
+export async function fetchCards() {
+  const response = await fetch(`${API_BASE}/exportCards`);
+  if (!response.ok) throw new Error('Failed to fetch cards');
+  return await response.json();
+}

src/store/CardContext.jsx

@@ -0,0 +1,36 @@
+import React, { createContext, useState } from 'react';
+
+export const CardContext = createContext();
+
+export function CardProvider({ children }) {
+  const [expandedCardId, setExpandedCardId] = useState(null);
+  const [ownedAmounts, setOwnedAmounts] = useState({});
+  const [cardImages, setCardImages] = useState({}); // cache loaded images
+
+  // Use set_id as the key to match backend
+  const updateAmount = (cardId, setId, value) => {
+    setOwnedAmounts(prev => ({
+      ...prev,
+      [cardId]: { ...(prev[cardId] || {}), [setId]: value }
+    }));
+  };
+
+  const setCardImage = (cardId, imageData) => {
+    setCardImages(prev => ({ ...prev, [cardId]: imageData }));
+  };
+
+  return (
+    <CardContext.Provider
+      value={{
+        expandedCardId,
+        setExpandedCardId,
+        ownedAmounts,
+        updateAmount,
+        cardImages,
+        setCardImage
+      }}
+    >
+      {children}
+    </CardContext.Provider>
+  );
+}