); const PlacardCard = ({ dare, index, onClick }) => { const isSlam = slamAnim === dare?.id; const isAccomplished = dare?.status === 'accomplished'; const rotation = ((index % 6) - 3) * 1.5; const diff = DIFFICULTY_MAP[dare?.difficulty ?? 'leaflet']; return (

!isAccomplished && onClick && onClick(dare)} style={{ background: colors.paper, border: `3px solid ${colors.ink}`, padding: '28px 20px 20px', marginBottom: 32, position: 'relative', cursor: isAccomplished ? 'default' : 'pointer', transform: isSlam ? `scale(1.1) rotate(${rotation}deg)` : `rotate(${rotation}deg)`, transition: 'transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275)', boxShadow: '8px 8px 0px rgba(0,0,0,1)', ...grainStyle, }} >

{diff?.label} {diff?.points} PTS

{dare?.text}

{ e.stopPropagation(); openProfile(dare?._user?.handle); }} style={{ fontWeight: 'bold', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }} > {dare?._user?.profileImageUrl &&

} ORIGIN: {dare?._user?.displayName?.toUpperCase() || 'ANON'}

{dare?.status === 'accepted' && ( CLAIMED )}

{isAccomplished && (

REDACTED

)} {dare?.proofUrl && (

)}

); }; return (

CAMPUS
DARE

VOL. 01

GRASSROOTS COLLECTIVE / EST. 2024

{['wall', 'roster'].map(t => ( ))}

{view === 'wall' ? (

{(dares || []).map((d, i) => )}

) : (

TOP AGITATORS

{(scores || []).sort((a,b) => b.points - a.points).map((s, i) => (

openProfile(s._user?.handle)} style={{ display: 'flex', alignItems: 'center', padding: '14px 0', borderBottom: `1px dashed ${colors.ink}`, background: uprisingUser === s._user?.id ? colors.highlight : 'none', cursor: 'pointer' }}> {i+1}.

{s._user?.displayName?.toUpperCase() || 'ANON'}

{s.completed} OPS COMPLETED

{s.points}

))}

ACTIVE REBELS

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

openProfile(m.handle)} style={{ cursor: 'pointer', textAlign: 'center', width: 60 }}>

{m.displayName?.split(' ')[0]}

))}

)}

{view === 'wall' && (

)} {showSubmit && (

{broadcasting &&

TRANSMITTING...

}

NEW MISSION

setNewDare({...newDare, text: e.target.value})} placeholder="WHAT'S THE CHALLENGE?" style={{ width: '100%', height: 120, background: 'none', border: `3px solid ${colors.ink}`, padding: 12, fontFamily: fonts.typewriter, marginBottom: 20, resize: 'none', fontSize: 16, fontWeight: 'bold' }} />
            <div style={{ display: 'flex', gap: 6, marginBottom: 24 }}>
              {Object.keys(DIFFICULTY_MAP || {}).map(k => (
                <button key={k} onClick={() => setNewDare({...newDare, difficulty: k})} style={{ flex: 1, padding: '10px 4px', fontSize: 11, fontFamily: fonts.bold, background: newDare.difficulty === k ? colors.ink : 'none', color: newDare.difficulty === k ? colors.paper : colors.ink, border: `2px solid ${colors.ink}` }}>{DIFFICULTY_MAP[k].label}</button>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <button onClick={() => setShowSubmit(false)} style={{ flex: 1, padding: 14, background: 'none', border: `3px solid ${colors.ink}`, fontFamily: fonts.bold, cursor: 'pointer' }}>ABORT</button>
              <button onClick={deployDare} disabled={!newDare.text.trim()} style={{ flex: 2, padding: 14, background: colors.ink, color: colors.paper, border: `3px solid ${colors.ink}`, fontFamily: fonts.bold, cursor: 'pointer' }}>DEPLOY</button>
            </div>
          </div>
        </div>
      )}

{selectedDare && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)', zIndex: 1000, display: 'flex', alignItems: 'flex-end' }}>
          <div onClick={() => setSelectedDare(null)} style={{ position: 'absolute', inset: 0 }} />
          <div style={{ background: colors.paper, width: '100%', padding: '40px 24px calc(40px + env(safe-area-inset-bottom))', borderTop: `8px solid ${colors.ink}`, position: 'relative', ...grainStyle }}>
            <div style={{ width: 60, height: 6, background: colors.ink, margin: '0 auto 24px' }} />
            <div style={{ fontFamily: fonts.bold, fontSize: 28, marginBottom: 16, textTransform: 'uppercase', lineHeight: 1.0 }}>{selectedDare.text}</div>
            <div style={{ marginBottom: 32, fontSize: 14, fontWeight: '900', borderLeft: `4px solid ${colors.highlight}`, paddingLeft: 12 }}>WORTH {DIFFICULTY_MAP[selectedDare.difficulty]?.points} ACTION POINTS</div>
            
            {selectedDare.status === 'active' ? (
              <button onClick={() => acceptDare(selectedDare.id)} style={{ width: '100%', padding: 20, background: colors.ink, color: colors.paper, fontFamily: fonts.bold, fontSize: 22, border: 'none', boxShadow: '4px 4px 0px rgba(0,0,0,0.3)' }}>ACCEPT MISSION</button>
            ) : selectedDare.acceptedBy === user?.id ? (
              <button onClick={() => proveIt(selectedDare.id)} style={{ width: '100%', padding: 20, background: colors.markerRed, color: 'white', fontFamily: fonts.bold, fontSize: 22, border: 'none', boxShadow: '4px 4px 0px rgba(0,0,0,0.3)' }}>UPLOAD PROOF</button>
            ) : (
              <div style={{ textAlign: 'center', padding: 20, border: `4px dashed ${colors.ink}`, fontFamily: fonts.bold, fontSize: 18 }}>CLAIMED BY {selectedDare._acceptedUser?.displayName?.toUpperCase() || 'ANOTHER REBEL'}</div>
            )}
            <button onClick={() => setSelectedDare(null)} style={{ width: '100%', marginTop: 20, padding: 12, background: 'none', border: 'none', fontFamily: fonts.typewriter, fontSize: 13, textDecoration: 'underline', fontWeight: 'bold' }}>DISMISS</button>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>