angular

angular.json

@@ -27,6 +27,11 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
+              },
               {
                 "glob": "**/*",
                 "input": "node_modules/@taiga-ui/icons/src",

package-lock.json

@@ -32,6 +32,7 @@
         "@angular-devkit/build-angular": "^14.1.3",
         "@angular/cli": "~14.1.3",
         "@angular/compiler-cli": "^14.1.0",
+        "@schematics/angular": "^14.2.6",
         "@types/dompurify": "2.2.3",
         "@types/jasmine": "~4.0.0",
         "jasmine-core": "~4.2.0",
@@ -461,6 +462,22 @@
         }
       }
     },
+    "node_modules/@angular/cli/node_modules/@schematics/angular": {
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-14.1.3.tgz",
+      "integrity": "sha512-hhH4MGfBD1oxrd9PFZwgaqXAT9dYTK/6AtoIcr40OwEbnS5ZoZwzrgb0OOT2NW3bmL0dg3YeJei3Sf89hlI5eg==",
+      "dev": true,
+      "dependencies": {
+        "@angular-devkit/core": "14.1.3",
+        "@angular-devkit/schematics": "14.1.3",
+        "jsonc-parser": "3.1.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || >=16.10.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
     "node_modules/@angular/cli/node_modules/rxjs": {
       "version": "6.6.7",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
@@ -2842,13 +2859,13 @@
       }
     },
     "node_modules/@schematics/angular": {
-      "version": "14.1.3",
+      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-14.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-14.2.6.tgz",
-      "integrity": "sha512-hhH4MGfBD1oxrd9PFZwgaqXAT9dYTK/6AtoIcr40OwEbnS5ZoZwzrgb0OOT2NW3bmL0dg3YeJei3Sf89hlI5eg==",
+      "integrity": "sha512-oeyMAQr3Q9nvAX+5FRgXcTMX9lqqenElBmAuwfqqdB0qD1jmkJ8TpWRuvYVA/931njpIwhfyLrzmzeNnJb23Sg==",
       "dev": true,
       "dependencies": {
-        "@angular-devkit/core": "14.1.3",
+        "@angular-devkit/core": "14.2.6",
-        "@angular-devkit/schematics": "14.1.3",
+        "@angular-devkit/schematics": "14.2.6",
         "jsonc-parser": "3.1.0"
       },
       "engines": {
@@ -2857,30 +2874,22 @@
         "yarn": ">= 1.13.0"
       }
     },
-    "node_modules/@schematics/angular/node_modules/@angular-devkit/core": {
+    "node_modules/@schematics/angular/node_modules/@angular-devkit/schematics": {
-      "version": "14.1.3",
+      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-14.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-14.2.6.tgz",
-      "integrity": "sha512-YBxhRl7hKgirjcKeurfejVrIgmw31GcfKKCyQiIudoLCYjonnSMdDEx2y8BNMANvxe5YmuZsIYJtgVlqp3mMDg==",
+      "integrity": "sha512-mSFtc4M49mWrYsgJx/P6bA6SzXb8SeZqmppKRMoEQxiXI1bwFdGLNWzAmzEsGvS96h/nPIaOfcX5cKJSp++4FA==",
       "dev": true,
       "dependencies": {
-        "ajv": "8.11.0",
+        "@angular-devkit/core": "14.2.6",
-        "ajv-formats": "2.1.1",
         "jsonc-parser": "3.1.0",
-        "rxjs": "6.6.7",
+        "magic-string": "0.26.2",
-        "source-map": "0.7.4"
+        "ora": "5.4.1",
+        "rxjs": "6.6.7"
       },
       "engines": {
         "node": "^14.15.0 || >=16.10.0",
         "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
         "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^3.5.2"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
       }
     },
     "node_modules/@schematics/angular/node_modules/rxjs": {
@@ -12052,6 +12061,17 @@
             "source-map": "0.7.4"
           }
         },
+        "@schematics/angular": {
+          "version": "14.1.3",
+          "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-14.1.3.tgz",
+          "integrity": "sha512-hhH4MGfBD1oxrd9PFZwgaqXAT9dYTK/6AtoIcr40OwEbnS5ZoZwzrgb0OOT2NW3bmL0dg3YeJei3Sf89hlI5eg==",
+          "dev": true,
+          "requires": {
+            "@angular-devkit/core": "14.1.3",
+            "@angular-devkit/schematics": "14.1.3",
+            "jsonc-parser": "3.1.0"
+          }
+        },
         "rxjs": {
           "version": "6.6.7",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
@@ -13611,27 +13631,27 @@
       }
     },
     "@schematics/angular": {
-      "version": "14.1.3",
+      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-14.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-14.2.6.tgz",
-      "integrity": "sha512-hhH4MGfBD1oxrd9PFZwgaqXAT9dYTK/6AtoIcr40OwEbnS5ZoZwzrgb0OOT2NW3bmL0dg3YeJei3Sf89hlI5eg==",
+      "integrity": "sha512-oeyMAQr3Q9nvAX+5FRgXcTMX9lqqenElBmAuwfqqdB0qD1jmkJ8TpWRuvYVA/931njpIwhfyLrzmzeNnJb23Sg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "14.1.3",
+        "@angular-devkit/core": "14.2.6",
-        "@angular-devkit/schematics": "14.1.3",
+        "@angular-devkit/schematics": "14.2.6",
         "jsonc-parser": "3.1.0"
       },
       "dependencies": {
-        "@angular-devkit/core": {
+        "@angular-devkit/schematics": {
-          "version": "14.1.3",
+          "version": "14.2.6",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-14.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-14.2.6.tgz",
-          "integrity": "sha512-YBxhRl7hKgirjcKeurfejVrIgmw31GcfKKCyQiIudoLCYjonnSMdDEx2y8BNMANvxe5YmuZsIYJtgVlqp3mMDg==",
+          "integrity": "sha512-mSFtc4M49mWrYsgJx/P6bA6SzXb8SeZqmppKRMoEQxiXI1bwFdGLNWzAmzEsGvS96h/nPIaOfcX5cKJSp++4FA==",
           "dev": true,
           "requires": {
-            "ajv": "8.11.0",
+            "@angular-devkit/core": "14.2.6",
-            "ajv-formats": "2.1.1",
             "jsonc-parser": "3.1.0",
-            "rxjs": "6.6.7",
+            "magic-string": "0.26.2",
-            "source-map": "0.7.4"
+            "ora": "5.4.1",
+            "rxjs": "6.6.7"
           }
         },
         "rxjs": {

package.json

@@ -35,6 +35,7 @@
     "@angular/cli": "~14.1.3",
     "@angular/compiler-cli": "^14.1.0",
     "@schematics/angular": "^14.2.6",
+    "@types/dompurify": "2.2.3",
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.2.0",
     "karma": "~6.4.0",

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],
+  declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, TuiRootModule, TuiDialogModule, TuiAlertModule, TuiButtonModule, TuiAvatarModule],
+  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

@@ -3,4 +3,5 @@ export interface Game {
     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[]{
+  // public GetGames(): Game[]{
-    var currentGames :Game[] = [
+  //   var currentGames :Game[]
-      {  name: "ad", icon: "string",  id: "string"},
+  //   return currentGames
-      {  name: "qwet", icon: "string",  id: "string"},
+  // }
-      {  name: "1233", icon: "string",  id: "string"},
+
-      {  name: "ghjghj", icon: "string",  id: "string"}
+  public RunGame(game: Game){
-    ]
+    //console.log(game)
-    return currentGames
+    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
-}