WIP: Proceed with frontend implementation

frontend/src/app/components/game-cover/game-cover.component.html

@@ -0,0 +1,5 @@
+<div class="game-cover-container">
+  <a routerLink="game/{{game.slug}}">
+    <img src="{{'v1/images/' + game.coverId}}" alt="Cover of {{game.title}}">
+  </a>
+</div>

frontend/src/app/components/game-cover/game-cover.component.scss

@@ -0,0 +1,11 @@
+@use '@angular/material' as mat;
+
+.game-cover-container img {
+
+  @include mat.elevation-transition();
+  @include mat.elevation(4);
+
+  &:hover {
+    @include mat.elevation(12);
+  }
+}

frontend/src/app/components/game-cover/game-cover.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameCoverComponent } from './game-cover.component';
+
+describe('GameCoverComponent', () => {
+  let component: GameCoverComponent;
+  let fixture: ComponentFixture<GameCoverComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GameCoverComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GameCoverComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/game-cover/game-cover.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
+
+@Component({
+  selector: 'game-cover',
+  templateUrl: './game-cover.component.html',
+  styleUrls: ['./game-cover.component.scss']
+})
+export class GameCoverComponent implements OnInit {
+
+  @Input() game!: DetectedGameDto;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/game-detail-view/game-detail-view.component.html

@@ -0,0 +1 @@
+<p>game-detail-view works!</p>

frontend/src/app/components/game-detail-view/game-detail-view.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameDetailViewComponent } from './game-detail-view.component';
+
+describe('GameDetailViewComponent', () => {
+  let component: GameDetailViewComponent;
+  let fixture: ComponentFixture<GameDetailViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GameDetailViewComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GameDetailViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/game-detail-view/game-detail-view.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-game-detail-view',
+  templateUrl: './game-detail-view.component.html',
+  styleUrls: ['./game-detail-view.component.scss']
+})
+export class GameDetailViewComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/library-overview/library-overview.component.html

@@ -5,10 +5,10 @@
   </div>
   <div fxLayout="row" fxLayoutAlign="center center">
     <div *ngIf="!this.loading && this.detectedGames.length === 0">
-      <h2>No games in library.</h2>
+      <h2>Your game library is empty!</h2>
     </div>
-    <div fxFlexFill *ngIf="!this.loading && this.detectedGames.length > 0">
-      <img *ngFor="let game of detectedGames" src="{{'http://localhost:8080/v1/images/' + game.coverId}}">
+    <div fxLayout="row" fxLayoutGap="12px" [style.margin-top.px]="12" *ngIf="!this.loading && this.detectedGames.length > 0">
+      <game-cover fxLayout="column" *ngFor="let game of detectedGames" [game]="game"></game-cover>
     </div>
   </div>
 </div>

frontend/src/app/components/library-overview/library-overview.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { GameserverListComponent } from './gameserver-list.component';
+import { LibraryOverviewComponent } from './library-overview.component';
 
-describe('GameserverListComponent', () => {
-  let component: GameserverListComponent;
-  let fixture: ComponentFixture<GameserverListComponent>;
+describe('LibraryOverviewComponent', () => {
+  let component: LibraryOverviewComponent;
+  let fixture: ComponentFixture<LibraryOverviewComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ GameserverListComponent ]
+      declarations: [ LibraryOverviewComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(GameserverListComponent);
+    fixture = TestBed.createComponent(LibraryOverviewComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

frontend/src/app/components/library-overview/library-overview.component.ts

@@ -4,10 +4,10 @@ import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
 
 @Component({
   selector: 'app-gameserver-list',
-  templateUrl: './gameserver-list.component.html',
-  styleUrls: ['./gameserver-list.component.css']
+  templateUrl: './library-overview.component.html',
+  styleUrls: ['./library-overview.component.css']
 })
-export class GameserverListComponent implements AfterViewInit {
+export class LibraryOverviewComponent implements AfterViewInit {
 
   detectedGames: DetectedGameDto[] = [];
   loading: boolean = true;