create games info with launch buttons

src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { GetVersion, GetVersionCallbackDetail, RunGame } from './services/go';
 
 @Component({
   selector: 'app-root',
@@ -17,10 +16,10 @@ export class AppComponent {
       if (!(event instanceof CustomEvent<string>)) return;
       this.version = event.detail;
     });
-    GetVersion();
+    //GetVersion();
   }
 
   RunGame() {
-    RunGame();
+    //RunGame();
   }
 }

src/app/app.module.ts

@@ -10,16 +10,15 @@ import {
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppRoutingModule } from './app-routing.module';
+import { AppRoutingModule } from './modules/app-routing.module';
 import { AppComponent } from './app.component';
-import { GamesBarComponent } from './games-bar/games-bar.component';
-import { GameButtonComponent } from './games-bar/game-button/game-button.component';
 import { TuiAvatarModule } from "@taiga-ui/kit";
+import { GamesBarModule } from "./components/games-bar/games-bar.module";
 
 
 @NgModule({
-  declarations: [AppComponent, GamesBarComponent, GameButtonComponent],
-  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, TuiRootModule, TuiDialogModule, TuiAlertModule, TuiButtonModule, TuiAvatarModule],
+  declarations: [AppComponent],
+  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, TuiRootModule, TuiDialogModule, TuiAlertModule, TuiButtonModule, TuiAvatarModule, GamesBarModule],
   providers: [
     { provide: APP_BASE_HREF, useValue: '/' },
     { provide: LocationStrategy, useClass: HashLocationStrategy },

src/app/components/games-bar/game-info/game-info.component.html

@@ -1,2 +1,20 @@
 <h1>{{game.title}}</h1>
 <p>{{game.description}}</p>
+<ng-template #icon>
+    <tui-avatar
+        size="xs"
+        [rounded]="true"
+        [avatarUrl]="'http://jpg.jpg'"
+    ></tui-avatar>
+</ng-template>
+
+<button
+    tuiButton
+    type="button"
+    appearance="primary"
+    [icon]="icon"
+    class="tui-space_right-3 tui-space_bottom-3"
+    (click)= "runGame()"
+>
+<ng-content></ng-content>
+</button>

src/app/components/games-bar/game-info/game-info.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Game } from 'src/app/interfaces/game.interface';
+import {TuiButtonModule} from '@taiga-ui/core';
+import { LauncherService } from 'src/app/services/launcher.service';
 
 @Component({
   selector: 'app-game-info[game]',
@@ -9,7 +11,12 @@ import { Game } from 'src/app/interfaces/game.interface';
 export class GameInfoComponent implements OnInit {
   @Input() game!: Game;
 
-  constructor() {}
+  constructor(private launcher: LauncherService) {}
 
   ngOnInit(): void {}
+
+  runGame(){
+    //console.log("hello")
+    this.launcher.RunGame(this.game)
+  }
 }

src/app/components/games-bar/games-bar.component.ts

@@ -21,6 +21,9 @@ export class GamesBarComponent implements OnInit {
     GetGames().then((value) => {
       console.log(value);
       this.games = value;
+      if (this.games.length > 0){
+        this.activeGame = 0
+      }
     });
   }
 }

src/app/components/games-bar/games-bar.module.ts

@@ -3,10 +3,12 @@ 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';
+import {TuiButtonModule} from '@taiga-ui/core';
+import { TuiAvatarComponent, TuiAvatarModule } from '@taiga-ui/kit';
 
 @NgModule({
   declarations: [GamesBarComponent, GameItemComponent, GameInfoComponent],
-  imports: [CommonModule],
+  imports: [CommonModule,TuiButtonModule, TuiAvatarModule],
   exports: [GamesBarComponent, GameItemComponent, GameInfoComponent],
 })
 export class GamesBarModule {}

src/app/interfaces/game.interface.ts

@@ -1,6 +1,7 @@
 export interface Game {
-  id: number;
-  title: string;
-  image: string;
-  description: string;
-}
+    id: number;
+    title: string;
+    image: string;
+    description: string;
+  }
+  

src/app/services/go.ts

@@ -2,13 +2,14 @@ import { Game } from '../interfaces/game.interface';
 
 export interface Go extends Window {
   GetGames: () => Promise<Game[]>;
+  GoRunGame: (gameId: number) => void;
 }
 
 export interface GoCallback extends Window {
   SetVersion: (value: string) => void;
 }
 
-let { GetGames } = window as unknown as Go;
+let { GetGames, GoRunGame } = window as unknown as Go;
 let { SetVersion } = window as unknown as GoCallback;
 
 let w = window as unknown as GoCallback;
@@ -29,4 +30,4 @@ let w = window as unknown as GoCallback;
 //   document.dispatchEvent(event);
 // };
 
-export { GetGames, SetVersion };
+export { GetGames, SetVersion, GoRunGame };

src/app/services/launcher.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
-import { Game } from './oxana.service';
+import { Game } from '../interfaces/game.interface';
+import { GoRunGame } from './go';
 @Injectable({
   providedIn: 'root'
 })
@@ -7,13 +8,13 @@ export class LauncherService {
 
   constructor() { }
 
-  public GetGames(): Game[]{
-    var currentGames :Game[] = [
-      {  name: "ad", icon: "string",  id: "string"},
-      {  name: "qwet", icon: "string",  id: "string"},
-      {  name: "1233", icon: "string",  id: "string"},
-      {  name: "ghjghj", icon: "string",  id: "string"}
-    ]
-    return currentGames
+  // public GetGames(): Game[]{
+  //   var currentGames :Game[]
+  //   return currentGames
+  // }
+
+  public RunGame(game: Game){
+    //console.log(game)
+    GoRunGame(game.id)
   }
 }

src/app/services/oxana.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { LauncherService } from './launcher.service';
+import { Game } from '../interfaces/game.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -16,8 +17,3 @@ export class OxanaService {
   // }
 }
 
-export interface Game {
-  name: string
-  icon: string
-  id: string
-}