add components

src/app/components/main/main-menu/main-menu.component.html

@@ -0,0 +1,25 @@
+<menu>
+  <div class="sk-search-panel">
+    <skirda-input [formControl]="search" size="l" placeholder="Quick search">
+      <skirda-icon name="search" size="16" role="left"></skirda-icon>
+    </skirda-input>
+    <button>
+      <skirda-icon name="menu-panel" color="var(--sk-accent)"></skirda-icon>
+    </button>
+  </div>
+  <div class="sk-sections">
+    <skirda-section class="active">
+      <skirda-icon name="server"></skirda-icon>
+      <skirda-heading size="6">Servers</skirda-heading>
+    </skirda-section>
+    <skirda-section>
+      <skirda-icon name="game"></skirda-icon>
+      <skirda-heading size="6">Games</skirda-heading>
+    </skirda-section>
+    <skirda-section>
+      <skirda-icon name="friends"></skirda-icon>
+      <skirda-heading size="6">Friends</skirda-heading>
+    </skirda-section>
+  </div>
+  <app-menu-sessions></app-menu-sessions>
+</menu>

src/app/components/main/main-menu/main-menu.component.scss

@@ -0,0 +1,44 @@
+:host {
+  display: block;
+  width: 340px;
+
+  menu {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.4);
+    padding: 2rem 0.5rem 0.5rem 0.5rem;
+    box-sizing: border-box;
+    backdrop-filter: blur(64px);
+    gap: 1rem;
+
+    .sk-search-panel {
+      display: flex;
+      gap: 0.625rem;
+
+      skirda-input {
+        flex: 1;
+      }
+
+      button {
+        height: 100%;
+        aspect-ratio: 1/1;
+        padding: 0;
+        margin: 0;
+        outline: none;
+        appearance: none;
+        background: none;
+        border: 0;
+      }
+    }
+
+    .sk-sections {
+      display: flex;
+      flex-direction: column;
+      gap: 0.1875rem;
+    }
+  }
+}

src/app/components/main/main-menu/main-menu.component.spec.ts

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

src/app/components/main/main-menu/main-menu.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-main-menu',
+  templateUrl: './main-menu.component.html',
+  styleUrls: ['./main-menu.component.scss'],
+})
+export class MainMenuComponent implements OnInit {
+  search = new FormControl<string>('');
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html

@@ -0,0 +1,6 @@
+<skirda-section-label>
+  Active sessions <div class="count">3</div>
+</skirda-section-label>
+<div class="sessions">
+  <skirda-session [ngClass]="{'active': i == 1}" *ngFor="let session of sessions; index as i" [session]="session"></skirda-session>
+</div>

src/app/components/main/main-menu/menu-sessions/menu-sessions.component.scss

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+
+  .sessions {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+}

src/app/components/main/main-menu/menu-sessions/menu-sessions.component.spec.ts

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

src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { Session } from 'projects/ui/src/lib/interfaces/session';
+
+@Component({
+  selector: 'app-menu-sessions',
+  templateUrl: './menu-sessions.component.html',
+  styleUrls: ['./menu-sessions.component.scss'],
+})
+export class MenuSessionsComponent implements OnInit {
+  sessions: Session[] = [
+    {
+      icon: '/assets/games-icons/gmod.png',
+      title: 'Minecraft',
+      version: '000',
+      status: 'text',
+      expires: new Date(),
+    },
+    {
+      icon: '/assets/games-icons/openarena.jpg',
+      title: 'Minecraft 2',
+      version: '000',
+      expires: new Date(),
+    },
+    {
+      icon: '/assets/games-icons/gmod.png',
+      title: 'Minecraft 3',
+      version: '000',
+      expires: new Date(),
+    },
+  ];
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/components/main/main-root/main-root.component.html

@@ -0,0 +1,6 @@
+<div class="main-wrapper" [style.background-image]="'url(' + image + ')'">
+  <app-main-menu></app-main-menu>
+  <div class="content">
+    content will be here
+  </div>
+</div>

src/app/components/main/main-root/main-root.component.scss

@@ -0,0 +1,20 @@
+:host {
+  display: block;
+
+  .main-wrapper {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    // background-image: url('https://images.unsplash.com/photo-1580234811497-9df7fd2f357e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2934&q=80');
+    background-size: cover;
+  }
+
+  .content {
+    flex: 1;
+    background-color: rgba(0,0,0,0.05);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(1rem);
+  }
+}

src/app/components/main/main-root/main-root.component.spec.ts

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

src/app/components/main/main-root/main-root.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { FastAverageColor } from 'fast-average-color';
+
+@Component({
+  selector: 'app-main-root',
+  templateUrl: './main-root.component.html',
+  styleUrls: ['./main-root.component.scss'],
+})
+export class MainRootComponent implements OnInit {
+  image: string = 'assets/games-icons/gmod.png';
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.setColors();
+  }
+
+  setColors() {
+    // extractColors(this.image).then((value) => {
+    //   console.log(value);
+    // });
+    console.log(FastAverageColor);
+  }
+}

src/app/components/main/main.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MainRootComponent } from './main-root/main-root.component';
+import { MainMenuComponent } from './main-menu/main-menu.component';
+import { UiModule } from 'projects/ui/src/lib/ui.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MenuSessionsComponent } from './main-menu/menu-sessions/menu-sessions.component';
+
+@NgModule({
+  declarations: [MainRootComponent, MainMenuComponent, MenuSessionsComponent],
+  imports: [CommonModule, UiModule, ReactiveFormsModule, FormsModule],
+  exports: [MainRootComponent, MainMenuComponent, MenuSessionsComponent],
+})
+export class MainModule {}

src/app/components/playground/playground.component.html

@@ -0,0 +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/components/playground/playground.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/app/components/playground/playground.component.spec.ts

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

src/app/components/playground/playground.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-playground',
+  templateUrl: './playground.component.html',
+  styleUrls: ['./playground.component.scss'],
+})
+export class PlaygroundComponent implements OnInit {
+  title = 'go-web';
+  version: string | null = null;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    return;
+  }
+
+  getVersion() {
+    document.addEventListener('GetVersion_Callback', (event: Event): void => {
+      if (!(event instanceof CustomEvent<string>)) return;
+      this.version = event.detail;
+    });
+    //GetVersion();
+  }
+}

src/app/components/playground/playground.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PlaygroundComponent } from './playground.component';
+import { GamesBarModule } from '../games-bar/games-bar.module';
+import { TuiRootModule } from '@taiga-ui/core';
+
+@NgModule({
+  declarations: [PlaygroundComponent],
+  imports: [CommonModule, GamesBarModule, TuiRootModule],
+  exports: [PlaygroundComponent],
+})
+export class PlaygroundModule {}

src/app/components/sandbox/sandbox.component.html

@@ -0,0 +1,22 @@
+<h3>Icon</h3>
+<div class="line">
+  <skirda-icon [name]="'search'" [size]="16"></skirda-icon>
+  <skirda-icon [name]="'friends'" [size]="24" color="red"></skirda-icon>
+  <skirda-icon [name]="'server'" [size]="48"></skirda-icon>
+</div>
+
+<hr>
+
+<h3>Input</h3>
+<div>Single control</div>
+<skirda-input [formControl]="control"></skirda-input>
+
+<div>Form group</div>
+<form [formGroup]="form">
+  <skirda-input formControlName="name" placeholder="Search" size="xl">
+    <skirda-icon name="search" role="left" [size]="16"></skirda-icon>
+  </skirda-input>
+  <skirda-input formControlName="age" placeholder="Age"></skirda-input>
+</form>
+
+<hr>

src/app/components/sandbox/sandbox.component.scss

@@ -0,0 +1,18 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem;
+
+  .line {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}

src/app/components/sandbox/sandbox.component.spec.ts

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

src/app/components/sandbox/sandbox.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-sandbox',
+  templateUrl: './sandbox.component.html',
+  styleUrls: ['./sandbox.component.scss'],
+})
+export class SandboxComponent implements OnInit {
+  control = new FormControl<string>('Sample text');
+
+  form = new FormGroup({
+    name: new FormControl<string>(''),
+    age: new FormControl<number>(0),
+  });
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  print() {
+    console.log(this.form);
+  }
+}

src/app/components/sandbox/sandbox.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SandboxComponent } from './sandbox.component';
+import { UiModule } from 'projects/ui/src/lib/ui.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [SandboxComponent],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, UiModule],
+  exports: [SandboxComponent],
+})
+export class SandboxModule {}