); const Staple = ({ side }) => (

); const renderMissionCard = (mission, showActions = false, actionType = null) => { const isStamping = stampAnim === mission?.id; const isVictory = victoryMission === mission?.id; const hasEvidence = !!mission?.evidence; const rotation = (parseInt((mission.id || '0').slice(-1)) % 6) - 3; return (

{Math.random() > 0.5 && }

{mission?.text}

ORIGIN: mission?._user?.handle && openProfile(mission._user.handle)} style={{ background: colors.ink, color: '#FFF', padding: '0 4px', cursor: mission?._user?.handle ? 'pointer' : 'default' }} > {mission?._user?.displayName || 'THE UNDERGROUND'} ID: {(mission.id || '').slice(-6)}

{mission?._acceptedByUser && (

OPERATIVE: openProfile(mission._acceptedByUser.handle)} style={{ textDecoration: 'underline', cursor: 'pointer' }} > {mission._acceptedByUser.displayName} STATUS: {mission.status.replace('_', ' ')}

)}

{hasEvidence && (

{mission?.status === 'pending_verification' && (

VETTING REQUIRED

)}

)} {mission?.status === 'completed' && (

CONFIRMED

)} {showActions && (

{actionType === 'accept' && mission?.status === 'available' && ( )} {actionType === 'report' && mission?.status === 'active' && ( )} {actionType === 'vote' && mission?.status === 'pending_verification' && mission?._acceptedByUser?.id !== user?.id && (

)}

); }; return (

VOL. 04 // ISSUE 12

CAMPUS
UNDERGROUND

{(memberList || []).length} AGENTS ONLINE // NO TRACE LEFT

{(memberList || []).slice(0, 5).map(m => (

openProfile(m.handle)} style={{ width: 24, height: 24, borderRadius: '50%', border: `1px solid ${colors.ink}`, cursor: 'pointer' }} title={m.displayName} /> ))}

{['BOARD', 'ACTIVE', 'VERIFY', 'LOG'].map(t => ( ))}

{view === 'board' && ( (availableMissions || []).length === 0 ?

NO ORDERS IN THE QUEUE. START SOMETHING.

: (availableMissions || []).map(m => renderMissionCard(m, true, 'accept')) )} {view === 'active' && ( (myActiveMissions || []).length === 0 ?

IDLE. GET TO WORK, AGENT.

: (myActiveMissions || []).map(m => renderMissionCard(m, true, 'report')) )} {view === 'verify' && ( (pendingVerification || []).length === 0 ?

NOTHING TO VET. ALL QUIET.

: (pendingVerification || []).map(m => renderMissionCard(m, true, 'vote')) )} {view === 'log' && ( (completedMissions || []).length === 0 ?

HISTORY IS EMPTY. MAKE YOUR MARK.

: (completedMissions || []).map(m => renderMissionCard(m)) )}

{showNewMission && (

ISSUE NEW ORDER

setNewMissionText(e.target.value)}
              placeholder="WHAT NEEDS TO BE DONE?"
              style={{
                width: '100%', height: 140, background: '#FFF', border: `2px solid ${colors.ink}`,
                padding: 16, fontFamily: fonts.type, fontSize: 18, boxSizing: 'border-box',
                outline: 'none'
              }}
            />
            <div style={{ display: 'flex', gap: 16, marginTop: 24 }}>
              <button onClick={() => setShowNewMission(false)} style={{ flex: 1, padding: 14, background: '#BBB', border: `2px solid ${colors.ink}`, fontFamily: fonts.mono, fontWeight: 'bold' }}>ABORT</button>
              <button onClick={deployMission} style={{ flex: 2, padding: 14, background: colors.ink, color: colors.accent, border: 'none', fontFamily: fonts.hand, fontSize: 24 }}>DEPLOY</button>
            </div>
          </div>
        </div>
      )}

{!showNewMission && (
        <button
          onClick={() => setShowNewMission(true)}
          style={{
            position: 'fixed', bottom: 30, left: '50%', transform: 'translateX(-50%)',
            background: colors.accent, color: colors.ink, border: `4px solid ${colors.ink}`,
            padding: '16px 32px', fontFamily: fonts.hand, fontSize: 28, cursor: 'pointer',
            boxShadow: `8px 8px 0px ${colors.ink}`, zIndex: 150,
            transition: 'all 0.1s'
          }}
          onMouseDown={e => e.currentTarget.style.transform = 'translateX(-50%) translate(4px, 4px)'}
          onMouseUp={e => e.currentTarget.style.transform = 'translateX(-50%)'}
        >
          + ISSUE MISSION
        </button>
      )}

{victoryMission && (
        <div style={{
          position: 'fixed', inset: 0, background: colors.accent, zIndex: 1000,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          fontFamily: fonts.hand, fontSize: 56, textAlign: 'center', padding: 20
        }}>
          <div style={{ transform: 'rotate(-4deg)', border: `12px double ${colors.ink}`, padding: '30px 40px', background: '#FFF' }}>
            MISSION<br/>ACCOMPLISHED
          </div>
          <div style={{ fontSize: 22, fontFamily: fonts.mono, marginTop: 30, background: colors.ink, color: colors.accent, padding: '4px 12px' }}>THE UNDERGROUND SALUTES YOU</div>
        </div>
      )}
    </div>
  );
}
)})</article></body></html>