feat(main): add real-time fractional age counter

apps/main/src/constants.ts

@@ -1 +1,6 @@
 export const discordInviteLink = "https://discord.gg/aQqamSCUcS"
+
+// my birthday :D
+export const birthYear = 2002
+export const birthMonth = 7
+export const birthDate = 30

apps/main/src/routes/+page.svelte

@@ -1,32 +1,57 @@
-<script>
+<script lang="ts">
     import Discord from "@inqling/svelte-icons/simple-icons/discord.svelte"
     import GitHub from "@inqling/svelte-icons/simple-icons/github.svelte"
     import Gmail from "@inqling/svelte-icons/simple-icons/gmail.svelte"
     import Mastodon from "@inqling/svelte-icons/simple-icons/mastodon.svelte"
     import Twitter from "@inqling/svelte-icons/simple-icons/twitter.svelte"
     import YouTube from "@inqling/svelte-icons/simple-icons/youtube.svelte"
+    import { onMount } from "svelte"
 
     import HandWave from "../components/HandWave.svelte"
-    import { discordInviteLink } from "../constants"
+    import {
+        birthDate,
+        birthMonth,
+        birthYear,
+        discordInviteLink,
+    } from "../constants"
 
-    function myAge() {
+    let age = 0
-        const now = new Date()
-        const birth = new Date("2002-07-30") // my birthday :D
 
-        const age = now.getFullYear() - birth.getFullYear()
+    function updateAge() {
+        const now = Date.now()
+        const date = new Date()
+        const year = date.getFullYear()
 
-        let month = now.getMonth()
+        // integer calculation
-        let birthMonth = birth.getMonth()
 
-        if (
+        const isOverBirthDay =
-            birthMonth > month ||
+            birthMonth > date.getMonth() + 1 ||
-            (birthMonth === month && birth.getDate() >= now.getDate())
+            (birthMonth === date.getMonth() + 1 && birthDate >= date.getDate())
-        ) {
+        const ageInt = year - birthYear - (isOverBirthDay ? 1 : 0)
-            return age - 1
+
+        // decimal calculation
+
+        const msThisYear = Date.UTC(year, 0, 0)
+        const msThisBD = Date.UTC(year, birthMonth - 1, birthDate)
+        // number of milliseconds since the beginning of this year
+        const msSinceThisYear = now - msThisYear
+        // number of milliseconds from the beginning of this year to my birthday
+        const msToBD = msThisBD - msThisYear
+        const ageDecimal = msSinceThisYear / msToBD
+
+        age = ageInt + ageDecimal
     }
 
-        return age
+    updateAge() // run immediately the first time
+    onMount(() => {
+        const interval = setInterval(() => {
+            updateAge() // first called after the delay
+        }, 50)
+
+        return () => {
+            clearInterval(interval)
         }
+    })
 </script>
 
 <img
@@ -42,8 +67,8 @@
 <h2>Who am I?</h2>
 
 <span>
-    I am a <b>{myAge()} years old</b> college student studying computer science in
+    I am a <b>{age.toFixed(8)} years old</b> college student studying computer science
-    Seoul, South Korea.
+    in Seoul, South Korea.
 </span>
 
 <div class="mt-12 flex flex-wrap justify-center">