experiments (2)

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/skirda-launcher.iml" filepath="$PROJECT_DIR$/.idea/skirda-launcher.iml" />
+    </modules>
+  </component>
+</project>

.idea/skirda-launcher.iml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/dist" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/watcherTasks.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>

angular.json

@@ -32,9 +32,16 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
+              }
             ],
             "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
               "src/styles.scss"
             ],
             "scripts": [],

package.json

@@ -45,6 +45,7 @@
     "lint": "ng lint"
   },
   "dependencies": {
+    "@angular/animations": "^14.2.1",
     "@angular/common": "14.0.6",
     "@angular/compiler": "14.0.6",
     "@angular/core": "14.0.6",
@@ -53,8 +54,14 @@
     "@angular/platform-browser": "14.0.6",
     "@angular/platform-browser-dynamic": "14.0.6",
     "@angular/router": "14.0.6",
+    "@taiga-ui/cdk": "^3.2.0",
+    "@taiga-ui/core": "^3.2.0",
+    "@taiga-ui/icons": "^3.2.0",
+    "@taiga-ui/kit": "^3.2.0",
+    "@taiga-ui/styles": "^3.2.0",
     "rxjs": "7.5.6",
     "tslib": "^2.4.0",
+    "webpack": "^5.74.0",
     "zone.js": "~0.11.6"
   },
   "devDependencies": {

src/app/app.component.html

@@ -1 +1,23 @@
-<router-outlet></router-outlet>
+<tui-root>
+    <app-games-bar></app-games-bar>
+<!--    <app-generic-game></app-generic-game>-->
+    <!-- content of your app -->
+        <!--
+           If you need, you can add something between Taiga portal layers:
+          -->
+    <ng-container ngProjectAs="tuiOverContent">
+        <!-- Content over app content -->
+    </ng-container>
+    <ng-container ngProjectAs="tuiOverDialogs">
+        <!-- Content over dialogs -->
+    </ng-container>
+    <ng-container ngProjectAs="tuiOverAlerts">
+        <!-- Content over notifications -->
+    </ng-container>
+    <ng-container ngProjectAs="tuiOverPortals">
+        <!-- Content over dropdowns -->
+    </ng-container>
+    <ng-container ngProjectAs="tuiOverHints">
+        <!-- Content over hints -->
+    </ng-container>
+</tui-root>

src/app/app.component.scss

@@ -1,3 +1,5 @@
+@import '~@taiga-ui/core/styles/taiga-ui-local';
+
 :host {
-  
+
 }

src/app/app.component.ts

@@ -8,12 +8,13 @@ import { APP_CONFIG } from '../environments/environment';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
+
 export class AppComponent {
   constructor(
     private electronService: ElectronService,
-    private translate: TranslateService
+    //private translate: TranslateService
   ) {
-    this.translate.setDefaultLang('en');
+    //this.translate.setDefaultLang('en');
     console.log('APP_CONFIG', APP_CONFIG);
 
     if (electronService.isElectron) {

src/app/app.module.ts

@@ -1,44 +1,23 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
-import { CoreModule } from './core/core.module';
-import { SharedModule } from './shared/shared.module';
-
-import { AppRoutingModule } from './app-routing.module';
-
-// NG Translate
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-
-import { HomeModule } from './home/home.module';
-import { DetailModule } from './detail/detail.module';
-
-import { AppComponent } from './app.component';
-
-// AoT requires an exported function for factories
-const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {TuiAlertModule, TuiButtonModule, TuiDialogModule, TuiRootModule} from '@taiga-ui/core';
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {HomeModule} from "./home/home.module";
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    FormsModule,
-    HttpClientModule,
-    CoreModule,
-    SharedModule,
-    HomeModule,
-    DetailModule,
-    AppRoutingModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: httpLoaderFactory,
-        deps: [HttpClient]
-      }
-    })
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        TuiRootModule,
+        TuiAlertModule,
+        TuiDialogModule,
+        AppRoutingModule,
+        TuiButtonModule,
+        HomeModule,
+    ],
+  bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {}

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

@@ -1,4 +1,13 @@
-<div id="LeftBar">
+<div id="GamesBar">
     <app-user-info></app-user-info>
-    <app-game-button></app-game-button>
+    <button
+        tuiButton
+        type="button"
+        class="tui-space_right-3 tui-space_bottom-3"
+        [icon]="icon"
+        (click)="onClick($event)"
+        >
+        Game
+    </button>
+    <ng-template #viewContainerRef></ng-template>
 </div>

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

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { GamesBarComponent } from './games-bar.component';
 
-describe('GameBarComponent', () => {
+describe('GamesBarComponent', () => {
   let component: GamesBarComponent;
   let fixture: ComponentFixture<GamesBarComponent>;
 
@@ -14,7 +14,7 @@ describe('GameBarComponent', () => {
 
     fixture = TestBed.createComponent(GamesBarComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    fixture.detectChanges()
   });
 
   it('should create', () => {

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

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
-
+import {Component, ComponentRef, Inject, OnInit, ViewChild, ViewContainerRef} from '@angular/core';
+import {GameButtonComponent} from "./game-button/game-button.component";
 @Component({
-  selector: 'app-game-bar',
-  templateUrl: './game-bar.component.html',
-  styleUrls: ['./game-bar.component.scss']
+  selector: 'app-games-bar',
+  templateUrl: './games-bar.component.html',
+  styleUrls: ['./games-bar.component.scss']
 })
-export class GameBarComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
 
+export class GamesBarComponent implements OnInit {
+  constructor() {  }
+  ngOnInit(): void {  }
 }

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

@@ -1,6 +1,6 @@
 <div class="ProfileBar">
     <div class="img rounded" id="ProfilePicture">
-        <img src="./assets/avatar.jpeg" height="45px" width="45px">
+        <img src="../../../assets/avatar.jpeg" height="45px" width="45px">
     </div>
     <div class="two-lines-centered">
         <div class="first-line">

src/app/home/home.module.ts

@@ -5,13 +5,17 @@ import { HomeRoutingModule } from './home-routing.module';
 
 import { HomeComponent } from './home.component';
 import { SharedModule } from '../shared/shared.module';
-import { GameBarComponent } from './game-bar/game-bar.component';
+import { GamesBarComponent } from '../games-bar/games-bar.component';
 import { GenericGameComponent } from './generic-game/generic-game.component';
-import { GameButtonComponent } from './game-bar/game-button/game-button.component';
-import { UserInfoComponent } from './game-bar/user-info/user-info.component';
+import { GameButtonComponent } from '../games-bar/game-button/game-button.component';
+import { UserInfoComponent } from '../games-bar/user-info/user-info.component';
+import {TuiButtonModule} from "@taiga-ui/core";
 
 @NgModule({
-  declarations: [HomeComponent, GameBarComponent, GenericGameComponent, GameButtonComponent, UserInfoComponent],
-  imports: [CommonModule, SharedModule, HomeRoutingModule]
+    declarations: [HomeComponent, GamesBarComponent, GenericGameComponent, GameButtonComponent, UserInfoComponent],
+    exports: [
+        GamesBarComponent
+    ],
+    imports: [CommonModule, SharedModule, HomeRoutingModule, TuiButtonModule]
 })
 export class HomeModule {}

src/main.ts

@@ -7,9 +7,10 @@ import { APP_CONFIG } from './environments/environment';
 if (APP_CONFIG.production) {
   enableProdMode();
 }
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule, {
-    preserveWhitespaces: false
-  })
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {})
   .catch(err => console.error(err));
+
+
+// function getGames(){
+//
+// }

src/modules/backend.module.ts

@@ -0,0 +1,4 @@
+//Distribrutus
+export class Game{
+    public
+}

src/styles.scss

@@ -1,4 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
+// my other global styles
+
 html, body {
 	margin: 0;
 	background: url("./assets/6.png") no-repeat center center fixed;
@@ -43,7 +45,7 @@ html, body {
 	display: flex;
 	height: 100%;
 }
-#LeftBar {
+#GamesBar {
 	width: 30%;
 	display: inline-block;
 	-webkit-backdrop-filter: blur(8px);