+
+
โ Lobbies
{lobby.name}
-
DM: {lobby.dm}{lobby.is_dm ? ' (you)' : ''}
+
DM: {lobby.dm}{lobby.is_dm ? ' (you)' : ''}
{err &&
{err}
}
{info &&
{info}
}
diff --git a/frontend/src/PaperSheet.jsx b/frontend/src/PaperSheet.jsx
index d6c95fc..1d80188 100644
--- a/frontend/src/PaperSheet.jsx
+++ b/frontend/src/PaperSheet.jsx
@@ -12,6 +12,7 @@ export function printSheet(root, title) {
if (!win) { window.alert('Please allow pop-ups for this site to print the sheet.'); return }
const clone = root.cloneNode(true)
clone.style.zoom = ''
+ clone.classList.remove('dark') // printed pages are always light
const head = [...document.querySelectorAll('link[rel=stylesheet], style')].map((n) => n.outerHTML).join('')
win.document.open()
win.document.write(`
${(title || 'Character').replace(/[<>&]/g, '')} ${head}
@@ -27,7 +28,7 @@ export function printSheet(root, title) {
}
// Scales the A4 pages down when the space is narrower than the paper
-function Fit({ children, rootRef }) {
+function Fit({ children, rootRef, dark }) {
const wrap = useRef(null)
const [z, setZ] = useState(1)
useLayoutEffect(() => {
@@ -37,7 +38,7 @@ function Fit({ children, rootRef }) {
ro.observe(wrap.current)
return () => ro.disconnect()
}, [])
- return
+ return
}
const Pips = ({ n, locked }) => (
@@ -53,6 +54,8 @@ export default function PaperSheet({ data, baseRules, tools }) {
const c = useMemo(() => compute(ch, rules), [ch, rules])
const x = { ch, rules, c }
const root = useRef(null)
+ const [dark, setDark] = useState(() => { try { return localStorage.getItem('aw_sheettheme') === 'dark' } catch { return false } })
+ const pickTheme = (d) => { setDark(d); try { localStorage.setItem('aw_sheettheme', d ? 'dark' : 'light') } catch { /* storage may be blocked */ } }
const prof = rules.professions.find((p) => p.id === ch.profession)
const cls = rules.classes.find((k) => k.id === ch.class_id)
@@ -72,9 +75,15 @@ export default function PaperSheet({ data, baseRules, tools }) {
{tools}
- printSheet(root.current, name)}>Print / save as PDF (A4)
+
+
+ pickTheme(false)} title="Light sheet">Light
+ pickTheme(true)} title="Dark sheet (prints light)">Dark
+
+ printSheet(root.current, name)} title="Opens the pages for printing, choose Save as PDF there">Print / PDF (A4)
+
-
+
{name}
diff --git a/frontend/src/SheetView.jsx b/frontend/src/SheetView.jsx
deleted file mode 100644
index 0e0444d..0000000
--- a/frontend/src/SheetView.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useMemo } from 'react'
-import Tip from './Tip.jsx'
-import { normalize } from './calc.js'
-import { sheetModel } from './sheetModel.js'
-
-function Rows({ rows, valueLabel }) {
- if (!rows.length) return โ
- return (
-
- {rows.map((r) => (
-
- {r.label} {r.desc && {r.desc}
}{valueLabel ? valueLabel(r) : r.val}
- {r.extra !== undefined && {r.extra} }
-
- ))}
-
- )
-}
-
-// Read-only character sheet (used in lobbies). Hover or tap a value to see how it is made up.
-export default function SheetView({ data, baseRules }) {
- const m = useMemo(() => sheetModel(normalize(data, baseRules), baseRules), [data, baseRules])
- const c = m.c
- const trained = m.skills.filter((s) => c.skills.find((x) => x.id === s.k && (x.points > 0 || x.pips > 0 || (x.type === 'advanced' && x.usable))))
- const rest = m.skills.filter((s) => !trained.includes(s))
-
- return (
-
-
h.k !== 'name')} />
-
-
-
Attributes
- Derived
-
-
-
Skills
-
- All other skills ({rest.length})
-
- )}
-
-
Talents
- Mutations / implants {c.capacityUsed}/{c.capacityMax} Equipment {c.weight}/{c.carryMax} kg (r.val > 1 ? `x${r.val}` : '')} />
-