Lobby: 3-column layout with player area, skill checks, difficulty, colours, own dice, mystery dice

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HJhXuLD2Z6hv3Wqeq9UL9K

frontend/src/PaperSheet.jsx

@@ -68,7 +68,7 @@ const Pips = ({ n, locked }) => (
 )
 
 // The character sheet as A4 pages (page 1: attributes and skills, page 2: talents, mutations, equipment, notes).
-export default function PaperSheet({ data, baseRules, tools, bare }) {
+export default function PaperSheet({ data, baseRules, tools, bare, onRoll }) {
   const ch = useMemo(() => normalize(data, baseRules), [data, baseRules])
   const rules = useMemo(() => effectiveRules(baseRules, ch), [baseRules, ch])
   const c = useMemo(() => compute(ch, rules), [ch, rules])
@@ -86,6 +86,11 @@ export default function PaperSheet({ data, baseRules, tools, bare }) {
   const gear = kitItems(ch, rules)
   const name = ch.name || 'Nameless'
   const sign = (n) => (n > 0 ? `+${n}` : `${n}`)
+  // With onRoll (own character in a lobby) attributes and usable skills can be clicked to roll a check
+  const roll = (kind, id, label, ok = true) => (onRoll && ok ? {
+    className: 'rollable', role: 'button', tabIndex: 0,
+    onClick: () => onRoll(kind, id, label), onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onRoll(kind, id, label) } },
+  } : {})
 
   const Field = ({ label, children }) => <div className="pfield"><span>{label}</span><b>{children || '–'}</b></div>
   const Foot = ({ n }) => <div className="pfoot"><span>Arcane Wasteland</span><span>{name}</span><span>Page {n} / 2</span></div>
@@ -117,7 +122,7 @@ export default function PaperSheet({ data, baseRules, tools, bare }) {
 
           <div className="pattrs">
             {rules.attributes.map((a) => (
-              <div key={a.id} className="pattr">
+              <div key={a.id} {...roll('attr', a.id, a.name)} className={`pattr${onRoll ? ' rollable' : ''}`}>
                 <Tip text={explainAttr(a, x)}><span className="pattr-n">{a.name}</span></Tip>
                 <b className="pattr-v">{c.attrs[a.id]}</b>
                 <span className="pattr-m">Mod {sign(c.mods[a.id])}</span>
@@ -140,7 +145,7 @@ export default function PaperSheet({ data, baseRules, tools, bare }) {
                 <div key={g.id} className="pgroup">
                   <h4>{g.name}</h4>
                   {c.skills.filter((s) => s.group === g.id).map((s) => (
-                    <div key={s.id} className={`prow ${s.usable ? '' : 'locked'}`}>
+                    <div key={s.id} {...roll('skill', s.id, s.name, s.usable)} className={`prow ${s.usable ? '' : 'locked'}${onRoll && s.usable ? ' rollable' : ''}`}>
                       <Pips n={s.pips} locked={!s.usable} />
                       <Tip text={explainSkill(s, x)}><span className="pn">{s.name}{s.type === 'advanced' && <em> adv</em>}</span></Tip>
                       <span className="pa">{short(s)}</span>