Start loading games list from launcher

src/app/app.component.html

@@ -1,3 +1,9 @@
+<tui-root>
 Test (version: {{version}})
 
 <button (click)="getVersion()">Get version</button>
+<app-games-bar></app-games-bar>
+<!-- <button (click)="RunGame()">Launch Open Arena</button> -->
+<!-- <button (click)="launchGame2()">Launch Garry's Mod</button> -->
+
+</tui-root>

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { GetVersion, GetVersionCallbackDetail } from './services/go';
+import { GetVersion, GetVersionCallbackDetail, RunGame } from './services/go';
 
 @Component({
   selector: 'app-root',
@@ -19,4 +19,8 @@ export class AppComponent {
     });
     GetVersion();
   }
+
+  RunGame() {
+    RunGame();
+  }
 }

src/app/app.module.ts

@@ -1,3 +1,7 @@
+import { NgDompurifySanitizer } from "@tinkoff/ng-dompurify";
+import { TuiRootModule, TuiDialogModule, TuiAlertModule, TUI_SANITIZER } from "@taiga-ui/core";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import {TuiButtonModule} from '@taiga-ui/core';
 import {
   APP_BASE_HREF,
   LocationStrategy,
@@ -8,13 +12,18 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './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";
+
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, GamesBarComponent, GameButtonComponent],
-  imports: [BrowserModule, AppRoutingModule],
+  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, TuiRootModule, TuiDialogModule, TuiAlertModule, TuiButtonModule, TuiAvatarModule],
   providers: [
     { provide: APP_BASE_HREF, useValue: '/' },
     { provide: LocationStrategy, useClass: HashLocationStrategy },
+      {provide: TUI_SANITIZER, useClass: NgDompurifySanitizer}
 ],
   bootstrap: [AppComponent],
 })

src/app/games-bar/game-button/game-button.component.html

@@ -0,0 +1,17 @@
+<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"
+>
+<ng-content></ng-content>
+</button>

src/app/games-bar/game-button/game-button.component.spec.ts

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

src/app/games-bar/game-button/game-button.component.ts

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

src/app/games-bar/games-bar.component.html

@@ -0,0 +1,5 @@
+<!-- <app-game-button *ngFor="let item of games" (click)="removePlayerZero(item)"> -->
+<app-game-button *ngFor="let item of games">
+    name: {{item.name}}
+    <div *ngFor="let player of item.icon">{{player}}</div>
+</app-game-button>

src/app/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();
+  });
+});

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

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { LauncherService } from '../services/launcher.service';
+import { Game } from '../services/oxana.service';
+
+@Component({
+  selector: 'app-games-bar',
+  templateUrl: './games-bar.component.html',
+  styleUrls: ['./games-bar.component.scss']
+})
+
+export class GamesBarComponent implements OnInit {
+  constructor(private launcher: LauncherService) { }
+
+  games!: Game[]
+  // games: Game[] = [{
+  //   name: 'str',
+  //   players: ['1', '2']
+  // },
+  // {
+  //   name: 'qwe',
+  //   players: ['6', '4']
+  // }]
+  
+
+  ngOnInit(): void {
+    // let i = 0
+    // setInterval(() => {
+    //   this.games.push({name: `name-${++i}`, players: []})
+    // }, 100)
+    this.games = this.launcher.GetGames()
+    console.log("asdasd")
+    console.log(this.games)
+  }
+
+  // removePlayerZero (item: Game) {
+  //   if (item.players.length == 0) return
+  //   item.players.splice(0, 1)
+  // }
+}

src/app/services/go.ts

@@ -1,12 +1,13 @@
 export interface Go extends Window {
   GetVersion: () => string;
+  RunGame: () => string;
 }
 
 export interface GoCallback extends Window {
   SetVersion: (value: string) => void;
 }
 
-let { GetVersion } = window as unknown as Go;
+let { GetVersion, RunGame} = window as unknown as Go;
 let { SetVersion } = window as unknown as GoCallback;
 
 export declare type GetVersionCallbackDetail = string;
@@ -17,5 +18,4 @@ export declare type GetVersionCallbackDetail = string;
   });
   document.dispatchEvent(event);
 };
-
+export { GetVersion, SetVersion, RunGame};
-export { GetVersion, SetVersion };

src/app/services/launcher.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LauncherService } from './launcher.service';
+
+describe('LauncherService', () => {
+  let service: LauncherService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LauncherService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/launcher.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Game } from './oxana.service';
+@Injectable({
+  providedIn: 'root'
+})
+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
+  }
+}

src/app/services/oxana.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { OxanaService } from './oxana.service';
+
+describe('OxanaService', () => {
+  let service: OxanaService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(OxanaService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/oxana.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { LauncherService } from './launcher.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+
+export class OxanaService {
+  private games!: Game
+  constructor(private launcher: LauncherService) { }
+
+  // public getGames():Game{
+  //   currentGames = launcher.GetGames()
+  //   return currentGames
+  // }
+}
+
+export interface Game {
+  name: string
+  icon: string
+  id: string
+}