refactor: change ticks to the more modern way

Author: Domiko7

src/ts/eew.ts

@@ -1,45 +1,45 @@
 
-import { Wave } from './utils/wave/wave'
-import { getTtjbTravelTimeTable } from './utils/wave/taup'
-//import { notify } from './utils/notification'
-import { flyZoom, placeMarker, deleteMarker, map } from './utils/map'
-import { speak, playSound } from './utils/speaker'
-import { calculateElapsedTimeOfTheWave, parseTime } from './utils/time'
-import { changeEvent, removeEvent, addEvent, switchEvents } from './utils/event'
-import { homeLon, homeLat } from './utils/map'
-import i18n from 'i18next'
-
-import eqSound from '../assets/sounds/eq.mp3'
-import updateSound from '../assets/sounds/update.mp3'
-import eew2Sound from '../assets/sounds/eew2.mp3'
-import eew5Sound from '../assets/sounds/eew5.wav'
+import { Wave } from "./utils/wave/wave"
+import { getTtjbTravelTimeTable } from "./utils/wave/taup"
+//import { notify } from "./utils/notification"
+import { flyZoom, placeMarker, deleteMarker, map } from "./utils/map"
+import { speak, playSound } from "./utils/speaker"
+import { calculateElapsedTimeOfTheWave, parseTime } from "./utils/time"
+import { changeEvent, removeEvent, addEvent, switchEvents } from "./utils/event"
+import { homeLon, homeLat } from "./utils/map"
+import i18n from "i18next"
+
+import eqSound from "../assets/sounds/eq.mp3"
+import updateSound from "../assets/sounds/update.mp3"
+import eew2Sound from "../assets/sounds/eew2.mp3"
+import eew5Sound from "../assets/sounds/eew5.wav"
 
 
 export const shindoToIntensity = new Map([
-  ['1', 1],
-  ['2', 1],
-  ['3', 3],
-  ['4', 4],
-  ['5-', 5],
-  ['5+', 6],
-  ['6-', 7],
-  ['6+', 8],
-  ['7', 9]
+  ["1", 1],
+  ["2", 1],
+  ["3", 3],
+  ["4", 4],
+  ["5-", 5],
+  ["5+", 6],
+  ["6-", 7],
+  ["6+", 8],
+  ["7", 9]
 ]);
 
 export const numericIntensityToMMI = new Map([
-  [1, 'Ⅰ'],
-  [2, 'Ⅱ'],
-  [3, 'Ⅲ'],
-  [4, 'Ⅳ'],
-  [5, 'Ⅴ'],
-  [6, 'Ⅵ'],
-  [7, 'Ⅶ'],
-  [8, 'Ⅷ'],
-  [9, 'Ⅸ'],
-  [10, 'Ⅹ'],
-  [11, 'Ⅺ'],
-  [12, 'Ⅻ']
+  [1, "Ⅰ"],
+  [2, "Ⅱ"],
+  [3, "Ⅲ"],
+  [4, "Ⅳ"],
+  [5, "Ⅴ"],
+  [6, "Ⅵ"],
+  [7, "Ⅶ"],
+  [8, "Ⅷ"],
+  [9, "Ⅸ"],
+  [10, "Ⅹ"],
+  [11, "Ⅺ"],
+  [12, "Ⅻ"]
 ]);
 
 interface WarnArea {
@@ -94,8 +94,8 @@ const addEEW = (data: EewData): void => {
     const sWaveTime = ttjbTravelTimeTable[(Math.round(depth / 10) * 10).toString()].S;
     const pWaveTime = ttjbTravelTimeTable[(Math.round(depth / 10) * 10).toString()].P;
 
-    const sWave = new Wave(map, Number(sWaveTime), lat, lon, calculateElapsedTimeOfTheWave(originTime, announcedTime, type, author), `${id}-S`, 'S');
-    const pWave = new Wave(map, Number(pWaveTime), lat, lon, calculateElapsedTimeOfTheWave(originTime, announcedTime, type, author), `${id}-P`, 'P');
+    const sWave = new Wave(map, Number(sWaveTime), lat, lon, calculateElapsedTimeOfTheWave(originTime, announcedTime, type, author), `${id}-S`, "S");
+    const pWave = new Wave(map, Number(pWaveTime), lat, lon, calculateElapsedTimeOfTheWave(originTime, announcedTime, type, author), `${id}-P`, "P");
 
     sWave?.addWaveFeature();
     pWave?.addWaveFeature();
@@ -106,16 +106,16 @@ const addEEW = (data: EewData): void => {
 
 
 
-  speak(1.1, i18n.language, i18n.t('eewLocated', { location: location }));
+  speak(1.1, i18n.language, i18n.t("eewLocated", { location: location }));
 
   setTimeout(() => {
-    speak(1.2, i18n.language, i18n.t('eewReport', { number: reportNumber, mag: mag, depth: depth, intensity: intensity }));
-    //speak(1.2, i18n.language, i18n.t('eewIntensity', { intensity: intensity }));
+    speak(1.2, i18n.language, i18n.t("eewReport", { number: reportNumber, mag: mag, depth: depth, intensity: intensity }));
+    //speak(1.2, i18n.language, i18n.t("eewIntensity", { intensity: intensity }));
   }, 2000);
 
 
-  console.log('added');
-  placeMarker(lon, lat, '60px', '60px', id, 'images/epicenter.png');
+  console.log("added");
+  placeMarker(lon, lat, "60px", "60px", id, "images/epicenter.png");
   addEvent(title, reportNumber, intensity, location, originTime, mag, depth);
 
   if (earthquakes.size > 1) {
@@ -149,13 +149,13 @@ const updateEEW = (data: EewData): void => {
   });
 
   deleteMarker(id);
-  placeMarker(lon, lat, '60px', '60px', id, 'images/epicenter.png');
-  speak(1.2, i18n.language, i18n.t('eewReport', { number: reportNumber, mag: mag, depth: depth, intensity: intensity }));
-  //speak(1.2, i18n.language, i18n.t('eewIntensity', { intensity: intensity }));
+  placeMarker(lon, lat, "60px", "60px", id, "images/epicenter.png");
+  speak(1.2, i18n.language, i18n.t("eewReport", { number: reportNumber, mag: mag, depth: depth, intensity: intensity }));
+  //speak(1.2, i18n.language, i18n.t("eewIntensity", { intensity: intensity }));
   changeEvent(title, reportNumber, intensity, location, originTime, mag, depth);
   playSound(updateSound);
 
-  console.log('changed');
+  console.log("changed");
 };
 
 
@@ -168,7 +168,7 @@ export const deleteEEW = (id: string, waveID: string): void => {
     currentData?.pWave.deleteWaveFeature();
     flyZoom(homeLon, homeLat, 5, 1);
     earthquakes.delete(id);
-    console.log('deleted');
+    console.log("deleted");
 
     clearInterval(interval);
     if (earthquakes.size === 0) {
@@ -208,7 +208,7 @@ export const eew = (data: EewData) => {
 
   setInterval(() => {
     const currentData = earthquakes.get(id);
-    if (currentData && Date.now() - currentData['lastReport'] > 180000) {
+    if (currentData && Date.now() - currentData["lastReport"] > 180000) {
       deleteEEW(id, `${id}-${Number(reportNumber)}`);
     }
   }, 10000);

src/ts/er.ts

@@ -1,4 +1,4 @@
-import { updatePastEvents } from './utils/event'
+import { updatePastEvents } from "./utils/event"
 
 
 

src/ts/utils/color.ts

@@ -1,57 +1,57 @@
 
 export const getColorShindo = (intensity: string) => {
   switch(intensity) {
-    case '1': 
-      return '#3298c0';
-    case '2': 
-      return '#4bbe9b';
-    case '3':
-      return '#f5c64b';
-    case '4':
-      return '#fe993a';
-    case '5-':
-      return '#da2815';
-    case '5+':
-      return '#ca1a19';
-    case '6-':
-      return '#850a55';
-    case '6+':
-      return '#7e0466';
-    case '7':
-      return '#52068a';
+    case "1": 
+      return "#3298c0";
+    case "2": 
+      return "#4bbe9b";
+    case "3":
+      return "#f5c64b";
+    case "4":
+      return "#fe993a";
+    case "5-":
+      return "#da2815";
+    case "5+":
+      return "#ca1a19";
+    case "6-":
+      return "#850a55";
+    case "6+":
+      return "#7e0466";
+    case "7":
+      return "#52068a";
   }
-  return '#464646ff';
+  return "#464646ff";
 };
 
 export const getColorPga = (pga: number) => {
   if (pga <= 0.05) {
-    return '#0007c5ff';
+    return "#0007c5ff";
   } else if (pga <= 0.1) {
-    return '#0024dd';
+    return "#0024dd";
   } else if (pga <= 0.2) {
-    return '#0065c3ff';
+    return "#0065c3ff";
   } else if (pga <= 0.5) {
-    return '#09bf8d';
+    return "#09bf8d";
   } else if (pga <= 1) {
-    return '#1aeb5b';
+    return "#1aeb5b";
   } else if (pga <= 2) {
-    return '#5ff225';
+    return "#5ff225";
   } else if (pga <= 5) {
-    return '#adf43bff';
+    return "#adf43bff";
   } else if (pga <= 10) {
-    return '#e5f43bff';
+    return "#e5f43bff";
   } else if (pga <= 20) {
-    return '#ebc052ff';
+    return "#ebc052ff";
   } else if (pga <= 50) {
-    return '#e17d26ff';
+    return "#e17d26ff";
   } else if (pga <= 100) {
-    return '#eb6c2cff';
+    return "#eb6c2cff";
   } else if (pga <= 200) {
-    return '#eb4f2cff';
+    return "#eb4f2cff";
   } else if (pga <= 500) {
-    return '#ee291fff';
+    return "#ee291fff";
   } else {
-    return '#880605';
+    return "#880605";
   }
 };
 

src/ts/utils/debugInfo.ts

@@ -1,21 +1,21 @@
 
 
 const setVersion = () => {
-  const infoVersionText = document.querySelector<HTMLElement>('.debug-info__version-text');
+  const infoVersionText = document.querySelector<HTMLElement>(".debug-info__version-text");
   if (!infoVersionText) return;
 
   infoVersionText.textContent = __APP_VERSION__;
-  infoVersionText.style.color = '#077fe9ff';
+  infoVersionText.style.color = "#077fe9ff";
 };
 
 export const setConnection = (el: string, isConnected: boolean) => {
-  const infoServerConnectionText = document.querySelector<HTMLElement>('.' + el);
+  const infoServerConnectionText = document.querySelector<HTMLElement>("." + el);
   if (!infoServerConnectionText) return;
 
   if (isConnected) {
-    infoServerConnectionText.style.color = '#51ff00';
+    infoServerConnectionText.style.color = "#51ff00";
   } else {
-    infoServerConnectionText.style.color = '#ff0303';
+    infoServerConnectionText.style.color = "#ff0303";
   }
 
 };
@@ -25,9 +25,9 @@ export const startFpsCounter = () => {
   let frames = 0;
   let fps = 0;
 
-  const infoFpsText = document.querySelector<HTMLElement>('.debug-info__fps-text');
+  const infoFpsText = document.querySelector<HTMLElement>(".debug-info__fps-text");
   if (!infoFpsText) return;
-  infoFpsText.style.color = '#077fe9ff';
+  infoFpsText.style.color = "#077fe9ff";
 
   const updateFPS = () => {
     const now = performance.now();

src/ts/utils/speaker.ts

@@ -14,7 +14,7 @@ export const playSound = (sound: string) => {
   activeSounds.add(audio);
 
   audio.play()
-    .catch(err => console.error('Failed to play sound:', err))
+    .catch(err => console.error("Failed to play sound:", err))
     .finally(() => {
       audio.onended = () => activeSounds.delete(audio);
     });

src/ts/utils/time.ts

@@ -3,14 +3,14 @@
 export const convertTimeToHoursMinutes = (time: string) => {
   const timeString = time;
   const date = new Date(timeString);
-  const hours = String(date.getHours()).padStart(2, '0');
-  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
   const hhmm = `${hours}:${minutes}`;
   return hhmm;
 };
 
 export const parseJMAtime = (time: string) => {
-  const formattedTime = time.replace(/\//g, '-');
+  const formattedTime = time.replace(/\//g, "-");
 
   const timeParsed = new Date(formattedTime);
 
@@ -23,9 +23,9 @@ export const parseExptechTime = (time: string) => {
 };
 
 export const parseTime = (time: string, author: string, type: string) => {
-  if (type === 'jma_eew' && author === 'wolfx') {
+  if (type === "jma_eew" && author === "wolfx") {
     return parseJMAtime(time);
-  } else if (author === 'exptech') {
+  } else if (author === "exptech") {
     return parseExptechTime(time);
   }
 };
@@ -41,20 +41,20 @@ export const calculateElapsedTimeOfTheWave = (originTime: string, announcedTime:
 
 export const showTime = () => {
   const date = new Date();
-  const timeEl = document.getElementById('time');
+  const timeEl = document.getElementById("time");
 
   if (timeEl) {
     const options: Intl.DateTimeFormatOptions = {
-      timeZone: 'Asia/Tokyo',
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
+      timeZone: "Asia/Tokyo",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
     };
 
-    const jstString = new Intl.DateTimeFormat('ja-JP', options).format(date);
+    const jstString = new Intl.DateTimeFormat("ja-JP", options).format(date);
 
     timeEl.textContent = `${jstString} JST`;
   }

src/ts/utils/wave/taup.ts

@@ -7,7 +7,7 @@ type TtjbTravelTimeTableEntry = {
 type TtjbTravelTimeTable = Record<string, TtjbTravelTimeTableEntry>;
 
 export const getTtjbTravelTimeTable = async () => {
-  const response = await fetch('/taup/ttjb.json');
+  const response = await fetch("/taup/ttjb.json");
   return (await response.json()) as TtjbTravelTimeTable;
 };