feat: sounds

src/App.vue

@@ -36,14 +36,6 @@ export default defineComponent({
     setInterval(() => {
       this.apiStore.fetchActiveData();
     }, 30000);
-  },
-
-  methods: {
-    testAudio() {
-      const audio = new Audio('../public/pragotron.mp3');
-      audio.play();
-      audio.loop = true;
-    }
   }
 });
 </script>

src/data/routeValues.json

@@ -1,129 +0,0 @@
-[
-  "",
-  "Aleksandrów Kujawski",
-  "Arkadia Zdrój",
-  "Babimost",
-  "Bargowice",
-  "Bargowice Zachód",
-  "Horz Zdrój",
-  "Bełchów",
-  "Blaszki",
-  "Borki",
-  "Brakowice",
-  "Buczek",
-  "Buk",
-  "Bystra Woda",
-  "Cenorzyce Nowe",
-  "Chełmik Wołowski",
-  "Chlorkowice",
-  "Cis",
-  "Czerepy",
-  "Czermin",
-  "Dobrzyca DTA",
-  "Dobrzyca DTB",
-  "Dobrzyca DTC",
-  "Dobrzyniec",
-  "Dobrzyniec Mącice",
-  "Drzewko",
-  "Dziewoszyce",
-  "Falewo",
-  "Glinnik",
-  "Grabów Miasto",
-  "Grabów Wieś",
-  "Góra Włodowska",
-  "Głogowo",
-  "Głębce",
-  "Głęboszów",
-  "Imielin",
-  "Jordanowo",
-  "Karszynek",
-  "Kcynia",
-  "Kieły",
-  "Kolsko",
-  "Kowalewo",
-  "Krzemienice",
-  "Krzęcz",
-  "Kszęty",
-  "Kudowa Zdrój",
-  "Głowno",
-  "Domaniewice",
-  "Ozorków",
-  "Chociszew",
-  "Skrzynki",
-  "Wykno",
-  "Żywiec",
-  "Węgierska Górka",
-  "Łodygowice",
-  "Wilkowice Bystra",
-  "BB Leszczyny",
-  "Legno",
-  "Lewków",
-  "Ligota Grabowska",
-  "Ligota Trzeszcze",
-  "Lisiczki",
-  "Lisków",
-  "TEFAMA",
-  "Lisków Miasto",
-  "Lublinek",
-  "Lutol Suchy",
-  "Luzino",
-  "Lębork",
-  "Milówka",
-  "Modlinków",
-  "Motławy",
-  "Naterki",
-  "Okoń Główny",
-  "Orniki",
-  "Otwocko",
-  "Parów",
-  "Piaskowo",
-  "Pilichowice",
-  "Poreńsk",
-  "Radostowice",
-  "Radowice",
-  "Radzikowo",
-  "Rajcza",
-  "Razemsko",
-  "Rebrowo Dolne",
-  "Redlin Sudecki",
-  "Santok Zdrój",
-  "Sieniawka",
-  "Skawce",
-  "Sowi Bór",
-  "Sroka",
-  "Stare Lipowo",
-  "Przęsy",
-  "Starzynki",
-  "Stefanowo",
-  "Stryków",
-  "Strączki",
-  "Sulechów",
-  "Szadek",
-  "Sól",
-  "Tarkowo",
-  "Tartakowo",
-  "Testowo",
-  "Trawniczki",
-  "Tłoki",
-  "Wełtawa",
-  "Wielichowo Główne",
-  "Wielichowo Główne gt",
-  "Wielichowo Wieś",
-  "Wijewo",
-  "Wilczyca",
-  "Witaszyczki",
-  "Witonia",
-  "Wodnica",
-  "Wola",
-  "Wola Nowska",
-  "Wschodna",
-  "Zgierz",
-  "Zgierz Kontrewers",
-  "Zwardoń",
-  "Łask",
-  "Łaskarzew",
-  "Łebnino",
-  "Łęczyca",
-  "Żerniki",
-  "Żory"
-]

src/views/PragotronView.vue

@@ -73,6 +73,12 @@
         </div>
       </div>
     </div>
+
+    <audio loop ref="audio">
+      <source src="/pragotron.ogg" type="audio/ogg" />
+      <source src="/pragotron.flac" type="audio/mpeg" />
+      <source src="/pragotron.mp3" type="audio/mpeg" />
+    </audio>
   </div>
 </template>
 
@@ -131,10 +137,10 @@ export default defineComponent({
     includeArrivals: true,
 
     isAnimationRunning: true,
-    // intervalIndex: 0,
-
     lastRefreshTime: 0,
 
+    animatingStatus: 'init' as 'init' | 'running' | 'complete',
+
     departureTable: new Array(7).fill(0).map(() => ({ ...departureInfoEmptyObj })) as ITableRow[],
     departureRoutes: [''],
     dateDigits: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ''],
@@ -167,6 +173,7 @@ export default defineComponent({
 
   deactivated() {
     this.isAnimationRunning = false;
+    this.animatingStatus = 'init';
   },
 
   watch: {
@@ -212,6 +219,14 @@ export default defineComponent({
       }
     },
 
+    animatingStatus(val: typeof this.animatingStatus) {
+      if (val == 'running') (this.$refs['audio'] as HTMLAudioElement).play();
+      else {
+        (this.$refs['audio'] as HTMLAudioElement).currentTime = 0;
+        (this.$refs['audio'] as HTMLAudioElement).pause();
+      }
+    },
+
     'apiStore.activeData'(_val, prevVal) {
       if (prevVal == undefined) {
         this.selectDefaultCheckpoint();
@@ -311,9 +326,6 @@ export default defineComponent({
         1
       );
 
-      // elRef.style.width = `${window.innerWidth - 10}px`;
-      // elRef.style.height = `${(window.innerWidth - 10) / 2}px`;
-
       elRef.style.transform = `scale(${scale})`;
     },
 
@@ -323,7 +335,6 @@ export default defineComponent({
     },
 
     abbrevStationName(name: string) {
-      // return (stationAbbrevs[name] || name).toUpperCase();
       return name.toUpperCase();
     },
 
@@ -334,7 +345,6 @@ export default defineComponent({
         this.updateTableRows();
 
         this.currentRouteIndex = (this.currentRouteIndex + 1) % this.departureRoutes.length;
-        // this.currentDateDigitIndex = (this.currentDateDigitIndex + 1) % this.dateDigits.length;
         this.lastRefreshTime = time;
       }
 
@@ -342,6 +352,8 @@ export default defineComponent({
     },
 
     updateTableRows() {
+      let isCurrentTickAnimating = false;
+
       for (let i = 0; i < this.departureTable.length; i++) {
         const dep = this.departureTable[i];
 
@@ -350,6 +362,8 @@ export default defineComponent({
 
           dep.tableValues.currentRowIndexes[0] =
             (dep.tableValues.currentRowIndexes[0] + 1) % this.departureRoutes.length;
+
+          isCurrentTickAnimating = true;
         }
 
         if (dep.tableValues.routeVia.toLowerCase() != dep.routeVia.toLowerCase()) {
@@ -357,6 +371,8 @@ export default defineComponent({
 
           dep.tableValues.currentRowIndexes[1] =
             (dep.tableValues.currentRowIndexes[1] + 1) % this.departureRoutes.length;
+
+          isCurrentTickAnimating = true;
         }
 
         dep.tableValues.dateDigits.forEach((digit, j) => {
@@ -365,9 +381,13 @@ export default defineComponent({
               this.dateDigits[dep.tableValues.currentRowIndexes[j + 2]];
             dep.tableValues.currentRowIndexes[j + 2] =
               (dep.tableValues.currentRowIndexes[j + 2] + 1) % this.dateDigits.length;
+
+            isCurrentTickAnimating = true;
           }
         });
       }
+
+      this.animatingStatus = isCurrentTickAnimating ? 'running' : 'complete';
     },
 
     shuffleRoutes() {