chore: staged changes

rayriffy · rayriffy · commit 1614d27a345c · 2024-04-28T21:06:33.000+09:00
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@fontsource-variable/noto-sans-thai": "^5.0.14",
     "@fontsource/k2d": "^5.0.19",
     "@neodrag/svelte": "^2.0.6",
+    "@types/apple-mapkit-js-browser": "^5.65.7",
     "astro": "^4.6.1",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/packlets/front/map.astro b/src/packlets/front/map.astro
@@ -0,0 +1,39 @@
+<div id="map" class="h-80"></div>
+
+<script>
+  window.addEventListener('load', function () {
+    mapkit.init({
+      authorizationCallback: done => {
+        fetch('https://api.rayriffy.com/appleMaps/token')
+          .then(res => res.text())
+          .then(done)
+      },
+      language: 'en',
+    })
+
+    const map = new mapkit.Map('map')
+    const coordinate = new mapkit.Coordinate(13.6869421, 100.6112208)
+    const region = new mapkit.CoordinateRegion(
+      coordinate,
+      new mapkit.CoordinateSpan(0.1, 0.11)
+    )
+
+    map.cameraZoomRange = new mapkit.CameraZoomRange(500, 75000)
+    map.cameraBoundary = region
+    map.region = region
+
+    map.showItems([
+      new mapkit.MarkerAnnotation(coordinate, {
+        title: 'True Digital Park West',
+        subtitle: 'Grand Hall, 3rd Fl.',
+      }),
+    ])
+  })
+</script>
+
+<script
+  src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"
+  crossorigin
+  async
+  data-libraries="services,full-map"
+  slot="body-end"></script>
diff --git a/src/packlets/front/schedule.astro b/src/packlets/front/schedule.astro
@@ -0,0 +1,3 @@
+<section class="bg-เหล็กไหล py-12 text-white">
+  <h1 class="text-center text-4xl font-bold">Schedule</h1>
+</section>
diff --git a/src/packlets/layouts/base.astro b/src/packlets/layouts/base.astro
@@ -1,6 +1,7 @@
 ---
 import '@fontsource/k2d'
 import '@fontsource-variable/noto-sans-thai'
+import Footer from './footer.astro'
 
 interface Props {
   title: string
@@ -21,6 +22,8 @@ const { title } = Astro.props
   </head>
   <body class="antialiased">
     <slot />
+    <Footer />
+    <slot name="body-end" />
   </body>
 </html>
 
diff --git a/src/packlets/layouts/footer.astro b/src/packlets/layouts/footer.astro
@@ -0,0 +1,19 @@
+<footer
+  class="flex h-40 items-end justify-between bg-นิลกาฬ p-4 text-white lg:p-8 lg:text-lg"
+>
+  <div>Crafted by 👩‍💻 🧑‍🎨 🧙 🦹‍♀️ & more.</div>
+  <a
+    href="https://creatorsgarten.org"
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label="Creatorsgarten"
+  >
+    <img
+      src="https://creatorsgarten.org/images/creatorsgarten.svg"
+      alt=""
+      loading="lazy"
+      class="h-8 lg:h-12"
+      style="filter: invert(1);"
+    />
+  </a>
+</footer>
diff --git a/src/packlets/playground/balloon.svelte b/src/packlets/playground/balloon.svelte
@@ -32,28 +32,27 @@
     (vertical ? vertical - size / 2 : -size) + window.innerHeight / 2
   let mountedAt = performance.now()
 
-  const frame = () => {
-    if (ended) return
-
-    const time = (performance.now() - mountedAt) / 1000
-    const distance = 0.5 * acceleration * time ** 2
+  onMount(() => {
+    let frame = requestAnimationFrame(function loop() {
+      if (ended) return
 
-    // calculate new height based on initial height and distance, would fly up
-    currentHeight = currentHeight + distance
+      const time = (performance.now() - mountedAt) / 1000
+      const distance = 0.5 * acceleration * time ** 2
 
-    // stop when it overshoots viewport height
-    if (-currentHeight - size * 2 > window.innerHeight) {
-      ended = true
-    }
+      // calculate new height based on initial height and distance, would fly up
+      currentHeight = currentHeight + distance
 
-    requestAnimationFrame(frame)
-  }
+      // stop when it overshoots viewport height
+      if (-currentHeight - size * 2 > window.innerHeight) {
+        ended = true
+      }
 
-  onMount(() => {
-    requestAnimationFrame(frame)
+      frame = requestAnimationFrame(loop)
+    })
 
     return () => {
       ended = true
+      cancelAnimationFrame(frame)
     }
   })
 
diff --git a/src/packlets/playground/date.svelte b/src/packlets/playground/date.svelte
diff --git a/src/packlets/playground/location.svelte b/src/packlets/playground/location.svelte
diff --git a/src/packlets/playground/playground.svelte b/src/packlets/playground/playground.svelte
@@ -2,6 +2,7 @@
   import type { MouseEventHandler } from 'svelte/elements'
 
   import Balloon from './balloon.svelte'
+  import { onMount } from 'svelte'
 
   interface Item {
     id: string
@@ -12,22 +13,38 @@
 
   let balloons: Item[] = []
 
-  const handleEnd = (event: CustomEvent<string>) => {
-    balloons = balloons.filter(balloon => balloon.id !== event.detail)
-  }
-
-  const handleClick: MouseEventHandler<HTMLElement> = e => {
-    const size = Math.floor(Math.random() * 200) + 60
+  const addBalloon = (x: number, y = 0) => {
+    const size = Math.floor(Math.random() * 300300) + 60
 
     const item: Item = {
       id: (Math.random() + 1).toString(36).substring(7),
       size,
-      horizontal: e.pageX - size / 2,
-      vertical: -window.outerHeight + e.pageY + size,
+      horizontal: x - size / 2,
+      vertical: y + size,
     }
 
     balloons = [...balloons, item]
   }
+
+  const handleEnd = (event: CustomEvent<string>) => {
+    balloons = balloons.filter(balloon => balloon.id !== event.detail)
+  }
+
+  const handleClick: MouseEventHandler<HTMLElement> = e => {
+    addBalloon(e.pageX, -window.outerHeight + e.pageY)
+  }
+
+  onMount(() => {
+    // randomly generate balloons
+    const interval = setInterval(() => {
+      addBalloon(Math.floor(Math.random() * window.outerWidth))
+      addBalloon(Math.floor(Math.random() * window.outerWidth))
+      addBalloon(Math.floor(Math.random() * window.outerWidth))
+      addBalloon(Math.floor(Math.random() * window.outerWidth))
+    }, 600)
+
+    return () => clearInterval(interval)
+  })
 </script>
 
 <section
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,9 +1,13 @@
 ---
 import Base from '$layouts/base.astro'
-import Playground from '$front/playground.svelte'
-import Date from '$front/date.svelte'
-import Location from '$front/location.svelte'
+
 import Center from '$front/center.astro'
+import Schedule from '$front/schedule.astro'
+import Map from '$front/map.astro'
+
+import Playground from '$playground/playground.svelte'
+import Date from '$playground/date.svelte'
+import Location from '$playground/location.svelte'
 ---
 
 <Base title="JavaScript Bangkok 2.0.0">
@@ -12,5 +16,6 @@ import Center from '$front/center.astro'
     <Location client:idle />
     <Center />
   </Playground>
-  <section class="bg-ขาบดำ py-16"></section>
+  <Map />
+  <Schedule />
 </Base>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<section class="bg-เหล็กไหล py-12 text-white">`
	`2`	`+ <h1 class="text-center text-4xl font-bold">Schedule</h1>`
	`3`	`+</section>`