add fireworks (#2258)

* add fireworks

* fix weird search background color due to canvas overlay

* prevent going off small screens

Author: huumn

components/fireworks.js

@@ -0,0 +1,273 @@
+import { useCallback, createContext, useContext, useState, useEffect } from 'react'
+import Particles from 'react-particles'
+import { loadFireworksPreset } from 'tsparticles-preset-fireworks'
+import styles from './fireworks.module.css'
+import {
+  rgbToHsl,
+  setRangeValue,
+  stringToRgb
+} from 'tsparticles-engine'
+import useDarkMode from './dark-mode'
+
+export const FireworksContext = createContext({
+  strike: () => {}
+})
+
+export const FireworksConsumer = FireworksContext.Consumer
+export function useFireworks () {
+  const { strike } = useContext(FireworksContext)
+  return strike
+}
+
+export function FireworksProvider ({ children }) {
+  const [cont, setCont] = useState()
+  const [context, setContext] = useState({ strike: () => {} })
+  const [darkMode] = useDarkMode()
+
+  useEffect(() => {
+    setContext({
+      strike: () => {
+        cont?.addEmitter(
+          {
+            direction: 'top',
+            life: {
+              count: 1,
+              duration: 0.1,
+              delay: 0.1
+            },
+            rate: {
+              delay: 0,
+              quantity: 1
+            },
+            size: {
+              width: 10,
+              height: 0
+            },
+            position: {
+              y: 100,
+              x: 50
+            }
+          })
+        return true
+      }
+    })
+  }, [cont])
+
+  const particlesLoaded = useCallback((container) => {
+    setCont(container)
+  }, [])
+
+  const particlesInit = useCallback(async engine => {
+    // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+    // starting from v2 you can add only the features you need reducing the bundle size
+    await loadFireworksPreset(engine)
+  }, [])
+
+  return (
+    <FireworksContext.Provider value={context}>
+      <Particles
+        className={styles.fireworks}
+        init={particlesInit}
+        loaded={particlesLoaded}
+        options={darkMode ? darkOptions : lightOptions}
+      />
+      {children}
+    </FireworksContext.Provider>
+  )
+}
+
+const fixRange = (value, min, max) => {
+  const diffSMax = value.max > max ? value.max - max : 0
+  let res = setRangeValue(value)
+
+  if (diffSMax) {
+    res = setRangeValue(value.min - diffSMax, max)
+  }
+
+  const diffSMin = value.min < min ? value.min : 0
+
+  if (diffSMin) {
+    res = setRangeValue(0, value.max + diffSMin)
+  }
+
+  return res
+}
+
+const fireworksOptions = ['#ff595e', '#ffca3a', '#8ac926', '#1982c4', '#6a4c93']
+  .map((color) => {
+    const rgb = stringToRgb(color)
+
+    if (!rgb) {
+      return undefined
+    }
+
+    const hsl = rgbToHsl(rgb)
+    const sRange = fixRange({ min: hsl.s - 30, max: hsl.s + 30 }, 0, 100)
+    const lRange = fixRange({ min: hsl.l - 30, max: hsl.l + 30 }, 0, 100)
+
+    return {
+      color: {
+        value: {
+          h: hsl.h,
+          s: sRange,
+          l: lRange
+        }
+      },
+      stroke: {
+        width: 0
+      },
+      number: {
+        value: 0
+      },
+      opacity: {
+        value: {
+          min: 0.1,
+          max: 1
+        },
+        animation: {
+          enable: true,
+          speed: 0.7,
+          sync: false,
+          startValue: 'max',
+          destroy: 'min'
+        }
+      },
+      shape: {
+        type: 'circle'
+      },
+      size: {
+        value: { min: 1, max: 2 },
+        animation: {
+          enable: true,
+          speed: 5,
+          count: 1,
+          sync: false,
+          startValue: 'min',
+          destroy: 'none'
+        }
+      },
+      life: {
+        count: 1,
+        duration: {
+          value: {
+            min: 1,
+            max: 2
+          }
+        }
+      },
+      move: {
+        decay: { min: 0.075, max: 0.1 },
+        enable: true,
+        gravity: {
+          enable: true,
+          inverse: false,
+          acceleration: 5
+        },
+        speed: { min: 5, max: 15 },
+        direction: 'none',
+        outMode: {
+          top: 'destroy',
+          default: 'bounce'
+        }
+      }
+    }
+  })
+  .filter((t) => t !== undefined)
+
+const particlesOptions = (theme) => ({
+  number: {
+    value: 0
+  },
+  destroy: {
+    mode: 'split',
+    bounds: {
+      top: { min: 5, max: 40 }
+    },
+    split: {
+      sizeOffset: false,
+      count: 1,
+      factor: {
+        value: 0.333333
+      },
+      rate: {
+        value: { min: 75, max: 150 }
+      },
+      particles: fireworksOptions
+    }
+  },
+  life: {
+    count: 1
+  },
+  shape: {
+    type: 'line'
+  },
+  size: {
+    value: {
+      min: 0.1,
+      max: 50
+    },
+    animation: {
+      enable: true,
+      sync: true,
+      speed: 90,
+      startValue: 'max',
+      destroy: 'min'
+    }
+  },
+  rotate: {
+    path: true
+  },
+  stroke: {
+    color: {
+      value: theme === 'dark' ? '#fff' : '#aaa'
+    },
+    width: 1
+  },
+  move: {
+    enable: true,
+    gravity: {
+      acceleration: 15,
+      enable: true,
+      inverse: true,
+      maxSpeed: 100
+    },
+    speed: {
+      min: 10,
+      max: 20
+    },
+    outModes: {
+      default: 'split',
+      top: 'none'
+    },
+    trail: {
+      fillColor: theme === 'dark' ? '#000' : '#f5f5f7',
+      enable: true,
+      length: 10
+    }
+  }
+})
+
+const darkOptions = {
+  fullScreen: { enable: true, zIndex: -1 },
+  detectRetina: true,
+  background: {
+    color: '#000',
+    opacity: 0
+  },
+  fpsLimit: 120,
+  emitters: [],
+  particles: particlesOptions('dark')
+}
+
+const lightOptions = {
+  fullScreen: { enable: true, zIndex: -1 },
+  detectRetina: true,
+  background: {
+    color: '#fff',
+    opacity: 0
+  },
+  fpsLimit: 120,
+  emitters: [],
+  particles: particlesOptions('light')
+}

components/fireworks.module.css

@@ -0,0 +1,8 @@
+.fireworks {
+  z-index: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}

components/item-act.js

@@ -6,14 +6,14 @@ import { useMe } from './me'
 import UpBolt from '@/svgs/bolt.svg'
 import { amountSchema, boostSchema } from '@/lib/validate'
 import { useToast } from './toast'
-import { useLightning } from './lightning'
 import { nextTip, defaultTipIncludingRandom } from './upvote'
 import { ZAP_UNDO_DELAY_MS } from '@/lib/constants'
 import { usePaidMutation } from './use-paid-mutation'
 import { ACT_MUTATION } from '@/fragments/paidAction'
 import { meAnonSats } from '@/lib/apollo'
 import { BoostItemInput } from './adv-post-form'
 import { useSendWallets } from '@/wallets/index'
+import { useFireworks } from './fireworks'
 
 const defaultTips = [100, 1000, 10_000, 100_000]
 
@@ -96,7 +96,7 @@ export default function ItemAct ({ onClose, item, act = 'TIP', step, children, a
   }, [onClose, item.id])
 
   const actor = useAct()
-  const strike = useLightning()
+  const strike = useFireworks()
 
   const onSubmit = useCallback(async ({ amount }) => {
     if (abortSignal && zapUndoTrigger({ me, amount })) {
@@ -300,7 +300,7 @@ export function useAct ({ query = ACT_MUTATION, ...options } = {}) {
 export function useZap () {
   const wallets = useSendWallets()
   const act = useAct()
-  const strike = useLightning()
+  const strike = useFireworks()
   const toaster = useToast()
 
   return useCallback(async ({ item, me, abortSignal }) => {

components/layout.module.css

@@ -5,6 +5,7 @@
     height: 100%;
     align-items: center;
     margin: auto;
+    z-index: 0;
 }
 
 .content {

components/nav/common.js

@@ -15,7 +15,7 @@ import { useServiceWorker } from '../serviceworker'
 import { signOut } from 'next-auth/react'
 import Badges from '../badge'
 import { randInRange } from '../../lib/rand'
-import { useLightning } from '../lightning'
+import { useFireworks } from '../fireworks'
 import LightningIcon from '../../svgs/bolt.svg'
 import SearchIcon from '../../svgs/search-line.svg'
 import classNames from 'classnames'
@@ -400,13 +400,15 @@ export function LoginButtons ({ handleClose }) {
 }
 
 export function AnonDropdown ({ path }) {
-  const strike = useLightning()
+  const strike = useFireworks()
 
   useEffect(() => {
     if (!window.localStorage.getItem('striked')) {
       const to = setTimeout(() => {
-        strike()
-        window.localStorage.setItem('striked', 'yep')
+        const striked = strike()
+        if (striked) {
+          window.localStorage.setItem('striked', 'yep')
+        }
       }, randInRange(3000, 10000))
       return () => clearTimeout(to)
     }

components/pay-bounty.js

@@ -6,7 +6,7 @@ import { numWithUnits } from '@/lib/format'
 import { useShowModal } from './modal'
 import { useRoot } from './root'
 import { ActCanceledError, useAct } from './item-act'
-import { useLightning } from './lightning'
+import { useFireworks } from './fireworks'
 import { useToast } from './toast'
 import { useSendWallets } from '@/wallets/index'
 import { Form, SubmitButton } from './form'
@@ -48,7 +48,7 @@ export default function PayBounty ({ children, item }) {
   const { me } = useMe()
   const showModal = useShowModal()
   const root = useRoot()
-  const strike = useLightning()
+  const strike = useFireworks()
   const toaster = useToast()
   const wallets = useSendWallets()
 

components/search.module.css

@@ -1,5 +1,4 @@
 .searchSection {
-    background-color: var(--bs-body-bg);
     z-index: 1;
 }