From 545a474c3ec0a2221e575a5d75c571ae66f76609 Mon Sep 17 00:00:00 2001
From: Aaron Agarunov <agarunov.aaron@gmail.com>
Date: Fri, 31 May 2024 20:27:40 -0400
Subject: [PATCH] Add album card

---
 src/app/[slug]/chip.tsx  |  4 +++-
 src/lib/globes/globe.tsx | 37 ++++++++++++++++++++++++-------------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/app/[slug]/chip.tsx b/src/app/[slug]/chip.tsx
index b8f8fb1..c580724 100644
--- a/src/app/[slug]/chip.tsx
+++ b/src/app/[slug]/chip.tsx
@@ -20,7 +20,9 @@ export function useTags(
 }
 
 function dateFromTag(tag: Tag) {
-  return tag?.match(/\d{4}/g)?.[0];
+  // either begins with `20##`, or `20##` is preceded by non-digit
+  // e.g. '20241231...', 'IMG_20241231...'
+  return tag?.match(/(?:^20|[^\d]20)\d{2}/g)?.[0];
 }
 
 export function TagChip({ tag }: { tag: Tag }) {
diff --git a/src/lib/globes/globe.tsx b/src/lib/globes/globe.tsx
index 37973a1..a761659 100644
--- a/src/lib/globes/globe.tsx
+++ b/src/lib/globes/globe.tsx
@@ -8,8 +8,10 @@ import { GeoJsonGeometry } from 'three-geojson-geometry';
 import { geoGraticule10 } from 'd3-geo';
 import * as topojson from 'topojson-client';
 import { useWindowSize } from '@/hooks/use-window-size';
-import { Album, AlbumTitle, types } from '../../types/albums';
+import { Album, AlbumTitle, types } from '@/types/albums';
+import { albumTitleToSlug } from '@/lib/api/slug';
 import Link from 'next/link';
+import { AlbumCard } from './card';
 
 type Ref = CustomGlobeMethods | undefined; // Reference to globe instance
 type GlobeEl = React.MutableRefObject<Ref>; // React `ref` passed to globe element
@@ -87,7 +89,7 @@ function useRings(
   globeElRef: CustomGlobeMethods,
   setPointAltitude: React.Dispatch<React.SetStateAction<number>>
 ) {
-  const [activeAlbum, setActiveAlbum] = useState<AlbumTitle>();
+  const [activeAlbumTitle, setActiveAlbumTitle] = useState<AlbumTitle>();
 
   const [rings, setRings] = useState<Array<Ring>>([]);
   const colorInterpolator = (t: number) =>
@@ -95,7 +97,7 @@ function useRings(
 
   const [enterTimeoutId, setEnterTimeoutId] = useState<NodeJS.Timeout>();
   function handleMouseEnter({ lat, lng, title, type }: Album) {
-    setActiveAlbum(title);
+    setActiveAlbumTitle(title);
 
     clearTimeout(enterTimeoutId);
 
@@ -138,7 +140,7 @@ function useRings(
   function handleMouseLeave() {
     setPointAltitude(0.002);
 
-    setActiveAlbum(undefined);
+    // setActiveAlbumTitle(undefined);
 
     globeElRef.pointOfView(
       {
@@ -155,7 +157,7 @@ function useRings(
   }
 
   return {
-    activeAlbum,
+    activeAlbumTitle,
     rings,
     colorInterpolator,
     handleMouseEnter,
@@ -325,7 +327,7 @@ function useScene(globeElRef: Ref) {
     );
     const innerSphereMaterial = new THREE.MeshBasicMaterial({
       color: 0xffffff /* it's neat to try different colors here */,
-      opacity: 0.43,
+      opacity: 0.47,
       transparent: true
     });
     const innerSphere = new THREE.Mesh(
@@ -356,8 +358,14 @@ function Globe({ albums }: { albums: Array<Album> }) {
   const { points, pointAltitude, setPointAltitude } = usePoints(albums);
 
   // rings animation
-  const { rings, colorInterpolator, handleMouseEnter, handleMouseLeave } =
-    useRings(globeElRef as CustomGlobeMethods, setPointAltitude);
+  const {
+    rings,
+    colorInterpolator,
+    handleMouseEnter,
+    handleMouseLeave,
+    activeAlbumTitle
+  } = useRings(globeElRef as CustomGlobeMethods, setPointAltitude);
+  const activeAlbum = albums.find(album => album.title === activeAlbumTitle);
 
   // arcs animation
   const { arcs } = useArcs(albums);
@@ -380,8 +388,9 @@ function Globe({ albums }: { albums: Array<Album> }) {
         sm:py-36
         md:py-32 md:px-24
         lg:py-40 lg:px-36
-        xl:py-64 xl:px-48
-        2xl:px-64`}
+        xl:py-48 xl:px-48
+        2xl:px-64
+        3xl:py-56`}
     >
       <GlobeGL
         ref={globeEl}
@@ -421,8 +430,8 @@ function Globe({ albums }: { albums: Array<Album> }) {
         customThreeObjectUpdate={customThreeObjectUpdate}
       />
 
-      <section className={`content-container grow text-3xl`}>
-        <h1 className="font-bold mb-20 text-center md:text-left">
+      <section className="content-container grow text-3xl">
+        <h1 className="font-bold mb-12 sm:mb-20 text-center md:text-left">
           Aaron Agarunov
         </h1>
 
@@ -443,7 +452,7 @@ function Globe({ albums }: { albums: Array<Album> }) {
                 }}
               >
                 <Link
-                  href={`/${album.title.toLowerCase()}`}
+                  href={`/${albumTitleToSlug(album.title)}`}
                   className="hover:text-gray-500"
                 >
                   {album.title}
@@ -454,6 +463,8 @@ function Globe({ albums }: { albums: Array<Album> }) {
         </ul>
       </section>
 
+      {activeAlbum && <AlbumCard album={activeAlbum} />}
+
       <footer className={`tracking-tight content`}>
         <div className="text-3xl text-center md:text-right">
           <p className="m-0 p-0">&copy; {new Date().getFullYear()}</p>