Timo Holder 32847
Tobias Niedermaier 32900
"Cloud": vue.rwuwu.de
npm install
npm run serve
Die Vueapp wurde mittels der API von freetogame umgesetzt. Da deren API direkt CORS-geschützt ist und wir nicht mit einem Reverse Proxy arbeiten wollten haben wir einfach die CORS-Variante über rapidapi genutzt.
Die Website ist schlicht, dennoch "modern" gehalten und einfach zu bedienen.
Hauptcomponent → implementiert Navbar.vue, Game.vue und GameInfo.vue components. Hält die Game liste (Erhalten von Navbar.vue) und rendert damit ein Grid voller Game-Components. Updatet beim Klick auf ein Game-Component die GameID die an GameInfo.vue gebunden ist.
Navbar oben, ist für die Datenbeschaffung/Sortierung zuständig. Schickt bei Updates der Gameliste ein Updateevent an App.vue, dass dort abgefangen wird. Erlaubt auch das Navigieren der Seite mittels Suche und versteckten nach Oben "Knopf" hinter des Logos.
Erhält ein Element des Interfaces GameType.ts und zeigt erstmal nur das Thumbnail an. Beim Drüberhovern werden weitere Informationen angezeigt. Öffnet beim Klick die GameInfo.
Beobachtet die gameID Property und stellt bei Update dieser eine neue Anfrage an die API um die entsprechenden Informationen über das gewünschte Spiel zu holen und in ein Interface des GameInfoTypes zu speichern um diese Anzuzeigen. Implementiert zusätzlich das Gallerycomponent (Weiter unten)
Erhält eine Screenshotliste über ein Interface in GameInfoType.ts und stellt diese unter der Beschreibung und anderen Informationen in der GameInfobox dar.
- GameType.ts
- Wird von der Gameliste als Interface für die Liste genutzt → enthält Resultset der API mit allen Spielen
- GameInfoType.ts
- Auf Anfrage der GameInfo.vue wird hier das Interface für alle Informationen für ein bestimmtes Spiel gespeichert
vue-window-size Plugin: npmjs