WIP: Proceed with frontend implementation

backend/src/main/resources/application-dev.yml

@@ -1,6 +1,6 @@
 gameyfin:
-  #root: C:\Projects\privat\gameyfin-library
-  root: \\NAS-Simon\Öffentlich\Spiele
+  root: C:\Projects\privat\gameyfin-library
+  #root: \\NAS-Simon\Öffentlich\Spiele
   cache: ${gameyfin.root}\.gameyfin\cache
   db: ${gameyfin.root}\.gameyfin\db # Currently unused
   igdb:

backend/src/main/resources/application.yml

@@ -5,7 +5,7 @@ server:
 spring:
   jackson.default-property-inclusion: non_null
   datasource.db-name: gameyfin_db
-  datasource.url: jdbc:h2:file:./data/${spring.datasource.db-name};AUTO_SERVER=TRUE
+  datasource.url: jdbc:h2:file:${gameyfin.db}/${spring.datasource.db-name};AUTO_SERVER=TRUE
   datasource.username: gfadmin
   datasource.password: gameyfin
   datasource.driverClassName: org.h2.Driver
@@ -19,6 +19,8 @@ spring:
 
 gameyfin:
   root: ""
+  cache: ${gameyfin.root}\.gameyfin\cache
+  db: ${gameyfin.root}\.gameyfin\db # Currently unused
   file-extensions: iso, zip, rar, 7z, exe
   igdb:
     config:

frontend/angular.json

@@ -104,5 +104,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

frontend/src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import {FullpageLayoutComponent} from "./layouts/fullpage-layout/fullpage-layout
 import {PageNotFoundComponent} from "./components/page-not-found/page-not-found.component";
 import {NavbarLayoutComponent} from "./layouts/navbar-layout/navbar-layout.component";
 import {NotImplementedComponent} from "./components/not-implemented/not-implemented.component";
-import {GameserverListComponent} from "./components/gameserver-list/gameserver-list.component";
+import {LibraryOverviewComponent} from "./components/library-overview/library-overview.component";
 
 const appRoutes: Routes = [
   {
@@ -13,7 +13,7 @@ const appRoutes: Routes = [
     children: [
       {
         path: 'library',
-        component: GameserverListComponent
+        component: LibraryOverviewComponent
       },
       {
         path: 'games',

frontend/src/app/app.module.ts

@@ -24,11 +24,13 @@ import {MatDialogModule} from "@angular/material/dialog";
 import {MatButtonModule} from "@angular/material/button";
 import {MatInputModule} from "@angular/material/input";
 import {FlexModule} from "@angular/flex-layout";
-import {GameserverListComponent} from './components/gameserver-list/gameserver-list.component';
+import {LibraryOverviewComponent} from './components/library-overview/library-overview.component';
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
 import {MatTableModule} from "@angular/material/table";
 import {MatPaginatorModule} from "@angular/material/paginator";
 import {MatSortModule} from "@angular/material/sort";
+import { GameCoverComponent } from './components/game-cover/game-cover.component';
+import { GameDetailViewComponent } from './components/game-detail-view/game-detail-view.component';
 
 @NgModule({
   declarations: [
@@ -39,7 +41,9 @@ import {MatSortModule} from "@angular/material/sort";
     PageNotFoundComponent,
     NotImplementedComponent,
     ErrorDialogComponent,
-    GameserverListComponent
+    LibraryOverviewComponent,
+    GameCoverComponent,
+    GameDetailViewComponent
   ],
   imports: [
     BrowserModule,

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;