{/* HEADER */}

Ordo · MMXXV

150·Word

a ledger of trials

{/* CATEGORY CRESTS */}

{(categories || []).map(c => { const active = view.category === c.id; return ( ); })}

{/* SORT */}

{['hot', 'new'].map(s => ( ))}

{(sorted || []).length} {(sorted || []).length === 1 ? 'trial' : 'trials'}

{/* FEED */}

{/* SCHOLARS / LEADERBOARD PANEL */}

❦ The Scholars

{(memberList || []).length} present

{(memberList || []).map(m => ( ))}

{(leaderboard || []).length > 0 && (

† ranking by deed

{(leaderboard || []).slice(0, 5).map((s, i) => ( ))}

)}

{(sorted || []).length === 0 && (

❦

The ledger awaits.

No trials have been inscribed.
Be the first to set a challenge.

)} {(sorted || []).map((p, idx) => { const cat = getCat(p.category); const upvoted = (p.upvotes ?? []).includes(myId); return (

setView({ ...view, viewingId: p.id })} style={{ marginBottom: 14, background: PAPER, border: `1px solid ${BORDER}`, borderLeft: `3px solid ${cat.color}`, borderRadius: 2, padding: 16, cursor: 'pointer', animation: `slideIn 0.4s ${idx * 0.05}s both`, position: 'relative', }}>

{cat.glyph} {cat.label}

{p.title}

{p.body}

⚔ {(p.attempts ?? []).length} attempts read →

); })}

{/* FAB */} {(sorted || []).length > 0 && !view.composing && !view.attemptingId && !viewingPost && ( )} {/* VIEW POST MODAL */} {viewingPost && !view.attemptingId && (

setView({ ...view, viewingId: null })} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)', display: 'flex', alignItems: 'flex-end', zIndex: 50, animation: 'fadeIn 0.25s', }}>

e.stopPropagation()} style={{ width: '100%', maxHeight: '92dvh', overflowY: 'auto', background: PAPER, borderTop: `3px double ${getCat(viewingPost.category).color}`, padding: '24px 22px', borderRadius: '2px 2px 0 0', animation: 'slideUp 0.35s', paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 100px)', }}>

{getCat(viewingPost.category).glyph} {getCat(viewingPost.category).label}

{viewingPost.title}

set by

{viewingPost.body}

❦ Attempts ({(viewingPost.attempts ?? []).length})

{(viewingPost.attempts ?? []).length === 0 && (

No scholar has attempted this trial yet.

)} {(viewingPost.attempts ?? []).map(a => (

{a.body}

))}

)} {/* ATTEMPT MODAL */} {view.attemptingId && (

Your Attempt

the inkwell

{
                const w = countWords(e.target.value);
                if (w <= 160) setAttemptDraft(e.target.value);
              }}
              placeholder="Inscribe your response..."
              autoFocus
              style={{
                flex: 1, width: '100%', boxSizing: 'border-box',
                background: PAPER, border: `1px solid ${BORDER}`, borderRadius: 2,
                padding: 16, color: '#E8E4D8',
                fontFamily: serif, fontSize: 15, lineHeight: 1.6,
                resize: 'none', outline: 'none',
              }}
            />
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14 }}>
              <div style={{ fontFamily: mono, fontSize: 12, color: attemptWords > 150 ? '#E85847' : NEON, letterSpacing: 1 }}>
                {attemptWords}<span style={{ color: MUTED }}>/150</span>
              </div>
              <button onClick={submitAttempt} disabled={!attemptDraft.trim() || attemptWords > 150} style={{
                padding: '12px 22px',
                background: (!attemptDraft.trim() || attemptWords > 150) ? BORDER : NEON,
                color: (!attemptDraft.trim() || attemptWords > 150) ? MUTED : BG,
                border: 'none', borderRadius: 2,
                fontFamily: mono, fontSize: 11, letterSpacing: 3, fontWeight: 700,
                textTransform: 'uppercase', cursor: 'pointer',
              }}>✦ Seal & Submit</button>
            </div>
          </div>
        </div>
      )}

{/* COMPOSE MODAL */}
      {view.composing && (
        <div style={{
          position: 'fixed', inset: 0, background: BG, zIndex: 70,
          display: 'flex', flexDirection: 'column',
          paddingTop: 'env(safe-area-inset-top, 20px)',
          paddingBottom: 'env(safe-area-inset-bottom, 20px)',
          animation: 'fadeIn 0.3s',
        }}>
          <div style={{ padding: '18px 20px', borderBottom: `1px double ${BORDER}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: 3, color: NEON, textTransform: 'uppercase' }}>New Trial</div>
              <div style={{ fontFamily: serif, fontSize: 20, fontStyle: 'italic', marginTop: 2 }}>set a challenge</div>
            </div>
            <button onClick={() => setView({ ...view, composing: false })} style={{
              background: 'none', border: `1px solid ${BORDER}`, color: MUTED,
              width: 34, height: 34, borderRadius: 2, cursor: 'pointer', fontFamily: serif, fontSize: 18,
            }}>×</button>
          </div>

<div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
            <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: 2, color: MUTED, marginBottom: 8, textTransform: 'uppercase' }}>Discipline</div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 18 }}>
              {(categories || []).map(c => {
                const active = draft.category === c.id;
                return (
                  <button key={c.id} onClick={() => setDraft({ ...draft, category: c.id })} style={{
                    padding: '8px 12px', borderRadius: 2,
                    background: active ? c.color : 'transparent',
                    color: active ? '#F5F0E1' : '#E8E4D8',
                    border: `1px solid ${active ? c.color : BORDER}`,
                    fontFamily: mono, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase',
                    fontWeight: 700, cursor: 'pointer',
                  }}>{c.glyph} {c.label}</button>
                );
              })}
            </div>

<div style={{ fontFamily: mono, fontSize: 10, letterSpacing: 2, color: MUTED, marginBottom: 8, textTransform: 'uppercase' }}>Title</div>
            <input
              value={draft.title}
              onChange={(e) => setDraft({ ...draft, title: (e.target.value || []).slice(0, 80) })}
              placeholder="e.g. The Burpee Gauntlet"
              style={{
                width: '100%', boxSizing: 'border-box',
                background: PAPER, border: `1px solid ${BORDER}`, borderRadius: 2,
                padding: '12px 14px', color: '#E8E4D8',
                fontFamily: serif, fontSize: 17, fontWeight: 700,
                outline: 'none', marginBottom: 18,
              }}
            />

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: 2, color: MUTED, textTransform: 'uppercase' }}>The Trial</div>
              <div style={{ fontFamily: mono, fontSize: 11, color: draftWords > 150 ? '#E85847' : NEON }}>
                {draftWords}<span style={{ color: MUTED }}>/150</span>
              </div>
            </div>

{/* INKWELL GAUGE */}
            <div style={{ height: 4, background: BORDER, borderRadius: 2, marginBottom: 8, overflow: 'hidden' }}>
              <div style={{
                height: '100%', width: `${inkRatio * 100}%`,
                background: draftWords > 150 ? '#E85847' : `linear-gradient(90deg, ${NEON}, ${getCat(draft.category).color})`,
                transition: 'all 0.3s',
              }} />
            </div>

<textarea
              value={draft.body}
              onChange={(e) => {
                const w = countWords(e.target.value);
                if (w <= 160) setDraft({ ...draft, body: e.target.value });
              }}
              placeholder="Describe the challenge. Be precise. 150 words, no more."
              style={{
                width: '100%', boxSizing: 'border-box', minHeight: 200,
                background: PAPER, border: `1px solid ${BORDER}`, borderRadius: 2,
                padding: 14, color: '#E8E4D8',
                fontFamily: serif, fontSize: 14, lineHeight: 1.6,
                resize: 'vertical', outline: 'none',
              }}
            />
          </div>

<div style={{ padding: '14px 20px', borderTop: `1px solid ${BORDER}` }}>
            <button onClick={submitPost} disabled={!draft.title.trim() || !draft.body.trim() || draftWords > 150} style={{
              width: '100%', padding: 14,
              background: (!draft.title.trim() || !draft.body.trim() || draftWords > 150) ? BORDER : NEON,
              color: (!draft.title.trim() || !draft.body.trim() || draftWords > 150) ? MUTED : BG,
              border: 'none', borderRadius: 2,
              fontFamily: mono, fontSize: 12, letterSpacing: 4, fontWeight: 700,
              textTransform: 'uppercase', cursor: 'pointer',
            }}>✦ Seal with Wax</button>
          </div>
        </div>
      )}