Merge pull request #209 from timoclsn/running-goal-celebration

Running Goal Celebration

Author: timoclsn

Diff for: components/CountUpNumber.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+
+const easeOutQuad = (t: number) => t * (2 - t);
+const frameDuration = 1000 / 60;
+
+interface Props {
+  children: number;
+  duration?: number;
+  play?: boolean;
+}
+
+export function CountUpAnimation({ children, duration = 2000, play }: Props) {
+  const countTo = children;
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    let counter: ReturnType<typeof setInterval> | undefined;
+
+    if (play) {
+      let frame = 0;
+      const totalFrames = Math.round(duration / frameDuration);
+      counter = setInterval(() => {
+        frame++;
+        const progress = easeOutQuad(frame / totalFrames);
+        setCount(countTo * progress);
+
+        if (frame === totalFrames) {
+          counter && clearInterval(counter);
+        }
+      }, frameDuration);
+    } else {
+      counter && clearInterval(counter);
+    }
+
+    return () => counter && clearInterval(counter);
+  }, [countTo, duration, play]);
+
+  return (
+    <>
+      {play
+        ? Math.floor(count).toString().padStart(countTo.toString().length, '0')
+        : countTo}
+    </>
+  );
+}

Diff for: components/RunningElement.tsx

@@ -1,6 +1,9 @@
+import { useRef } from 'react';
 import type { Icon } from 'react-feather';
 
+import { CountUpAnimation } from './CountUpNumber';
 import { Skeleton } from './Skeleton';
+import { useOnScreen } from './useOnScreen';
 interface Label {
   text: string;
   description: string;
@@ -12,19 +15,29 @@ interface Props {
   href?: string;
   labels?: Label[];
   nowrap?: boolean;
+  animateLabelNumber?: boolean;
 }
 
-export function RunningElement({ Icon, text, href, labels, nowrap }: Props) {
+export function RunningElement({
+  Icon,
+  text,
+  href,
+  labels,
+  nowrap,
+  animateLabelNumber,
+}: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const visible = useOnScreen(ref);
   return (
-    <div className="flex items-center space-x-4">
+    <div className="flex items-center space-x-4" ref={ref}>
       <div className="leading-none">
         {text ? (
           <Icon size={22} />
         ) : (
           <Skeleton circle height="20px" width="20px" />
         )}
       </div>
-      <p className={'my-2' + (nowrap ? ' whitespace-nowrap' : '')}>
+      <p className={`my-2${nowrap && ' whitespace-nowrap'}`}>
         {href ? (
           <a href={href} target="_blank" rel="noopener noreferrer">
             {text}
@@ -36,13 +49,23 @@ export function RunningElement({ Icon, text, href, labels, nowrap }: Props) {
       {labels && (
         <div className="flex flex-wrap items-center">
           {labels.map((label) => {
+            const textElements = label.text.match(/[^\d]+|\d+/g) ?? [];
+            const number = textElements[0] as unknown as number;
+            const rest = textElements[1];
             return (
               <div
                 key={label.text}
                 className="px-3 py-1 m-1 text-xs font-bold uppercase rounded-full whitespace-nowrap bg-highlight dark:bg-highlight-dark text-light"
                 title={label.description}
               >
-                {label.text}
+                {animateLabelNumber ? (
+                  <>
+                    <CountUpAnimation play={visible}>{number}</CountUpAnimation>
+                    {rest}
+                  </>
+                ) : (
+                  label.text
+                )}
               </div>
             );
           })}

Diff for: components/WidgetRunning.tsx

@@ -1,3 +1,5 @@
+import JSConfetti from 'js-confetti';
+import { useEffect, useRef } from 'react';
 import {
   ArrowRight,
   Calendar,
@@ -10,6 +12,10 @@ import {
 
 import type { LastRun, ThisYear } from '../pages/api/running';
 import { RunningElement } from './RunningElement';
+import { useOnScreen } from './useOnScreen';
+
+const jsConfetti = typeof window !== 'undefined' ? new JSConfetti() : null;
+
 interface Props {
   thisYear?: ThisYear;
   lastRun?: LastRun;
@@ -96,8 +102,31 @@ export function WidgetRunning({ thisYear, lastRun }: Props) {
   const yearProgress = getYearProgress();
   const yearTrend = runningProgress >= yearProgress ? '↑' : '↓';
 
+  // Emoji explosion if running progress is over 100%
+  const ref = useRef<HTMLDivElement>(null);
+  const visible = useOnScreen(ref);
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+
+    if (visible) {
+      timer = setTimeout(() => {
+        if (jsConfetti && runningProgress >= 100) {
+          jsConfetti.addConfetti({
+            emojis: ['🏆', '🏃‍♂️', '🏃', '🏃‍♀️'],
+            confettiNumber: runningProgress,
+          });
+        }
+      }, 3000);
+    } else {
+      timer && clearTimeout(timer);
+    }
+
+    return () => timer && clearTimeout(timer);
+  }, [visible, runningProgress]);
+
   return (
-    <div className="px-6 py-12 xl:px-12 xl:py-20">
+    <div className="px-6 py-12 xl:px-12 xl:py-20" ref={ref}>
       <h2 className="mb-2 text-xl font-bold md:text-2xl lg:text-3xl">Laufen</h2>
       <ul>
         <li>
@@ -112,6 +141,7 @@ export function WidgetRunning({ thisYear, lastRun }: Props) {
                 },
               ]
             }
+            animateLabelNumber
           />
         </li>
       </ul>

Diff for: components/useOnScreen.ts

@@ -0,0 +1,29 @@
+import { RefObject, useEffect, useState } from 'react';
+
+export function useOnScreen<T extends Element>(
+  ref: RefObject<T>,
+  rootMargin = 0
+) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const currentElement = ref?.current;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      {
+        rootMargin: `${rootMargin}px`,
+      }
+    );
+
+    currentElement && observer.observe(currentElement);
+
+    return () => {
+      currentElement && observer.unobserve(currentElement);
+    };
+  }, [ref, rootMargin]);
+
+  return isVisible;
+}

Diff for: package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "timoclasen.de",
   "description": "My personal website.",
-  "version": "2.20.0",
+  "version": "2.21.0",
   "private": true,
   "author": {
     "name": "Timo Clasen",
@@ -45,6 +45,7 @@
     "date-fns": "^2.27.0",
     "date-fns-tz": "^1.1.7",
     "ethers": "^5.5.2",
+    "js-confetti": "^0.10.1",
     "lru-cache": "^6.0.0",
     "match-sorter": "^6.3.1",
     "next": "12.0.7",
@@ -78,7 +79,7 @@
     "autoprefixer": "^10.4.0",
     "cypress": "^9.1.1",
     "dotenv": "^10.0.0",
-    "eslint": "^8.4.1",
+    "eslint": "^8.5.0",
     "eslint-config-next": "12.0.8-canary.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -89,7 +90,7 @@
     "globby": "^12.0.2",
     "he": "^1.2.0",
     "husky": "^7.0.4",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^12.1.3",
     "node-fetch": "^3.1.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",