/sign-in route

projects/ui/src/lib/button/button.component.html

@@ -0,0 +1,3 @@
+<button>
+  <ng-content></ng-content>
+</button>

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);
+  }
+}

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<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ButtonComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+  }
+
+}

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 {}

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: contain;
-    background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     overflow: hidden;

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);
     }
   }
 

projects/ui/src/lib/typography/text/text.component.scss

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

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,

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: '/' },

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(),

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

@@ -1,4 +1,5 @@
-<div class="main-wrapper" [style.background-image]="'url(' + image + ')'">
+<div class="main-wrapper" [style]="'--image-accent:' + color?.rgba">
+  <img [src]="image" id="image">
   <app-main-menu></app-main-menu>
   <div class="content">
     content will be here

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;

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 {
+  ngAfterViewInit(): void {
-    this.setColors();
+    //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);
   }
 }

src/app/components/sign-in/sign-in.component.html

@@ -0,0 +1,12 @@
+<div class="sk-state" *ngIf="!inProgress">
+  <skirda-button>
+    <skirda-icon name="discord"></skirda-icon>
+    <skirda-heading size="6">Sign in with Discord</skirda-heading>
+  </skirda-button>
+</div>
+<div class="sk-state" *ngIf="inProgress">
+  <skirda-text>Please, check your default browser and click 'Continue' after Discord authentication:</skirda-text>
+  <skirda-button>
+    <skirda-heading size="6">Continue</skirda-heading>
+  </skirda-button>
+</div>

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;
+    }
+  }
+}

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<SignInComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SignInComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SignInComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {}
+}

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 {}

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({

src/assets/icons/Name=discord.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6361 5.38186C18.212 4.73631 16.6893 4.26715 15.0973 4C14.9018 4.34248 14.6734 4.80312 14.5159 5.16953C12.8236 4.92296 11.1469 4.92296 9.48573 5.16953C9.32828 4.80312 9.09466 4.34248 8.8974 4C7.30374 4.26715 5.77926 4.73804 4.35518 5.38528C1.48275 9.59078 0.70409 13.6918 1.09342 17.7346C2.99856 19.113 4.84489 19.9504 6.66003 20.4983C7.10821 19.9007 7.5079 19.2654 7.85226 18.5959C7.19645 18.3545 6.56832 18.0565 5.97482 17.7106C6.13227 17.5976 6.28627 17.4795 6.43507 17.3579C10.055 18.9983 13.9881 18.9983 17.5648 17.3579C17.7154 17.4795 17.8694 17.5976 18.0251 17.7106C17.4299 18.0582 16.8 18.3562 16.1442 18.5976C16.4886 19.2654 16.8865 19.9024 17.3364 20.5C19.1533 19.9521 21.0014 19.1148 22.9065 17.7346C23.3633 13.048 22.1261 8.98459 19.6361 5.38186ZM8.34541 15.2483C7.25873 15.2483 6.36758 14.2654 6.36758 13.0685C6.36758 11.8716 7.2397 10.887 8.34541 10.887C9.45115 10.887 10.3423 11.8699 10.3232 13.0685C10.325 14.2654 9.45115 15.2483 8.34541 15.2483ZM15.6545 15.2483C14.5678 15.2483 13.6767 14.2654 13.6767 13.0685C13.6767 11.8716 14.5488 10.887 15.6545 10.887C16.7602 10.887 17.6513 11.8699 17.6323 13.0685C17.6323 14.2654 16.7602 15.2483 15.6545 15.2483Z" stroke="#292D32" stroke-width="1.5"/>
+</svg>