Christmas zaps (#707)

* Christmas zaps

* Also add 50px margin on left side

* Remove wrong comment

* Use grey snow in light mode

---------

Co-authored-by: ekzyis <ek@stacker.news>

components/header.js

@@ -19,7 +19,7 @@ import LightningIcon from '../svgs/bolt.svg'
 import SearchIcon from '../svgs/search-line.svg'
 import BackArrow from '../svgs/arrow-left-line.svg'
 import { BALANCE_LIMIT_MSATS, SSR } from '../lib/constants'
-import { useLightning } from './lightning'
+import { useSnow } from './snow'
 import { HAS_NOTIFICATIONS } from '../fragments/notifications'
 import AnonIcon from '../svgs/spy-fill.svg'
 import Hat from './hat'
@@ -172,12 +172,12 @@ function StackerCorner ({ dropNavKey }) {
 
 function LurkerCorner ({ path }) {
   const router = useRouter()
-  const strike = useLightning()
+  const snow = useSnow()
 
   useEffect(() => {
     if (!window.localStorage.getItem('striked')) {
       const to = setTimeout(() => {
-        strike()
+        snow()
         window.localStorage.setItem('striked', 'yep')
       }, randInRange(3000, 10000))
       return () => clearTimeout(to)

components/snow.js

@@ -0,0 +1,47 @@
+import React, { useCallback, useContext, useState } from 'react'
+import { randInRange } from '../lib/rand'
+
+export const SnowContext = React.createContext(() => {})
+
+// maximum amount of flakes that can get rendered at the same time
+const MAX_FLAKES = 1024
+
+export const SnowProvider = ({ children }) => {
+  const [startIndex, setStartIndex] = useState(0)
+  const [flakes, setFlakes] = useState(Array(1024))
+
+  const snow = useCallback(() => {
+    const should = window.localStorage.getItem('lnAnimate') || 'yes'
+    if (should === 'yes') {
+      // amount of flakes to add
+      const n = Math.floor(randInRange(5, 30))
+      const newFlakes = [...flakes]
+      let i
+      for (i = startIndex; i < (startIndex + n); ++i) {
+        const key = startIndex + i
+        newFlakes[i % MAX_FLAKES] = <Snow key={key} />
+      }
+      setStartIndex(i % MAX_FLAKES)
+      setFlakes(newFlakes)
+      return true
+    }
+    return false
+  }, [setFlakes, startIndex])
+
+  return (
+    <SnowContext.Provider value={snow}>
+      {flakes}
+      {children}
+    </SnowContext.Provider>
+  )
+}
+
+function Snow () {
+  return <div className='snow' />
+}
+
+export const SnowConsumer = SnowContext.Consumer
+
+export function useSnow () {
+  return useContext(SnowContext)
+}

components/upvote.js

@@ -10,12 +10,12 @@ import LongPressable from 'react-longpressable'
 import Overlay from 'react-bootstrap/Overlay'
 import Popover from 'react-bootstrap/Popover'
 import { useShowModal } from './modal'
-import { LightningConsumer, useLightning } from './lightning'
 import { numWithUnits } from '../lib/format'
 import { payOrLoginError, useInvoiceModal } from './invoice'
 import useDebounceCallback from './use-debounce-callback'
 import { useToast } from './toast'
 import { Dropdown } from 'react-bootstrap'
+import { SnowConsumer, useSnow } from './snow'
 
 const UpvotePopover = ({ target, show, handleClose }) => {
   const me = useMe()
@@ -128,7 +128,7 @@ export default function UpVote ({ item, className, pendingSats, setPendingSats }
   const [tipShow, _setTipShow] = useState(false)
   const ref = useRef()
   const me = useMe()
-  const strike = useLightning()
+  const snow = useSnow()
   const toaster = useToast()
   const [setWalkthrough] = useMutation(
     gql`
@@ -171,8 +171,8 @@ export default function UpVote ({ item, className, pendingSats, setPendingSats }
   const showInvoiceModal = useInvoiceModal(
     async ({ hash, hmac }, { variables }) => {
       await act({ variables: { ...variables, hash, hmac } })
-      strike()
+      snow()
-    }, [act, strike])
+    }, [act, snow])
 
   const zap = useDebounceCallback(async (sats) => {
     if (!sats) return
@@ -216,7 +216,7 @@ export default function UpVote ({ item, className, pendingSats, setPendingSats }
   }, [item?.meSats, item?.meAnonSats, pendingSats, me?.privates?.tipDefault, me?.privates?.turboDefault])
 
   return (
-    <LightningConsumer>
+    <SnowConsumer>
       {(strike) =>
         <div ref={ref} className='upvoteParent'>
           <LongPressable
@@ -285,6 +285,6 @@ export default function UpVote ({ item, className, pendingSats, setPendingSats }
           <TipPopover target={ref.current} show={tipShow} handleClose={() => setTipShow(false)} />
           <UpvotePopover target={ref.current} show={voteShow} handleClose={() => setVoteShow(false)} />
         </div>}
-    </LightningConsumer>
+    </SnowConsumer>
   )
 }

pages/_app.js

@@ -1,4 +1,5 @@
 import '../styles/globals.scss'
+import '../styles/snow.scss'
 import { ApolloProvider, gql } from '@apollo/client'
 import { MeProvider } from '../components/me'
 import PlausibleProvider from 'next-plausible'
@@ -10,7 +11,7 @@ import { useRouter } from 'next/dist/client/router'
 import { useEffect } from 'react'
 import { ShowModalProvider } from '../components/modal'
 import ErrorBoundary from '../components/error-boundary'
-import { LightningProvider } from '../components/lightning'
+import { SnowProvider } from '../components/snow'
 import { ToastProvider } from '../components/toast'
 import { ServiceWorkerProvider } from '../components/serviceworker'
 import { SSR } from '../lib/constants'
@@ -93,7 +94,7 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
               <LoggerProvider>
                 <ServiceWorkerProvider>
                   <PriceProvider price={price}>
-                    <LightningProvider>
+                    <SnowProvider>
                       <ToastProvider>
                         <ShowModalProvider>
                           <BlockHeightProvider blockHeight={blockHeight}>
@@ -105,7 +106,7 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
                           </BlockHeightProvider>
                         </ShowModalProvider>
                       </ToastProvider>
-                    </LightningProvider>
+                    </SnowProvider>
                   </PriceProvider>
                 </ServiceWorkerProvider>
               </LoggerProvider>

pages/rewards/index.js

@@ -15,7 +15,7 @@ import { useShowModal } from '../../components/modal'
 import dynamic from 'next/dynamic'
 import { SSR } from '../../lib/constants'
 import { useToast } from '../../components/toast'
-import { useLightning } from '../../components/lightning'
+import { useSnow } from '../../components/snow'
 
 const GrowthPieChart = dynamic(() => import('../../components/charts').then(mod => mod.GrowthPieChart), {
   loading: () => <div>Loading...</div>
@@ -91,7 +91,7 @@ export default function Rewards ({ ssrData }) {
 export function DonateButton () {
   const showModal = useShowModal()
   const toaster = useToast()
-  const strike = useLightning()
+  const snow = useSnow()
   const [donateToRewards] = useMutation(
     gql`
       mutation donateToRewards($sats: Int!, $hash: String, $hmac: String) {
@@ -119,7 +119,7 @@ export function DonateButton () {
               console.error(error)
               toaster.danger('failed to donate')
             } else {
-              const didStrike = strike()
+              const didStrike = snow()
               if (!didStrike) {
                 toaster.success('donated')
               }

styles/globals.scss

@@ -147,6 +147,8 @@ $accordion-button-active-icon-dark:  $accordion-button-icon;
   --theme-quoteBar: rgb(206, 208, 212);
   --theme-linkHover: #004a72;
   --theme-linkVisited: #53758;
+  // snow
+  --theme-snow: #6c757d;
 }
 
 [data-bs-theme=dark] {
@@ -171,6 +173,8 @@ $accordion-button-active-icon-dark:  $accordion-button-icon;
   --theme-quoteColor: rgb(141, 144, 150);
   --theme-linkHover: #007cbe;
   --theme-linkVisited: #56798E;
+  // snow
+  --theme-snow: white;
 }
 
 @import '../node_modules/bootstrap/scss/bootstrap.scss';
@@ -350,6 +354,7 @@ mark {
 }
 
 html, body {
+  // background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
   background: var(--bs-body-bg) !important;
   color: var(--bs-body-color) !important;
   min-height: 100vh;

styles/snow.scss

@@ -0,0 +1,70 @@
+// reference: https://codepen.io/alphardex/pen/dyPorwJ
+
+@function random_range($min, $max) {
+    $rand: random();
+    $random_range: $min + floor($rand * (($max - $min) + 1));
+    @return $random_range;
+}
+
+.snow {
+    z-index: 999;
+    position: absolute;
+    // position before and after animation (out of view)
+    top: -10vh;
+
+    // compile random styles for 1024 snowflakes
+    @for $i from 1 through 1024 {
+        $size: #{random_range(1, 10)}px;
+        // lower fall duration means faster fall speed
+        $fall-duration: random_range(5, 25) * 1s;
+        $fall-delay: random(10) * 1s;
+        $wind-max-swing: #{random_range(10, 50)}px;
+        // lower duration means faster swing
+        $wind-swing-duration: random_range(2.5, 4) * 1s;
+        $wind-delay: 0s;
+
+        &:nth-child(#{$i}) {
+            // +-50px to fix x-overflow if flake is blown out of right screen
+            left: clamp(0% + $wind-max-swing + $size + 50px, #{random(100) + "%"}, 100% - $size - $wind-max-swing - 50px);
+            animation: fall-#{$i} $fall-duration linear 0s 1;
+        }
+
+        &:nth-child(#{$i})::after {
+            content: '';
+            display: block;
+            background: var(--theme-snow);
+            filter: drop-shadow(0 0 10px var(--theme-snow));
+            border-radius: 50%;
+            width: $size;
+            height: $size;
+            opacity: random();
+            animation: wind $wind-swing-duration ease-in-out $wind-delay infinite alternate;
+        }
+
+        @keyframes wind {
+            0% {
+                transform: translateX($wind-max-swing);
+            }
+
+            100% {
+                transform: translateX(calc(-1 * $wind-max-swing));
+            }
+        }
+
+        @keyframes fall-#{$i} {
+            0% {
+                opacity: inherit;
+                top: -2vh;
+            }
+
+            90% {
+                opacity: 0;
+            }
+
+            100% {
+                opacity: 0;
+                top: 100vh;
+            }
+        }
+    }
+}