initial site

Author: Runanka

src/App.jsx

@@ -1,13 +1,107 @@
 
 import './App.css'
+// src/App.jsx
+import React, { useEffect, useMemo, useState } from 'react'
+import itemsData from './data/items'
 
-function App() {
+const STORAGE_KEY = 'silksong.checklist.v1'
+
+function groupByCategory(items) {
+  return items.reduce((acc, it) => {
+    if (!acc[it.category]) acc[it.category] = []
+    acc[it.category].push(it)
+    return acc
+  }, {})
+}
+
+function sumCheckedPct(items, checkedSet) {
+  return items.reduce((sum, it) => (checkedSet.has(it.id) ? sum + Number(it.pct) : sum), 0)
+}
+
+export default function App() {
+  const [checked, setChecked] = useState(() => {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY)
+      return raw ? new Set(JSON.parse(raw)) : new Set()
+    } catch {
+      return new Set()
+    }
+  })
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(checked)))
+    } catch (error) {
+      console.error('Failed to save to localStorage:', error)
+    }
+  }, [checked])
+
+  const grouped = useMemo(() => groupByCategory(itemsData), [])
+  const totalPossible = useMemo(() => itemsData.reduce((s, it) => s + Number(it.pct), 0), [])
+  const totalChecked = useMemo(() => sumCheckedPct(itemsData, checked), [checked])
+  const percent = Math.round((totalChecked / totalPossible) * 100) // displayed percent (rounded)
+  const itemsRemaining = itemsData.length - checked.size
+
+  function toggle(id) {
+    setChecked(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  function resetAll() {
+    setChecked(new Set())
+  }
 
   return (
-    <main className="page">
-      <h1 className='title'>Silksong Checklist</h1>
-    </main>
+    <div className="site-root">
+      <header className="top">
+        <div className="logo">silksong</div>
+        <h2 className="subtitle">Checklist</h2>
+
+        <div className="summary">
+          <div className="percent">{percent}%</div>
+          <div className="meta">
+            {totalChecked}/{totalPossible} pts • {itemsRemaining} item(s) remaining
+            <button className="link-btn" onClick={() => setChecked(new Set(itemsData.map(i => i.id))) }>
+              Check all
+            </button>
+            <button className="link-btn" onClick={resetAll}>Uncheck all</button>
+          </div>
+        </div>
+      </header>
+
+      <main className="content">
+        {Object.entries(grouped).map(([category, list]) => (
+          <section key={category} className="category-card">
+            <h3 className="category-title">{category}</h3>
+            <ul className="item-list">
+              {list.map(it => {
+                const isChecked = checked.has(it.id)
+                return (
+                  <li key={it.id} className={`item ${isChecked ? 'done' : ''}`}>
+                    <label>
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        onChange={() => toggle(it.id)}
+                        aria-label={`Mark ${it.name} complete`}
+                      />
+                      <a href={it.link} target="_blank" rel="noreferrer" className="item-link">{it.name}</a>
+                    </label>
+                  </li>
+                )
+              })}
+            </ul>
+          </section>
+        ))}
+      </main>
+
+      <footer className="footer">
+        <small>silksong checklist • built with ❤️</small>
+      </footer>
+    </div>
   )
 }
-
-export default App