feat: braindeaded

Added eew sound effect
Refactored alot
No node timers, so sad ;<
Still dont know how to reset eew
WHY IS THE MAP SCROLLING WHEN AUTO ZOOMED

src/App.vue

@@ -16,12 +16,13 @@ import type {
   Rts,
   Station,
 } from "./scripts/class/api";
-import type { EewEvent } from "./types";
+import type { EewEvent, RtsIntensity } from "./types";
 
 defineProps<{
   reports: PartialReport[];
   stations: Ref<Record<string, Station>>;
   rts: Ref<Rts>;
+  rtsInt: Ref<RtsIntensity[]>;
   currentEewIndex: Ref<string>;
   eew: Record<string, EewEvent>;
 }>();
@@ -60,7 +61,7 @@ const changeReport = async (report: PartialReport) => {
 NavigationBar(:current-view="currentView", :change-view="changeView")
 TimeDisplay(:timestamp="rts.value.time")
 MapView(:current-view="currentView", :reports="reports", :active-report="activeReport", :stations="stations", :rts="rts", :eew="eew", :current-eew-index="currentEewIndex", :change-report="changeReport")
-InfoBox(:current-view="currentView", :eew="eew", :current-eew-index="currentEewIndex.value")
+InfoBox(:current-view="currentView", :stations="stations", :rts="rts", :rts-int="rtsInt", :eew="eew", :current-eew-index="currentEewIndex.value")
 ReportBox(:current-view="currentView", :report="activeReport", :handle-hide-report-box="handleHideReportBox")
 ReportListBox(:current-view="currentView", :reports="reports", :change-report="changeReport")
 </template>

src/components/component/MapEew.vue

@@ -13,12 +13,12 @@ const props = defineProps<{
 }>();
 
 const eewTemplate = ref<InstanceType<typeof EEW>[]>([]);
-let intervals: Record<string, NodeJS.Timeout> = {};
+let intervals: Record<string, number> = {};
 
 onMounted(() => {
   let crossState = true;
 
-  intervals.cross = setInterval(() => {
+  intervals.cross = window.setInterval(() => {
     crossState = !crossState;
     for (const eew of eewTemplate.value) {
       eew.redrawCross(crossState);
@@ -53,13 +53,13 @@ onMounted(() => {
 
   focusEew();
 
-  intervals.focus = setInterval(focusEew, 5_000);
+  intervals.focus = window.setInterval(focusEew, 5_000);
 });
 
 onUnmounted(() => {
-  clearInterval(intervals.wave);
-  clearInterval(intervals.cross);
-  clearInterval(intervals.focus);
+  window.clearInterval(intervals.wave);
+  window.clearInterval(intervals.cross);
+  window.clearInterval(intervals.focus);
 
   props.map.setLayoutProperty("county", "visibility", "visible");
   props.map.setLayoutProperty("town", "visibility", "none");

src/components/component/MapRtsBox.vue

@@ -12,19 +12,19 @@ const props = defineProps<{
 }>();
 
 let show = true;
-let blink: NodeJS.Timeout;
+let blink: number;
 
 onMounted(() => {
   props.map.setLayoutProperty("box", "visibility", "visible");
-  blink = setInterval(() => {
+  blink = window.setInterval(() => {
     props.map.setLayoutProperty("box", "visibility", show ? "none" : "visible");
     show = !show;
   }, 500);
 });
 
 onUnmounted(() => {
   props.map.setLayoutProperty("box", "visibility", "none");
-  clearInterval(blink);
+  window.clearInterval(blink);
 });
 </script>
 

src/components/component/ReportIntensityGroup.vue

@@ -8,9 +8,9 @@ defineProps<{ area: AreaIntensity }>();
 
 <template lang="pug">
 .report-intensity-group.expanded
-  ReportIntensityItem(:station="{ station: area.area, int: area.int }")
+  ReportIntensityItem(:station="area.area", :int="area.int")
   .report-intensity-member
-    ReportIntensityItem(v-for="station in area.stations" :key="station.station" :station="station")
+    ReportIntensityItem(v-for="s in area.stations" :key="s.station" :station="s.station", :int="s.int")
 </template>
 
 <style lang="scss" scoped>

src/components/component/ReportIntensityItem.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import IntensityCapsule from "./IntensityCapsule.vue";
 
-import type { StationIntensity } from "../../scripts/class/api";
-
 defineProps<{
-  station: Omit<StationIntensity, "lat" | "lon"> & { area?: string };
+  area?: string;
+  station: string;
+  int: number;
 }>();
 </script>
 
 <template lang="pug">
 .report-intensity-item
-  IntensityCapsule(:int="station.int")
-  span.location.area(v-if="station?.area") {{ station.area }}
-  span.location.station(v-if="station.station") {{ station.station }}
+  IntensityCapsule(:int="int")
+  span.location.area(v-if="area") {{ area }}
+  span.location.station(v-if="station") {{ station }}
 </template>
 
 <style lang="scss" scoped>

src/components/component/RtsMarker.vue

@@ -4,7 +4,6 @@ import { onMounted, onUnmounted, ref } from "vue";
 
 import type { RtsStation, Station } from "../../scripts/class/api";
 import { pga } from "../../scripts/helper/color";
-import code from "../../assets/json/code.json";
 
 const props = defineProps<{
   map: maplibregl.Map;
@@ -71,8 +70,8 @@ const getIntensityColor = (rts?: RtsStation) => {
   .rts-marker-body(:class="getIntensityClass(rts)", :style="getIntensityColor(rts)")
     .rts-marker-detail
       .rts-marker-detail-title
-        span {{ code[station.info[0].code]?.city ?? "境外" }}
-        span {{ code[station.info[0].code]?.town ?? "" }}
+        span {{ station.city ?? "境外" }}
+        span {{ station.town ?? "" }}
         .station-identifier 
           span.station-net {{ station.net }}
           span.station-id {{ stationId }}