The Daily Ick

Prosperity in venting

{(icks || []).length} 🧧

{/* 📜 MAIN LIST */}

{(icks || []).length === 0 ? (

🧧

No icks yet! Add one to start the flow of fortune.

) : ( (icks || []).map((ick) => (

toggleExpand(ick.id)} style={{ position: 'relative', background: expandedId === ick.id ? colors.cream : '#D42426', borderRadius: 12, border: `2px solid ${colors.gold}`, boxShadow: '0 4px 10px rgba(0,0,0,0.2)', transition: 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)', transform: expandedId === ick.id ? 'scale(1.02)' : 'scale(1)', overflow: 'hidden', cursor: 'pointer' }} > {/* Envelope Flap (Visual only) */} {!expandedId === ick.id && (

)} {/* Content */}

{ick.level} {new Date(ick.createdAt).toLocaleDateString()}

{/* Avatar bubble */}

{ick.author?.avatar ?

: (ick.author?.name?.[0] || '?')}

{ick.text}

{expandedId === ick.id && (

{['😱', '🤣', '🤮', '🔨'].map(emoji => ( ))}

{/* Reactions List */} {(ick.reactions?.length ?? 0) > 0 && (

{(ick.reactions || []).map((r, i) => ( {r.emoji} {r.userName} ))}

)}

)} {!expandedId === ick.id && (

Tap to unseal 🧧

)}

)) )}

{/* 🪙 FAB - GOLD COIN/INGOT */} {/* 📜 ADD SCROLL MODAL */} {isAddOpen && (

setIsAddOpen(false)}>

e.stopPropagation()} style={{ width: '100%', maxWidth: 400, background: colors.cream, borderRadius: 4, position: 'relative', boxShadow: '0 20px 50px rgba(0,0,0,0.5)', animation: 'slideUp 0.3s ease-out' }} > {/* Scroll Rollers */}

Seal Your Ick

setNewIck(e.target.value)}
                placeholder="What gave you the ick?"
                autoFocus
                style={{
                  width: '100%',
                  height: 100,
                  padding: 12,
                  border: '2px solid #E6CCA0',
                  background: '#fff',
                  borderRadius: 8,
                  fontSize: 16,
                  fontFamily: 'sans-serif',
                  marginBottom: 16,
                  resize: 'none',
                  boxSizing: 'border-box'
                }}
              />
              
              <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginBottom: 24 }}>
                {['🚩', '🚨', '💀'].map(lvl => (
                  <button
                    key={lvl}
                    onClick={() => setSelectedLevel(lvl)}
                    style={{
                      fontSize: 28,
                      padding: 10,
                      background: selectedLevel === lvl ? '#FFE4E1' : 'transparent',
                      border: selectedLevel === lvl ? `2px solid ${colors.red}` : '2px solid transparent',
                      borderRadius: 12,
                      cursor: 'pointer',
                      transition: 'all 0.2s'
                    }}
                  >
                    {lvl}
                  </button>
                ))}
              </div>

<div style={{ height: 16, background: '#5E2C0C', borderRadius: '0 0 4px 4px', margin: '0 -10px' }}></div>
            
            {/* Close X */}
            <button 
              onClick={() => setIsAddOpen(false)}
              style={{ position: 'absolute', top: -10, right: -10, width: 32, height: 32, borderRadius: '50%', background: '#fff', border: 'none', boxShadow: '0 2px 5px rgba(0,0,0,0.2)', fontSize: 16 }}
            >
              ✕
            </button>
          </div>
        </div>
      )}

{/* 🎉 CELEBRATION OVERLAY */}
      {celebration && (
        <div style={{
          position: 'fixed',
          top: 0, left: 0, right: 0, bottom: 0,
          pointerEvents: 'none',
          zIndex: 200,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          background: 'rgba(0,0,0,0.3)',
        }}>
          {celebration === 'dragon' && (
            <div style={{ animation: 'float 2s ease-in-out infinite', fontSize: 100 }}>🐲</div>
          )}
          {celebration === 'coins' && (
            <div style={{ fontSize: 80, animation: 'spin 1s linear infinite' }}>💰</div>
          )}
          {celebration === 'fireworks' && (
             <div style={{ fontSize: 80, animation: 'pulse 0.5s ease-in-out infinite' }}>🎆</div>
          )}
          <h1 style={{
            color: colors.gold,
            textShadow: '0 2px 4px rgba(0,0,0,0.5)',
            fontSize: 32,
            marginTop: 20,
            fontFamily: 'serif',
            textAlign: 'center',
            padding: 20,
            background: colors.red,
            border: `2px solid ${colors.gold}`,
            borderRadius: 12
          }}>
            {celebration === 'dragon' ? 'PROSPERITY IN ICKS! 🐉' : 
             celebration === 'coins' ? 'LUCKY NUMBER! 💰' : 
             'ICK SEALED! 🧧'}
          </h1>
        </div>
      )}

{/* 🍞 TOAST */}
      {toast && (
        <div style={{
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          background: 'rgba(0,0,0,0.8)',
          color: '#fff',
          padding: '16px 24px',
          borderRadius: 12,
          zIndex: 300,
          fontSize: 18,
          fontWeight: 'bold',
          animation: 'fadeInOut 2s ease-in-out forwards'
        }}>
          {toast}
        </div>
      )}

{/* Animation Styles */}
      <style>{`
        @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } 100% { transform: translateY(0px) rotate(0deg); } }
        @keyframes spin { 100% { transform: rotate(360deg); } }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
        @keyframes fadeInOut { 0% { opacity: 0; transform: translate(-50%, -40%); } 20% { opacity: 1; transform: translate(-50%, -50%); } 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -60%); } }
      `}</style>
    </div>
  );
}</article></body></html>