diff --git a/projects/ui/src/lib/button/button.component.html b/projects/ui/src/lib/button/button.component.html new file mode 100644 index 0000000..dddf583 --- /dev/null +++ b/projects/ui/src/lib/button/button.component.html @@ -0,0 +1,3 @@ + diff --git a/projects/ui/src/lib/button/button.component.scss b/projects/ui/src/lib/button/button.component.scss new file mode 100644 index 0000000..ae66956 --- /dev/null +++ b/projects/ui/src/lib/button/button.component.scss @@ -0,0 +1,13 @@ +:host { + display: block; + + button { + padding: var(--sk-gap-m) var(--sk-gap-xl); + display: flex; + align-items: center; + gap: var(--sk-gap-m); + background-color: var(--sk-accent); + border: none; + border-radius: var(--sk-br-m); + } +} diff --git a/projects/ui/src/lib/button/button.component.spec.ts b/projects/ui/src/lib/button/button.component.spec.ts new file mode 100644 index 0000000..d9564d8 --- /dev/null +++ b/projects/ui/src/lib/button/button.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ButtonComponent } from './button.component'; + +describe('ButtonComponent', () => { + let component: ButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ButtonComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/button/button.component.ts b/projects/ui/src/lib/button/button.component.ts new file mode 100644 index 0000000..4570358 --- /dev/null +++ b/projects/ui/src/lib/button/button.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'skirda-button', + templateUrl: './button.component.html', + styleUrls: ['./button.component.scss'] +}) +export class ButtonComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/projects/ui/src/lib/button/button.module.ts b/projects/ui/src/lib/button/button.module.ts new file mode 100644 index 0000000..27a2064 --- /dev/null +++ b/projects/ui/src/lib/button/button.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ButtonComponent } from './button.component'; + +@NgModule({ + declarations: [ButtonComponent], + imports: [CommonModule], + exports: [ButtonComponent], +}) +export class ButtonModule {} diff --git a/projects/ui/src/lib/image-icon/image-icon.component.scss b/projects/ui/src/lib/image-icon/image-icon.component.scss index a835557..babce4a 100644 --- a/projects/ui/src/lib/image-icon/image-icon.component.scss +++ b/projects/ui/src/lib/image-icon/image-icon.component.scss @@ -5,8 +5,7 @@ width: 40px; height: 40px; border-radius: 4px; - background-color: rgba(255, 255, 255, 0.1); - background-size: cover; + background-size: contain; background-repeat: no-repeat; background-position: center center; overflow: hidden; diff --git a/projects/ui/src/lib/session/session.component.scss b/projects/ui/src/lib/session/session.component.scss index b8fd348..e18a48c 100644 --- a/projects/ui/src/lib/session/session.component.scss +++ b/projects/ui/src/lib/session/session.component.scss @@ -4,7 +4,7 @@ &.active { .sk-session { - background-color: var(--sk-accent); + background-color: var(--image-accent); } } diff --git a/projects/ui/src/lib/typography/text/text.component.scss b/projects/ui/src/lib/typography/text/text.component.scss index e69de29..a059a25 100644 --- a/projects/ui/src/lib/typography/text/text.component.scss +++ b/projects/ui/src/lib/typography/text/text.component.scss @@ -0,0 +1,3 @@ +:host { + display: inline; +} diff --git a/projects/ui/src/lib/ui.module.ts b/projects/ui/src/lib/ui.module.ts index 90b0ac3..1d72f31 100644 --- a/projects/ui/src/lib/ui.module.ts +++ b/projects/ui/src/lib/ui.module.ts @@ -6,6 +6,7 @@ import { SectionModule } from './section/section.module'; import { TypographyModule } from './typography/typography.module'; import { SectionLabelModule } from './section-label/section-label.module'; import { ImageIconModule } from './image-icon/image-icon.module'; +import { ButtonModule } from './button/button.module'; @NgModule({ declarations: [], @@ -17,6 +18,7 @@ import { ImageIconModule } from './image-icon/image-icon.module'; TypographyModule, SectionLabelModule, ImageIconModule, + ButtonModule, ], exports: [ IconModule, diff --git a/src/.DS_Store b/src/.DS_Store new file mode 100644 index 0000000..34bc727 Binary files /dev/null and b/src/.DS_Store differ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ba361db..fa89b50 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,6 +22,7 @@ import { GamesBarModule } from './components/games-bar/games-bar.module'; import { MainModule } from './components/main/main.module'; import { PlaygroundModule } from './components/playground/playground.module'; import { SandboxModule } from './components/sandbox/sandbox.module'; +import { SignInModule } from './components/sign-in/sign-in.module'; @NgModule({ declarations: [AppComponent], @@ -38,6 +39,7 @@ import { SandboxModule } from './components/sandbox/sandbox.module'; MainModule, PlaygroundModule, SandboxModule, + SignInModule, ], providers: [ { provide: APP_BASE_HREF, useValue: '/' }, 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 index 6c52080..69b6217 100644 --- 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 @@ -9,20 +9,20 @@ import { Session } from 'projects/ui/src/lib/interfaces/session'; export class MenuSessionsComponent implements OnInit { sessions: Session[] = [ { - icon: '/assets/games-icons/gmod.png', + icon: '/assets/games/minecraft/icon.png', title: 'Minecraft', version: '000', status: 'text', expires: new Date(), }, { - icon: '/assets/games-icons/openarena.jpg', + icon: '/assets/games/garrysmod/icon.png', title: 'Minecraft 2', version: '000', expires: new Date(), }, { - icon: '/assets/games-icons/gmod.png', + icon: '/assets/games/minecraft/icon.png', title: 'Minecraft 3', version: '000', expires: new Date(), diff --git a/src/app/components/main/main-root/main-root.component.html b/src/app/components/main/main-root/main-root.component.html index b645ba3..eb97eda 100644 --- a/src/app/components/main/main-root/main-root.component.html +++ b/src/app/components/main/main-root/main-root.component.html @@ -1,4 +1,5 @@ -
+
+
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 index 95997d2..6343d15 100644 --- a/src/app/components/main/main-root/main-root.component.scss +++ b/src/app/components/main/main-root/main-root.component.scss @@ -1,5 +1,17 @@ :host { display: block; + position: relative; + width: 100vw; + height: 100vh; + overflow: hidden; + + img { + position: absolute; + height: 100%; + top: 0; + left: 50%; + translate: -50% 0%; + } .main-wrapper { display: flex; diff --git a/src/app/components/main/main-root/main-root.component.ts b/src/app/components/main/main-root/main-root.component.ts index 8a9fb67..56eac22 100644 --- a/src/app/components/main/main-root/main-root.component.ts +++ b/src/app/components/main/main-root/main-root.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { FastAverageColor } from 'fast-average-color'; +import { FastAverageColor, FastAverageColorResult } from 'fast-average-color'; @Component({ selector: 'app-main-root', @@ -7,18 +7,30 @@ import { FastAverageColor } from 'fast-average-color'; styleUrls: ['./main-root.component.scss'], }) export class MainRootComponent implements OnInit { - image: string = 'assets/games-icons/gmod.png'; + image: string = 'assets/games/minecraft/backgrounds/5.webp'; + color?: FastAverageColorResult; constructor() {} - ngOnInit(): void { - this.setColors(); + ngAfterViewInit(): void { + //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only. + //Add 'implements AfterViewInit' to the class. + window.addEventListener('load', () => { + this.setColors(); + }); } + ngOnInit(): void {} + setColors() { // extractColors(this.image).then((value) => { // console.log(value); // }); - console.log(FastAverageColor); + let fac = new FastAverageColor(); + this.color = fac.getColor( + document.getElementById('image') as HTMLImageElement + ); + + console.log(this.color); } } diff --git a/src/app/components/sign-in/sign-in.component.html b/src/app/components/sign-in/sign-in.component.html new file mode 100644 index 0000000..c094911 --- /dev/null +++ b/src/app/components/sign-in/sign-in.component.html @@ -0,0 +1,12 @@ +
+ + + Sign in with Discord + +
+
+ Please, check your default browser and click 'Continue' after Discord authentication: + + Continue + +
diff --git a/src/app/components/sign-in/sign-in.component.scss b/src/app/components/sign-in/sign-in.component.scss new file mode 100644 index 0000000..ac2970b --- /dev/null +++ b/src/app/components/sign-in/sign-in.component.scss @@ -0,0 +1,23 @@ +:host { + display: flex; + width: 100vw; + height: 100vh; + justify-content: center; + align-items: center; + + .sk-state { + width: 300px; + padding: var(--sk-gap-xl); + background-color: rgba(255, 255, 255, 0.05); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: var(--sk-br-m); + gap: var(--sk-gap-l); + + skirda-text { + text-align: center; + } + } +} diff --git a/src/app/components/sign-in/sign-in.component.spec.ts b/src/app/components/sign-in/sign-in.component.spec.ts new file mode 100644 index 0000000..bd946e2 --- /dev/null +++ b/src/app/components/sign-in/sign-in.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SignInComponent } from './sign-in.component'; + +describe('SignInComponent', () => { + let component: SignInComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SignInComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SignInComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/sign-in/sign-in.component.ts b/src/app/components/sign-in/sign-in.component.ts new file mode 100644 index 0000000..00c70e7 --- /dev/null +++ b/src/app/components/sign-in/sign-in.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-sign-in', + templateUrl: './sign-in.component.html', + styleUrls: ['./sign-in.component.scss'], +}) +export class SignInComponent implements OnInit { + inProgress: boolean = false; + + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/components/sign-in/sign-in.module.ts b/src/app/components/sign-in/sign-in.module.ts new file mode 100644 index 0000000..a1bfc48 --- /dev/null +++ b/src/app/components/sign-in/sign-in.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SignInComponent } from './sign-in.component'; +import { ButtonModule } from 'projects/ui/src/lib/button/button.module'; +import { IconModule, TypographyModule } from 'projects/ui/src/public-api'; + +@NgModule({ + declarations: [SignInComponent], + imports: [CommonModule, ButtonModule, IconModule, TypographyModule], + exports: [SignInComponent], +}) +export class SignInModule {} diff --git a/src/app/modules/app-routing.module.ts b/src/app/modules/app-routing.module.ts index c67ee7d..ff895ea 100644 --- a/src/app/modules/app-routing.module.ts +++ b/src/app/modules/app-routing.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; import { MainRootComponent } from '../components/main/main-root/main-root.component'; import { PlaygroundComponent } from '../components/playground/playground.component'; import { SandboxComponent } from '../components/sandbox/sandbox.component'; +import { SignInComponent } from '../components/sign-in/sign-in.component'; const routes: Routes = [ { @@ -17,6 +18,10 @@ const routes: Routes = [ path: 'sandbox', component: SandboxComponent, }, + { + path: 'sign-in', + component: SignInComponent, + }, ]; @NgModule({ diff --git a/src/assets/icons/Name=discord.svg b/src/assets/icons/Name=discord.svg new file mode 100644 index 0000000..d198389 --- /dev/null +++ b/src/assets/icons/Name=discord.svg @@ -0,0 +1,3 @@ + + +