From ced48e512b953018bbd7c702341ef3eddc569be1 Mon Sep 17 00:00:00 2001
From: cubedhuang <99danielh@gmail.com>
Date: Sun, 24 Sep 2023 21:26:05 -0400
Subject: [PATCH] make age dynamic

---
 package.json                         |  1 +
 pnpm-lock.yaml                       | 21 +++++++++++++++++++++
 src/lib/stores.ts                    | 14 +++++++++++++-
 src/routes/(home)/+page.svelte       | 12 +++++++++++-
 src/routes/(home)/SpotifyInfo.svelte |  4 ++--
 5 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 83787a2..5cf083b 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
 	"type": "module",
 	"dependencies": {
 		"@spotify/web-api-ts-sdk": "^1.1.2",
+		"date-fns": "^2.30.0",
 		"sk-lanyard": "^0.2.7"
 	},
 	"devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d748894..e8a09e2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ dependencies:
   '@spotify/web-api-ts-sdk':
     specifier: ^1.1.2
     version: 1.1.2
+  date-fns:
+    specifier: ^2.30.0
+    version: 2.30.0
   sk-lanyard:
     specifier: ^0.2.7
     version: 0.2.7(svelte@4.2.0)(vite@4.4.9)
@@ -102,6 +105,13 @@ packages:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.19
 
+  /@babel/runtime@7.22.15:
+    resolution: {integrity: sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: false
+
   /@cloudflare/kv-asset-handler@0.2.0:
     resolution: {integrity: sha512-MVbXLbTcAotOPUj0pAMhVtJ+3/kFkwJqc5qNOleOZTv6QkZZABDMS21dSrSlVswEHwrpWC03e4fWytjqKvuE2A==}
     dependencies:
@@ -1186,6 +1196,13 @@ packages:
     resolution: {integrity: sha512-ND9qDTLc6diwj+Xe5cdAgVTbLVdXbtxTJRXRhli8Mowuaan+0EJOtdqJ0QCHNSSPyoXGx9HX2/VMnKeC34AChA==}
     dev: true
 
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.22.15
+    dev: false
+
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -2328,6 +2345,10 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /regenerator-runtime@0.14.0:
+    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
+    dev: false
+
   /regexparam@2.0.1:
     resolution: {integrity: sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==}
     engines: {node: '>=8'}
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 7ae707d..5c8fa8d 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -1,9 +1,21 @@
+import { browser } from '$app/environment';
 import { readable } from 'svelte/store';
 
 export const now = readable(new Date(), set => {
 	const interval = setInterval(() => {
 		set(new Date());
-	}, 100);
+	}, 1000);
 
 	return () => clearInterval(interval);
 });
+
+export const fastNow = readable(new Date(), set => {
+	if (!browser) return;
+
+	let id = requestAnimationFrame(function update() {
+		set(new Date());
+		id = requestAnimationFrame(update);
+	});
+
+	return () => cancelAnimationFrame(id);
+});
diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte
index 5a2f0f1..d8c8446 100644
--- a/src/routes/(home)/+page.svelte
+++ b/src/routes/(home)/+page.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+	import differenceInYears from 'date-fns/differenceInYears';
+
+	import { now } from '$lib/stores';
+
 	import Clock from './Clock.svelte';
 	import DiscordInfo from './DiscordInfo.svelte';
 	import SocialLink from './SocialLink.svelte';
@@ -11,6 +15,10 @@
 	import Spotify from '$lib/components/icons/Spotify.svelte';
 	import Twitter from '$lib/components/icons/Twitter.svelte';
 	import Meta from '$lib/components/Meta.svelte';
+
+	const birthday = new Date('2006-05-17T10:06:00.000Z');
+
+	$: age = differenceInYears($now, birthday);
 </script>
 
 <Meta title="Daniel" description="My portfolio and personal website." />
@@ -19,7 +27,9 @@
 	<h1 class="text-6xl font-black">Daniel!</h1>
 
 	<p class="mt-4 text-gray-400">
-		Hey! I'm <b>Daniel</b>, a 17-year-old developer from
+		Hey! I'm <b>Daniel</b>,
+		{age === 18 ? 'an' : 'a'}
+		{age}-year-old developer from
 		<b>Atlanta, Georgia</b>.
 	</p>
 
diff --git a/src/routes/(home)/SpotifyInfo.svelte b/src/routes/(home)/SpotifyInfo.svelte
index a00f22f..b8b080e 100644
--- a/src/routes/(home)/SpotifyInfo.svelte
+++ b/src/routes/(home)/SpotifyInfo.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type { NowPlayingResponse } from '$lib/types';
+	import { fastNow } from '$lib/stores';
 
 	import MusicalNote from '$lib/components/icons/MusicalNote.svelte';
 	import Pause from '$lib/components/icons/Pause.svelte';
 	import Play from '$lib/components/icons/Play.svelte';
-	import { now } from '$lib/stores';
 
 	let data: NowPlayingResponse | undefined;
 	let lastFetched = 0;
@@ -31,7 +31,7 @@
 
 	$: progress = data?.track
 		? clamp(
-				(data.progessMs + ($now.getTime() - lastFetched)) /
+				(data.progessMs + ($fastNow.getTime() - lastFetched)) /
 					data.track.duration_ms
 		  )
 		: 0;