Frontend update

client/src/routes/wiki/Wiki.jsx

@@ -0,0 +1,56 @@
+import { Link } from 'react-router-dom'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { api } from '../../api/client.js'
+
+const ROMAN = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII']
+
+// Short blurbs for the seeded categories (the list endpoint returns title/slug only).
+const BLURBS = {
+  'new-player-guide': 'First steps, basic survival, and early goals.',
+  'maps-atlas': 'Regions, towns, routes, and travel notes.',
+  systems: 'Shard mechanics and custom features.',
+  items: 'Equipment, treasures, rewards, and curiosities.',
+  monsters: 'Creatures, bosses, spawns, and dangers.',
+  crafting: 'Professions, materials, recipes, and tools.',
+  lore: 'Stories, places, factions, and mysteries.',
+  rules: 'Player conduct, shard expectations, and policies.',
+}
+
+export default function Wiki() {
+  const { loading, error, data } = useAsync(() => api.wiki())
+  const pages = data || []
+
+  return (
+    <PublicLayout section="wiki">
+      <div className="shell page-body">
+        <PageHeader
+          center
+          eyebrow="Knowledge base"
+          title="Mysticmoon Wiki"
+          lead="A calm starting point for shard guides, maps, systems, items, monsters, crafting, lore, and rules."
+        />
+        {loading && <Loading />}
+        {error && <ErrorState message="Could not load the wiki right now." />}
+        {!loading && !error && pages.length === 0 && <EmptyState>No wiki pages yet.</EmptyState>}
+        <section className="grid-4">
+          {pages.map((p, i) => (
+            <Link key={p.slug} to={`/wiki/${p.slug}`} className="card" style={{ padding: 22 }}>
+              <span className="display" style={{ color: 'var(--accent)', fontSize: '1.4rem', marginBottom: 10 }}>
+                {ROMAN[i] || i + 1}
+              </span>
+              <h3 className="display" style={{ margin: '0 0 6px', fontSize: '1.1rem', color: 'var(--head)' }}>
+                {p.title}
+              </h3>
+              <p className="muted" style={{ margin: 0, fontSize: '0.92rem' }}>
+                {BLURBS[p.slug] || 'Open the guide →'}
+              </p>
+            </Link>
+          ))}
+        </section>
+      </div>
+    </PublicLayout>
+  )
+}