From 157b49ed8590f8ea7627f8edad8ec038a8c42112 Mon Sep 17 00:00:00 2001
From: wagonsoftware <vladfolder@gmail.com>
Date: Mon, 17 Oct 2022 16:54:14 +0300
Subject: [PATCH] add game components

---
 .../game-info/game-info.component.html        |  2 ++
 .../game-info/game-info.component.scss        |  3 +++
 .../game-info/game-info.component.spec.ts     | 23 ++++++++++++++++
 .../game-info/game-info.component.ts          | 15 +++++++++++
 .../game-item/game-item.component.html        |  3 +++
 .../game-item/game-item.component.scss        | 11 ++++++++
 .../game-item/game-item.component.spec.ts     | 23 ++++++++++++++++
 .../game-item/game-item.component.ts          | 16 ++++++++++++
 .../games-bar/games-bar.component.html        |  4 +++
 .../games-bar/games-bar.component.scss        | 11 ++++++++
 .../games-bar/games-bar.component.spec.ts     | 23 ++++++++++++++++
 .../games-bar/games-bar.component.ts          | 26 +++++++++++++++++++
 .../components/games-bar/games-bar.module.ts  | 12 +++++++++
 src/app/interfaces/game.interface.ts          |  6 +++++
 14 files changed, 178 insertions(+)
 create mode 100644 src/app/components/games-bar/game-info/game-info.component.html
 create mode 100644 src/app/components/games-bar/game-info/game-info.component.scss
 create mode 100644 src/app/components/games-bar/game-info/game-info.component.spec.ts
 create mode 100644 src/app/components/games-bar/game-info/game-info.component.ts
 create mode 100644 src/app/components/games-bar/game-item/game-item.component.html
 create mode 100644 src/app/components/games-bar/game-item/game-item.component.scss
 create mode 100644 src/app/components/games-bar/game-item/game-item.component.spec.ts
 create mode 100644 src/app/components/games-bar/game-item/game-item.component.ts
 create mode 100644 src/app/components/games-bar/games-bar.component.html
 create mode 100644 src/app/components/games-bar/games-bar.component.scss
 create mode 100644 src/app/components/games-bar/games-bar.component.spec.ts
 create mode 100644 src/app/components/games-bar/games-bar.component.ts
 create mode 100644 src/app/components/games-bar/games-bar.module.ts
 create mode 100644 src/app/interfaces/game.interface.ts

diff --git a/src/app/components/games-bar/game-info/game-info.component.html b/src/app/components/games-bar/game-info/game-info.component.html
new file mode 100644
index 0000000..75f0a56
--- /dev/null
+++ b/src/app/components/games-bar/game-info/game-info.component.html
@@ -0,0 +1,2 @@
+<h1>{{game.title}}</h1>
+<p>{{game.description}}</p>
diff --git a/src/app/components/games-bar/game-info/game-info.component.scss b/src/app/components/games-bar/game-info/game-info.component.scss
new file mode 100644
index 0000000..5d4e87f
--- /dev/null
+++ b/src/app/components/games-bar/game-info/game-info.component.scss
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/app/components/games-bar/game-info/game-info.component.spec.ts b/src/app/components/games-bar/game-info/game-info.component.spec.ts
new file mode 100644
index 0000000..bb71f7c
--- /dev/null
+++ b/src/app/components/games-bar/game-info/game-info.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameInfoComponent } from './game-info.component';
+
+describe('GameInfoComponent', () => {
+  let component: GameInfoComponent;
+  let fixture: ComponentFixture<GameInfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GameInfoComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GameInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/games-bar/game-info/game-info.component.ts b/src/app/components/games-bar/game-info/game-info.component.ts
new file mode 100644
index 0000000..e9fbb6c
--- /dev/null
+++ b/src/app/components/games-bar/game-info/game-info.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Game } from 'src/app/interfaces/game.interface';
+
+@Component({
+  selector: 'app-game-info[game]',
+  templateUrl: './game-info.component.html',
+  styleUrls: ['./game-info.component.scss'],
+})
+export class GameInfoComponent implements OnInit {
+  @Input() game!: Game;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/components/games-bar/game-item/game-item.component.html b/src/app/components/games-bar/game-item/game-item.component.html
new file mode 100644
index 0000000..cecba7b
--- /dev/null
+++ b/src/app/components/games-bar/game-item/game-item.component.html
@@ -0,0 +1,3 @@
+<div class="game" [ngClass]="{'active': active}">
+  <div class="game-title">{{game.title}}</div>
+</div>
diff --git a/src/app/components/games-bar/game-item/game-item.component.scss b/src/app/components/games-bar/game-item/game-item.component.scss
new file mode 100644
index 0000000..9275e7d
--- /dev/null
+++ b/src/app/components/games-bar/game-item/game-item.component.scss
@@ -0,0 +1,11 @@
+:host {
+  display: block;
+
+  .game {
+
+    &.active {
+      background-color: green;
+      color: #fff;
+    }
+  }
+}
diff --git a/src/app/components/games-bar/game-item/game-item.component.spec.ts b/src/app/components/games-bar/game-item/game-item.component.spec.ts
new file mode 100644
index 0000000..15f094c
--- /dev/null
+++ b/src/app/components/games-bar/game-item/game-item.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameItemComponent } from './game-item.component';
+
+describe('GameItemComponent', () => {
+  let component: GameItemComponent;
+  let fixture: ComponentFixture<GameItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GameItemComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GameItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/games-bar/game-item/game-item.component.ts b/src/app/components/games-bar/game-item/game-item.component.ts
new file mode 100644
index 0000000..07909ff
--- /dev/null
+++ b/src/app/components/games-bar/game-item/game-item.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Game } from 'src/app/interfaces/game.interface';
+
+@Component({
+  selector: 'app-game-item[game]',
+  templateUrl: './game-item.component.html',
+  styleUrls: ['./game-item.component.scss'],
+})
+export class GameItemComponent implements OnInit {
+  @Input() game!: Game;
+  @Input() active: boolean = false;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/components/games-bar/games-bar.component.html b/src/app/components/games-bar/games-bar.component.html
new file mode 100644
index 0000000..8225cc9
--- /dev/null
+++ b/src/app/components/games-bar/games-bar.component.html
@@ -0,0 +1,4 @@
+<div class="games">
+  <app-game-item [active]="i === activeGame" *ngFor="let game of games; index as i" [game]="game" (click)="activeGame = i"></app-game-item>
+</div>
+<app-game-info *ngIf="activeGame !== null" [game]="games[activeGame]"></app-game-info>
diff --git a/src/app/components/games-bar/games-bar.component.scss b/src/app/components/games-bar/games-bar.component.scss
new file mode 100644
index 0000000..151eacd
--- /dev/null
+++ b/src/app/components/games-bar/games-bar.component.scss
@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+
+  .games {
+
+  }
+
+  .game-info {
+
+  }
+}
diff --git a/src/app/components/games-bar/games-bar.component.spec.ts b/src/app/components/games-bar/games-bar.component.spec.ts
new file mode 100644
index 0000000..5b7c125
--- /dev/null
+++ b/src/app/components/games-bar/games-bar.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GamesBarComponent } from './games-bar.component';
+
+describe('GamesBarComponent', () => {
+  let component: GamesBarComponent;
+  let fixture: ComponentFixture<GamesBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GamesBarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GamesBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/games-bar/games-bar.component.ts b/src/app/components/games-bar/games-bar.component.ts
new file mode 100644
index 0000000..c8cc169
--- /dev/null
+++ b/src/app/components/games-bar/games-bar.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { Game } from 'src/app/interfaces/game.interface';
+import { GetGames } from 'src/app/services/go';
+
+@Component({
+  selector: 'app-games-bar',
+  templateUrl: './games-bar.component.html',
+  styleUrls: ['./games-bar.component.scss'],
+})
+export class GamesBarComponent implements OnInit {
+  games: Game[] = [];
+  activeGame: Game['id'] | null = null;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.getGames();
+  }
+
+  getGames() {
+    GetGames().then((value) => {
+      console.log(value);
+      this.games = value;
+    });
+  }
+}
diff --git a/src/app/components/games-bar/games-bar.module.ts b/src/app/components/games-bar/games-bar.module.ts
new file mode 100644
index 0000000..772a10d
--- /dev/null
+++ b/src/app/components/games-bar/games-bar.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GamesBarComponent } from './games-bar.component';
+import { GameItemComponent } from './game-item/game-item.component';
+import { GameInfoComponent } from './game-info/game-info.component';
+
+@NgModule({
+  declarations: [GamesBarComponent, GameItemComponent, GameInfoComponent],
+  imports: [CommonModule],
+  exports: [GamesBarComponent, GameItemComponent, GameInfoComponent],
+})
+export class GamesBarModule {}
diff --git a/src/app/interfaces/game.interface.ts b/src/app/interfaces/game.interface.ts
new file mode 100644
index 0000000..9f31050
--- /dev/null
+++ b/src/app/interfaces/game.interface.ts
@@ -0,0 +1,6 @@
+export interface Game {
+  id: number;
+  title: string;
+  image: string;
+  description: string;
+}