diff --git a/src/app/components/main/main-menu/main-menu.component.html b/src/app/components/main/main-menu/main-menu.component.html new file mode 100644 index 0000000..743a9bc --- /dev/null +++ b/src/app/components/main/main-menu/main-menu.component.html @@ -0,0 +1,25 @@ + +
+ + + + +
+
+ + + Servers + + + + Games + + + + Friends + +
+ + diff --git a/src/app/components/main/main-menu/main-menu.component.scss b/src/app/components/main/main-menu/main-menu.component.scss new file mode 100644 index 0000000..458e55e --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/components/main/main-menu/main-menu.component.spec.ts b/src/app/components/main/main-menu/main-menu.component.spec.ts new file mode 100644 index 0000000..853e967 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MainMenuComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MainMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/main-menu/main-menu.component.ts b/src/app/components/main/main-menu/main-menu.component.ts new file mode 100644 index 0000000..a2850ad --- /dev/null +++ b/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(''); + + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html new file mode 100644 index 0000000..e182ed7 --- /dev/null +++ b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html @@ -0,0 +1,6 @@ + + Active sessions
3
+ +
+ +
diff --git a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.scss b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.scss new file mode 100644 index 0000000..b643a78 --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.spec.ts b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.spec.ts new file mode 100644 index 0000000..4988edc --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MenuSessionsComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MenuSessionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts new file mode 100644 index 0000000..6c52080 --- /dev/null +++ b/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 {} +} diff --git a/src/app/components/main/main-root/main-root.component.html b/src/app/components/main/main-root/main-root.component.html new file mode 100644 index 0000000..b645ba3 --- /dev/null +++ b/src/app/components/main/main-root/main-root.component.html @@ -0,0 +1,6 @@ +
+ +
+ content will be here +
+
diff --git a/src/app/components/main/main-root/main-root.component.scss b/src/app/components/main/main-root/main-root.component.scss new file mode 100644 index 0000000..95997d2 --- /dev/null +++ b/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); + } +} diff --git a/src/app/components/main/main-root/main-root.component.spec.ts b/src/app/components/main/main-root/main-root.component.spec.ts new file mode 100644 index 0000000..e8a1b5d --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MainRootComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MainRootComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/main-root/main-root.component.ts b/src/app/components/main/main-root/main-root.component.ts new file mode 100644 index 0000000..8a9fb67 --- /dev/null +++ b/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); + } +} diff --git a/src/app/components/main/main.module.ts b/src/app/components/main/main.module.ts new file mode 100644 index 0000000..e981102 --- /dev/null +++ b/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 {} diff --git a/src/app/components/playground/playground.component.html b/src/app/components/playground/playground.component.html new file mode 100644 index 0000000..22c9797 --- /dev/null +++ b/src/app/components/playground/playground.component.html @@ -0,0 +1,9 @@ + + Test (version: {{version}}) + + + + + + + diff --git a/src/app/components/playground/playground.component.scss b/src/app/components/playground/playground.component.scss new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/src/app/components/playground/playground.component.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/src/app/components/playground/playground.component.spec.ts b/src/app/components/playground/playground.component.spec.ts new file mode 100644 index 0000000..aeba7a8 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PlaygroundComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PlaygroundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/playground/playground.component.ts b/src/app/components/playground/playground.component.ts new file mode 100644 index 0000000..4369026 --- /dev/null +++ b/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)) return; + this.version = event.detail; + }); + //GetVersion(); + } +} diff --git a/src/app/components/playground/playground.module.ts b/src/app/components/playground/playground.module.ts new file mode 100644 index 0000000..0c7cdc3 --- /dev/null +++ b/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 {} diff --git a/src/app/components/sandbox/sandbox.component.html b/src/app/components/sandbox/sandbox.component.html new file mode 100644 index 0000000..0c62b41 --- /dev/null +++ b/src/app/components/sandbox/sandbox.component.html @@ -0,0 +1,22 @@ +

Icon

+
+ + + +
+ +
+ +

Input

+
Single control
+ + +
Form group
+
+ + + + +
+ +
diff --git a/src/app/components/sandbox/sandbox.component.scss b/src/app/components/sandbox/sandbox.component.scss new file mode 100644 index 0000000..d37f839 --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/sandbox/sandbox.component.spec.ts b/src/app/components/sandbox/sandbox.component.spec.ts new file mode 100644 index 0000000..ba9e140 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SandboxComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SandboxComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/sandbox/sandbox.component.ts b/src/app/components/sandbox/sandbox.component.ts new file mode 100644 index 0000000..c1d42ab --- /dev/null +++ b/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('Sample text'); + + form = new FormGroup({ + name: new FormControl(''), + age: new FormControl(0), + }); + + constructor() {} + + ngOnInit(): void {} + + print() { + console.log(this.form); + } +} diff --git a/src/app/components/sandbox/sandbox.module.ts b/src/app/components/sandbox/sandbox.module.ts new file mode 100644 index 0000000..62c906a --- /dev/null +++ b/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 {}