first commit

2026-07-16 17:36:21 +02:00
commit a0d7163464
45 changed files with 7481 additions and 0 deletions
@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import { Link, Navigate } from 'react-router-dom';
+import { api, formatCredits } from '../api';
+import { useAuth } from '../AuthContext';
+import ItemTile from '../components/ItemTile';
+
+export default function Dashboard() {
+  const { user, loading } = useAuth();
+  const [inventory, setInventory] = useState([]);
+  const [cases, setCases] = useState([]);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!user || user.role === 'admin') return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const [inv, cs] = await Promise.all([api.inventory(), api.cases()]);
+        if (!cancelled) {
+          setInventory(inv.inventory);
+          setCases(cs.cases);
+        }
+      } catch (err) {
+        if (!cancelled) setError(err.message);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [user]);
+
+  if (loading) return <p className="muted">Loading…</p>;
+  if (!user) return <Navigate to="/login" replace />;
+  if (user.role === 'admin') return <Navigate to="/admin" replace />;
+
+  return (
+    <div>
+      <section className="section">
+        <div className="section-head">
+          <div>
+            <h1>Inventory</h1>
+            <p className="muted">Your drops and loot.</p>
+          </div>
+          <div className="balance-pill">{formatCredits(user.balance)} cr</div>
+        </div>
+        {error && <div className="error">{error}</div>}
+        {inventory.length === 0 ? (
+          <div className="empty">Empty for now — open a case below.</div>
+        ) : (
+          <div className="grid">
+            {inventory.map((inv) => (
+              <ItemTile key={inv.id} item={inv.item} />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <section className="section">
+        <div className="section-head">
+          <div>
+            <h2>Cases</h2>
+            <p className="muted">Pick a crate to open.</p>
+          </div>
+        </div>
+        <div className="grid case-grid">
+          {cases.map((c) => (
+            <Link key={c.id} to={`/cases/${c.id}`} className="case-tile">
+              <div className="case-visual" style={{ color: 'var(--accent)' }}>
+                ▣
+              </div>
+              <div className="case-name">{c.name}</div>
+              <div className="case-meta">{formatCredits(c.price)} cr</div>
+              <div className="case-meta">{c.items.length} possible drops</div>
+            </Link>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}