feat: add global stats component

Author: kevinjosethomas

src/api/auth/auth.ts

@@ -31,3 +31,10 @@ export const getLeaderboard = async () => {
 
   return data
 }
+
+export const getGlobalStats = async () => {
+  const res = await fetch(buildUrl('auth/global_stats'))
+  const data = await res.json()
+
+  return data
+}

src/components/Home/HomeHero.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link'
-import { useCallback, useContext } from 'react'
 import { motion } from 'framer-motion'
+import { useCallback, useContext, useEffect, useState } from 'react'
 
 import {
   SunIcon,
@@ -13,7 +13,9 @@ import {
   StarIcon,
 } from 'src/components/Icons/icons'
 import { PlayType } from 'src/types'
+import { getGlobalStats } from 'src/api'
 import { AuthContext, ModalContext } from 'src/contexts'
+import { AnimatedNumber } from 'src/components/Misc/AnimatedNumber'
 
 interface Props {
   scrollHandler: () => void
@@ -117,6 +119,11 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
 }
 
 export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
+  const [globalStats, setGlobalStats] = useState<{
+    play_moves_total: number
+    puzzle_games_total: number
+    turing_games_total: number
+  }>()
   const { setPlaySetupModalProps } = useContext(ModalContext)
   const { user, connectLichess } = useContext(AuthContext)
 
@@ -127,8 +134,15 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
     [setPlaySetupModalProps],
   )
 
+  useEffect(() => {
+    ;(async () => {
+      const data = await getGlobalStats()
+      setGlobalStats(data)
+    })()
+  }, [])
+
   return (
-    <div className="relative flex flex-col items-center justify-center overflow-hidden pb-12 pt-16 md:pb-28 md:pt-36">
+    <div className="relative flex flex-col items-center justify-center gap-14 overflow-hidden pb-12 pt-16 md:pb-16 md:pt-36">
       <div className="z-10 flex w-full max-w-[1200px] flex-col items-center justify-center gap-10 p-4 text-left md:flex-row md:gap-20">
         <div className="flex w-full flex-col items-start justify-center gap-6 md:w-[40%] md:gap-8">
           <div className="flex flex-col gap-3 md:gap-4">
@@ -189,7 +203,6 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
             )}
           </motion.div>
         </div>
-
         <div className="grid w-full flex-1 grid-cols-1 gap-4 md:grid-cols-3">
           <FeatureCard
             icon={<RegularPlayIcon />}
@@ -237,6 +250,34 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
           />
         </div>
       </div>
+      <motion.div
+        className="flex gap-6"
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: 0.3 }}
+      >
+        <p className="text-base text-primary/80">
+          <AnimatedNumber
+            value={globalStats?.play_moves_total || 0}
+            className="font-bold"
+          />{' '}
+          moves played
+        </p>
+        <p className="text-base text-primary/80">
+          <AnimatedNumber
+            value={globalStats?.puzzle_games_total || 0}
+            className="font-bold"
+          />{' '}
+          puzzle games solved
+        </p>
+        <p className="text-base text-primary/80">
+          <AnimatedNumber
+            value={globalStats?.turing_games_total || 0}
+            className="font-bold"
+          />{' '}
+          turing games played
+        </p>
+      </motion.div>
     </div>
   )
 }

src/components/Misc/AnimatedNumber.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+import { motion, useSpring, useTransform } from 'framer-motion'
+
+interface AnimatedNumberProps {
+  value: number
+  duration?: number
+  formatValue?: (value: number) => string
+  className?: string
+}
+
+export const AnimatedNumber: React.FC<AnimatedNumberProps> = ({
+  value,
+  duration = 1.5,
+  formatValue = (val) => Math.round(val).toLocaleString(),
+  className = '',
+}) => {
+  const springValue = useSpring(value, {
+    stiffness: 150,
+    damping: 30,
+    duration,
+    restDelta: 0.001,
+  })
+
+  const displayValue = useTransform(springValue, (val) => formatValue(val))
+
+  useEffect(() => {
+    springValue.set(value)
+  }, [springValue, value])
+
+  return <motion.span className={className}>{displayValue}</motion.span>
+}

src/components/Misc/index.ts

@@ -5,3 +5,4 @@ export * from './PlaySetupModal'
 export * from './ModalContainer'
 export * from './InstructionsModal'
 export * from './ContinueAgainstMaia'
+export * from './AnimatedNumber'