React – Wetter API match auf Game Music

Für unseren Kurs Interaction Programming and the Dynamic Web arbeiten wir gerade an unserer Projektarbeit, die wir Ende Mai abgeben müssen. Wir haben uns überlegt mit der ACNH API für das Ninteno Spiel Animal Crossing: New Horizons zu arbeiten. Die API stellt Endpunkte mit allen Details für die Stadtbewohner, Fische, Fossilien, Kunstwerke und Musik dar.

Wir versuchen, in Anlehnung an ähnliche Projekte, diese Daten aufzubereiten und übersichtlich und angenehm zu präsentieren. Für die Umsetzung arbeiten wir mit Javascript und React.

Insgesamt sind wir schon sehr weit mit der Umsetzung des Projektes. Meine letzte Aufgabe war es die Hintergrundmusik auf der Webseite zu implementieren. Animals Crossing hat für jede Stunde einen neuen kleinen Jingel, der in Abhängigkeit von dem Wetter im Spiel anders klingt.

Unsere Idee war es daher den Nutzern der Webseite die Möglichkeit zu geben ihren Wohnort einzutragen und daraufhin die passende Wettermusik für die passende Stunde zu spielen.

Wie die Abbildung 1 zeigt, gibt es für 12 Uhr (und auch jede andere Stunde) die Varianten Rainy, Snowy und Sunny. Alle 72 Songs (24 Stunden * 3 Varianten) wurden mit einem Promise vorgespeichert. Nun wurde noch die Stadt benötigt, die vom User eingegeben wird. Mit einem Input konnte die einfache Texteingabe des Users in einer Variablen gespeichert werden und in den fetch für eine Geo-Abfrage eingesetzt werden (Abbildung 2 zeigt die manuelle Abfrage für Hamburg).

In der Abbildung 2 sieht man nun die Breite und den Längengrad für Hamburg. Auf der Welt gibt es natürlich mehrfach den Städtenamen ‘Hamburg’, daher wird ein DropDown-Menü präsentiert mit dem der User die passende Stadt nach Land oder Bundesland auswählen kann. Die Breite und der Längengrad wird dann wieder in einer Variablen gespeichert und in dem nächsten fetch eingesetzt.

Wie man in Abbildung 3 sieht, scheint in Hamburg die Sonne. Meistens zwar nicht und genau genommen sagen uns die Daten auch nur dass keine Wolken am Himmel sind aber immerhin. Der Fall Snowy oder Rainy ist es auf jeden Fall nicht.

Nun brauchte ich nur noch die aktuelle Stunde, was in Javascript super einfach zu ermitteln ist:

var today = new Date();            
currentHour = today.getHours();

Nun habe ich zuerst das aktuelle ‘real life’ Wetter auf die Spiele-Terminologie mit Hilfe eines switch-statements gemünzt.

        function matchCityWeatherOnACWeather() {
            switch (currentWeather) {
                case "Snow":
                    weatherAC = "Snowy";
                    break;
                case "Clear":
                    weatherAC = "Sunny";
                    break;
                case "Clouds":
                    weatherAC = "Sunny";
                    break;
                default:
                    weatherAC = "Rainy";
                    break;
            }
        }

Das switch-statement geht davon aus, dass ‘clear’ und ‘clouds’ zu Sunny zählen, ‘snow’ zu Snowy und die restlichen Wetterkonditionen unter Rainy laufen. Darüber kann man natürlich immer noch streiten.

Anschließend habe ich einen Loop über die Metadaten eines einzelnen Songs laufen lassen und die Songs herausgefiltert, die zur aktuellen Stunde passen.

            function renderSingleData(singleResult) {
                if (singleResult.hour == currentHour) {
                    relevantMusic.push(singleResult);
                };
            }

Damit gab es nur noch drei Songs zu Auswahl. Im letzten Filter habe ich dann geprüft ob das Wetter vom Song zum aktuellen Wetter passt.

            function renderFinalSong(finalSong) {
                if (finalSong.weather == weatherIndex) {
                    audio.src = finalSong.music_uri;
                    console.log('Following song was chosen: ' + finalSong['file-name'])
                    console.log('Song URI: ' + finalSong.music_uri);
                }
            }

Und schon konnte der Song gespielt werden:

            audio.loop = true;
            audio.play();

Natürlich war für die gesamte Programmierung noch einiges mehr nötig aber so viel zu der Filterung des passenden Songs anhand von verschiedenen Informationen. Am schwierigsten war es danach einen geeigneten Timer in React zu implementieren, der passend zu jeder Stunde die Songfilterung erneut triggert. Dazu vielleicht mehr im nächsten Eintrag.