feat: UIをつくってる

src/App.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
+import Footer from './views/Footer.svelte';
 import RealTimeSindo from './views/RealTimeSindo/index.svelte'
 </script>
-<div>
-  <RealTimeSindo />
+<div class="flex flex-col h-dvh">
+  <div class="grow">
+    content content
+  </div>
+  <hr />
+  <div>
+    <Footer />
+  </div>
 </div>

src/style.css

@@ -1 +1,9 @@
 @import url('@unocss/reset/tailwind.css');
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

src/utils/client/time.ts

@@ -0,0 +1,6 @@
+export const getServerTime = async (): Promise<Date> => {
+  const json = await fetch(`${import.meta.env.VITE_EQUAKE_API_URL}/time`).then(
+    (r) => r.json(),
+  )
+  return new Date(Date.parse(json.string))
+}

src/views/Footer.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import { getServerTime } from '../utils/client/time';
+  import News from './News.svelte'
+
+  // hh:mm:ss
+  const formatter = new Intl.DateTimeFormat('ja-JP', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+
+  let isDestroyed = false
+  let time: Date
+  onMount(() => {
+    const update = async () => {
+      time = await getServerTime()
+      if (isDestroyed) {
+        return
+      }
+      setTimeout(update, 100)
+    }
+    update()
+  })
+  onDestroy(() => {
+    isDestroyed = true
+  })
+
+  $: formattedTime = formatter.format(time)
+</script>
+<div class="flex items-center">
+  <News />
+  <div class="border-l-2 p-2 m-2 text-4xl font-mono">
+    {formattedTime}
+  </div>
+</div>

src/views/MainContent/index.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">
+  
+</script>

src/views/News.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte'
+
+  // 下に流れてるニュース
+
+  const content = 'この放送は、eQuake Live が提供しています。この文字列はテスト用であり、本来はニュースを放送します。この放送は、eQuake Live が提供しています。この文字列はテスト用であり、本来はニュースを放送します。'
+
+  let divRef: HTMLDivElement
+
+  let isDestroyed = false
+  onMount(() => {
+    let lastScrollLeft = 0
+    const update = async () => {
+      divRef.scrollLeft += 1
+      if (divRef.scrollLeft === lastScrollLeft) {
+        divRef.scrollTo({
+          left: 0,
+          behavior: 'smooth',
+        })
+        setTimeout(() => {
+          update()
+        }, 1000)
+        return
+      }
+      lastScrollLeft = divRef.scrollLeft
+
+      if (isDestroyed) {
+        return
+      }
+      requestAnimationFrame(update)
+    }
+    update()
+  })
+  onDestroy(() => {
+    isDestroyed = true
+  })
+</script>
+<div bind:this={divRef} class="px-2 no-wrap text-xl w-full overflow-scroll hide-scrollbar whitespace-nowrap">
+  {content}
+</div>

src/views/RealTimeSindo/index.svelte

@@ -10,9 +10,9 @@ let projection: d3.GeoProjection
 onMount(async () => {
   const geojson = await fetch('/japan.geojson').then((res) => res.json())
 
-  const w = 500
-  const h = 500
-  const scale = 1200
+  const w = 600
+  const h = 600
+  const scale = 900
 
   projection = d3
     .geoMercator()
@@ -60,15 +60,19 @@ $: {
           .append('circle')
           .attr('cx', x)
           .attr('cy', y)
-          .attr('r', 5)
           .attr('fill', 'red')
-          .attr('class', 'fill-red-100')
+          .attr('class', 'opacity-50')
         points.set(id, circle)
       }
 
       const point = points.get(id)
       if (!point) continue
-      point.attr('r', (s.sindo + 4) * 2)
+      const normlizedSindo = (s.sindo + 3) / 10 // 0-1
+
+      // min: 2, max: 10
+      const r = 2 + (10 - 2) * normlizedSindo
+      point.attr('r', r)
+        .attr('fill', `hsl(${normlizedSindo * 240 + 120}deg, 100%, 50%)`)
     }
   }
 }