Repository: IvinRodrigues/AngularOfLegends
Branch: main
Commit: 0847c1943681
Files: 114
Total size: 318.1 KB

Directory structure:
gitextract_svczxah5/

├── .browserslistrc
├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── e2e/
│   ├── protractor.conf.js
│   ├── src/
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── src/
│   ├── app/
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── layout/
│   │   │   └── main-client-layout/
│   │   │       ├── main-client-layout.component.html
│   │   │       ├── main-client-layout.component.scss
│   │   │       ├── main-client-layout.component.spec.ts
│   │   │       └── main-client-layout.component.ts
│   │   └── modules/
│   │       ├── auth/
│   │       │   ├── auth-routing.module.ts
│   │       │   ├── auth.module.ts
│   │       │   └── login/
│   │       │       ├── login.component.html
│   │       │       ├── login.component.scss
│   │       │       ├── login.component.spec.ts
│   │       │       └── login.component.ts
│   │       └── client/
│   │           ├── background.service.ts
│   │           ├── chat/
│   │           │   ├── chat.component.html
│   │           │   ├── chat.component.scss
│   │           │   ├── chat.component.spec.ts
│   │           │   └── chat.component.ts
│   │           ├── client-routing.module.ts
│   │           ├── client.module.ts
│   │           ├── game/
│   │           │   ├── champion-select/
│   │           │   │   ├── champion-select.component.html
│   │           │   │   ├── champion-select.component.scss
│   │           │   │   ├── champion-select.component.spec.ts
│   │           │   │   └── champion-select.component.ts
│   │           │   ├── game-routing.module.ts
│   │           │   ├── game.module.ts
│   │           │   └── loading/
│   │           │       ├── loading.component.html
│   │           │       ├── loading.component.scss
│   │           │       ├── loading.component.spec.ts
│   │           │       └── loading.component.ts
│   │           ├── home/
│   │           │   ├── home/
│   │           │   │   ├── home.component.html
│   │           │   │   ├── home.component.scss
│   │           │   │   ├── home.component.spec.ts
│   │           │   │   └── home.component.ts
│   │           │   ├── home-routing.module.ts
│   │           │   ├── home.module.ts
│   │           │   ├── overview/
│   │           │   │   ├── overview.component.html
│   │           │   │   ├── overview.component.scss
│   │           │   │   ├── overview.component.spec.ts
│   │           │   │   └── overview.component.ts
│   │           │   └── patch-notes/
│   │           │       ├── patch-notes.component.html
│   │           │       ├── patch-notes.component.scss
│   │           │       ├── patch-notes.component.spec.ts
│   │           │       └── patch-notes.component.ts
│   │           ├── play/
│   │           │   ├── lobby/
│   │           │   │   ├── lobby.component.html
│   │           │   │   ├── lobby.component.scss
│   │           │   │   ├── lobby.component.spec.ts
│   │           │   │   └── lobby.component.ts
│   │           │   ├── play-menu/
│   │           │   │   ├── play-menu.component.html
│   │           │   │   ├── play-menu.component.scss
│   │           │   │   ├── play-menu.component.spec.ts
│   │           │   │   └── play-menu.component.ts
│   │           │   ├── play-routing.module.ts
│   │           │   ├── play.module.ts
│   │           │   └── pvp/
│   │           │       ├── pvp.component.html
│   │           │       ├── pvp.component.scss
│   │           │       ├── pvp.component.spec.ts
│   │           │       └── pvp.component.ts
│   │           ├── play.service.ts
│   │           ├── profile/
│   │           │   ├── match-history/
│   │           │   │   ├── match-history.component.html
│   │           │   │   ├── match-history.component.scss
│   │           │   │   ├── match-history.component.spec.ts
│   │           │   │   └── match-history.component.ts
│   │           │   ├── overview/
│   │           │   │   ├── overview.component.html
│   │           │   │   ├── overview.component.scss
│   │           │   │   ├── overview.component.spec.ts
│   │           │   │   └── overview.component.ts
│   │           │   ├── profile/
│   │           │   │   ├── profile.component.html
│   │           │   │   ├── profile.component.scss
│   │           │   │   ├── profile.component.spec.ts
│   │           │   │   └── profile.component.ts
│   │           │   ├── profile-routing.module.ts
│   │           │   └── profile.module.ts
│   │           └── sound.service.ts
│   ├── assets/
│   │   ├── .gitkeep
│   │   ├── scss/
│   │   │   ├── animations.scss
│   │   │   ├── buttons.scss
│   │   │   └── menu-component.scss
│   │   └── sounds/
│   │       ├── khazix.ogg
│   │       ├── khazix.ogg.sfk
│   │       ├── tf.ogg
│   │       ├── tf.ogg.sfk
│   │       ├── zed.ogg
│   │       └── zed.ogg.sfk
│   ├── data/
│   │   ├── champions.ts
│   │   ├── friends.ts
│   │   ├── items.ts
│   │   ├── player.ts
│   │   └── spells.ts
│   ├── environments/
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .browserslistrc
================================================
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.


================================================
FILE: .editorconfig
================================================
# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false


================================================
FILE: .gitignore
================================================
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out

# dependencies
/node_modules

# profiling files
chrome-profiler-events*.json
speed-measure-plugin*.json

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db


================================================
FILE: README.md
================================================
![Preview](https://angularoflegends.ivinrodrigues.com/assets/images/preview.png)

# AngularOfLegends

Welcome to the Angular of Legends repository a league of legends client clone made entirely in Angular. Feel free to view or contribute to the project :D

[Live demo](https://angularoflegends.ivinrodrigues.com/) 

## Settings

[Angular CLI](https://github.com/angular/angular-cli) version 10.2.0.


================================================
FILE: angular.json
================================================
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "AngularOfLegends": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/AngularOfLegends",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "22mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "22kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "AngularOfLegends:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "AngularOfLegends:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "AngularOfLegends:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "AngularOfLegends:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "AngularOfLegends:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "AngularOfLegends"
}


================================================
FILE: e2e/protractor.conf.js
================================================
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');

/**
 * @type { import("protractor").Config }
 */
exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    browserName: 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({
      spec: {
        displayStacktrace: StacktraceOption.PRETTY
      }
    }));
  }
};

================================================
FILE: e2e/src/app.e2e-spec.ts
================================================
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('AngularOfLegends app is running!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});


================================================
FILE: e2e/src/app.po.ts
================================================
import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo(): Promise<unknown> {
    return browser.get(browser.baseUrl) as Promise<unknown>;
  }

  getTitleText(): Promise<string> {
    return element(by.css('app-root .content span')).getText() as Promise<string>;
  }
}


================================================
FILE: e2e/tsconfig.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "module": "commonjs",
    "target": "es2018",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}


================================================
FILE: karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/AngularOfLegends'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};


================================================
FILE: package.json
================================================
{
  "name": "angular-of-legends",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.2.0",
    "@angular/common": "~10.2.0",
    "@angular/compiler": "~10.2.0",
    "@angular/core": "~10.2.0",
    "@angular/forms": "~10.2.0",
    "@angular/localize": "~10.2.0",
    "@angular/platform-browser": "~10.2.0",
    "@angular/platform-browser-dynamic": "~10.2.0",
    "@angular/router": "~10.2.0",
    "bootstrap": "^4.5.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.0",
    "@angular/cli": "~10.2.0",
    "@angular/compiler-cli": "~10.2.0",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}


================================================
FILE: src/app/app-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

  { path: '', loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule)},
  { path: 'client', loadChildren: () => import('./modules/client/client.module').then(m => m.ClientModule) }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }


================================================
FILE: src/app/app.component.html
================================================
<div class="warning">

    <img src="https://vignette.wikia.nocookie.net/leagueoflegends/images/e/e3/Despair_Emote.png/revision/latest?cb=20171120231702">

    <h1>Sorry</h1>

    <p>Angular of Legends doesn't work very well at resolutions smaller than 1.000px.<br>
        I'm working to resolve this as soon as possible :D</p>

</div>

<router-outlet></router-outlet>

================================================
FILE: src/app/app.component.scss
================================================
.warning {

    background-color: black;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 50;
    justify-content: center;
    align-items: center;
    color: white;

    h1 {

        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        font-weight: bold;
        margin-top: 2rem;

    }

    p {

        font-family: 'Roboto', sans-serif;
        color: white;
        font-size: 1rem;
        margin-top: 1rem;
        text-align: center;

    }

}

@media only screen and (max-width: 1000px) {

    .warning {

        display: flex;
        flex-direction: column;
        overflow: auto;

    }

}

================================================
FILE: src/app/app.component.spec.ts
================================================
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'AngularOfLegends'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('AngularOfLegends');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.content span').textContent).toContain('AngularOfLegends app is running!');
  });
});


================================================
FILE: src/app/app.component.ts
================================================
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'AngularOfLegends';
}


================================================
FILE: src/app/app.module.ts
================================================
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


================================================
FILE: src/app/layout/main-client-layout/main-client-layout.component.html
================================================
<div [ngClass]="{'background-client-queue': inQueue}" id="backgroundClient"></div>

<video [ngClass]="{'video-background-visible': inQueue}" class="video-background" autoplay loop muted>
    <source src="./../../../assets/videos/lobby/particles.mp4" type="video/mp4">
</video>

<div id="matchFound" [ngClass]="{'match-accepted': matchAccepted}" class="match-found">
    
    <div class="external-circle">
        <div class="internal-circle">
            <div class="progress-circle">
                <div class="match-informations">
                    <img src="./assets/images/play-icons/sr-enabled.png">
                    <span *ngIf="!matchAccepted && !matchDeclined" class="match-announcement">Match found</span>
                    <span *ngIf="!matchAccepted && !matchDeclined" class="match-description">Summoner's Rift - Featured - 5v5</span>
                    <span *ngIf="matchAccepted" class="match-announcement">Match accepted</span>
                    <span *ngIf="matchAccepted" class="match-description">Waiting other players</span>
                </div>
            </div>
            <span id="progressBar" class="bar"></span>
        </div>
        <span (click)="acceptMatch()" class="accept-button">
            <span>Accept!</span>
            <img src="./assets/images/match-found/accept-button.png">
        </span>
        <button (click)="cancelMatch()" class="decline-button">Decline</button>
    </div>

</div>

<span class="main-layout-horizontal-line"></span>

<header class="main-header">

    <nav>

        <ul>

            <li class="button-play-wrapper" (mouseenter)="playSound('playButtonHover')" (click)="playSound('playButtonClick')" routerLink="play" > 
                
                <img class="play-button-shape" src="../../assets/images/play-button/play-button-shape.png">
                <img class="play-button-click-area" src="../../assets/images/play-button/play-button-click-area.png">
                <span class="play-button-text">Play</span>
            
            </li>
            <li routerLink="home" routerLinkActive="item-background-active" class="item-background-hover"> <a (click)="playSound('menuClick')" class="item-link-formated">Home</a> </li>
            <li class="item-background-hover"> <a class="item-link-formated item-desabled">Tft</a> </li>
            <li class="item-background-hover"> <a class="item-link-formated item-desabled">Clash</a> </li>


        </ul>

        <ul class="right-list">

            <li class="item-background-hover" routerLink="profile" routerLinkActive="item-background-active">  <a> <img (click)="playSound('menuClick')" src="../../assets/images/header-icons/profile.png"> </a> </li>
            <li class="item-background-hover"> <a class="item-desabled"> <img src="../../assets/images/header-icons/collection.png"> </a> </li>
            <li class="item-background-hover"> <a class="item-desabled"> <img src="../../assets/images/header-icons/booty.png"> </a> </li>
            <li class="item-background-hover"> <a class="item-desabled"> <img src="../../assets/images/header-icons/shop.png"> </a> </li>
            <li> <img class="divider" src="../../assets/images/header-icons/divider.png"> </li>
            <li class="money">
            
               <div class="riot-points">

                <img src="../../assets/images/header-icons/riot-points.png">
                <span>88</span>

               </div> 
            
               <div class="blue-essence">

                <img src="../../assets/images/header-icons/blue-essence.png">
                <span>2528</span>

               </div> 

            </li>

        </ul>

    </nav>

</header>

<aside class="main-aside">

    <div class="user-information">

        <img src="../../assets/images/aside-icons/avatar-wrapper.png">
        <img class="profile-image" src="{{ player.picture }}">
        <span class="user-level">287</span>

        <div class="user-wrapper">

            <span class="user-nickname truncate">{{ player.name }}</span>

            <div class="user-status">

                <span class="user-status-circle" [ngClass]="{'user-status-circle-afk': onlineStatus == false}" (click)="changeOnlineStatus()"></span>
                <span class="user-status-message truncate" [ngClass]="{'user-status-message-afk': onlineStatus == false}">"status"</span>

            </div>

        </div>

    </div>

    <div id="playInformations" class="play-informations">

        <div id="lobbyPreview" class="lobby">

            <header>
                <img class="friend-icon" src="./assets/images/lobby/friend-icon.png">
                <span class="party-status">Closed party</span>
            </header>

            <img class="mini-sr" src="./assets/images/lobby/mini-sr.png">

            <div class="players">
                <img class="active" src="./assets/images/lobby/single-friend-icon.png">
                <img src="./assets/images/lobby/single-friend-icon.png">
            </div>

            <span class="queue-type">Ranked Solo/Duo</span>

        </div>

        <div id="queuePreview" class="queue">

            <header>
                <span (click)="cancelQueue()" class="close">x</span>
                <span class="queue-message">Finding match</span>
            </header>

            <img class="mini-sr" src="./assets/images/lobby/mini-sr.png">

            <div class="time">{{queueTimeMinutes}}:0{{queueTimeSeconds}}</div>

            <span class="queue-type">Estimated 1:20</span>

        </div>

    </div>

    <div id="menuAside" class="menu-aside">

        <span>Social</span>
        <div class="menu-aside-icons-wrapper">

            <img src="../../assets/images/aside-icons/add-friend.png">
            <img src="../../assets/images/aside-icons/add-folder.png">
            <img src="../../assets/images/aside-icons/options.png">
            <img src="../../assets/images/aside-icons/search.png">

        </div>
    
    </div>

    <div class="friend-list">

        <div (scroll)="ajustPopoversPosition()" id="scrollableArea" [ngClass]="{'scrollable-area-lobby': inLobby}" class="scrollable-area">

            <div class="group-area">

                <ul>

                    <li> 
                    
                        <img src="../../assets/images/aside-icons/main-group-flag.png">
                        <div class="group-information-wrapper">
                            <span class="group-abreviation">XXXX</span>
                            <span class="group-name truncate">Group Name</span>
                        </div>
                    
                    </li>

                    <li> 
                    
                        <img src="../../assets/images/aside-icons/group-flag.png">
                        <div class="group-information-wrapper">
                            <span class="group-abreviation">XXXX</span>
                            <span class="group-name truncate">Group Name</span>
                        </div>
                    
                    </li>

                    <li> 
                    
                        <img src="../../assets/images/aside-icons/group-flag.png">
                        <div class="group-information-wrapper">
                            <span class="group-abreviation">XXXX</span>
                            <span class="group-name truncate">Group Name</span>
                        </div>
                    
                    </li>

                </ul>

            </div>

            <div class="friends-agroupment">

                <ul>

                    <div *ngFor="let friend of friends" id="popover{{friend.id}}" class="friend-popover" style="background-image: url({{friend.profileBackground}})">

                        <div  class="popover-information">

                            <div class="popover-profile-image-wrapper">
                                <img src="./../../../assets/images/aside-icons/platina.png" class="popover-rank-image">
                                <img src="{{ friend.profilePicture }}" class="popover-profile-image">
                                <span [ngClass]="{'one': friend.rankTier == 'I', 'two': friend.rankTier == 'II', 'three': friend.rankTier == 'III', 'four': friend.rankTier == 'IV' }" class="tier">{{ friend.rankTier }}</span>
                            </div>

                            <div class="popover-friend-informations">

                                <span class="popover-friend-name">{{ friend.name }}</span>
                                <span class="popover-friend-group-abreviation">Group</span>

                                <span class="popover-friend-server-information">{{ friend.name }} #BR1</span>

                                <span class="popover-friend-rank">{{ friend.rank }}{{ friend.rankTier }} (Solo/Duo)</span>

                            </div>

                            <div class="popover-status">

                                <span>

                                    <div class="friend-status-circle friend-status-circle-queue"></div>

                                    <p>( Ranked )</p>

                                    <p class="time">20:00</p>

                                </span>
                                <span>

                                    <img src="./../../../assets/images/aside-icons/status-message.png">

                                    <p>"Status message"</p>

                                </span>

                            </div>

                        </div>

                    </div>

                    <li (click)="changeGeralVisibility()">General (9/{{allFriends}})</li>
                    <ul [ngClass]="{'friends-sublist-open': geral == true}" class="friends-sublist">

                        <li *ngFor="let friend of friends; let i = index" id='friend{{friend.id}}'  (click)="changeChatVisibility(friend)" (mouseenter)="showPopover(friend.id)" (mouseleave)="hidePopover(friend.id)" >

                            <span *ngIf="i == friends.length - 1">{{ ajustPopoversPosition() }}</span>

                            <div class="friend-profile-image-border">
                                <img src="{{friend.profilePicture}}" class="friend-profile-image">
                            </div>
                            <div [ngClass]="{'friend-status-circle-offline': friend.status == 1, 'friend-status-circle-queue': friend.status == 2,  'friend-status-circle-afk': friend.status == 3}" class="friend-status-circle"></div>

                            <div class="friend-informations">

                                <span class="friend-name truncate">{{ friend.name }}</span>
                                <span [ngClass]="{'friend-status-offline': friend.status == 1, 'friend-status-queue': friend.status == 2,  'friend-status-afk': friend.status == 3}" class="friend-status truncate">
                                    {{ friend.statusMessage }}
                                </span>

                            </div>

                        </li>

                    </ul>

                </ul>

            </div>

        </div>

        <footer>

            <img (click)="changeChatVisibility()" src="../../assets/images/aside-icons/chat.png">
            <img src="../../assets/images/aside-icons/missions.png">
            <img src="../../assets/images/aside-icons/voice.png">
            <span class="client-version">V 1.0</span>
            <img (click)="changeBugModalVisibility()" class="bug" src="../../assets/images/aside-icons/bug.png">

        </footer>

    </div>

</aside>

<main id="main-content" class="main-content">

    <router-outlet></router-outlet>

</main>

<app-chat [ngClass]="{'chat-open': chat}" [currentChat]="currentChat"></app-chat>

<div [ngClass]="{'modal-visible': bugModal}" class="modal">

    <div class="image-wrapper">
        <img class="khazix" src="https://external-preview.redd.it/wriDatZOwSGRrWQs0c0qQpF1-FdPVZvLKtf6L5OIBGQ.png?auto=webp&s=05ee4c1c9520b4650aeea95151a6fd4a660485ac">
        <img class="slipper" src="./../../../assets//images/aside-icons/slipper.png">
    </div>

    <h1>Found a <b>Kha'Zix?</b></h1>
    <h2><a href="https://www.linkedin.com/in/ivin-rodrigues-a49113187/" target="_blank">Contact me </a>  or  <a href="https://github.com/IvinRodrigues/AngularOfLegends" target="_blank">create a pull request</a></h2>

    <button (click)="changeBugModalVisibility()">Close</button>

</div>

================================================
FILE: src/app/layout/main-client-layout/main-client-layout.component.scss
================================================
#backgroundClient {

    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    transition-duration: .5s;
    opacity: .6;

}

.background-client-queue {

    opacity: .2 !important;

}

.video-background {

    position: fixed;
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    opacity: 0;
    transition-duration: .5s;

}

.video-background-visible {

    opacity: .05;

}



.scrollable-area-lobby {

    height: calc(100vh - 315px) !important;

}

.match-found-visible {

    opacity: 1 !important;
    z-index: 6 !important;
    transform: scale(1) !important;

    .progress-circle {

        animation: Shine 2s infinite;

        @keyframes Shine {
        
            0% {
    
                filter: brightness(100%);
    
            }
            50% {
    
                filter: brightness(120%);
    
            }
            100% {
    
                filter: brightness(100%);
    
            }
    
        }

    }

}

.match-accepted {

    .bar {

        transform: translateY(-680px) scale(1.2);

    }

    .external-circle {

        animation-name: AcceptAnimation;
        animation-duration: .5s;

    }

    .progress-circle {

        filter: brightness(200%);
        animation-name: None !important;

    }

    .accept-button {

        img {

            filter: grayscale(100%) !important;
            cursor: default !important;

            &:hover {

                transform: scale(1) !important;

            }

        }

    }

    .decline-button {

        cursor: default !important;

    }

    @keyframes AcceptAnimation {
        
        0% {

            transform: scale(1)

        }
        50% {

            transform: scale(1.2)

        }
        100% {

            transform: scale(1)

        }

    }

}

.match-found {

    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.39);
    backdrop-filter: blur(12px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    display: flex;
    transition-duration: .2s;
    transform: scale(3) rotate(-30deg);
    z-index: -1;
    opacity: 0;

    .external-circle {

        width: 780px;
        height: 780px;
        background-color: transparent;
        border: 3px solid #71582a;
        border-radius: 50%;
        position: relative;

        .internal-circle {
    
            width: 640px;
            height: 640px;
            margin: calc(50% - 320px) auto;
            border: 3px solid #71582a;
            border-radius: 50%;
            overflow: hidden;

            .bar {

                width: 100%;
                height: 100%;
                background: #4cd7eb;
                background: linear-gradient(0deg, #4cd7eb 80%, transparent 100%);
                display: block;
                animation-duration: 20s;
                transition-duration: 1s;
                position: relative;
                z-index: 2;

            }

            @keyframes ProgressBar {
                
                0% {

                    transform: translateY(-670px);

                }
                100% {

                    transform: translateY(0);

                }

            }

            .progress-circle {
  
                width: 580px;
                height: 580px;
                margin: calc(50% - 292px) auto;
                background-color: transparent;
                background-image: url('https://images2.alphacoders.com/913/thumb-1920-913622.jpg');
                background-size: cover;
                background-position: center;
                border: 3px solid #71582a;
                border-radius: 50%;
                position: relative;
                z-index: 3;
                overflow: hidden;

                .match-informations {

                    width: 580px;
                    height: 580px;
                    background-color: #00000085;
                    text-align: center;

                    img {

                        margin-top: 160px;

                    }

                    .match-announcement {

                        color: #f0e6d2;
                        font-size: 2rem;
                        text-transform: uppercase;
                        font-weight: bold;
                        background: transparent;
                        padding-top: 1rem;
                        letter-spacing: 2px;
                        display: block;

                    }

                    .match-description {

                        font-family: 'Roboto', sans-serif;
                        color: #918874;
                        padding-top: 12px;
                        letter-spacing: 1px;
                        display: block;

                    }

                }

            }
    
        }

        .accept-button {

            display: flex;
            justify-content: center;
            position: absolute;
            top: 650px;
            left: calc(50% - 138px);
            z-index: 6;
            transition-duration: .2s;
            cursor: pointer;

            img {
                
                transition-duration: .2s;

            }

            span {

                color: #f0e6d2;
                font-size: 1.4rem;
                text-transform: uppercase;
                font-weight: bold;
                background: transparent;
                letter-spacing: 2px;
                position: absolute;
                top: 28px;
                z-index: 7;

            }

            &:hover {

                transform: scale(1.05);

                img {

                    filter: brightness(150%);

                }

            }
    
        }

        .decline-button {

            font-family: FrizQuadrata;
            color: #f0e6d2;
            font-size: 1.2rem;
            text-transform: uppercase;
            font-weight: bold;
            background: transparent;
            letter-spacing: 1px;
            padding: 0.6rem 3rem;
            border: 2px solid #c8aa6d;
            background-color: #1e2328;
            position: absolute;
            top: 750px;
            left: calc(50% - 93.5px);
            z-index: 6;
            cursor: pointer;
    
        }

    }

}

.main-layout-horizontal-line {

    display: block;
    width: 100%;
    height: 1px;
    background-color: #ffffff54;
    position: absolute;
    top: 104px;
    z-index: 5;

}

.main-header {

    width: calc(100% - 280px);
    height: 100px;
    background-color: transparent;
    z-index: 4;
    position: fixed;

    nav {

        background-color: #010a13bb;

        ul {

            display: inline-block;

            .button-play-wrapper:hover {

                cursor: pointer;

                .play-button-click-area {

                    filter: brightness(150%);
                    transition-duration: .2s;

                }

            }

            li {

                display: inline-block;
                position: relative;

                .play-button-shape {

                    margin: 0 2.2rem;
                    position: relative;
                    top: 20px;

                }

                .play-button-click-area {
                
                    position: absolute;
                    top: 26px;
                    left: 78px;
                    transition-duration: .2s;


                }

                .play-button-text {

                    text-transform: uppercase;
                    color: #f0e6d2;
                    font-weight: bold;
                    letter-spacing: 1px;
                    position: absolute;
                    left: 130px;
                    top: 38px;
                    cursor: pointer;

                }

                .item-link-formated {

                    color: #beb088;
                    text-transform: uppercase;
                    font-weight: bold;
                    background: transparent;
                    letter-spacing: 1px;
                    padding: 44.5px 1.5rem;
                    display: block;
                    transition-duration: .2s;

                    &:hover {

                        color: #f0e6d2;
                        transition-duration: .2s;

                    }

                }

            }

        }

        .right-list {

            text-align: right;
            position: absolute;
            right: 0;

            .item-background-hover {

                img {

                    padding: 38px 1.5rem;
                    transition-duration: .2s;

                    &:hover {

                        filter: brightness(150%);

                    }

                }

            }

            .money {

                color: #f0e6d2;
                letter-spacing: 2px;
                font-weight: bold;
                position: relative;
                top: -28px;
                text-align: left;
                margin-right: 3rem;

                .blue-essence {

                    padding: .5rem 0;

                }

                img {

                    display: inline-block;
                    margin-right: 6px;
                    transform: translateY(2px);

                }
                
            }

            .divider {

                display: block;
                width: 2px;
                height: 60px;
                margin: 0 2.2rem 1.1rem 1rem;

            }

        }

    }

}

.main-aside {

    width: 280px;
    background-color: #010a13bb;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;

    .user-information {

        color: #f0e6d2;
        position: relative;

        img { 

            margin: .6rem .5rem;
            display: inline-block;
            cursor: pointer;
            transition-duration: .2s;
            position: relative;
            z-index: 2;

            &:hover {

                filter: brightness(125%);
                transition-duration: .2s;

            }

        }

        .profile-image {

            width: 76px;
            position: absolute;
            left: 0;
            border-radius: 50%;
            z-index: 1;

        }

        .user-level {

            color: #a09b8c;
            font-size: 14px;
            position: absolute;
            left: 33.5px;
            top: 74px;
            z-index: 3;

        }

        .user-nickname {

            display: block;
            font-size: 18px;
            letter-spacing: 1px;
            padding: 2rem 0 0 .2rem;

        }

        .user-wrapper {

            width: 173px;
            display: inline-block;
            height: 105px;
            vertical-align: bottom;
            margin-left: .2rem;

        }

        .user-status { 
            
            font-family: 'Roboto', sans-serif;
            display: block;
            margin-top: .5rem;

        }

        .user-status-message {

            width: calc(100% - 20px);
            display: inline-block;
            color: #09a646;
            vertical-align: middle;
            padding-left: 6px;

        }

        .user-status-message-afk {

            color: #beb088;

        }

        .user-status-circle {

            display: inline-block;
            width: 10px;
            height: 10px;
            border: solid 2px;
            border-color: #66f8a0;
            background-color: #09a646;
            border-radius: 300px;
            vertical-align: middle;
            cursor: pointer;

        }

        .user-status-circle-afk {

            border-color: #9c3213;
            background-color: transparent;

        }

    }

    .play-informations {

        position: absolute;
        width: 280px;
        right: -280px;
        z-index: 2;
        transition-duration: .2s;
        background: linear-gradient(216deg, #113351, #174670, #126aae);
        background-size: 600% 600%;
        overflow: hidden;
                
        -webkit-animation: BackgroundAnimation 5s ease infinite;
        -moz-animation: BackgroundAnimation 5s ease infinite;
        -o-animation: BackgroundAnimation 5s ease infinite;
        animation: BackgroundAnimation 5s ease infinite;
    
        @-webkit-keyframes BackgroundAnimation {
            0%{background-position:78% 0%}
            50%{background-position:23% 100%}
            100%{background-position:78% 0%}
        }
        @-moz-keyframes BackgroundAnimation {
            0%{background-position:78% 0%}
            50%{background-position:23% 100%}
            100%{background-position:78% 0%}
        }
        @-o-keyframes BackgroundAnimation {
            0%{background-position:78% 0%}
            50%{background-position:23% 100%}
            100%{background-position:78% 0%}
        }
        @keyframes BackgroundAnimation {
            0%{background-position:78% 0%}
            50%{background-position:23% 100%}
            100%{background-position:78% 0%}
        }

        .lobby {

            width: 248px;
            padding: 1rem 1rem 1.4rem 1rem;
            position: relative;
            transition-duration: .2s;

            header {

                display: block;

            }

            .friend-icon {

                transform: translateY(2px);

            }

            .party-status {

                color: #a39e8f;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 14px;
                letter-spacing: 2px;
                margin-left: 6px;

            }

            .mini-sr {

                padding-top: 14px;
                padding-right: 12px;
                display: inline-block;

            }

            .players {

                padding: 1rem 0;
                display: inline-block;
                position: absolute;
                top: 32px;

                .active {
    
                    opacity: 1;
    
                }

                img {

                    width: 16px;
                    margin: 0 4px;
                    opacity: .6;

                }

            }

            .queue-type {

                font-family: 'Roboto', sans-serif;
                color: #beb088;
                display: block;
                padding-left: 42px;
                position: absolute;
                top: 78px;
                left: 30px;

            }

        }

        .queue {

            width: 248px;
            padding: 1rem 1rem 1.4rem 1rem;
            position: absolute;
            top: 0;
            right: -284px;
            transition-duration: .2s;

            header {

                display: block;

                .close {

                    color: #beb088;
                    font-size: 26px;
                    float: right;
                    transition-duration: .2s;
                    cursor: pointer;

                    &:hover {

                        color: #e4dbc8;

                    }

                }

            }

            .queue-message {

                color: #a39e8f;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 14px;
                letter-spacing: 2px;
                margin-left: 6px;

            }

            .mini-sr {

                padding-top: 14px;
                padding-right: 12px;
                display: inline-block;

            }

            .time {

                font-family: 'Roboto', sans-serif;
                font-size: 40px;
                font-weight: bold;
                color: #e4dbc8;
                padding: 1rem 0;
                display: inline-block;
                position: absolute;
                top: 22px;
            }

            .queue-type {

                font-family: 'Roboto', sans-serif;
                color: #0ac5e1;
                display: block;
                padding-left: 42px;
                position: absolute;
                top: 80px;
                left: 30px;

            }

        }

    }

    .menu-aside {

        text-transform: uppercase;
        color: #e4dbc8;
        padding: .6rem;
        font-weight: bold;
        letter-spacing: 2px;
        transition-duration: .2s;

        span {

            width: 69px;
            display: inline-block;
            vertical-align: middle;

        }

        .menu-aside-icons-wrapper {
            
            display: inline-block;
            width: calc(100% - 69px);
            text-align: right;

            img {

                padding-left: .8rem;
                transition-duration: .2s;
                cursor: pointer;

                &:hover {

                    filter: brightness(150%);
                    transition-duration: .2s;

                }

            }

        }

    }

    .scrollable-area {

        overflow: auto;
        height: calc(100vh - 200px);
        padding-bottom: 8px;
        transition-duration: .2s;

        .group-area {

            ul {

                li {

                    padding: .8rem 0 .8rem .6rem;
                    transition-duration: .2s;
                    cursor: pointer;

                    &:hover {

                        background-color: #192026;
                        transition-duration: .2s;

                    }

                    img { display: inline-block;
                        vertical-align: middle; }

                    .group-information-wrapper {
                        
                        display: inline-block;

                        .group-abreviation {

                            color: #aa9261;
                            padding-left: .8rem;
                            height: 46px;
                            vertical-align: middle;

                        }

                        .group-name {

                            padding-left: .4rem;
                            color: #e4dbc8;
                            height: 46px;
                            vertical-align: middle;

                        }
                        
                    }

                }

            }

        }

        .friends-agroupment {

            .friend-popover {
    
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                width: 480px;
                height: 260px;
                position: absolute;
                left: -508px;
                transition-duration: .2s;
                display: none;

                &::after {

                    content: '';
                    background-image: url(./../../../assets/images/aside-icons/popover-wrapper.png);
                    background-repeat: no-repeat;
                    background-size: cover;
                    width: 494px;
                    height: 285px;
                    display: block;
                    position: absolute;
                    right: -14px;
                    top: 0;
                    z-index: 2;

                }

                .popover-information {

                    background-color: #010a13;
                    width: 100%;
                    height: 162px;
                    margin-top: 120px;

                    .popover-profile-image-wrapper {

                        display: inline-block;

                        .popover-rank-image {

                            position: absolute;
                            top: 48px;
                            left: 20px;
                            z-index: 2;

                        }

                        .popover-profile-image {

                            width: 90px;
                            border-radius: 300px;
                            position: relative;
                            top: -20px;
                            margin-left: 3.7rem;
                            z-index: 1;

                        }

                        .tier {

                            color: white;
                            text-align: center;
                            position: absolute;
                            bottom: 55px;
                            z-index: 2;

                        }

                        .one {

                            left: 101px !important;

                        }

                        .two {

                            left: 99px;

                        }

                        .three {

                            left: 97px;

                        }

                        .four {

                            left: 96px;

                        }

                    }

                    .popover-friend-informations {

                        font-family: 'Roboto', sans-serif;
                        display: inline-block;
                        padding: 1rem;
                        position: relative;
                        top: -20px;
                        left: 50px;

                        .popover-friend-name {

                            display: inline-block;
                            color: white;
                            font-weight: bold;
                            font-size: 20px;
                            letter-spacing: 1.5px;

                        }

                        .popover-friend-group-abreviation {

                            font-family: 'Roboto', sans-serif;
                            display: inline-block;
                            color: #c8aa6e;
                            font-size: 14px;
                            text-transform: uppercase;
                            margin-left: 4px;

                        }

                    }

                    .popover-friend-server-information {

                        font-family: 'Roboto', sans-serif;
                        display: block;
                        color: #ffffff2e;
                        font-size: 14px;
                        letter-spacing: 1px;
                        margin-top: 7px;
                        

                    }

                    .popover-friend-rank {

                        font-family: 'Roboto', sans-serif;
                        display: block;
                        color: #ffffff9f;
                        font-weight: bold;
                        font-size: 12px;
                        letter-spacing: 1.5px;
                        margin-top: 6px;

                    }

                    .popover-status {

                        font-family: 'Roboto', sans-serif;
                        border-top: 1px solid #ffffff3d;

                        span {

                            font-family: 'Roboto', sans-serif;
                            display: block;
                            padding: 9px 24px 0 32px;
                            color: #0ac5e1;
                            font-size: 14px;

                            .friend-status-circle {

                                position: absolute;
                                left: 1rem;

                            }

                            span, p {

                                display: inline-block;

                            }

                            p {

                                margin-left: 8px;

                            }

                            .time {

                                float: right;

                            }

                        }

                        span:nth-child(2) {

                            padding-left: 16px !important;
                            color: #a09b8c;

                        }

                    }

                }

            }

            ul {

                li {

                    color: #e4dbc8;
                    text-transform: uppercase;
                    letter-spacing: 2px;
                    font-size: 14px;
                    font-weight: bold;
                    padding: .6rem;
                    transition-duration: .2s;
                    cursor: pointer;

                    &:hover {

                        background-color: #192026;
                        transition-duration: .2s;

                    }

                }

                .friends-sublist {

                    display: none;
                    position: relative;

                    .friend-status-circle {

                        position: absolute;
                        transform: translate(28px, -15px);

                    }

                    .friend-profile-image-border {

                        width: 42px;
                        height: 42px;
                        background: rgb(106,80,40);
                        background: -moz-linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);
                        background: -webkit-linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);
                        background: linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);
                        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6a5028",endColorstr="#be9c57",GradientType=1);
                        border-radius: 300px;
                        display: inline-block;
                        margin-right: .8rem;
                        vertical-align: middle;
                        position: relative;

                        .friend-profile-image {

                            position: absolute;
                            width: 38px;
                            height: 38px;
                            border-radius: 300px;
                            left: 2px;
                            top: 2px;

                        }

                    }

                    .friend-informations {

                        display: inline-block;
                        width: calc(100% - 56px);
                        height: 42px;
                        vertical-align: middle;

                        .friend-name, .friend-status {

                            font-weight: normal;
                            display: block;
                            text-transform: initial;
                            letter-spacing: 0px;

                        }

                        .friend-name {

                            font-size: 18px;
                            color: #e4dbc883;

                        }

                        .friend-status {

                            margin-top: .5rem;
                            color: #09a646;

                        }

                        .friend-status-queue {

                            color: #0ac5e1 !important;

                        }

                        .friend-status-afk {

                            color: #e4dbc883 !important;

                        }

                        .friend-status-offline {

                            color: #e4dbc883 !important;

                        }

                        &:hover {

                            .friend-name {

                                color: #e4dbc8 !important;

                            }

                        }

                    }

                }

                .friends-sublist-open {

                    display: initial;

                }

            }

        }

    }

    footer {

        height: 47px;
        width: 99%;
        border: solid 1px #1e282d;

        img {

            width: 20px;
            padding: .8rem;
            background-color: #1e2328;
            transition-duration: .2s;
            border: solid 1px #c8a96b;
            cursor: pointer;

            &:hover {

                filter: brightness(150%);
                transition-duration: .2s;

            }

        }

        .bug {

            float: right;

        }

        .client-version {

            width: 86px;
            height: 50px;
            font-size: 14px;
            color: #34353b;
            vertical-align: middle;
            display: inline-block;
            font-weight: bold;
            text-align: center;

        }

    }

}

.truncate {

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.item-background-active {

    background: rgb(235,235,244);
    background: -moz-linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);
    background: -webkit-linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);
    background: linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ebebf4",endColorstr="#ffffff",GradientType=1);
    cursor: pointer;
    transition-duration: .2s;

    a {

        color: #f0e6d2 !important;

    }

}

.item-background-hover:hover {

    background: rgb(235,235,244);
    background: -moz-linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);
    background: -webkit-linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);
    background: linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ebebf4",endColorstr="#ffffff",GradientType=1);
    cursor: pointer;
    transition-duration: .2s;
    
}

.friend-status-circle {

    width: 6px;
    height: 6px;
    border-color: #66f8a0;
    background-color: #09a646;
    border: solid 4px;
    border-radius: 300px;

}

.friend-status-circle-queue {

    border-color: #0ac5e1 !important;
    background-color: #005176 !important;

}

.friend-status-circle-afk {

    border-color: #9c3213;
    background-color: #010a13 !important;

}

.friend-status-circle-offline {

    border-color: #4f514f !important;
    background-color: #010a13 !important;

}

.main-content {

    height: 100vh;
    width: calc(100% - 344px);
    overflow-x: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: color;
    padding: 0 2rem;
    position: relative;
    z-index: 0;

}

app-chat {

    position: fixed;
    bottom: -600px;
    right: 280px;
    z-index: 2;
    transition-duration: .2s;

}

.chat-open {

    bottom: 0;

}

.item-desabled {

    cursor: not-allowed;
    filter: grayscale(100%);
    opacity: .4;

}


.modal-visible {

    opacity: 1 !important;
    z-index: 12 !important;

}


.modal {

    color: white;
    background-color: #030619d4;
    width: 60%;
    height: 60%;
    position: fixed;
    top: 20%;
    left: 20%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #c7974a80;
    border-radius: 16px;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    opacity: 0;
    z-index: -2;
    transition-duration: .5s;
    overflow: auto;

    .image-wrapper {

        position: relative;

        .slipper {

            position: absolute;
            width: 85px;
            animation: Slap 2s infinite;

            @keyframes Slap {
                0% {

                    left: 16px;
                    top: 56px;
                    transform: scale(.9) rotate(0deg);
                    filter: blur(0);

                }
                83% {

                    filter: blur(0);

                }
                84% {

                    filter: blur(4px);

                }
                85% {

                    top: -24px;
                    left: -24px;
                    transform: scale(1.4) rotate(-45deg);

                }
                98% {

                    filter: blur(4px);

                }
                100% {

                    left: 16px;
                    top: 56px;
                    transform: scale(.9) rotate(0deg);
                    filter: blur(0);

                }
            }

        }

        .khazix {

            width: 140px;
            margin-top: 20px !important;
            margin-bottom: 2rem;
            animation: DieCockroach 2s infinite;

            @keyframes DieCockroach {
                0% {

                    transform: scale(1) translate(0);

                }
                94% {

                    transform: scale(1) translate(0);

                }
                95% {

                    transform: scale(1) translate(4px, -4px);
                    -webkit-filter: none;
                    filter: none;

                }
                94% {

                    transform: scale(1.1) translate(-4px, 4px);

                }
                95% {

                    transform: scale(1) translate(-4px, 4px);

                }
                96% {

                    transform: scale(.9) translate(-4px, 8px);

                }
                97% {

                    transform: scale(1) translate(8px, -4px);

                }
                98% {

                    transform: scale(1.1) translate(-4px, 4px);

                }
                99% {

                    transform: scale(1) translate(0);
                    -webkit-filter: invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
                    filter: grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);

                }
                100% {

                    transform: scale(1) translate(0);

                }
            }

        }

    }

    h1 {

        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        font-weight: bold;

        b {

            color: #fd0352;

        }

    }

    h2 {

        font-size: 1.2rem;
        margin: 1rem 0;

        a {

            color: #0acbe6;
            text-decoration: none;

        }

    }

    p {

        font-family: 'Roboto', sans-serif;
        font-size: 1.2rem;
        line-height: 1.8rem;
        width: 500px;
        margin-top: 2rem;
        text-align: justify;

        b {

            color: #fd0352;
            font-weight: bold;

        }

    }

    button {

        color: #ffffff80;
        background-color: #fd035207;
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 2px;
        border: 2px solid #fd03521c;
        margin-top: 10px;
        padding: 1rem 4rem;
        border-radius: 16px;
        transition-duration: .2s;
        margin-bottom: 20px;
        cursor: pointer;
        
        &:hover {
            
            color: #ffffff;
            background-color: #fd0352;
            box-shadow: 0 0 20px #fd03527c;
            transform: scale(1.1);

        }

    }

}

================================================
FILE: src/app/layout/main-client-layout/main-client-layout.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { MainClientLayoutComponent } from './main-client-layout.component';

describe('MainClientLayoutComponent', () => {
  let component: MainClientLayoutComponent;
  let fixture: ComponentFixture<MainClientLayoutComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MainClientLayoutComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MainClientLayoutComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/layout/main-client-layout/main-client-layout.component.ts
================================================
import { AfterViewInit, Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BackgroundService } from 'src/app/modules/client/background.service';
import { PlayService } from 'src/app/modules/client/play.service';
import { SoundService } from 'src/app/modules/client/sound.service';
import { Friends } from 'src/data/friends'
import { Player } from 'src/data/player';

@Component({
  selector: 'app-main-client-layout',
  templateUrl: './main-client-layout.component.html',
  styleUrls: ['./main-client-layout.component.scss']
})
export class MainClientLayoutComponent implements OnInit, AfterViewInit {

  player = Player
  onlineStatus: boolean = true
  geral: boolean = true
  chat: boolean = false
  currentChat: any = {}
  friends: any = Friends
  allFriends: number = this.friends.length
  inQueue: boolean = false
  inLobby: boolean = false
  queueTimeMinutes: number = 0
  queueTimeSeconds: any = 0
  matchAccepted: boolean = false
  matchDeclined: boolean = false
  bugModal: boolean = false

  constructor(private backgroundService: BackgroundService,
              private playService: PlayService,
              private soundService: SoundService,
              private router: Router) {

    this.backgroundService.getBackgroundObservable().subscribe(

      response => {

        document.getElementById('backgroundClient').style.backgroundImage = `url('${response.backgroundUrl}')`
        document.getElementById('backgroundClient').style.backgroundSize = response.backgroundSize
        document.getElementById('backgroundClient').style.backgroundPosition = response.backgroundPosition

      }

    )

    this.playService.getLobbyObservable().subscribe(

      response => {

        if(response == true) {

          this.inLobby = true
          // document.getElementById('scrollableArea').style.height = 'calc(100vh - 314px)'
          document.getElementById('menuAside').style.marginTop = '115px'
          document.getElementById('playInformations').style.right = '0'

        } else {

          this.inLobby = false
          document.getElementById('playInformations').style.right = '-280px'
          setTimeout( () => {

            // document.getElementById('scrollableArea').style.height = 'calc(100vh - 200px)'
            document.getElementById('menuAside').style.marginTop = '0'

          }, 100)

        }

      }

    )

    this.playService.getQueueObservable().subscribe(

      response => {

        if(response == true) {

          document.getElementById('lobbyPreview').style.transform = 'translateX(-280px)'
          document.getElementById('queuePreview').style.right = '0'
          this.inQueue = true
          setTimeout( () => { this.queueTime() }, 1000 )

        } else {

          document.getElementById('lobbyPreview').style.transform = 'translateX(0)'
          document.getElementById('queuePreview').style.right = '-280px'
          document.getElementById('matchFound').classList.remove('match-found-visible')
          this.inQueue = false
          this.queueTimeMinutes = 0
          this.queueTimeSeconds = 0

        }

      }

    )

  }



  ngOnInit(): void {
  }



  playSound(sound) {

    this.soundService.playSound(sound)

  }



  pauseSound(sound) {

    this.soundService.pauseSound(sound)

  }



  ngAfterViewInit(): void {

  }



  changeOnlineStatus() {

    this.onlineStatus = !this.onlineStatus

  }



  changeGeralVisibility() {

    this.geral = !this.geral

  }



  ajustPopoversPosition() {

    for(let friend of this.friends) {

      var friendContainer = document.getElementById(`friend${friend.id}`)
      var popover = document.getElementById(`popover${friend.id}`)
  
      var bodyRect = document.body.getBoundingClientRect(),
      elemRect = friendContainer.getBoundingClientRect(),
      offset   = (elemRect.top - bodyRect.top) - 110
  
      popover.style.top = `${offset}px`

    }

  }



  showPopover(id) {

    document.getElementById(`popover${id}`).style.display = 'block'

  }



  hidePopover(id) {

    document.getElementById(`popover${id}`).style.display = 'none'

  }



  changeChatVisibility(friend?) {

    this.chat = !this.chat
    this.currentChat = friend

  }



  queueTime() {

    if(this.queueTimeSeconds < 60) {

      this.queueTimeSeconds = this.queueTimeSeconds + 1
      
    } else {

      this.queueTimeMinutes = this.queueTimeMinutes + 1
      this.queueTimeSeconds = 0

    }

    if(this.queueTimeSeconds == 5) {

      document.getElementById('matchFound').classList.add('match-found-visible')
      document.getElementById('progressBar').style.animationName = 'ProgressBar'
      this.inQueue = false
      this.playSound('matchFound')

      setTimeout( () => { 

        if(this.matchAccepted == false && this.inQueue == false) {

          this.playService.changeQueueState(false)
          document.getElementById('matchFound').classList.remove('match-found-visible')
          document.getElementById('progressBar').style.animationName = ''

        }

       }, 14000)

    }

    if(this.inQueue == true) {

      setTimeout( () => { this.queueTime() }, 1000 )

    }
    

  }



  cancelQueue() {

    this.playService.changeQueueState(false)

  }



  acceptMatch() {
    
    this.playSound('matchFoundAcceptButtonClick')
    this.matchAccepted = true
    this.matchDeclined = false
    document.getElementById('progressBar').style.animationName = ''
    setTimeout( () => {
      this.router.navigateByUrl('/client/game/champion-select')
    }, 2000 )

  }



  cancelMatch() {

    if(this.matchAccepted == false) {

      this.pauseSound('matchFound')
      this.playSound('matchFoundDeclineButtonClick')
      this.matchAccepted = false
      this.matchDeclined = true
      this.playService.changeQueueState(false)
      document.getElementById('progressBar').style.animationName = ''
      setTimeout( () => { this.matchDeclined = false }, 1000 )
      this.playService.changeQueueState(false)

    }

  }



  changeBugModalVisibility() {

    this.bugModal = !this.bugModal

    if(this.bugModal == true) {
      
      this.playSound('khazix')

    }

  }

}


================================================
FILE: src/app/modules/auth/auth-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';

const routes: Routes = [

  { path: '', component: LoginComponent }

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthRoutingModule { }


================================================
FILE: src/app/modules/auth/auth.module.ts
================================================
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AuthRoutingModule } from './auth-routing.module';
import { LoginComponent } from './login/login.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    AuthRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class AuthModule { }


================================================
FILE: src/app/modules/auth/login/login.component.html
================================================
<div class="container">
    
    <aside>

        <img class="logo" src="/assets/images/auth/minimalist-logo.png">

        <span>Sign in</span>

        <form [formGroup]="loginForm" (ngSubmit)="makeLogin()">

            <input formControlName="username" id="username" (keyup)="usernameIdentify()" type="text">
            <label [ngClass]="{'label-top': haveCharacters}" for="username">Username</label>
            <small>Enter a fictitious username!<br>This application is not connected with Riot Games' APIS because of its usage policy.</small>

            <button [ngClass]="{'button-enabled': haveCharacters}" type="submit">
                <img src="/assets/images/auth/arrow-right.png">
            </button>

        </form>

    </aside>

</div>

<div [ngClass]="{'modal-close': !modal}" class="modal">

    <img src="https://i.redd.it/r6ysbhckzd811.png">

    <h2>Hey Summoner, welcome to</h2>
    <h1><b>Angular</b> of Legends</h1>
    <p>This is a project for <b>educational purposes only</b>.<br>
    League of Legends is a registered trademark of Riot Games, inc. I am in no way affiliated with, associated with or endorsed by Riot Games, inc. 
    All copyrights, image marks and service marks belong to their respective owners (Don't file a lawsuit against me please, I need to feed my cats).<br>
    In no way do I intend to monetize this project. <b>It was created just to test my Front-End and Angular skills :)</b>.
    </p>

    <button (click)="closeModal()">Close</button>

</div>

<div [ngClass]="{'warning-visible': !modal}" class="warning">
    <img src="./../../../../assets/images/auth/twistedfate.png">
    <div class="text-wrapper">
        <h1>Stop right there cowboy!</h1>
        <h2>This is a Twisted Fate alert</h2>
        <p>For a better experience please activate the sound :D<br><b>(please i did all the sound part too)</b></p>
    </div>
</div>

================================================
FILE: src/app/modules/auth/login/login.component.scss
================================================
.container {

    background-image: url('https://images.contentstack.io/v3/assets/blt731acb42bb3d1659/blt7225731dfb1a126a/60249b80f4a7946af0338313/LoL-Patch-Notes-11-4-Article-Banner.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;

    .video-background {
        
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        object-fit: cover;

    }

    aside {

        background-color: #ffffffea;
        border-right: 2px solid #ffffff44;
        width: 400px;
        height: 100vh;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: FadeInLeft 1s forwards;

        @keyframes FadeInLeft {
            
            0%{

                transform: translateX(-400px);

            }
            100% {

                opacity: 1;
                transform: translateX(0);

            }

        }

        .logo {

            display: block;
            margin-bottom: 4rem;

        }

        span {

            font-family: 'Roboto', sans-serif;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 2rem;

        }

        form {

            position: relative;
            margin: 0;

            input {

                width: 100%;
                height: 58px;
                font-family: 'Roboto', sans-serif;
                font-size: 16px;
                font-weight: 900;
                letter-spacing: 1px;
                background-color: #ededed;
                border: 2px solid #ededed;
                border-radius: 8px;
                padding: 14px 16px 4px;
                box-sizing: border-box;

                &:focus {

                    border: 2px solid black;
                    background-color: transparent;

                }

                &:focus + label {

                    transform: scale(.6);
                    top: 7px;
                    left: -10px;
    
                }
    
            }

            .label-top {

                transform: scale(.6);
                top: 7px;
                left: -10px;

            }
    
            label {
    
                font-family: 'Roboto', sans-serif;
                font-size: 16px;
                font-weight: 900;
                text-transform: uppercase;
                letter-spacing: 1px;
                position: absolute;
                top: 22px;
                left: 16px;
                transition-duration: .2s;
                opacity: .6;
    
            }

            small {
                
                font-family: 'Roboto', sans-serif;
                color: #fd0352;
                margin-bottom: 8rem;
                font-size: 14px;
                width: 300px;
                display: block;
                margin-top: 14px;
                text-align: center;

            }

            button {

                width: 80px;
                height: 80px;
                border: 2px solid #f2f2f2;
                border-radius: 16px;
                background-color: #ededed;
                transition-duration: .2s;
                cursor: not-allowed;

            }

            .button-enabled {

                background-color: #d13639;
                border-color: #d13639;

                &:hover {

                    cursor: pointer;
                    transform: scale(1.1);
                    filter: brightness(150%);

                }

            }

        }

    }

}

.modal-close {

    opacity: 0 !important;
    transform: scale(.5) !important;

}

.modal {

    color: white;
    background-color: #030619d4;
    width: 80%;
    height: 80%;
    position: fixed;
    top: 10%;
    left: 10%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #c7974a80;
    border-radius: 16px;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    opacity: 0;
    transition-duration: .5s;
    animation: FadeIn .5s forwards;
    overflow: auto;

    @keyframes FadeIn {
        
        0% {

            transform: scale(.5);

        }
        100% {

            opacity: 1;
            transform: scale(1);

        }

    }

    img {

        padding-top: 20px;
        width: 200px;
        animation: OwwntZed 2s infinite;

        @keyframes OwwntZed {
            
            0% {

                transform: scale(.95);

            }
            50% {

                transform: scale(1);
                filter: brightness(120%);

            }
            100% {

                transform: scale(.95);

            }

        }

    }

    h1 {

        color: #c7984a;
        font-size: 2rem;
        text-transform: uppercase;
        font-weight: bold;

        b {

            color: #fd0352;

        }

    }

    h2 {

        font-size: 1.2rem;
        margin: 1rem 0;

    }

    p {

        font-family: 'Roboto', sans-serif;
        font-size: 1.2rem;
        line-height: 1.8rem;
        width: 500px;
        margin-top: 2rem;
        text-align: justify;

        b {

            color: #fd0352;
            font-weight: bold;

        }

    }

    button {

        color: #ffffff80;
        background-color: #fd035207;
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 2px;
        border: 2px solid #fd03521c;
        margin-top: 4rem;
        padding: 1rem 4rem;
        border-radius: 16px;
        transition-duration: .2s;
        margin-bottom: 20px;
        cursor: pointer;
        
        &:hover {
            
            color: #ffffff;
            background-color: #fd0352;
            box-shadow: 0 0 20px #fd03527c;
            transform: scale(1.1);

        }

    }

}

.warning-visible {

    top: 2rem !important;
    opacity: 1 !important;

}

.warning {

    position: fixed;
    top: -14rem;
    left: calc(50% - 311px);
    z-index: 2;
    background-color: #c7bf4a58;
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    padding: 2rem 2rem;
    border-radius: 16px;
    border: solid 2px #fd03521c;
    transition-duration: .5s;
    opacity: 0;

    img {
        
        width: 150px;
        display: inline-block;
        animation: TwistedFateHeadBanger 2s infinite;

        @keyframes TwistedFateHeadBanger {
            
            0% {

                transform: rotate(6deg);

            }
            50% {

                transform: rotate(-6deg);
                filter: brightness(120%);

            }
            100% {

                transform: rotate(6deg);

            }

        }
    
    }

    .text-wrapper {

        display: inline-block;
        text-align: center;

        h1 {

            color: #e2db71;
            font-size: 1.8rem;
            text-transform: uppercase;
            font-weight: bold;
            padding-bottom: 1rem;
            display: block;

        }

        h2 {

            color: #c7bf4a;
            font-size: 1.2rem;
            text-transform: uppercase;
            font-weight: bold;
            padding-bottom: 1rem;
            display: block;

        }

        p {

            color: white;
            font-family: "Roboto", sans-serif;
            font-size: 1.2rem;
            line-height: 1.8rem;
            margin-left: 2rem;

            b {

                color: #00000052;
                font-weight: bold;

            }

        }

    }

}

================================================
FILE: src/app/modules/auth/login/login.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { LoginComponent } from './login.component';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ LoginComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/auth/login/login.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { SoundService } from '../../client/sound.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  modal: boolean = true
  loginForm: FormGroup
  haveCharacters: boolean = false

  constructor( private route: Router,
               private soundService: SoundService ) {

    this.loginForm = new FormGroup({

      username: new FormControl()

    })

  }



  ngOnInit(): void {

    this.soundService.playSound('zed')

  }



  makeLogin() {

    if(this.haveCharacters == true) {

      localStorage.setItem('username', this.loginForm.value.username)
      this.route.navigateByUrl('client')
      
    }

  }



  usernameIdentify() {

    if(this.loginForm.value.username !== null && this.loginForm.value.username?.length > 0) {

      this.haveCharacters = true

    } else {

      this.haveCharacters = false

    }

  }



  closeModal() {

    this.soundService.playSound('tf')
    this.modal = false

  }

}


================================================
FILE: src/app/modules/client/background.service.ts
================================================
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class BackgroundService {

  private background = new Subject<object>()

  changeBackground(url) {

    this.background.next(url)
  
  }



  getBackgroundObservable(): Observable<any> {

    return this.background.asObservable()

  }

}


================================================
FILE: src/app/modules/client/chat/chat.component.html
================================================
<div class="chat-container">

    <ul class="chat-list">

        <li *ngFor="let friend of friends" (click)="selectChat(friend)" class="friend">
            <img src="{{ friend.profilePicture }}">
            <span>{{ friend.name }}</span>
        </li>

    </ul>

    <div class="current-chat">

        <header>

            <div *ngIf="currentChat.profilePicture" class="friend-profile-image-border">
                <img src="{{ currentChat.profilePicture }}" class="friend-profile-image">
            </div>
            <div class="friend-status-circle"></div>

            <div class="friend-informations">

                <span class="friend-name truncate">{{ currentChat.name }}</span>

            </div>

        </header>

        <main>

            <div *ngFor="let message of currentChat.messages" [ngClass]="{'friend-message': message.type == 'friend'}" class="message">{{ message.text }}</div>

        </main>

        <form [formGroup]="messageForm" (ngSubmit)="sendMessage()">
            <input formControlName="message" placeholder="Type here..." type="text">
        </form>

    </div>

</div>

================================================
FILE: src/app/modules/client/chat/chat.component.scss
================================================
.chat-container {

    width: 600px;
    height: 500px;
    background-color: #010911b4;
    backdrop-filter: blur(12px);
    border: 1px solid #ffffff38;

    .chat-list {

        height: 580px;
        width: 200px;
        display: inline-block;
        overflow: auto;

        .friend {

            display: flex;
            align-items: center;
            padding: .5rem;
            transition-duration: .2s;
            cursor: pointer;

            img {

                width: 50px;
                border: 2px solid #8e7341;
                box-sizing: border-box;
                border-radius: 50%;
                margin-right: .5rem;

            }

            span {

                font-size: 18px;
                color: #e4dbc8;
                font-family: "Roboto", sans-serif;

            }

            &:hover {

                background-color: #ffffff23;

            }

        }

    }

    .current-chat {

        width: 400px;
        height: 100%;
        display: inline-block;
        border-left: 1px solid #ffffff1a;
        box-sizing: border-box;
        position: relative;

        header {

            width: 383px;
            height: 42px;
            position: absolute;
            top: 0;
            left: 0;
            padding: .5rem;
            border-bottom: 1px solid #8e7341;
            backdrop-filter: blur(12px);

        }

        main {

            width: 335px;
            height: 456px;
            overflow: auto;
            padding: 6rem 2rem 2rem 2rem;

            .message {

                background-color: #8e734157;
                color: white;
                font-family: 'Roboto', sans-serif;
                line-height: 26px;
                text-rendering:optimizeLegibility;
                width: 70%;
                border-radius: 14px;
                display: block;
                padding: .5rem 1rem;
                margin: .5rem 0;
                float: right;
                transition-duration: .2s;
                overflow-wrap: break-word;

            }
            
            .friend-message {

                background-color: #37373757;
                float: left;


            }

        }

        input {

            color: white;
            font-size: 1.4;
            background-color: transparent;
            width: 100%;
            height: 44px;
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 0 1rem;
            border-left: 1px solid #ffffff1a;
            border-bottom: none;
            border-left: none;
            border-right: none;
            box-sizing: border-box;

        }

    }

}

.friend-status-circle {

    position: absolute;
    transform: translate(28px, -15px);

}

.friend-profile-image-border {

    width: 42px;
    height: 42px;
    background: rgb(106,80,40);
    background: -moz-linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);
    background: linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6a5028",endColorstr="#be9c57",GradientType=1);
    border-radius: 300px;
    display: inline-block;
    margin-right: .8rem;

    .friend-profile-image {

        position: absolute;
        width: 38px;
        height: 38px;
        border-radius: 300px;
        left: 10px;
        top: 10px;

    }

}

.friend-informations {

    display: inline-block;
    width: calc(100% - 56px);
    height: 20px;
    position: relative;
    top: -14px;

    .friend-name, .friend-status {

        font-weight: normal;
        display: block;
        text-transform: initial;
        letter-spacing: 0px;

    }

    .friend-name {

        font-size: 18px;
        color: #e4dbc8;
        font-family: 'Roboto', sans-serif;

    }

}

================================================
FILE: src/app/modules/client/chat/chat.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ChatComponent } from './chat.component';

describe('ChatComponent', () => {
  let component: ChatComponent;
  let fixture: ComponentFixture<ChatComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ChatComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ChatComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/chat/chat.component.ts
================================================
import { Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Friends } from 'src/data/friends'

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss']
})
export class ChatComponent implements OnInit {

  messageForm: FormGroup

  @Input() currentChat: any = {}
  friends: any

  constructor() {

    this.messageForm = new FormGroup({

      message: new FormControl()

    })

  }

  ngOnInit(): void {

    this.friends = Friends

  }



  selectChat(friend) {

    this.currentChat = friend

  }



  sendMessage() {

    if(this.messageForm.value.message !== null) {

      Friends[this.currentChat.id - 1].messages.push({ text: this.messageForm.value.message, type: 'user' })
      this.messageForm.reset()

    }

  }

}


================================================
FILE: src/app/modules/client/client-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainClientLayoutComponent } from 'src/app/layout/main-client-layout/main-client-layout.component';

const routes: Routes = [

  { path: '', component: MainClientLayoutComponent, children: [
    
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
    { path: 'play', loadChildren: () => import('./play/play.module').then(m => m.PlayModule) },
    { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }

  ]},
  { path: 'game', loadChildren: () => import('./game/game.module').then(m => m.GameModule) }

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ClientRoutingModule { }


================================================
FILE: src/app/modules/client/client.module.ts
================================================
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ClientRoutingModule } from './client-routing.module';
import { MainClientLayoutComponent } from 'src/app/layout/main-client-layout/main-client-layout.component';
import { ChatComponent } from './chat/chat.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    MainClientLayoutComponent,
    ChatComponent
  ],
  imports: [
    CommonModule,
    ClientRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class ClientModule { }


================================================
FILE: src/app/modules/client/game/champion-select/champion-select.component.html
================================================
<div class="background"></div>

<video class="video-background" autoplay muted>
    <source src="./assets/images/champion-select/mid.mp4" type="video/mp4">
</video>

<div *ngIf="pickPeriod && currentChampionSelected !== null|| loadOutPeriod && currentChampionSelected !== null" style="background-image: url('{{ currentChampionSelected.coverPicture }}')" class="champion-background"></div>

<div id="assigned" class="assigned-container">
    <span class="assigned">You were assigned</span>
    <span class="role">Middle</span>
</div>

<div id="overlayBackground" class="overlay-background"></div>

<aside class="ally-team">

    <ul class="ally-bans">
        <li>
            <img src="./assets/images/champion-select/ban-icon.png">
            <img *ngIf="banReviewPeriod || pickPeriod || loadOutPeriod" class="champion-picture" src="{{ allyBans[0].picture }}">
        </li>
        <li>
            <img src="./assets/images/champion-select/ban-icon.png">
            <img *ngIf="banReviewPeriod || pickPeriod || loadOutPeriod" class="champion-picture" src="{{ allyBans[1].picture }}">
        </li>
        <li>
            <img src="./assets/images/champion-select/ban-icon.png">
            <img *ngIf="banReviewPeriod || pickPeriod || loadOutPeriod" class="champion-picture" src="{{ allyBans[2].picture }}">
        </li>
        <li>
            <img *ngIf="currentChampionBanSelected == null" src="./assets/images/champion-select/ban-icon.png">
            <img *ngIf="currentChampionBanSelected !== null" src="{{ currentChampionBanSelected.picture }}">
        </li>
        <li>
            <img src="./assets/images/champion-select/ban-icon.png">
            <img *ngIf="banReviewPeriod || pickPeriod || loadOutPeriod" class="champion-picture" src="{{ allyBans[3].picture }}">
        </li>
    </ul>

    <ul class="ally-team-champs">

        <li id="player1" class="ally-team-champs-intro-animation">
            <div class="spells">
                <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerDot.png">
                <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerFlash.png">
            </div>
            <img *ngIf="!pickPeriod && !loadOutPeriod" id="champPreview1" class="champion-preview delay1" src="./assets/images/champion-select/roles/adc.png">
            <img *ngIf="pickPeriod || loadOutPeriod" class="champion-preview delay1" src="{{ allyPicks[0].picture }}">
            <div id="playerInfo1" class="informations delay1">
                <!-- <span class="picking">Picking...</span> -->
                <span *ngIf="pickPeriod || loadOutPeriod" class="champion-name">{{ allyPicks[0].name }}</span>
                <span class="role">Bottom</span>
                <span class="user-name">Jhon</span>
            </div>
        </li>
        <li id="player2" class="ally-team-champs-intro-animation">
            <div class="spells">
                <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerDot.png">
                <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerFlash.png">
            </div>
            <img *ngIf="!pickPeriod && !loadOutPeriod" id="champPreview2" class="champion-preview delay2" src="./assets/images/champion-select/roles/jg.png">
            <img *ngIf="pickPeriod || loadOutPeriod" class="champion-preview delay1" src="{{ allyPicks[1].picture }}">
            <div id="playerInfo2" class="informations delay2">
                <!-- <span class="picking">Picking...</span> -->
                <span *ngIf="pickPeriod || loadOutPeriod" class="champion-name">{{ allyPicks[1].name }}</span>
                <span class="role">Jungle</span>
                <span class="user-name">Mark</span>
            </div>
        </li>
        <li id="player3" class="ally-team-champs-intro-animation">
            <div class="spells">
                <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerDot.png">
                <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerFlash.png">
            </div>
            <img *ngIf="!pickPeriod && !loadOutPeriod" id="champPreview3" class="champion-preview delay3" src="./assets/images/champion-select/roles/top.png">
            <img *ngIf="pickPeriod || loadOutPeriod" class="champion-preview delay1" src="{{ allyPicks[2].picture }}">
            <div id="playerInfo3" class="informations delay3">
                <!-- <span class="picking">Picking...</span> -->
                <span *ngIf="pickPeriod || loadOutPeriod" class="champion-name">{{ allyPicks[2].name }}</span>
                <span class="role">Top</span>
                <span class="user-name">Fabriccio</span>
            </div>
        </li>
        <li id="player4" class="ally-team-champs-intro-animation">
            <div class="spells">
                <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerDot.png">
                <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerFlash.png">
            </div>
            <img *ngIf="currentChampionSelected == null"  id="champPreview4" class="champion-preview delay4" src="./assets/images/champion-select/roles/mid.png">
            <img *ngIf="currentChampionSelected !== null" class="champion-preview" src="{{ currentChampionSelected.picture }}">
            <div id="playerInfo4" class="informations delay4">
                <!-- <span class="picking">Picking...</span> -->
                <span *ngIf="currentChampionSelected !== null" class="champion-name">{{ currentChampionSelected.name }}</span>
                <span class="role">Middle</span>
                <span class="user-name">{{ player.name }}</span>
            </div>
        </li>
        <li id="player5" class="ally-team-champs-intro-animation delay4">
            <div class="spells">
                <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerDot.png">
                <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerFlash.png">
            </div>
            <img *ngIf="!pickPeriod && !loadOutPeriod" id="champPreview5" class="champion-preview delay5" src="./assets/images/champion-select/roles/sup.png">
            <img *ngIf="pickPeriod || loadOutPeriod" class="champion-preview delay1" src="{{ allyPicks[3].picture }}">
            <div id="playerInfo5" class="informations delay5">
                <!-- <span class="picking">Picking...</span> -->
                <span *ngIf="pickPeriod || loadOutPeriod" class="champion-name">{{ allyPicks[3].name }}</span>
                <span class="role">Support</span>
                <span class="user-name">Mary</span>
            </div>
        </li>

    </ul>

</aside>

<main id="mainContent">

    <span *ngIf="pickPeriod" class="announcement">Choose your champion!</span>
    <span *ngIf="declarePeriod" class="announcement">Declare your champion!</span>
    <span *ngIf="banPeriod" class="announcement">Ban a champion!</span>
    <span *ngIf="loadOutPeriod" class="announcement">Choose your loadout!</span>
    <span *ngIf="!banReviewPeriod" class="announcement-timer">{{ timerNumber }}</span>

    <div id="allyBarWrapper" class="ally-progress-bar">
        <span id="allyBar" class="bar"></span>
    </div>
    <div id="enemyBarWrapper" class="enemy-progress-bar">
        <span id="enemyBar" class="bar"></span>
    </div>

    <ul class="filters" [ngClass]="{'hidde-filters': loadOutPeriod || banReviewPeriod}">
        <li [ngClass]="{'lane-active': filter == 'top'}" class="lane">
            <img (click)="changeFilter('top')" src="./assets/images/lobby/roles/top.png">
        </li>
        <li [ngClass]="{'lane-active': filter == 'jg'}" class="lane">
            <img (click)="changeFilter('jg')" src="./assets/images/lobby/roles/jg.png">
        </li>
        <li [ngClass]="{'lane-active': filter == 'mid'}" class="lane">
            <img (click)="changeFilter('mid')" src="./assets/images/lobby/roles/mid.png">
        </li>
        <li [ngClass]="{'lane-active': filter == 'adc'}" class="lane">
            <img (click)="changeFilter('adc')" src="./assets/images/lobby/roles/adc.png">
        </li>
        <li [ngClass]="{'lane-active': filter == 'sup'}" class="lane sup">
            <img (click)="changeFilter('sup')" src="./assets/images/lobby/roles/sup.png">
        </li>
    </ul>

    <div *ngIf="banReviewPeriod" id="bans" class="bans">

        <div class="ally-bans">

            <span class="announcement">Your team's bans</span>

            <ul>
                
                <li class="ban">
                    <img src="{{ allyBans[0].picture }}">
                    <img *ngIf="allyBans == null" src="https://ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/29.png">
                    <span>{{ allyBans[0].name }}</span>
                </li>
                <li class="ban">
                    <img src="{{ allyBans[1].picture }}">
                    <img *ngIf="allyBans == null" src="https://ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/29.png">
                    <span>{{ allyBans[1].name }}</span>
                </li>
                <li class="ban">
                    <img src="{{ allyBans[2].picture }}">
                    <img *ngIf="allyBans == null" src="https://ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/29.png">
                    <span>{{ allyBans[2].name }}</span>
                </li>
                <li class="ban">
                    <img src="{{ currentChampionBanSelected.picture }}">
                    <span>{{ currentChampionBanSelected.name }}</span>
                </li>
                <li class="ban">
                    <img src="{{ allyBans[3].picture }}">
                    <img *ngIf="allyBans == null" src="https://ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/29.png">
                    <span>{{ allyBans[3].name }}</span>
                </li>

            </ul>

        </div>

        <span class="announcement bans-announcement">Bans locked in</span>

        <div class="enemy-bans">

            <ul>
                
                <li class="ban">
                    <img src="{{ enemyBans[0].picture }}">
                    <img *ngIf="enemyBans == null" src="https://ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/29.png">
                    <span>{{ enemyBans[0].name }}</span>
                </li>
                <li class="ban">
                    <img src="{{ enemyBans[1].picture }}">
                    <img *ngIf="enemyBans == null" src="https://ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/29.png">
                    <span>{{ enemyBans[1].name }}</span>
                </li>
                <li class="ban">
                    <img src="{{ enemyBans[2].picture }}">
                    <img *ngIf="enemyBans == null" src="https://ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/29.png">
                    <span>{{ enemyBans[2].name }}</span>
                </li>
                <li class="ban">
                    <img src="{{ enemyBans[3].picture }}">
                    <img *ngIf="enemyBans == null" src="https://ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/29.png">
                    <span>{{ enemyBans[3].name }}</span>
                </li>
                <li class="ban">
                    <img src="{{ enemyBans[4].picture }}">
                    <img *ngIf="enemyBans == null" src="https://ddragon.leagueoflegends.com/cdn/10.18.1/img/profileicon/29.png">
                    <span>{{ enemyBans[4].name }}</span>
                </li>

            </ul>

            <span class="announcement">Enemy team's bans</span>

        </div>

    </div>

    <ul id="chamiponList" class="champion-list">
        <li *ngFor="let champion of champions; let championIndex = index" (mouseenter)="playSound('championSelectChampionHover')" [ngClass]="{'champion-desable': champion.selectable == false, 'champion-visible': champion.role == filter || filter == 'all'}" (click)="selectChampion(champion, championIndex); playSound('championSelectChampionClick')" class="champion">
            <img src="{{ champion.picture }}" class="champion-picture">
            <span class="champion-name">{{ champion.name }}</span>
            <span *ngIf="currentChampionSelected == champion" class="champion-select-frame">
                <span class="circle"></span>
            </span>
            <span *ngIf="currentChampionBanSelected == champion" class="champion-ban-frame">
                <span class="circle">
                    <span class="line"></span>
                </span>
            </span>
        </li>
    </ul>

    <div class="lined-circle-wrapper">
        <img class="lined-circle" src="./assets/images/champion-select/lined-circle.png">
        <div *ngIf="loadOutPeriod && currentChampionSelected !== null" [ngClass]="adjustChampion(currentChampionSelected.name)" style="background-image: url('{{ currentChampionSelected.coverPicture }}')" class="current-champion-selected"></div>
    </div>

    <div *ngIf="loadOutPeriod && currentChampionSelected !== null" class="champion-finalization">
        <span class="champion-name">{{ currentChampionSelected.name }}</span>
        <div class="skins">
            <div class="skin">
                <img src="{{ currentChampionSelected.coverPicture }}">
            </div>
        </div>
    </div>

    <img *ngIf="!declarePeriod && !banReviewPeriod && !loadOutPeriod" class="button-detail button-detail-left" src="./assets/images/champion-select/accept-button-detail.png">
    <img *ngIf="!declarePeriod && !banReviewPeriod && !loadOutPeriod" class="button-detail button-detail-right" src="./assets/images/champion-select/accept-button-detail.png">
    
    <span *ngIf="pickPeriod" (mouseover)="playSound('confirmButtonHover')" [ngClass]="{'accept-button-desabled ': !currentChampionSelected}" (click)="pickChampion()" class="accept-button">
        <span>Lock in</span>
        <img src="./assets/images/champion-select/accept-button.png">
    </span>
    
    <span *ngIf="banPeriod" (mouseover)="playSound('changeGameModeButtonHover')" [ngClass]="{'accept-button-desabled ': !currentChampionBanSelected}" (click)="banChampion()" class="accept-button">
        <span>Ban</span>
        <img src="./assets/images/champion-select/ban-button.png">
    </span>

</main>

<footer>

    <button class="edit-rune">
        <img src="./assets/images/champion-select/rune-edit.png">
    </button>

    <select>
        <option value="">First rune</option>
    </select>

    <div class="summoners-spells">
        <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerDot.png">
        <img src="https://ddragon.leagueoflegends.com/cdn/11.3.1/img/spell/SummonerFlash.png">
    </div>

</footer>

<aside class="enemy-team">

    <ul class="enemy-bans">
        <li>
            <img *ngIf="banReviewPeriod || pickPeriod || loadOutPeriod" class="champion-picture" src="{{ enemyBans[0].picture }}">
            <img src="./assets/images/champion-select/ban-icon.png">
        </li>
        <li>
            <img *ngIf="banReviewPeriod || pickPeriod || loadOutPeriod" class="champion-picture" src="{{ enemyBans[1].picture }}">
            <img src="./assets/images/champion-select/ban-icon.png">
        </li>
        <li>
            <img *ngIf="banReviewPeriod || pickPeriod || loadOutPeriod" class="champion-picture" src="{{ enemyBans[2].picture }}">
            <img src="./assets/images/champion-select/ban-icon.png">
        </li>
        <li>
            <img *ngIf="banReviewPeriod || pickPeriod || loadOutPeriod" class="champion-picture" src="{{ enemyBans[3].picture }}">
            <img src="./assets/images/champion-select/ban-icon.png">
        </li>
        <li>
            <img *ngIf="banReviewPeriod || pickPeriod || loadOutPeriod" class="champion-picture" src="{{ enemyBans[4].picture }}">
            <img src="./assets/images/champion-select/ban-icon.png">
        </li>
    </ul>

    <ul id="enemyTeamChamps" class="enemy-team-champs">

        <li>
            <div class="informations">
                <!-- <span class="picking">Picking...</span> -->
                <span *ngIf="pickPeriod || loadOutPeriod" class="role">{{ enemyPicks[0].name }}</span>
                <span class="user-name">Summoner 1</span>
            </div>
            <div class="champion-preview">
                <img *ngIf="pickPeriod || loadOutPeriod"  width="100%" src="{{ enemyPicks[0].picture }}">
            </div>
        </li>
        <li>
            <div class="informations">
                <!-- <span class="picking">Picking...</span> -->
                <span *ngIf="pickPeriod || loadOutPeriod" class="role">{{ enemyPicks[1].name }}</span>
                <span class="user-name">Summoner 2</span>
            </div>
            <div class="champion-preview">
                <img *ngIf="pickPeriod || loadOutPeriod"  width="100%" src="{{ enemyPicks[1].picture }}">
            </div>
        </li>
        <li>
            <div class="informations">
                <!-- <span class="picking">Picking...</span> -->
                <span *ngIf="pickPeriod || loadOutPeriod" class="role">{{ enemyPicks[2].name }}</span>
                <span class="user-name">Summoner 3</span>
            </div>
            <div class="champion-preview">
                <img *ngIf="pickPeriod || loadOutPeriod"  width="100%" src="{{ enemyPicks[2].picture }}">
            </div>
        </li>
        <li>
            <div class="informations">
                <!-- <span class="picking">Picking...</span> -->
                <span *ngIf="pickPeriod || loadOutPeriod" class="role">{{ enemyPicks[3].name }}</span>
                <span class="user-name">Summoner 4</span>
            </div>
            <div class="champion-preview">
                <img *ngIf="pickPeriod || loadOutPeriod"  width="100%" src="{{ enemyPicks[3].picture }}">
            </div>
        </li>
        <li>
            <div class="informations">
                <!-- <span class="picking">Picking...</span> -->
                <span *ngIf="pickPeriod || loadOutPeriod" class="role">{{ enemyPicks[4].name }}</span>
                <span class="user-name">Summoner 5</span>
            </div>
            <div class="champion-preview">
                <img *ngIf="pickPeriod || loadOutPeriod" width="100%" src="{{ enemyPicks[4].picture }}">
            </div>
        </li>

    </ul>

</aside>

================================================
FILE: src/app/modules/client/game/champion-select/champion-select.component.scss
================================================


.delay1 {

    animation-delay: 700ms !important;

}

.delay2 {

    animation-delay: 1400ms !important;

}

.delay3 {

    animation-delay: 2000ms !important;

}

.delay4 {

    animation-delay: 2800ms !important;

}

.delay5 {

    animation-delay: 3500ms !important;

}

.background {

    width: 100vw;
    height: 100vh;
    background-color: #010614;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;

}

.assigned-container {

    color: white;
    position: fixed;
    left: 0;
    right: 0;
    top: 70%;
    text-align: center;
    font-weight: bold;
    opacity: 0;
    transition-duration: .2s;

    .assigned {

        font-size: 1.5rem;
        letter-spacing: 2px;
        font-style: italic;

    }

    .role {

        font-size: 4rem;
        display: block;
        margin-top: 12px;
        text-transform: uppercase;

    }

}

.overlay-background {

    width: 100vw;
    height: 100vh;
    background-color: #000000cb;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    transition-duration: .2s;

}

.overlay-background-ban {

    background-color: rgb(255,0,36) !important;
    background: radial-gradient(circle, rgba(255, 0, 34, 0.500) 0%, rgba(62, 0, 25, 0.500) 100%) !important;

}

.video-background {
    
    position: fixed;
    width: 900px;
    top: calc(50% - 250px);
    left: calc(50% - 450px);
    transform: scale(1.8);

}

.champion-background {

    position: fixed;
    width: 100vw;
    height: 100vh;
    background-image: url('https://images.wallpapersden.com/image/download/psyops-zed-league-of-legends_bGhtaG6UmZqaraWkpJRmbmdlrWZlbWU.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: FadeIn .2s forwards;

    @keyframes FadeIn {
        0% {

            opacity: 0;
            transform: scale(2);

        }
        100% {

            opacity: 1;
            transform: scale(1);

        }
    }

}

.ally-team {

    width: 20%;
    position: absolute;
    left: 0;
    top: 0;

    .ally-bans {

        li {

            display: inline-block;
            padding: 2.8rem .5rem 4rem;
            position: relative;

            .champion-picture {

                opacity: 0;
                position: absolute;
                left: 8px;
                animation: Entrance 1s forwards;

                @keyframes Entrance {
                    
                    0% {

                        transform: scale(2);

                    }
                    100% {

                        opacity: 1;
                        transform: scale(1);

                    }

                }

            }


            img {

                width: 35px;
                border: 1px solid rgba(255, 255, 255, 0.103);

            }

        }

    }

    .ally-team-champs-border {
    
        border-top: 1px solid #785b2881 !important;
        border-bottom: 1px solid #785b2881 !important;

    }

    .ally-team-champs {

        position: fixed;
        top: calc(50vh - 255px);
        width: calc(50vw - 450px);

        li {

            display: flex;
            align-items: center;
            justify-items: center;
            justify-content: left;
            padding: 12px 6px;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
            box-sizing: border-box;
            transition-duration: .2s;

            .spells {

                display: none;

                img {

                    width: 35px;
                    display: block;
                    margin: .5rem;

                }

            }

            .champion-preview {

                width: 70px;
                border: 3px solid #a07c30;
                border-radius: 50%;
                margin: 0 16px 0 10px;

            }

            .informations {

                span {

                    color: #f0e6d2;
                    display: block;
                    font-weight: bold;

                }

                .champion-name {

                    font-size: .8rem;
                    color: #908769;
                    font-family: 'Roboto', sans-serif;

                }

                .picking {

                    color: #f7bc0a;
                    font-family: 'Roboto', sans-serif;

                }

                .role {

                    text-transform: uppercase;
                    font-size: 1.3rem;
                    padding: 4px 0;

                }

                .user-name {

                    font-family: 'Roboto', sans-serif;
                    font-size: .9rem;
                    letter-spacing: 2px;
                    opacity: .8;

                }

            }

        }

    }

    .ally-team-champs-intro-animation {

        .spells {

            display: block;

        }

        .champion-preview {

            animation: PreviewIntro 1s;
            opacity: 0;

            @keyframes PreviewIntro {
                
                0% {

                }
                50% {

                    transform: scale(1.2);
                    opacity: 1;
                    box-shadow: 0 0 20px #a07c30;

                }
                100% {

                    transform: scale(1);
                    opacity: 1;

                }

            }

        }

        .informations {

            animation: InfroIntro 1s;
            opacity: 0;

            @keyframes InfroIntro {
                
                0% {

                    transform: translateX(-20px);
                    opacity: 1;

                }
                100% {

                    opacity: 1;

                }

            }

        }

    }

}

.enemy-team {

    width: 20%;
    position: absolute;
    right: 0;
    top: 0;

    .enemy-bans {

        display: flex;
        justify-content: flex-end;

        li {

            display: inline-block;
            padding: 2.8rem .5rem 4rem;
            position: relative;

            .champion-picture {

                opacity: 0;
                position: absolute;
                animation: Entrance 1s forwards;

                @keyframes Entrance {
                    
                    0% {

                        transform: scale(2);

                    }
                    100% {

                        opacity: 1;
                        transform: scale(1);

                    }

                }

            }

            img {

                width: 35px;
                border: 1px solid rgba(255, 255, 255, 0.103);

            }

        }

    }

    .enemy-team-champs-visible {

        position: fixed;
        top: calc(50vh - 255px);
        right: 0;
        width: calc(50vw - 450px);

        li {

            animation: FadeInLeft 1s;
            animation-fill-mode: forwards;

            @keyframes FadeInLeft {
                0% {

                    opacity: 0;
                    transform: translateX(-50px);

                }
                100% {

                    opacity: 1;
                    transform: translateX(0);

                }
            }

        }

    }

    .enemy-team-champs {

        li {

            display: flex;
            align-items: center;
            justify-items: center;
            justify-content: flex-end;
            padding: 3px 6px;
            border-top: 1px solid #785b2881 !important;
            border-bottom: 1px solid #785b2881 !important;
            box-sizing: border-box;
            text-align: right;
            opacity: 0;

            .spells {

                img {

                    width: 35px;
                    display: block;
                    margin: .5rem;

                }

            }

            .champion-preview {

                width: 70px;
                height: 70px;
                background-color: #00040f;
                border: 3px solid #560d0d;
                border-radius: 50%;
                margin: 9px 10px 9px 16px;
                overflow: hidden;

            }

            .informations {

                span {

                    color: #f0e6d2;
                    display: block;
                    font-weight: bold;

                }

                .champion-name {

                    font-size: .8rem;
                    color: #908769;
                    font-family: 'Roboto', sans-serif;

                }

                .picking {

                    color: #f7bc0a;
                    font-family: 'Roboto', sans-serif;

                }

                .role {

                    text-transform: uppercase;
                    font-size: 1.3rem;
                    padding: 4px 0;

                }

                .user-name {

                    font-family: 'Roboto', sans-serif;
                    font-size: .9rem;
                    letter-spacing: 2px;
                    opacity: .8;

                }

            }

            &:nth-child(2) {

                animation-delay: .2s;
                
            }

            &:nth-child(3) {

                animation-delay: .4s;
                
            }

            &:nth-child(4) {

                animation-delay: .6s;
                
            }

            &:nth-child(5) {

                animation-delay: .8s;
                
            }

        }

    } 

}

main {

    display: inline-block;
    position: absolute;
    top: 0;
    left: calc(50% - 400px);
    opacity: 0;
    z-index: -1;
    transition-duration: .2s;

    .announcement, .announcement-timer {
        
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        display: block;
        text-align: center;

    }
        
    .announcement {

        font-size: 2.4rem;
        text-align: center;
        padding-top: 1rem;

    }

    .announcement-timer {

        font-size: 3.5rem;

    }

    .ally-progress-bar {

        width: 338px;
        height: 6px;
        margin: 10px;
        position: absolute;
        top: 80.5px;
        left: -3px;

        .bar {

            width: 100%;
            height: 6px;
            display: block;
            float: right;

        }

    }

    .enemy-progress-bar {

        width: 338px;
        height: 6px;
        margin: 10px;
        position: absolute;
        top: 80.5px;
        right: -3px;

        .bar {

            width: 100%;
            height: 6px;
            display: block;
            transform: scaleX(-1);

        }

    }

    .blue-bar {

        background-color: #67c9d479;

        .bar {

            background: rgb(112,206,218);
            background: linear-gradient(100deg, #70ceda 0%, #005f86 100%);

        }

    }

    .red-bar {

        background-color: #250e16b7;

        .bar {

            background: rgb(104,13,26);
            background: linear-gradient(100deg, #680d1a 0%, #d66f4e 100%);

        }

    }

    .hidde-filters {

        opacity: 0;
        z-index: -2;

    }

    .filters {

        width: 100%;
        padding: .5rem;
        border-bottom: 1px solid #785b2873;
        margin-bottom: 12px;
        position: relative;
        z-index: 2;

        .lane {

            display: inline-block;
            margin: 0 1rem;

            img {

                width: 25px;
                opacity: .6;
                transition-duration: .2s;
                cursor: pointer;
                filter: grayscale(100%);

            }

            &:hover {
    
                img {
    
                    opacity: 1;
    
                }
    
            }

        }

        .lane-active {

            img {

                opacity: 1;
                filter: grayscale(100%) brightness(120%);

            }

        }

        .sup {

            img {

                width: 30px;
            }

        }

    }

    .bans {

        text-align: center;
        width: 800px;
        height: calc(100vh - 345px);
        position: fixed;
        top: 35%;
        z-index: 2;
        animation: AjustTop .4s;
        animation-delay: 4s;
        animation-fill-mode: forwards;

        @keyframes AjustTop {
            0% {

                top: 35%;

            }
            100% {

                top: 18%;

            }
        }

        .announcement {

            font-size: 1.2rem;
            padding: 2rem 0;

        }

        .bans-announcement {

            color: #f0e6d2;
            font-size: 2rem;
            padding: 4rem 0;
            position: relative;
            opacity: 0;
            animation: Entrance .2s;
            animation-delay: 4s;
            animation-fill-mode: forwards;

            @keyframes Entrance {
                0% {

                    opacity: 0;
                    transform: scale(2);

                }
                100% {

                    opacity: 1;
                    transform: scale(1);

                }
            }

            &::before, &::after {

                content: '';
                width: 28%;
                height: 2px;
                background-color: #f0e6d2;
                position: absolute;
                top: calc(50% - 2px);

            }

            &::before {

                left: 0;

            }

            &::after {

                right: 0;

            }

        }

        .ally-bans {

            .announcement {

                color: #217b86;
                animation: Entrance .2s;
                animation-fill-mode: forwards;

                @keyframes Entrance {
                    0% {

                        opacity: 0;
                        transform: scale(2);
                        color: white;

                    }
                    100% {

                        opacity: 1;
                        transform: scale(1);
                        color: #217b86;

                    }
                }

            }

        }

        .enemy-bans {
            
            animation: Entrance .2s;
            opacity: 0;
            animation-delay: 4.2s;
            animation-fill-mode: forwards;

            @keyframes Entrance {
                0% {

                    opacity: 0;

                }
                100% {

                    opacity: 1;

                }
            }

            .announcement {

                color: #8d4c56;

            }

            
            .ban {

                animation-delay: 5s;

            }

        }

        ul {

            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;

            .ban {

                animation: Entrance .4s;
                animation-fill-mode: forwards;
                opacity: 0;

                @keyframes Entrance {
                    0% {

                        opacity: 0;
                        transform: scale(1.2);

                    }
                    100% {

                        opacity: 1;
                        transform: scale(1);
                    }
                }

                img { 
                    
                    width: 85px;
                    display: block;
                    border: 1px solid rgba(255, 255, 255, 0.103);
                    box-sizing: border-box;
                
                }

                span {

                    font-family: 'Roboto', sans-serif;
                    font-size: 16px;
                    color: #918874;
                    padding-top: 8px;
                    display: block;

                }

                &:nth-child(1), &:nth-child(5), &:nth-child(6), &:nth-child(10) {

                    animation-delay: .4s;

                }

                &:nth-child(2), &:nth-child(4), &:nth-child(7), &:nth-child(9) {

                    animation-delay: .5s;

                }

                &:nth-child(3), &:nth-child(8) {

                    animation-delay: .6s;

                }

            }

        }

    }


    .champion-list {

        width: 800px;
        height: calc(100vh - 345px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 12px;
        overflow: auto;
        position: relative;
        z-index: 2;
        opacity: 1;
        transition-duration: .2s;

        .champion-desable {

            filter: grayscale(100%);
            cursor: default !important;

            &:hover {

                filter: brightness(100%) !important;
                transform: scale(1) !important;

            }

        }

        .champion-visible {

            opacity: 1 !important;
            position: relative !important;
            z-index: 2 !important;
            transition-duration: .2s;

        }

        .champion {

            display: inline-block;
            text-align: center ;
            margin: 1rem;
            position: absolute;
            top: 0;
            opacity: 0;
            z-index: -2;

            .champion-select-frame {

                width: 85px;
                height: 85px;
                border: 4px solid #e7ddcad8;
                position: absolute;
                top: 0;
                left: 0;
                box-sizing: border-box;
                box-shadow: 0 0 10px #e7ddca77;

                .circle {

                    width: 69px;
                    height: 69px;
                    border: 4px solid #e7ddcad8;
                    border-radius: 50%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    box-shadow: 0 0 10px #e7ddca6e;

                }

            }

            .champion-ban-frame {

                width: 85px;
                height: 85px;
                border: 4px solid #da3e48;
                position: absolute;
                top: 0;
                left: 0;
                box-sizing: border-box;
                box-shadow: 0 0 10px #da3e48;

                .circle {

                    width: 69px;
                    height: 69px;
                    border: 4px solid #da3e48;
                    border-radius: 50%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    box-shadow: 0 0 10px #da3e48;

                    .line {

                        width: 71px;
                        height: 8px;
                        background-color: #da3e48;
                        position: absolute;
                        top: calc(50% - 2px);
                        left: 0;
                        transform: rotate(320deg);
                        box-shadow: 0 0 10px #da3e48;

                    }

                }

            }

            .champion-picture {
    
                width: 85px;
                height: 85px;
                display: block;
                cursor: pointer;
                border: 2px solid #ffffff70;
                box-sizing: border-box;

            }

            .champion-name {

                font-family: 'Roboto', sans-serif;
                font-size: 16px;
                color: #918874;
                padding-top: 8px;
                display: block;

            }

            &:hover {

                filter: brightness(110%);
                transform: scale(1.01);

            }

        }

    }

    .button-detail {

        position: absolute;
        opacity: .6;

    }

    .button-detail-left {

        width: 300px;

    }

    .button-detail-right {

        right: 0;
        transform: scaleX(-1);
        width: 300px;

    }

    .accept-button-desabled {

        cursor: default !important;

        img { filter: grayscale(100%); }

        &:hover {

            transform: scale(1) !important;

            img {

                filter: brightness(100%) !important;
                filter: grayscale(100%) !important;

            }

        }

    }

    .accept-button {

        display: flex;
        width: 213px;
        margin: 0 auto;
        justify-content: center;
        z-index: 1;
        position: relative;
        transition-duration: 0.2s;
        margin-top: 12px;
        cursor: pointer;

        img {
            
            transition-duration: .2s;

        }

        span {

            color: #f0e6d2;
            font-size: 1.2rem;
            text-transform: uppercase;
            font-weight: bold;
            background: transparent;
            letter-spacing: 2px;
            position: absolute;
            top: 15px;
            z-index: 2;

        }

        &:hover {

            transform: scale(1.05);

            img {

                filter: brightness(150%);

            }

        }

    }

    .lined-circle-wrapper {

        height: calc(100vh - 321px);
        position: fixed;
        top: 158px;
        left: calc(50% - 450px);
        z-index: 1;
        overflow: hidden;

        .current-champion-selected {

            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 900px;
            height: 900px;
            z-index: 1;
            position: absolute;
            top: calc(50% - 450px);
            border-radius: 50%;
            filter: brightness(120%);

        }

        .lined-circle {

            width: 900px;
            animation: Rotate 60s infinite linear;
            position: relative;
            top: calc(50% - 450px);
            z-index: 2;

            @keyframes Rotate {
                
                0% {

                    transform: rotate(0deg);

                }
                100% {

                    transform: rotate(180deg);

                }

            }


        }

    }

    .champion-finalization {

        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 2rem;
        z-index: 2;

        .champion-name {

            color: white;
            font-size: 1.5rem;
            font-style: italic;
            font-family: 'Roboto';

        }

        .skins {

            padding-top: 1rem;

            .skin {

                width: 145px;
                height: 85px;
                border: 2px solid #9a8048;
                margin: 0 auto;
                overflow: hidden;

                img {

                    width: 120%;

                }

            }

        }

    }

    &::after {

        content: '';
        width: 425px;
        height: 43px;
        position: absolute;
        top: 57px;
        left: -100px;
        transform: scale(1.1);
        background-image: url('/assets/images/champion-select/announcement-detail.png');
        z-index: 2;


    }

    &::before {

        content: '';
        width: 425px;
        height: 43px;
        position: absolute;
        top: 57px;
        right: -100px;
        background-image: url('/assets/images/champion-select/announcement-detail.png');
        transform: scaleX(-1) scale(1.1);
        z-index: 2;


    }

    
    .bar-fifteen-seconds {

        animation-name: AnimationBar;
        animation-duration: 15s;
        animation-timing-function: linear;

    }

    
    .bar-thirty-seconds {

        animation-name: AnimationBar;
        animation-duration: 30s;
        animation-timing-function: linear;

    }

    @keyframes AnimationBar {
        0% {

            width: 100%;

        }
        100% {

            width: 0%;

        }
    }

}

footer {

    width: 800px;
    margin: 2rem auto 0;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    position: absolute;
    bottom: 1rem;
    left: calc(50% - 400px);

    .edit-rune {

        width: 35px;
        height: 35px;
        background-color: #1e2328;
        border-radius: 50%;
        border: 2px solid #9d7730;
        transition-duration: .2s;
        cursor: pointer;

        &:hover {

            transform: scale(1.05);
            filter: brightness(150%);

        }

    }

    select {

        background-color: #1e2328;
        font-size: 1rem;
        color: #d4bf90;
        font-weight: bold;
        border: 2px solid #9d7730;
        letter-spacing: 1px;
        padding: .6rem 2rem;
        margin: 0 2rem;
        transition-duration: .2s;
        cursor: pointer;

        &:hover {

            transform: scale(1.05);
            filter: brightness(150%);

        }

    }

    .summoners-spells {

        img {
            
            width: 42px;
            padding: 0 4px

        }

    }

    &::after {

        content: '';
        width: 200px;
        height: 2px;
        background-color: #9d773070;
        position: absolute;
        left: 0;
        z-index: 2;

    }

    &::before {

        content: '';
        width: 200px;
        height: 2px;
        background-color: #9d773070;
        position: absolute;
        right: 0;
        z-index: 2;

    }

}



.ahri { background-position: -550px -5px !important }
.amumu { background-position: -550px -5px !important }
.annie { background-position: -628px -5px !important }
.ashe { background-position: -628px -5px !important }
.azir { background-position: -619px -5px !important }
.brand { background-position: -619px -5px !important }
.braum { 

    background-position: -1095px -5px !important;
    background-size: 2000px !important;

}
.caitlyn { background-position: -619px -5px !important }
.camille { 

    background-position: -1095px -5px !important;
    background-size: 2000px !important;

}
.cassiopeia { background-position: -619px -5px !important }
.chogatch { background-position: -460px -5px !important }
.corki { background-position: -619px -5px !important }
.diana { background-position: -619px -5px !important }
.drmundo { background-position: -619px -5px !important }
.draven { background-position: -619px -5px !important }
.ekko { background-position: -619px -5px !important }
.elise { 

    background-position: -990px -5px !important;
    background-size: 2000px !important;

}
.ezreal { background-position: -619px -5px !important }
.fiora { 

    background-position: -990px -5px !important;
    background-size: 2500px !important;

}
.fizz { background-position: -619px -5px !important }
.galio { 

    background-position: -480px 102px !important;
    background-size: 2000px !important;

}
.gp { background-position: -619px -5px !important }
.graves { background-position: -619px 110px !important }
.illaoi { background-position: -526px 115px !important }
.irelia { background-position: -325px 115px !important }
.janna { background-position: -614px -10px !important }
.jarvan {

    background-position: -929px -5px !important;
    background-size: 2000px !important;

}
.jhin { background-position: -462px 110px !important }
.jinx { background-position: -568px 5px !important }
.kaisa { background-position: -237px 102px !important }
.kalista { background-position: -584px 68px !important }
.katarina { background-position: -470px -37px !important }
.kayle { background-position: -363px 118px !important }
.kayn { background-position: -311px -8px !important }
.khazix { 
    
    background-position: -929px -222px !important;
    background-size: 2000px !important;

}
.kindred { background-position: -550px !important }
.kled { background-position: -536px 72px !important }
.kogmaw { background-position: -597px -61px !important }
.leona { background-position: -619px 68px !important }
.lucian { background-position: -619px 43px !important }
.lux { background-position: -501px 21px !important }
.malphite { background-position: -573px -51px !important }
.malzahar { background-position: -501px 104px !important }
.mordekaiser { background-position: -275px 116px !important }
.morgana { background-position: -145px 30px !important }
.nami { background-position: -618px 30px !important }
.nunu { background-position: -618px -106px !important }
.orianna { background-position: -618px 107px !important }
.poppy { background-position: -618px 98px !important }

================================================
FILE: src/app/modules/client/game/champion-select/champion-select.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ChampionSelectComponent } from './champion-select.component';

describe('ChampionSelectComponent', () => {
  let component: ChampionSelectComponent;
  let fixture: ComponentFixture<ChampionSelectComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ChampionSelectComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ChampionSelectComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/game/champion-select/champion-select.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Champions } from 'src/data/champions';
import { Player } from 'src/data/player';
import { SoundService } from '../../sound.service';

@Component({
  selector: 'app-champion-select',
  templateUrl: './champion-select.component.html',
  styleUrls: ['./champion-select.component.scss']
})
export class ChampionSelectComponent implements OnInit {

  player: any = Player

  champions: any = Champions

  declarePeriod: boolean = false
  banPeriod: boolean = false
  banReviewPeriod: boolean = false
  pickPeriod: boolean = false
  loadOutPeriod: boolean = false

  filter: string = 'all'

  timerActive: boolean = false
  timerNumber: number = 15

  currentChampionSelected: any = null
  currentChampionSelectedIndex: number = null
  currentChampionBanSelected: any = null
  currentChampionBanSelectedIndex: number = null

  playerPick: boolean = false
  allyPicks: any = []
  enemyPicks: any = []

  playerBan: any = null
  allyBans: any = []
  enemyBans: any = []

  championsAvaliables: any = []


  constructor(private router: Router,
              private soundService: SoundService) {

  }

  ngOnInit(): void {

    this.pauseSound('matchFound')

    setTimeout( () => {  this.playSound('championSelectIntro') }, 400)

    setTimeout( () => {

      document.getElementById('player1').classList.remove('ally-team-champs-intro-animation')

      setTimeout( () => {

        document.getElementById('player2').classList.remove('ally-team-champs-intro-animation')

        setTimeout( () => {

          document.getElementById('player3').classList.remove('ally-team-champs-intro-animation')
          document.getElementById('assigned').style.opacity = '1' 

          setTimeout( () => {
  
            document.getElementById('player4').classList.remove('ally-team-champs-intro-animation')

            setTimeout( () => {
    
              document.getElementById('player5').classList.remove('ally-team-champs-intro-animation')

              setTimeout( () => {

                this.initDeclarePeriod()

                setTimeout( () => {

                  this.timerActive = false

                  document.getElementById('allyBarWrapper').classList.remove('blue-bar')
                  document.getElementById('enemyBarWrapper').classList.remove('blue-bar')
                  document.getElementById('allyBar').classList.remove('bar-fifteen-seconds')
                  document.getElementById('enemyBar').classList.remove('bar-fifteen-seconds')
                  document.getElementById('allyBarWrapper').classList.add('red-bar')
                  document.getElementById('enemyBarWrapper').classList.add('red-bar')

                  setTimeout( () => {
  
                    this.initBanPeriod()

                    setTimeout( () => {

                      if(this.timerActive == true) {

                        this.timerActive = false  

                      }

                      if(this.playerBan == null) {

                        this.router.navigateByUrl('/client/play/lobby')

                      }

                    }, 31000)
  
                  }, 100)

                }, 15000)

              },1000 )
    
            },700 )
  
          },800 )

        },500 )

      },700 )

    }, 1700 )

  }



  initDeclarePeriod() {

    this.declarePeriod = true

    this.playSound('championSelectChampionsVisible')

    document.getElementById('assigned').style.opacity = '0' 
    document.getElementById('overlayBackground').style.opacity = '.6' 
    document.getElementById('mainContent').style.opacity = '1' 
    document.getElementById('mainContent').style.zIndex = '1' 
    document.getElementById('player1').classList.add('ally-team-champs-border')
    document.getElementById('player2').classList.add('ally-team-champs-border')
    document.getElementById('player3').classList.add('ally-team-champs-border')
    document.getElementById('player4').classList.add('ally-team-champs-border')
    document.getElementById('player5').classList.add('ally-team-champs-border')

    document.getElementById('allyBarWrapper').classList.add('blue-bar')
    document.getElementById('enemyBarWrapper').classList.add('blue-bar')
    document.getElementById('allyBar').classList.add('bar-fifteen-seconds')
    document.getElementById('enemyBar').classList.add('bar-fifteen-seconds')

    this.timerActive = true
    this.initTimer()

  }



  initBanPeriod() {

    this.declarePeriod = false
    this.banPeriod = true

    this.playSound('championSelectBanIntro')

    document.getElementById('overlayBackground').classList.add('overlay-background-ban')
    document.getElementById('allyBar').classList.add('bar-thirty-seconds')
    document.getElementById('enemyBar').classList.add('bar-thirty-seconds')
    document.getElementById('enemyTeamChamps').classList.add('enemy-team-champs-visible')

    this.timerNumber = 30
    this.timerActive = true
    this.initTimer()

  }



  initBanReviewPeriod() {

    document.getElementById('allyBarWrapper').style.opacity = '0'
    document.getElementById('enemyBarWrapper').style.opacity = '0'
    document.getElementById('allyBar').classList.remove('bar-thirty-seconds')
    this.banPeriod = false
    this.banReviewPeriod = true
    this.timerActive = false
    this.timerNumber = 30

    setTimeout( () => { this.playSound('championSelectBanReviewIntro') }, 4000 )

    do {

      let randomChampion = this.champions[Math.floor(Math.random() * this.champions.length)]

      this.allyBans.push(randomChampion)

    } while( this.allyBans.length < 4 )

    do {

      let randomChampion = this.champions[Math.floor(Math.random() * this.champions.length)]

      this.enemyBans.push(randomChampion)

    } while( this.enemyBans.length < 5 )

    setTimeout( () => {

      for(let ban of this.enemyBans) {
  
        this.champions[this.champions.indexOf(ban)].selectable = false
  
      }

      for(let ban of this.allyBans) {
  
        this.champions[this.champions.indexOf(ban)].selectable = false
  
      }

      this.championsAvaliables = this.champions.filter(champion => champion.selectable == true)

      do {

        let randomChampion = this.championsAvaliables[Math.floor(Math.random() * this.championsAvaliables.length)]
  
        this.enemyPicks.push(randomChampion)
  
      } while( this.enemyPicks.length < 5 )

      do {

        let randomChampion = this.championsAvaliables[Math.floor(Math.random() * this.championsAvaliables.length)]
  
        this.allyPicks.push(randomChampion)
  
      } while( this.allyPicks.length < 4 )

    },2000 )

    setTimeout( () => {

      document.getElementById('overlayBackground').classList.remove('overlay-background-ban')
      document.getElementById('bans').style.opacity = '0'
      document.getElementById('bans').style.zIndex = '-2'
      document.getElementById('chamiponList').style.opacity = '1'
      document.getElementById('chamiponList').style.zIndex = '2'

      this.initPickPeriod()

    }, 7000 )


  }



  initPickPeriod() {

    this.playSound('championSelectPickIntro')
    this.playSound('pickPeriodIntro')

    document.getElementById('allyBarWrapper').classList.remove('red-bar')
    document.getElementById('allyBarWrapper').classList.add('blue-bar')
    document.getElementById('allyBarWrapper').style.opacity = '1'
    document.getElementById('allyBar').classList.add('bar-thirty-seconds')
    this.banReviewPeriod = false
    this.pickPeriod = true
    this.timerNumber = 30
    this.timerActive = true

    setTimeout(()=> { 

      if(this.playerPick == false) {
        
        this.router.navigateByUrl('/client/play/lobby')

      }

     }, 30000)

  }



  initLoadOutPeriod() {

    this.playSound('championSelectLoadoutIntro')

    this.loadOutPeriod = true
    document.getElementById('allyBar').classList.add('bar-thirty-seconds')
    document.getElementById('allyBar').style.width = '100%'
    document.getElementById('enemyBarWrapper').classList.add('blue-bar')
    document.getElementById('enemyBar').classList.add('bar-thirty-seconds')
    document.getElementById('enemyBar').style.width = '100%'

    localStorage.setItem('playerPick', JSON.stringify(this.currentChampionSelected))
    localStorage.setItem('allyTeam', JSON.stringify(this.allyPicks))
    localStorage.setItem('enemyTeam', JSON.stringify(this.enemyPicks))

    setTimeout(()=> { 

      this.router.navigateByUrl('/client/game/loading')

     }, 30000)

  }



  initTimer() {

    setTimeout( () => {

      this.timerNumber = this.timerNumber - 1

      if(this.timerNumber > 0) {

        if(this.timerNumber < 6) {

          if(this.declarePeriod == true) {

            this.playSound('championSelectTimerCount')

          } else {

            this.playSound('championSelectTimer')

          }

        }

        this.initTimer()

      }

    }, 1000)


  }



  pickEnemyChampions() {

    do {

      let randomChampion = this.champions[Math.floor(Math.random() * this.champions.length)]

      this.enemyBans.push(randomChampion)

    } while( this.enemyPicks.length < 5 )

    setTimeout( () => {

      for(let ban of this.enemyBans) {
  
        this.champions[this.champions.indexOf(ban)].selectable = false
  
    }

    }, 2000)

  }



  selectChampion(champion, index) {

    if(this.champions[index].selectable == true) {

      if(this.declarePeriod || this.pickPeriod) {

        this.currentChampionSelected = champion
        this.currentChampionSelectedIndex = index

      } else if(this.banPeriod) {

        this.currentChampionBanSelected = champion
        this.currentChampionBanSelectedIndex = index

      }

    }

  }



  banChampion() {

    if(this.currentChampionBanSelected !== null) {

      this.playSound('changeGameModeButtonClick')
      this.playSound('championSelectBan')
      
      document.getElementById('chamiponList').style.opacity = '0'
      document.getElementById('chamiponList').style.zIndex = '-1'

      this.playerBan = this.currentChampionBanSelected
      this.champions[this.currentChampionBanSelectedIndex].selectable = false

      this.initBanReviewPeriod()

    }

  }



  pickChampion() {

    if(this.currentChampionSelected !== null) {

      this.playSound('championSelectPick')

      this.playerPick = true
      this.pickPeriod = false
      this.timerActive = false
      this.timerNumber = 30
      document.getElementById('chamiponList').style.opacity = '0'
      document.getElementById('chamiponList').style.zIndex = '-2'
      document.getElementById('allyBar').classList.remove('bar-thirty-seconds')
      document.getElementById('enemyBar').classList.remove('bar-thirty-seconds')
      document.getElementById('enemyBarWrapper').classList.remove('red-bar')

      setTimeout(()=>{

        this.initLoadOutPeriod()

      },1)

    }

  }



  changeFilter(filter) {

    this.playSound('championSelectChampionsFilter')

    if(this.filter == filter) {

      this.filter = 'all'

    } else {

      this.filter = filter

    }

  }

  adjustChampion(champion) {

    switch (champion) {
      case 'Ahri':
        return 'ahri'
      case 'Amumu':
        return 'amumu'
      case 'Annie':
        return 'annie'
      case 'Ashe':
        return 'ashe'
      case 'Azir':
        return 'azir'
      case 'Brand':
        return 'brand'
      case 'Braum':
        return 'braum'
      case 'Caitlyn':
        return 'caitlyn'
      case 'Camille':
        return 'camille'
      case 'Cassiopeia':
        return 'cassiopeia'
      case "Cho'Gatch":
        return 'chogatch'
      case 'Corki':
        return 'corki'
      case 'Diana':
        return 'diana'
      case 'Dr.Mundo':
        return 'drmundo'
      case 'Draven':
        return 'draven'
      case 'Ekko':
        return 'ekko'
      case 'Elise':
        return 'elise'
      case 'Ezreal':
        return 'ezreal'
      case 'Fiora':
        return 'fiora'
      case 'Fizz':
        return 'fizz'
      case 'Galio':
        return 'galio'
      case 'Gangplank':
        return 'gp'
      case 'Garen':
        return 'gp'
      case 'Gnar':
        return 'gp'
      case 'Gragas':
        return 'gp'
      case 'Graves':
        return 'graves'
      case 'Hecarim':
        return 'graves'
      case 'Heimerdinger':
        return 'gp'
      case 'Illaoi':
        return 'illaoi'
      case 'Irelia':
        return 'irelia'
      case 'Janna':
        return 'janna'
      case 'Jarvan IV':
        return 'jarvan'
      case 'Jax':
        return 'jarvan'
      case 'Jayce':
        return 'jarvan'
      case 'Jhin':
        return 'jhin'
      case 'Jinx':
        return 'jinx'
      case "Kai'Sa":
        return 'kaisa'
      case 'Kalista':
        return 'kalista'
      case 'Karma':
        return 'kalista'
      case 'Karthus':
        return 'kalista'
      case 'Kassadin':
        return 'kalista'
      case 'Katarina':
        return 'katarina'
      case 'Kayle':
        return 'kayle'
      case 'Kayn':
        return 'kayn'
      case 'Kennen':
        return 'jarvan'
      case "Kha'Zix":
        return 'khazix'
      case 'Kindred':
        return 'kindred'
      case 'Kled':
        return 'kled'
      case `Kog'Maw`:
        return 'kogmaw'
      case 'Leona':
        return 'leona'
      case 'Lissandra':
        return 'leona'
      case 'Lucian':
        return 'lucian'
      case 'Lulu':
        return 'leona'
      case 'Lux':
        return 'lux'
      case 'Malphite':
        return 'malphite'
      case 'Malzahar':
        return 'malzahar'
      case 'Maokai':
        return 'lucian'
      case 'Master Yi':
        return 'lux'
      case 'Miss Fortune':
        return 'lux'
      case 'Mordekaiser':
        return 'mordekaiser'
      case 'Morgana':
        return 'morgana'
      case 'Nami':
        return 'nami'
      case 'Nasus':
        return 'nami'
      case 'Nautilus':
        return 'nami'
      case 'Nidalee':
        return 'nami'
      case 'Nocturne':
        return 'nami'
      case 'Nunu & Willump':
        return 'nunu'
      case 'Orianna':
        return 'orianna'
      case 'Poppy':
        return 'poppy'
      case 'Quinn':
        return 'three-hundred-sixty-pixels'
      case 'Rakan':
        return 'three-hundred-sixty-pixels'
      case 'Rammus':
        return 'three-hundred-sixty-pixels'
      case 'Rengar':
        return 'three-hundred-sixty-pixels'
      case 'Riven':
        return 'three-hundred-pixels'
      case 'Rumble':
        return 'three-hundred-sixty-pixels'
      case 'Ryze':
        return 'three-hundred-pixels'
      case 'Sejuani':
        return 'three-hundred-sixty-pixels'
      case 'Shaco':
        return 'three-hundred-pixels'
      case 'Shen':
        return 'three-hundred-pixels'
      case 'Shyvana':
        return 'three-hundred-twenty-five-pixels'
      case 'Singed':
        return 'three-hundred-twenty-five-pixels'
      case 'Sion':
        return 'three-hundred-twenty-five-pixels'
      case 'Sivir':
        return 'three-hundred-sixty-pixels'
      case 'Skarner':
        return 'three-hundred-sixty-pixels'
      case 'Skarner':
        return 'three-hundred-sixty-pixels'
      case 'Sona':
        return 'three-hundred-sixty-pixels'
      case 'Swain':
        return 'three-hundred-sixty-pixels'
      case 'Syndra':
        return 'three-hundred-pixels'
      case 'Tahm Kench':
        return 'three-hundred-twenty-five-pixels'
      case 'Taliyah':
        return 'three-hundred-twenty-five-pixels'
      case 'Talon':
        return 'three-hundred-sixty-pixels'
      case 'Taric':
        return 'three-hundred-pixels'
      case 'Teemo':
        return 'three-hundred-pixels'
      case 'Thresh':
        return 'three-hundred-sixty-pixels'
      case 'Tristana':
        return 'three-hundred-sixty-pixels'
      case 'Trundle':
        return 'three-hundred-sixty-pixels'
      case 'Tryndamere':
        return 'three-hundred-pixels'
      case 'Twisted Fate':
        return 'three-hundred-pixels'
      case 'Vayne':
        return 'three-hundred-pixels'
      case 'Veigar':
        return 'three-hundred-sixty-pixels'
      case 'Vi':
        return 'three-hundred-sixty-pixels'
      case 'Viego':
        return 'three-hundred-sixty-pixels'
      case 'Viktor':
        return 'three-hundred-sixty-pixels'
      case 'Vladimir':
        return 'three-hundred-sixty-pixels'
      case 'Volibear':
        return 'three-hundred-sixty-pixels'
      case 'Warwick':
        return 'three-hundred-sixty-pixels'
      case 'Wukong':
        return 'three-hundred-sixty-pixels'
      case 'Xayah':
        return 'three-hundred-sixty-pixels'
      case 'Yasuo':
        return 'three-hundred-pixels'
      case 'Yorick':
        return 'three-hundred-sixty-pixels'
      case 'Yuumi':
        return 'four-hundred-seventy-pixels'
      case 'Zac':
        return 'three-hundred-sixty-pixels'
      case 'Zed':
        return 'three-hundred-twenty-five-pixels'
      case 'Ziggs':
        return 'three-hundred-pixels'
      case 'Zyra':
        return 'three-hundred-pixels'
    }

  }



  playSound(sound) {

    this.soundService.playSound(sound)

  }



  pauseSound(sound) {

    this.soundService.pauseSound(sound)

  }

}


================================================
FILE: src/app/modules/client/game/game-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChampionSelectComponent } from './champion-select/champion-select.component';
import { LoadingComponent } from './loading/loading.component';

const routes: Routes = [

  { path: 'champion-select', component: ChampionSelectComponent },
  { path: 'loading', component: LoadingComponent }

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class GameRoutingModule { }


================================================
FILE: src/app/modules/client/game/game.module.ts
================================================
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GameRoutingModule } from './game-routing.module';
import { ChampionSelectComponent } from './champion-select/champion-select.component';
import { LoadingComponent } from './loading/loading.component';


@NgModule({
  declarations: [ChampionSelectComponent, LoadingComponent],
  imports: [
    CommonModule,
    GameRoutingModule
  ]
})
export class GameModule { }


================================================
FILE: src/app/modules/client/game/loading/loading.component.html
================================================
<video class="video-background" autoplay loop muted>
    <source src="https://lolstatic-a.akamaihd.net/frontpage/apps/prod/signup/pt_BR/8e94ec10717c7745c7506cd9597327cb3d12485b/assets/pt_BR/assets/summoners-rift.mp4" type="video/mp4">
</video>

<a [ngClass]="{'back-home': backHome}" routerLink="/client/home/overview">Back to home</a>

<div id="container" class="container">

    <div class="teams">

        <ul id="blueTeam" class="team blue-team">
            <li class="blue-team" [ngClass]="adjustChampion(allyTeam[0].name)" style="background-image: url('{{allyTeam[0].coverPicture}}')">
                <div class="wrapper">
                    <div class="informations">
                        <span class="champion-name">{{allyTeam[0].name}}</span>
                        <img class="profile-image" src="https://opgg-static.akamaized.net/images/profile_icons/profileIcon3890.jpg?image=q_auto:best&v=1518361200">
                        <span class="player-name">Teste</span>
                        <div class="summoners-spells">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerFlash.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerDot.png?image=c_scale,q_auto,w_42&v=1612855207">
                        </div>
                        <div class="runes">
                            <img class="primary-rune" src="https://opgg-static.akamaized.net/images/lol/perk/8439.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img class="secondary-rune" src="https://opgg-static.akamaized.net/images/lol/perkStyle/8300.png?image=c_scale,q_auto,w_32&v=1612855207">
                        </div>
                        <div class="rank">
                            <img src="https://i.pinimg.com/originals/6a/10/c7/6a10c7e84c9f4e4aa9412582d28f3fd2.png">
                            <span class="tier">Diamound III</span>
                            <span class="lp">87 lp</span>
                        </div>
                        <div class="maestry">
                            <img src="https://i.pinimg.com/originals/3e/d0/4e/3ed04e8a94b7ddc38712c67575210159.png">
                            <span class="points">2.000.000</span>
                        </div>
                    </div>
                </div>
            </li>
            <li class="blue-team" [ngClass]="adjustChampion(allyTeam[1].name)" style="background-image: url('{{allyTeam[1].coverPicture}}')">
                <div class="wrapper">
                    <div class="informations">
                        <span class="champion-name">{{allyTeam[1].name}}</span>
                        <img class="profile-image" src="https://opgg-static.akamaized.net/images/profile_icons/profileIcon3890.jpg?image=q_auto:best&v=1518361200">
                        <span class="player-name">Teste</span>
                        <div class="summoners-spells">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerFlash.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerDot.png?image=c_scale,q_auto,w_42&v=1612855207">
                        </div>
                        <div class="runes">
                            <img class="primary-rune" src="https://opgg-static.akamaized.net/images/lol/perk/8439.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img class="secondary-rune" src="https://opgg-static.akamaized.net/images/lol/perkStyle/8300.png?image=c_scale,q_auto,w_32&v=1612855207">
                        </div>
                        <div class="rank">
                            <img src="https://i.pinimg.com/originals/6a/10/c7/6a10c7e84c9f4e4aa9412582d28f3fd2.png">
                            <span class="tier">Diamound III</span>
                            <span class="lp">87 lp</span>
                        </div>
                        <div class="maestry">
                            <img src="https://i.pinimg.com/originals/3e/d0/4e/3ed04e8a94b7ddc38712c67575210159.png">
                            <span class="points">2.000.000</span>
                        </div>
                    </div>
                </div>
            </li>
            <li class="blue-team" [ngClass]="adjustChampion(playerPick.name)" style="background-image: url('{{playerPick.coverPicture}}')">
                <div class="wrapper">
                    <div class="informations">
                        <span class="champion-name">{{playerPick.name}}</span>
                        <img class="profile-image" src="https://opgg-static.akamaized.net/images/profile_icons/profileIcon3890.jpg?image=q_auto:best&v=1518361200">
                        <span class="current-player player-name">{{player.name}}</span>
                        <div class="summoners-spells">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerFlash.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerDot.png?image=c_scale,q_auto,w_42&v=1612855207">
                        </div>
                        <div class="runes">
                            <img class="primary-rune" src="https://opgg-static.akamaized.net/images/lol/perk/8439.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img class="secondary-rune" src="https://opgg-static.akamaized.net/images/lol/perkStyle/8300.png?image=c_scale,q_auto,w_32&v=1612855207">
                        </div>
                        <div class="rank">
                            <img src="https://i.pinimg.com/originals/6a/10/c7/6a10c7e84c9f4e4aa9412582d28f3fd2.png">
                            <span class="tier">Diamound III</span>
                            <span class="lp">87 lp</span>
                        </div>
                        <div class="maestry">
                            <img src="https://i.pinimg.com/originals/3e/d0/4e/3ed04e8a94b7ddc38712c67575210159.png">
                            <span class="points">2.000.000</span>
                        </div>
                    </div>
                </div>
            </li>
            <li class="blue-team" [ngClass]="adjustChampion(allyTeam[2].name)" style="background-image: url('{{allyTeam[2].coverPicture}}')">
                <div class="wrapper">
                    <div class="informations">
                        <span class="champion-name">{{allyTeam[2].name}}</span>
                        <img class="profile-image" src="https://opgg-static.akamaized.net/images/profile_icons/profileIcon3890.jpg?image=q_auto:best&v=1518361200">
                        <span class="player-name">Teste</span>
                        <div class="summoners-spells">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerFlash.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerDot.png?image=c_scale,q_auto,w_42&v=1612855207">
                        </div>
                        <div class="runes">
                            <img class="primary-rune" src="https://opgg-static.akamaized.net/images/lol/perk/8439.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img class="secondary-rune" src="https://opgg-static.akamaized.net/images/lol/perkStyle/8300.png?image=c_scale,q_auto,w_32&v=1612855207">
                        </div>
                        <div class="rank">
                            <img src="https://i.pinimg.com/originals/6a/10/c7/6a10c7e84c9f4e4aa9412582d28f3fd2.png">
                            <span class="tier">Diamound III</span>
                            <span class="lp">87 lp</span>
                        </div>
                        <div class="maestry">
                            <img src="https://i.pinimg.com/originals/3e/d0/4e/3ed04e8a94b7ddc38712c67575210159.png">
                            <span class="points">2.000.000</span>
                        </div>
                    </div>
                </div>
            </li>
            <li class="blue-team" [ngClass]="adjustChampion(allyTeam[3].name)" style="background-image: url('{{allyTeam[3].coverPicture}}')">
                <div class="wrapper">
                    <div class="informations">
                        <span class="champion-name">{{allyTeam[3].name}}</span>
                        <img class="profile-image" src="https://opgg-static.akamaized.net/images/profile_icons/profileIcon3890.jpg?image=q_auto:best&v=1518361200">
                        <span class="player-name">Teste</span>
                        <div class="summoners-spells">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerFlash.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerDot.png?image=c_scale,q_auto,w_42&v=1612855207">
                        </div>
                        <div class="runes">
                            <img class="primary-rune" src="https://opgg-static.akamaized.net/images/lol/perk/8439.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img class="secondary-rune" src="https://opgg-static.akamaized.net/images/lol/perkStyle/8300.png?image=c_scale,q_auto,w_32&v=1612855207">
                        </div>
                        <div class="rank">
                            <img src="https://i.pinimg.com/originals/6a/10/c7/6a10c7e84c9f4e4aa9412582d28f3fd2.png">
                            <span class="tier">Diamound III</span>
                            <span class="lp">87 lp</span>
                        </div>
                        <div class="maestry">
                            <img src="https://i.pinimg.com/originals/3e/d0/4e/3ed04e8a94b7ddc38712c67575210159.png">
                            <span class="points">2.000.000</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

        <ul id="redTeam" class="team red-team">
            <li *ngFor="let enemy of enemyTeam" [ngClass]="adjustChampion(enemy.name)" class="blue-team" style="background-image: url('{{enemy.coverPicture}}')">
                <div class="wrapper">
                    <div class="informations">
                        <span class="champion-name">{{enemy.name}}</span>
                        <img class="profile-image" src="https://opgg-static.akamaized.net/images/profile_icons/profileIcon3890.jpg?image=q_auto:best&v=1518361200">
                        <span class="player-name">Teste</span>
                        <div class="summoners-spells">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerFlash.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img src="https://opgg-static.akamaized.net/images/lol/spell/SummonerDot.png?image=c_scale,q_auto,w_42&v=1612855207">
                        </div>
                        <div class="runes">
                            <img class="primary-rune" src="https://opgg-static.akamaized.net/images/lol/perk/8439.png?image=c_scale,q_auto,w_42&v=1612855207">
                            <img class="secondary-rune" src="https://opgg-static.akamaized.net/images/lol/perkStyle/8300.png?image=c_scale,q_auto,w_32&v=1612855207">
                        </div>
                        <div class="rank">
                            <img src="https://i.pinimg.com/originals/6a/10/c7/6a10c7e84c9f4e4aa9412582d28f3fd2.png">
                            <span class="tier">Diamound I</span>
                            <span class="lp">27 lp</span>
                        </div>
                        <div class="maestry">
                            <img src="https://i.pinimg.com/originals/3e/d0/4e/3ed04e8a94b7ddc38712c67575210159.png">
                            <span class="points">25.200</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

    </div>

</div>

================================================
FILE: src/app/modules/client/game/loading/loading.component.scss
================================================
.video-background {
    
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    transform: scale(1.8);

}

.back-home {

    right: 1rem !important;
    opacity: 1;

}

a {

    color: #938f83;
    background-color: #1e2328;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 2rem;
    padding: 0.8rem 2rem;
    display: inline-block;
    border: 2px solid #c8aa6d;
    transition-duration: 0.2s;
    z-index: 2;
    cursor: pointer;
    position: fixed;
    transition-duration: 1s;
    bottom: 1rem;
    right: -12rem;
    opacity: 0;

    &:hover {

        transform: scale(1.1);
        filter: brightness(120%);

    }

}

.container {

    width: 100%;
    height: 100vh;
    backdrop-filter: blur(6px);
    background: rgb(0,224,255);
    background: linear-gradient(180deg, rgba(0, 225, 255, 0.200) 0%, rgba(135,105,139,0) 50%, rgba(255,0,36,0.200) 100%);
    overflow: hidden;

    .teams {

        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        transition-duration: .2s;

        .team {

            color: white;
            font-size: 18px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
            padding: 2rem 0;

        }

        li {

            background-size: cover;
            background-position: center;
            height: 400px;
            border: solid 2px #88652b;
            width: 250px;
            margin: 0 1rem;
            transition-duration: .5s;
            transform: scale(1);
            opacity: 0;

            .wrapper {

                overflow: hidden;
                width: 100%;
                height: 100%;

            }

            .informations {

                width: 100%;
                height: 510px;
                background: rgb(255,0,36);
                background: linear-gradient(180deg, #ff002400 0%, #000000a8 30%);
                margin-top: 282px;
                text-align: center;
                position: relative;
                transition-duration: .5s;

                .profile-image {

                    display: block;
                    width: 50px;
                    margin: .8rem auto 4px;
                    border-radius: 50%;
                    border: 2px solid #c69f43;

                }

                .player-name {

                    font-size: 14px;
                    padding-top: 12px;

                }

                .current-player {

                    color: #c69f43;

                }

                .summoners-spells {

                    position: absolute;
                    top: 42px;
                    left: 2px;

                    img {

                        width: 34px;
                        margin: 0 .2rem;
                        border: 2px solid #6464627c;
                        box-sizing: border-box;

                    }

                }

                .runes {

                    position: absolute;
                    top: 30px;
                    right: -14px;

                    img {

                        background-color: #000000b9;
                        border-radius: 50%;
                        border: 2px solid #c69f43;
                        padding: 2px;

                    }

                    .primary-rune {

                        width: 40px;
                        position: relative;
                        z-index: 1;

                    }

                    .secondary-rune {

                        width: 25px;
                        position: relative;
                        z-index: 2;
                        top: 10px;
                        left: -20px;

                    }


                }

                &::before {

                    content: '';
                    position: absolute;
                    top: 1.2rem;
                    left: 0;
                    background-image: url('./../../../../../assets/images/loading-screen/loading-screen-detail.png');
                    width: 85px;
                    height: 15px;

                }

                &::after {

                    content: '';
                    position: absolute;
                    top: 1.2rem;
                    right: 0;
                    background-image: url('./../../../../../assets/images/loading-screen/loading-screen-detail.png');
                    width: 85px;
                    height: 15px;
                    transform: rotateY(180deg);

                }

                .rank {

                    img {
                    
                        padding-top: 32px;
                        width: 160px;
                    }

                    span {

                        color: #ffffffad;
                        font-size: 18px;
                        text-transform: uppercase;
                        font-weight: bold;
                        letter-spacing: 2px;
                        display: block;

                    }

                    .tier {

                        font-size: 18px;

                    }

                    .lp {

                        padding-top: 12px;
                        font-size: 14px;

                    }

                }

                .maestry {

                    img {
                    
                        padding-top: 32px;
                        width: 60px;
                    
                    }

                    .points {

                        color: #ffffffad;
                        font-size: 12px;
                        display: block;

                    }

                }

            }

            &:hover {

                transform: scale(1.1) !important;
                box-shadow: 0 0 60px rgba(0, 0, 0, 0.500);

                .informations {

                    transform: translateY(-390px);

                }

            }

        }

        .blue-team {

            position: relative;
            left: -12px;

            li {

                animation: FadeInDown 1s forwards;
                position: relative;

                @keyframes FadeInDown {
                    
                    0% {

                        opacity: 0;
                        top: -80px;

                    }
                    100% {

                        opacity: 1;
                        top: 0;

                    }

                }

                &:nth-child(2) {

                    animation-delay: .2s;

                }

                &:nth-child(3) {

                    animation-delay: .3s;

                }

                &:nth-child(4) {

                    animation-delay: .4s;

                }

                &:nth-child(5) {

                    animation-delay: .5s;

                }

                &::after {

                    content: '';
                    background-image: url('./../../../../../assets/images/loading-screen/border-detail.png');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    width: 250px;
                    height: 15px;
                    position: absolute;
                    bottom: -15px;

                }

            }

        }

        .red-team {

            position: relative;
            right: -12px;

            li {

                animation: FadeInUp 1s forwards;
                position: relative;

                @keyframes FadeInUp {
                    
                    0% {

                        opacity: 0;
                        bottom: -80px;

                    }
                    100% {

                        opacity: 1;
                        bottom: 0;

                    }

                }

                &:nth-child(1) {

                    animation-delay: .5s;

                }

                &:nth-child(2) {

                    animation-delay: .4s;

                }

                &:nth-child(3) {

                    animation-delay: .3s;

                }

                &:nth-child(4) {

                    animation-delay: .2s;

                }

                &::after {

                    content: '';
                    background-image: url('./../../../../../assets/images/loading-screen/border-detail.png');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    width: 250px;
                    height: 15px;
                    position: absolute;
                    top: -15px;
                    transform: rotateX(160deg);

                }

            }

        }

    }

}

.two-hundred-sixty-five-pixels {

    background-position: 265px !important;

}

.two-hundred-seventy-five-pixels {

    background-position: 275px !important;

}

.two-hundred-ninety-pixels {

    background-position: 290px !important;

}

.two-hundred-ninety-five-pixels {

    background-position: 295px !important;

}

.three-hundred-pixels {

    background-position: 300px !important;

}

.three-hundred-ten-pixels {

    background-position: 310px !important;

}

.three-hundred-fifteen-pixels {

    background-position: 315px !important;

}

.three-hundred-twenty-five-pixels {

    background-position: 325px !important;

}

.three-hundred-fourty-five-pixels {

    background-position: 345px !important;

}

.three-hundred-sixty-pixels {

    background-position: 360px !important;

}

.three-hundred-ninety-pixels {

    background-position: 390px !important;

}

.four-hundred-pixels {

    background-position: 400px !important;

}

.four-hundred-fifteen-pixels {

    background-position: 415px !important;

}

.four-hundred-thirty-pixels {

    background-position: 430px !important;

}

.four-hundred-forty-pixels {

    background-position: 440px !important;

}

.four-hundred-seventy-pixels {

    background-position: 470px !important;

}

.five-hundred-forty-pixels {

    background-position: 540px !important;

}

================================================
FILE: src/app/modules/client/game/loading/loading.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { LoadingComponent } from './loading.component';

describe('LoadingComponent', () => {
  let component: LoadingComponent;
  let fixture: ComponentFixture<LoadingComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ LoadingComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(LoadingComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/game/loading/loading.component.ts
================================================
import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss']
})
export class LoadingComponent implements OnInit {

  player: any = localStorage.getItem('username')
  playerPick: any = JSON.parse(localStorage.getItem('playerPick'))
  allyTeam: any = JSON.parse(localStorage.getItem('allyTeam'))
  enemyTeam: any = JSON.parse(localStorage.getItem('enemyTeam'))
  backHome: boolean = false

  constructor() { }

  ngOnInit(): void {

    setTimeout(() => {this.backHome = true}, 2000)

  }



  adjustChampion(champion) {

    switch (champion) {
      case 'Ahri':
        return 'three-hundred-sixty-pixels'
      case 'Aatrox':
        return 'three-hundred-sixty-pixels'
      case 'Alistar':
        return 'three-hundred-ninety-pixels'
      case 'Amumu':
        return 'three-hundred-sixty-pixels'
      case 'Annie':
        return 'two-hundred-sixty-five-pixels'
      case 'Ashe':
        return 'three-hundred-ten-pixels'
      case 'Aurelion Sol':
        return 'four-hundred-thirty-pixels'
      case 'Azir':
        return 'three-hundred-fifteen-pixels'
      case 'Bard':
        return 'three-hundred-sixty-pixels'
      case 'Blitzcrank':
        return 'three-hundred-twenty-five-pixels'
      case 'Brand':
        return 'two-hundred-seventy-five-pixels'
      case 'Braum':
        return 'two-hundred-ninety-pixels'
      case 'Caitlyn':
        return 'two-hundred-ninety-five-pixels'
      case 'Camille':
        return 'two-hundred-ninety-five-pixels'
      case 'Cassiopeia':
        return 'three-hundred-sixty-pixels'
      case "Cho'Gatch":
        return 'three-hundred-sixty-pixels'
      case 'Corki':
        return 'three-hundred-fifteen-pixels'
      case 'Darius':
        return 'three-hundred-ninety-pixels'
      case 'Diana':
        return 'three-hundred-fifteen-pixels'
      case 'Dr.Mundo':
        return 'three-hundred-fifteen-pixels'
      case 'Draven':
        return 'three-hundred-twenty-five-pixels'
      case 'Ekko':
        return 'three-hundred-twenty-five-pixels'
      case 'Elise':
        return 'three-hundred-twenty-five-pixels'
      case 'Evelynn':
        return 'four-hundred-forty-pixels'
      case 'Ezreal':
        return 'three-hundred-sixty-pixels'
      case 'Fiddlesticks':
        return 'five-hundred-forty-pixels'
      case 'Fiora':
        return 'three-hundred-sixty-pixels'
      case 'Fizz':
        return 'three-hundred-pixels'
      case 'Galio':
        return 'four-hundred-seventy-pixels'
      case 'Gangplank':
        return 'three-hundred-pixels'
      case 'Garen':
        return 'three-hundred-pixels'
      case 'Gnar':
        return 'three-hundred-pixels'
      case 'Gragas':
        return 'three-hundred-sixty-pixels'
      case 'Graves':
        return 'three-hundred-sixty-pixels'
      case 'Hecarim':
        return 'three-hundred-pixels'
      case 'Heimerdinger':
        return 'three-hundred-pixels'
      case 'Illaoi':
        return 'three-hundred-fourty-five-pixels'
      case 'Irelia':
        return 'four-hundred-forty-pixels'
      case 'Ivern':
        return 'four-hundred-forty-pixels'
      case 'Janna':
        return 'two-hundred-ninety-pixels'
      case 'Jarvan IV':
        return 'three-hundred-fourty-five-pixels'
      case 'Jax':
        return 'three-hundred-fourty-five-pixels'
      case 'Jayce':
        return 'three-hundred-fourty-five-pixels'
      case 'Jhin':
        return 'four-hundred-fifteen-pixels'
      case 'Jinx':
        return 'three-hundred-fourty-five-pixels'
      case "Kai'Sa":
        return 'four-hundred-seventy-pixels'
      case 'Kalista':
        return 'three-hundred-sixty-pixels'
      case 'Karma':
        return 'three-hundred-pixels'
      case 'Karthus':
        return 'four-hundred-pixels'
      case 'Kassadin':
        return 'three-hundred-ten-pixels'
      case 'Katarina':
        return 'three-hundred-sixty-pixels'
      case 'Kayle':
        return 'four-hundred-thirty-pixels'
      case 'Kayle':
        return 'four-hundred-thirty-pixels'
      case 'Kennen':
        return 'three-hundred-twenty-five-pixels'
      case "Kha'Zix":
        return 'three-hundred-twenty-five-pixels'
      case 'Kindred':
        return 'three-hundred-twenty-five-pixels'
      case 'Kled':
        return 'three-hundred-pixels'
      case "Kog'Maw":
        return 'three-hundred-pixels'
      case 'LeBlanc':
        return 'three-hundred-twenty-five-pixels'
      case 'Lee Sin':
        return 'three-hundred-sixty-pixels'
      case 'Leona':
        return 'two-hundred-sixty-five-pixels'
      case 'Lissandra':
        return 'three-hundred-twenty-five-pixels'
      case 'Lucian':
        return 'three-hundred-twenty-five-pixels'
      case 'Lulu':
        return 'three-hundred-twenty-five-pixels'
      case 'Lux':
        return 'three-hundred-sixty-pixels'
      case 'Malphite':
        return 'three-hundred-sixty-pixels'
      case 'Malzahar':
        return 'four-hundred-pixels'
      case 'Maokai':
        return 'four-hundred-pixels'
      case 'Master Yi':
        return 'two-hundred-ninety-pixels'
      case 'Miss Fortune':
        return 'two-hundred-ninety-pixels'
      case 'Morgana':
        return 'five-hundred-forty-pixels'
      case 'Nami':
        return 'two-hundred-ninety-pixels'
      case 'Nasus':
        return 'three-hundred-sixty-pixels'
      case 'Nautilus':
        return 'three-hundred-pixels'
      case 'Nidalee':
        return 'three-hundred-pixels'
      case 'Nocturne':
        return 'three-hundred-sixty-pixels'
      case 'Nunu & Willump':
        return 'three-hundred-sixty-pixels'
      case 'Olaf':
        return 'three-hundred-sixty-pixels'
      case 'Orianna':
        return 'two-hundred-ninety-pixels'
      case 'Poppy':
        return 'three-hundred-sixty-pixels'
      case 'Quinn':
        return 'three-hundred-sixty-pixels'
      case 'Rakan':
        return 'three-hundred-sixty-pixels'
      case 'Rammus':
        return 'three-hundred-sixty-pixels'
      case 'Rengar':
        return 'three-hundred-sixty-pixels'
      case 'Riven':
        return 'three-hundred-pixels'
      case 'Rumble':
        return 'three-hundred-sixty-pixels'
      case 'Ryze':
        return 'three-hundred-pixels'
      case 'Sejuani':
        return 'three-hundred-sixty-pixels'
      case 'Shaco':
        return 'three-hundred-pixels'
      case 'Shen':
        return 'three-hundred-pixels'
      case 'Shyvana':
        return 'three-hundred-twenty-five-pixels'
      case 'Singed':
        return 'three-hundred-twenty-five-pixels'
      case 'Sion':
        return 'three-hundred-twenty-five-pixels'
      case 'Sivir':
        return 'three-hundred-sixty-pixels'
      case 'Skarner':
        return 'three-hundred-sixty-pixels'
      case 'Skarner':
        return 'three-hundred-sixty-pixels'
      case 'Sona':
        return 'three-hundred-sixty-pixels'
      case 'Swain':
        return 'three-hundred-sixty-pixels'
      case 'Syndra':
        return 'three-hundred-pixels'
      case 'Tahm Kench':
        return 'three-hundred-twenty-five-pixels'
      case 'Taliyah':
        return 'three-hundred-twenty-five-pixels'
      case 'Talon':
        return 'three-hundred-sixty-pixels'
      case 'Taric':
        return 'three-hundred-pixels'
      case 'Teemo':
        return 'three-hundred-pixels'
      case 'Thresh':
        return 'three-hundred-sixty-pixels'
      case 'Tristana':
        return 'three-hundred-sixty-pixels'
      case 'Trundle':
        return 'three-hundred-sixty-pixels'
      case 'Tryndamere':
        return 'three-hundred-pixels'
      case 'Twisted Fate':
        return 'three-hundred-pixels'
      case 'Vayne':
        return 'three-hundred-pixels'
      case 'Veigar':
        return 'three-hundred-sixty-pixels'
      case 'Vi':
        return 'three-hundred-sixty-pixels'
      case 'Viego':
        return 'three-hundred-sixty-pixels'
      case 'Viktor':
        return 'three-hundred-sixty-pixels'
      case 'Vladimir':
        return 'three-hundred-sixty-pixels'
      case 'Volibear':
        return 'three-hundred-sixty-pixels'
      case 'Warwick':
        return 'three-hundred-sixty-pixels'
      case 'Wukong':
        return 'three-hundred-sixty-pixels'
      case 'Xayah':
        return 'three-hundred-sixty-pixels'
      case 'Yasuo':
        return 'three-hundred-pixels'
      case 'Yorick':
        return 'three-hundred-sixty-pixels'
      case 'Yuumi':
        return 'four-hundred-seventy-pixels'
      case 'Zac':
        return 'three-hundred-sixty-pixels'
      case 'Zed':
        return 'three-hundred-twenty-five-pixels'
      case 'Ziggs':
        return 'three-hundred-pixels'
      case 'Zyra':
        return 'three-hundred-pixels'
    }

  }

  @HostListener('document:mousemove', ['$event']) 

  onMouseMove(mouseTrack) {

    let offsetX = mouseTrack.pageX / 100
    
    document.getElementById('blueTeam').style.transform = `translateX(${offsetX}px)`
    document.getElementById('redTeam').style.transform = `translateX(-${offsetX}px)`

  }

}


================================================
FILE: src/app/modules/client/home/home/home.component.html
================================================
<nav class="component-menu">

    <ul>

        <li (click)="playSound('submenuClick')"><a routerLinkActive="item-menu-active" routerLink="overview">Overview</a></li>
        <li (click)="playSound('submenuClick')"><a routerLinkActive="item-menu-active" routerLink="patch-notes">Patch Notes</a></li>

    </ul>

</nav>

<div class="content">
    <router-outlet></router-outlet>
</div>

================================================
FILE: src/app/modules/client/home/home/home.component.scss
================================================
@import './../../../../../assets/scss/menu-component.scss'

================================================
FILE: src/app/modules/client/home/home/home.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { HomeComponent } from './home.component';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ HomeComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/home/home/home.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { BackgroundService } from '../../background.service';
import { SoundService } from '../../sound.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor( private soundService: SoundService ) {}

  ngOnInit(): void {
  }



  playSound(sound) {

    this.soundService.playSound(sound)

  }

}


================================================
FILE: src/app/modules/client/home/home-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { OverviewComponent } from './overview/overview.component';
import { PatchNotesComponent } from './patch-notes/patch-notes.component';

const routes: Routes = [

  { path: '', redirectTo: 'overview', pathMatch: 'full' },
  { path: '', component: HomeComponent, children: [
  
    { path: 'overview', component: OverviewComponent },
    { path: 'patch-notes', component: PatchNotesComponent },
  
  ]}

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }


================================================
FILE: src/app/modules/client/home/home.module.ts
================================================
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HomeRoutingModule } from './home-routing.module';
import { OverviewComponent } from './overview/overview.component';
import { HomeComponent } from './home/home.component';
import { PatchNotesComponent } from './patch-notes/patch-notes.component';


@NgModule({
  declarations: [OverviewComponent, HomeComponent, PatchNotesComponent],
  imports: [
    CommonModule,
    HomeRoutingModule
  ]
})
export class HomeModule { }


================================================
FILE: src/app/modules/client/home/overview/overview.component.html
================================================
<div class="container">

    <h1>Angular of Legends</h1>
    <p>Welcome to Angular of Legends, a clone of League of Legends Client made by Ivin Rodrigues</p>
    <a href="https://github.com/IvinRodrigues" target="_blank">My Github</a>

</div>

================================================
FILE: src/app/modules/client/home/overview/overview.component.scss
================================================
.container {

    h1 {
    
        color: #f0e6d2;
        font-size: 3rem;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        display: block;
        margin-top: 20%;
    
    }
    
    p {
    
        font-family: 'Roboto', sans-serif;
        margin-top: 2rem;
        color: #938f83;
        display: block;
    
    }

    a {

        color: #938f83;
        background-color: #1e2328;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: bold;
        margin-top: 2rem;
        padding: .8rem 2rem;
        display: inline-block;
        border: 2px solid #c8aa6d;
        transition-duration: .2s;

        &:hover {

            color: #f0e6d2;


        }

    }

}

================================================
FILE: src/app/modules/client/home/overview/overview.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { OverviewComponent } from './overview.component';

describe('OverviewComponent', () => {
  let component: OverviewComponent;
  let fixture: ComponentFixture<OverviewComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ OverviewComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(OverviewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/home/overview/overview.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { BackgroundService } from '../../background.service';

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.scss']
})
export class OverviewComponent implements OnInit {

  constructor(private backgroundService: BackgroundService) {

    this.backgroundService.changeBackground({ 
      backgroundUrl: 'https://4.bp.blogspot.com/-fXQUf52mB0I/XO98d2WF4ZI/AAAAAAAAGls/P3BtEoQqEoszt_NmeXJxyi2Tx9rB_qJeACKgBGAs/w0/galaxy-slayer-zed-lol-4K-97.jpg',
      backgroundSize: 'cover',
      backgroundPosition: 'top'
    })

  }

  ngOnInit(): void {
  }

}


================================================
FILE: src/app/modules/client/home/patch-notes/patch-notes.component.html
================================================
<h1 class="patch-note-title">Patch 1.0 notes</h1>
<p class="patch-note-author">Ivin Rodrigues - 02/20/2021</p>
<p class="patch-note-text">Welcome to first patch of the project.</p>
<p class="patch-note-text">Features developed in this patch</p>
<ul>

    <li>- Login</li>
    <li>- Client Layout</li>
    <li>- Chat</li>
    <li>- Profile</li>
    <li>- Match history</li>
    <li>- Lobby</li>
    <li>- Champion select</li>
    <li>- Loading screen</li>

</ul>

================================================
FILE: src/app/modules/client/home/patch-notes/patch-notes.component.scss
================================================
.patch-note-title {
    
    color: #f0e6d2;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    display: block;
    margin-top: 2rem;

}

.patch-note-author {

    font-family: 'Roboto', sans-serif;
    margin-top: 1rem;
    color: #938f83;
    text-transform: uppercase;
    display: block;

}

.patch-note-text {

    font-family: 'Roboto', sans-serif;
    margin: 2rem;
    font-size: 1.2rem;
    color: #f0e6d2;
    letter-spacing: 1px;
    display: block;

}

ul {

    margin-left: 2.5rem;
    
    li {

        font-family: 'Roboto', sans-serif;
        color: white;
        font-size: 18px;
        padding: 12px 0;

    }

}

================================================
FILE: src/app/modules/client/home/patch-notes/patch-notes.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { PatchNotesComponent } from './patch-notes.component';

describe('PatchNotesComponent', () => {
  let component: PatchNotesComponent;
  let fixture: ComponentFixture<PatchNotesComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ PatchNotesComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(PatchNotesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/home/patch-notes/patch-notes.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { BackgroundService } from '../../background.service';

@Component({
  selector: 'app-patch-notes',
  templateUrl: './patch-notes.component.html',
  styleUrls: ['./patch-notes.component.scss']
})
export class PatchNotesComponent implements OnInit {

  constructor(private backgroundService: BackgroundService) {

    this.backgroundService.changeBackground('')

  }

  ngOnInit(): void {
  }

}


================================================
FILE: src/app/modules/client/play/lobby/lobby.component.html
================================================
<header>
    <img src="./assets/images/play-icons/sr-hover.png">
    <span>Ranked solo/duo</span>
    <span>Draft</span>
    <span class="map">Summoner's rift 5v5</span>
    <a (click)="cancelQueue()" (mouseenter)="playSound('changeGameModeButtonHover')" (click)="playSound('changeGameModeButtonClick')" routerLink="/client/play/pvp" class="button-client">Change mode</a>
</header>

<div class="banners">

    <div id="firstBanner" class="banner delay3">
        <button [ngClass]="{'invite-friend-hidden': inQueue}" class="invite-friend">+</button>
    </div>
    <div id="secondBanner" class="banner delay2">
        <button [ngClass]="{'invite-friend-hidden': inQueue}" class="invite-friend">+</button>
    </div>
    <div id='playerBanner' class="banner">
        <div class="player-informations">
            <span class="owner-room-player">Ivinzivel</span>
            <img class="rank-image" src="./assets/images/aside-icons/platina.png">
            <span class="rank-tier">II</span>
            <img class="profile-image" src="https://opgg-static.akamaized.net/images/profile_icons/profileIcon4791.jpg?image=q_auto:best&v=1518361200">
            <div [ngClass]="{'role-select-button-desabled': inQueue}" (click)="openRoleSelect(); playSound('roleSelectButtonClick')" class="role-select-button">
                <div *ngIf="roleSelected == null">
                    <div class="arrow-up"></div>
                    <div class="arrow-right"></div>
                    <div class="arrow-down"></div>
                    <div class="arrow-left"></div>
                    <div class="box"></div>
                </div>
                <img *ngIf="roleSelected == 'mid'" src="./assets/images/lobby/roles/mid-selected.png">
                <img *ngIf="roleSelected == 'adc'" src="./assets/images/lobby/roles/adc-selected.png">
                <img *ngIf="roleSelected == 'jg'" src="./assets/images/lobby/roles/jg-selected.png">
                <img *ngIf="roleSelected == 'sup'" src="./assets/images/lobby/roles/sup-selected.png">
                <img *ngIf="roleSelected == 'top'" src="./assets/images/lobby/roles/top-selected.png">
                <img *ngIf="roleSelected == 'fill'" src="./assets/images/lobby/roles/fill-selected.png">
            </div>
        </div>
        <img src="./assets/images/lobby/banner.png">
    </div>
    <div id="fourthBanner" class="banner delay2">
        <button [ngClass]="{'invite-friend-hidden': inQueue}" class="invite-friend">+</button>
    </div>
    <div id="fifthBanner" class="banner delay3">
        <button [ngClass]="{'invite-friend-hidden': inQueue}" class="invite-friend">+</button>
    </div>

</div>


<div id="roleSelect" class="role-select">
    <span class="mid">
        <span class="role-name">Middle</span>
        <img (mouseenter)="playSound('roleSelectButtonLaneHover')" (click)="selectRole('mid'); playSound('roleSelectButtonLaneClick')" src="./assets/images/lobby/roles/mid.png">
    </span>
    <span class="adc">
        <img (mouseenter)="playSound('roleSelectButtonLaneHover')" (click)="selectRole('adc'); playSound('roleSelectButtonLaneClick')" src="./assets/images/lobby/roles/adc.png">
        <span class="role-name">Bottom</span>
    </span>
    <span class="jg">
        <span class="role-name">Jungle</span>
        <img (mouseenter)="playSound('roleSelectButtonLaneHover')" (click)="selectRole('jg'); playSound('roleSelectButtonLaneClick')" src="./assets/images/lobby/roles/jg.png">
    </span>
    <span class="sup">
        <img (mouseenter)="playSound('roleSelectButtonLaneHover')" (click)="selectRole('sup'); playSound('roleSelectButtonLaneClick')" src="./assets/images/lobby/roles/sup.png">
        <span class="role-name">Support</span>
    </span>
    <span class="top">
        <span class="role-name">Top</span>
        <img (mouseenter)="playSound('roleSelectButtonLaneHover')" (click)="selectRole('top'); playSound('roleSelectButtonLaneClick')" src="./assets/images/lobby/roles/top.png">
    </span>
    <span class="fill">
        <img (mouseenter)="playSound('roleSelectButtonLaneHover')" (click)="selectRole('fill'); playSound('roleSelectButtonLaneClick')" src="./assets/images/lobby/roles/fill.png">
        <span class="role-name">Fill</span>
    </span>
    <div (click)="closeRoleSelect(); playSound('roleSelectButtonClick')" class="role-select-button">
        <div *ngIf="roleSelected == null">
            <div class="arrow-up"></div>
            <div class="arrow-right"></div>
            <div class="arrow-down"></div>
            <div class="arrow-left"></div>
            <div class="box"></div>
        </div>
        <img *ngIf="roleSelected == 'mid'" src="./assets/images/lobby/roles/mid-selected.png">
        <img *ngIf="roleSelected == 'adc'" src="./assets/images/lobby/roles/adc-selected.png">
        <img *ngIf="roleSelected == 'jg'" src="./assets/images/lobby/roles/jg-selected.png">
        <img *ngIf="roleSelected == 'sup'" src="./assets/images/lobby/roles/sup-selected.png">
        <img *ngIf="roleSelected == 'top'" src="./assets/images/lobby/roles/top-selected.png">
        <img *ngIf="roleSelected == 'fill'" src="./assets/images/lobby/roles/fill-selected.png">
    </div>
</div>

<div class="confirm-button">
    <img *ngIf="inQueue" (mouseenter)="playSound('confirmButtonHover')" (click)="cancelQueue(); playSound('confirmButtonCancelClick')" class="cancel" src="./assets/images/confirm-button/confirm-button-cancel.png">
    <span *ngIf="inQueue" class="title title-desabled">
        <span>Find match</span>
        <img class="confirm" src="./assets/images/confirm-button/confirm-button-click-area.png">
    </span>
    <img *ngIf="!inQueue" (mouseenter)="playSound('confirmButtonHover')" (click)="closeLobby(); playSound('confirmButtonCancelClick')" routerLink="/client/home" class="cancel" src="./assets/images/confirm-button/confirm-button-cancel.png">
    <span *ngIf="!inQueue" [ngClass]="{'title-desabled': roleSelected == null}" (mouseenter)="playSound('findMatchButtonHover')" (click)="enterQueue(); playSound('findMatchButtonClick')" class="title">
        <span>Find match</span>
        <img class="confirm" src="./assets/images/confirm-button/confirm-button-click-area.png">
    </span>
</div>

================================================
FILE: src/app/modules/client/play/lobby/lobby.component.scss
================================================
@import '/src/assets/scss/animations.scss';
@import '/src/assets/scss/buttons.scss';

header {

    width: calc(100% - 312px);
    position: fixed;
    margin-top: 7rem;
    z-index: 2;

    img {

        width: 50px;
        display: inline-block;

    }

    span {

        color: #f0e6d2;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        display: inline-block;
        transform: translateY(-22px);
        padding: 1rem 1.5rem;

    }

    .map {

        color: #8a867b;

    }

    a {

        float: right;
        transform: translateY(-30px);
        margin-right: 3rem;

    }

}

.role-select-button-desabled {

    cursor: default;
    border-color: #5c5b57 !important;
    filter: grayscale(100%);

    img {

        filter: grayscale(100%);

    }

    &:hover {

        transform: rotate(45deg) scale(.9) !important;

    }

}

.role-select-button {

    width: 80px;
    height: 80px;
    background-color: #1e2328;
    border: 5px solid #0596aa;
    box-sizing: border-box;
    margin: 295px auto 0 auto;
    position: relative;
    transform: rotate(45deg) scale(.9);
    transition-duration: .2s;
    cursor: pointer;

    img {

        padding: 20px;
        transform: rotate(-45deg);

    }

    .arrow-up {

        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid  #0596aa;
        transform: rotate(45deg);
        position: absolute;
        top: 16px;
        right: 13px;

    }

    .arrow-right {

        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid  #0596aa;
        transform: rotate(-45deg);
        position: absolute;
        top: 15.5px;
        left: 13px;

    }

    .arrow-down {

        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid  #0596aa;
        transform: rotate(135deg);
        position: absolute;
        bottom: 15.5px;
        right: 13px;

    }

    .arrow-left {

        width: 0; 
        height: 0; 
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent; 
        border-right: 5px solid #0596aa;
        transform: rotate(315deg);
        position: absolute;
        bottom: 13px;
        left: 15.5px;

    }

    .box {

        width: 10px;
        height: 10px;
        background-color: #0596aa;
        position: absolute;
        top: calc( 50% - 5px );
        left: calc( 50% - 5px );

    }

    &:hover {

        transform: rotate(45deg) scale(1);

    }

}


.role-select {

    width: 700px;
    height: 700px;
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0, 0, 0, 0.897) 10%, rgba(255,255,255,0) 60%);
    position: absolute;    
    top: 217px;
    left: calc(50% - 354px);
    z-index: 5;
    justify-content: center;
    align-content: center;
    display: none;

    img {

        cursor: pointer;
        transition-duration: .2s;

        &:hover {

            transform: scale(1.1);
            filter: brightness(150%);

        }

    }

    .role-name {

        color: #f0e6d2;
        font-size: 1.8rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;

    }

    .mid {

        width: 200px;
        height: 200px;
        position: absolute;
        top: 190px;
        left: 254px;
        text-align: center;

        span {

            padding-bottom: 1rem;
            display: block;

        }

    }

    .adc {

        width: 200px;
        height: 200px;
        position: absolute;
        top: 266px;
        right: 92px;
        text-align: center;

        span {

            padding-left: 1rem;

        }

    }

    .jg {

        width: 200px;
        height: 200px;
        position: absolute;
        top: 266px;
        left: 114px;
        text-align: center;

        span {

            padding-right: 1rem;

        }

    }

    .sup {

        width: 200px;
        height: 200px;
        position: absolute;
        top: 340px;
        right: 62px;
        text-align: center;

        span {

            padding-left: 1rem;

        }

    }

    .top {

        width: 200px;
        height: 200px;
        position: absolute;
        top: 340px;
        left: 113px;                
        text-align: center;

        span {

            padding-right: 1rem;

        }

    }

    .fill {

        width: 200px;
        height: 200px;
        padding: 2rem;
        bottom: 36px;
        left: 224px;
        text-align: center;
        position: absolute;

        span {

            display: block;
            padding-top: 1rem;

        }

    }

    .role-select-button {

        border-radius: 50%;
        margin-top: 296px;
        position: relative;
        top: 20px;
        left: 4px;

        img {

            padding: 20px;
            transform: rotate(-45deg);

        }

    }

}

.banners {

    display: flex;

    .banner {

        width: 20%;
        position: relative;
        text-align: center;
        opacity: 0;
        animation: SlideDown;
        animation-fill-mode: forwards;
        animation-duration: 1s;

        .invite-friend {

            color: #e4dbc8;
            width: 100px;
            height: 100px;
            margin: 360px auto 0 auto;
            font-size: 2rem;
            border-radius: 50%;
            border: 2px solid #aa9261;
            background-color: rgb(51, 51, 51);
            opacity: 0;
            transition-duration: .2s;
            position: relative;
            z-index: 1;
            cursor: pointer;

            &:hover {

                opacity: .8;
                transform: scale(1.1);
                box-shadow: 0 0 20px #aa9261;

            }

        }

        .invite-friend-hidden {

            margin: 300px auto 0 auto;
            opacity: 0 !important;
            z-index: -1 !important;

        }

        .player-informations {

            position: absolute;
            width: 100%;
            text-align: center;
            padding-top: 200px;

            .owner-room-player {

                color: #f0e6d2;
                font-size: 1.8rem;
                font-weight: bold;
                letter-spacing: 2px;
                display: block;

            }

            .rank-image {

                width: 200px;
                padding-top: 2rem;
                position: relative;
                z-index: 2;

            }

            .rank-tier {

                color: white;
                z-index: 2;
                display: block;
                position: relative;
                top: -68px;


            }

            .profile-image {

                width: 126px;
                display: block;
                z-index: 1;
                border-radius: 50%;
                margin: -201px auto;

            }

        }

    }

}

.confirm-button {

    background-image: url('/assets/images/confirm-button/confirm-button-shape.png');
    width: 257px;
    height: 54px;
    position: fixed;
    bottom: 1rem;
    z-index: 4;
    left: 50%;
    margin-left: -257px;

    span, img {

        position: absolute;

    }

    .cancel {

        z-index: 1;
        left: 6px;
        
    }

    .cancel, .confirm {

        transition-duration: .2s;
        cursor: pointer;

        &:hover {

            filter: brightness(150%);

        }

    }

    .title {

        width: 257px;
        height: 54px;

        span {

            text-transform: uppercase;
            color: #f0e6d2;
            font-weight: bold;
            letter-spacing: 1px;
            z-index: 2;
            right: 60px;
            top: 20px;
            cursor: pointer;

        }

        .confirm {
    
            right: 0;
            z-index: 1;
    
        }

        &:hover {

            .confirm {

                filter: brightness(150%);

            }

        }

    }

    .title-desabled {

        span, .confirm {

            filter: grayscale(100%);
            cursor: default;

        }

        &:hover {

            .confirm {

                filter: grayscale(100%) brightness(100%);

            }

        }

    }

}

================================================
FILE: src/app/modules/client/play/lobby/lobby.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { LobbyComponent } from './lobby.component';

describe('LobbyComponent', () => {
  let component: LobbyComponent;
  let fixture: ComponentFixture<LobbyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ LobbyComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(LobbyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/play/lobby/lobby.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { BackgroundService } from '../../background.service';
import { PlayService } from '../../play.service';
import { SoundService } from '../../sound.service';

@Component({
  selector: 'app-lobby',
  templateUrl: './lobby.component.html',
  styleUrls: ['./lobby.component.scss']
})
export class LobbyComponent implements OnInit {

  inQueue: boolean = false
  roleSelected: string = null
  gameMode: string = null

  constructor(private backgroundService: BackgroundService,
              private playService: PlayService,
              private soundService: SoundService) {

    this.backgroundService.changeBackground({ 
      backgroundUrl: 'https://images2.alphacoders.com/913/thumb-1920-913622.jpg',
      backgroundSize: '150%',
      backgroundPosition: 'bottom'
    })

    this.playService.changeLobbyState(true)

    this.playService.getQueueObservable().subscribe(

      response => {

        if(response == true) {

          this.inQueue = true

        } else {

          this.inQueue = false

        }

      }
      
    )

  }

  ngOnInit(): void {

    setTimeout( () => {

      document.getElementById('playerBanner').style.opacity = '1'
      this.soundService.playSound('lobbyIntro')

      setTimeout( () => {

        document.getElementById('secondBanner').style.opacity = '1'
        document.getElementById('fourthBanner').style.opacity = '1'

        setTimeout( () => {

          document.getElementById('firstBanner').style.opacity = '1'
          document.getElementById('fifthBanner').style.opacity = '1'
    
        }, 200 )
  
      }, 200 )

    }, 200 )

  }



  enterQueue() {

    if(this.roleSelected !== null) {
    
      this.playService.changeQueueState(true)
      this.inQueue = true
    
    }

  }



  cancelQueue() {

    this.playService.changeQueueState(false)
    this.inQueue = false

  }



  closeLobby() {

    this.playService.changeLobbyState(false)

  }



  openRoleSelect() {

    if(this.inQueue == false) {

      document.getElementById('roleSelect').style.display = 'block'

    }

  }



  closeRoleSelect() {

    if(this.inQueue == false) {

      document.getElementById('roleSelect').style.display = 'none'

    }

  }



  selectRole(role) {

      this.roleSelected = role
      document.getElementById('roleSelect').style.display = 'none'

  }



  playSound(sound) {

    this.soundService.playSound(sound)

  }

}


================================================
FILE: src/app/modules/client/play/play-menu/play-menu.component.html
================================================
<nav class="component-menu">

    <ul>

        <li><a routerLinkActive="item-menu-active" routerLink="pvp">pvp</a></li>
        <li><a routerLinkActive="item-menu-active" class="item-menu-disabled">co-op vs. ai</a></li>
        <li><a routerLinkActive="item-menu-active" class="item-menu-disabled">training</a></li>

    </ul>

</nav>

<div class="confirm-button">
    <img (mouseenter)="playSound('confirmButtonHover')" (click)="playSound('confirmButtonCancelClick')" routerLink="/client/home" class="cancel" src="./assets/images/confirm-button/confirm-button-cancel.png">
    <span (mouseenter)="playSound('confirmButtonHover')" (click)="playSound('confirmButtonClick')" routerLink="/client/play/lobby" class="title">
        <span>Confirm</span>
        <img class="confirm" src="./assets/images/confirm-button/confirm-button-click-area.png">
    </span>
</div>

<div class="content">
    <router-outlet></router-outlet>
</div>

================================================
FILE: src/app/modules/client/play/play-menu/play-menu.component.scss
================================================
@import './../../../../../assets/scss/menu-component.scss';

.confirm-button {

    background-image: url('/assets/images/confirm-button/confirm-button-shape.png');
    width: 257px;
    height: 54px;
    position: fixed;
    bottom: 1rem;
    z-index: 4;
    left: 50%;
    margin-left: -257px;

    span, img {

        position: absolute;
        cursor: pointer;

    }

    .cancel {

        z-index: 1;
        left: 6px;
        
    }

    .cancel, .confirm {

        transition-duration: .2s;

        &:hover {

            filter: brightness(150%);

        }

    }

    .title {

        width: 257px;
        height: 54px;

        span {

            text-transform: uppercase;
            color: #f0e6d2;
            font-weight: bold;
            letter-spacing: 1px;
            z-index: 2;
            right: 30%;
            top: 20px;

        }

        .confirm {
    
            right: 0;
            z-index: 1;
    
        }

        &:hover {

            .confirm {

                filter: brightness(150%);

            }

        }

    }

}

================================================
FILE: src/app/modules/client/play/play-menu/play-menu.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { PlayMenuComponent } from './play-menu.component';

describe('PlayMenuComponent', () => {
  let component: PlayMenuComponent;
  let fixture: ComponentFixture<PlayMenuComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ PlayMenuComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(PlayMenuComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/play/play-menu/play-menu.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { SoundService } from '../../sound.service';

@Component({
  selector: 'app-play-menu',
  templateUrl: './play-menu.component.html',
  styleUrls: ['./play-menu.component.scss']
})
export class PlayMenuComponent implements OnInit {

  constructor(private soundService: SoundService) {}

  ngOnInit(): void {
  }



  playSound(sound) {

    this.soundService.playSound(sound)

  }

}


================================================
FILE: src/app/modules/client/play/play-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LobbyComponent } from './lobby/lobby.component';
import { PlayMenuComponent } from './play-menu/play-menu.component';
import { PvpComponent } from './pvp/pvp.component';

const routes: Routes = [

  { path: '', component: PlayMenuComponent, children: [

    { path: '', redirectTo: 'pvp', pathMatch: 'full' },
    { path: 'pvp', component: PvpComponent }

  ]},
  { path: 'lobby', component: LobbyComponent }

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PlayRoutingModule { }


================================================
FILE: src/app/modules/client/play/play.module.ts
================================================
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PlayRoutingModule } from './play-routing.module';
import { PlayMenuComponent } from './play-menu/play-menu.component';
import { PvpComponent } from './pvp/pvp.component';
import { LobbyComponent } from './lobby/lobby.component';


@NgModule({
  declarations: [PlayMenuComponent, PvpComponent, LobbyComponent],
  imports: [
    CommonModule,
    PlayRoutingModule
  ]
})
export class PlayModule { }


================================================
FILE: src/app/modules/client/play/pvp/pvp.component.html
================================================
<nav>

    <ul>

        <li id="sr" class="game delay1">

            <img src="./assets/images/play-icons/sr-enabled.png">

            <span class="game-type">5v5</span>

            <span class="game-title">Summoner's<br>Rift</span>

            <p [ngClass]="{'game-description-visible': gameMode == 1}" class="game-description">Crush your lane, dive into epic five-on-five team fights, and destroy the enemy nexus in League's premier competitive mode.</p>

            <ul *ngIf="gameMode == 1" class="game-options">

                <li class="option">
                    <input type="radio" disabled id="blindPick" name="pvpOption">
                    <label for="blindPick">Blind Pick</label>
                </li>
                <li class="option">
                    <input type="radio" disabled id="draftPick" name="pvpOption">
                    <label for="draftPick">Draft Pick</label>
                </li>
                <li class="option">
                    <input type="radio" id="soloDuo" checked name="pvpOption">
                    <label for="soloDuo">Ranked Solo/Duo</label>
                </li>
                <li class="option">
                    <input type="radio" disabled id="flex" name="pvpOption">
                    <label for="flex">Ranked Flex</label>
                </li>

            </ul>

        </li>

        <li id="aram" class="game delay2">

            <img src="./assets/images/play-icons/aram-desabled.png">

            <span class="game-type">5v5</span>

            <span class="game-title game-title-lg">Aram</span>

            <p class="game-description">Coming soon.</p>

        </li>

        <li id="tft" class="game delay3">

            <img src="./assets/images/play-icons/tft-desabled.png">

            <span class="game-type">5v5</span>

            <span class="game-title">Teamfight<br>Tatics</span>

            <p class="game-description">I hate TFT, will never come soon.</p>

        </li>

        <li id="urf" class="game delay4">

            <img src="./assets/images/play-icons/urf-desabled.png">

            <span class="game-type">5v5</span>

            <span class="game-title game-title-lg">urf</span>

            <p class="game-description">Coming soon.</p>

        </li>

    </ul>

</nav>

================================================
FILE: src/app/modules/client/play/pvp/pvp.component.scss
================================================
@import '/src/assets/scss/animations.scss';

ul {

    display: flex;
    height: 100%;

    .game {

        animation: SlideUp;
        animation-duration: 1s;
        width: 25%;
        height: 240px;
        display: inline-block;
        text-align: center;
        padding: 4rem 0 2.5rem;
        transition-duration: .5s;
        opacity: 0;

        img, span {

            display: block;

        }

        span {

            color: #f0e6d2;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 3px;

        }

        .game-type {

            font-size: 1rem;
            margin-top: 1.5rem;

        }

        .game-title {

            text-transform: uppercase;
            font-size: 2rem;
            margin-top: 1rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid #ffffff2f;

        }

        .game-title-lg {

            padding-bottom: 4rem;

        }

        img {

            width: 140px;
            margin: 0 auto;
            cursor: pointer;

        }

        .game-description {
            
            font-family: 'Roboto', sans-serif;
            color: #f0e6d2;
            font-size: 1.2rem;
            line-height: 1.8rem;
            text-align: left;
            padding: 1rem;
            border-bottom: 1px solid #ffffff2f;
            opacity: 0;
            transition-duration: .2s;
            transform: translateY(-20px);

        }

        .game-description-visible {

            opacity: 1;
            transform: translateY(0);

        }

        .game-options {

            display: block;
            margin-top: 1rem;

            .option {

                display: block;
                text-align: left;
                position: relative;

                label {

                    color: #beb088;
                    font-size: 14px;
                    text-transform: uppercase;
                    font-weight: bold;
                    letter-spacing: 3px;
                    font-size: 1rem;
                    padding: 1rem 1rem 1rem 2.2rem;
                    display: block;
                    cursor: pointer;
                    transition-duration: .2s;

                    &:hover {

                        color: #f0e6d2;

                    }

                }

                input[type="radio"] {
                    
                    position: absolute;
                    z-index: -1;
                    opacity: 0;
                
                }

                input[type="radio"]:disabled + label::before {

                    filter: grayscale(100%);

                }

                input[type="radio"]:disabled + label {

                    cursor: default;
                    filter: grayscale(100%);

                    &:hover {

                        color: #beb088 !important;

                    }

                }

                input[type="radio"] + label::before {

                    content: "";
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    left: 10px;
                    top: 18px;
                    outline: #aa9261 solid 4px;
                    vertical-align: bottom;
                    transform: rotate(230deg);

                }
                
                input[type="radio"]:checked + label {

                    color: #f0e6d2;

                }

                input[type="radio"]:checked + label::after {

                    content: "";
                    background-color: #f0e6d2;
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    left: 10px;
                    top: 18px;
                    outline: #aa9261 solid 4px;
                    vertical-align: bottom;
                    transform: rotate(230deg);

                }

            }

        }

        &:hover {

            .game-description {

                opacity: 1;
                transform: translateY(0px);

            }

        }

    }

}

================================================
FILE: src/app/modules/client/play/pvp/pvp.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { PvpComponent } from './pvp.component';

describe('PvpComponent', () => {
  let component: PvpComponent;
  let fixture: ComponentFixture<PvpComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ PvpComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(PvpComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/play/pvp/pvp.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { BackgroundService } from '../../background.service';
import { SoundService } from '../../sound.service';

@Component({
  selector: 'app-pvp',
  templateUrl: './pvp.component.html',
  styleUrls: ['./pvp.component.scss']
})
export class PvpComponent implements OnInit {

  gameMode: number = 1

  constructor(private backgroundService: BackgroundService) {

    this.backgroundService.changeBackground({ 
      backgroundUrl: 'https://images2.alphacoders.com/913/thumb-1920-913622.jpg',
      backgroundSize: '150%',
      backgroundPosition: 'top'
    })

  }

  ngOnInit(): void {

    setTimeout( () => { 
      
      document.getElementById('sr').style.opacity = '1' 
    
        setTimeout( () => { 
        
          document.getElementById('aram').style.opacity = '1' 

          setTimeout( () => { 
        
            document.getElementById('tft').style.opacity = '1' 
          
            setTimeout( () => { 
        
              document.getElementById('urf').style.opacity = '1' 
            
            }, 200 )

          }, 200 )
        
        }, 200 )

    }, 200 )

  }

}


================================================
FILE: src/app/modules/client/play.service.ts
================================================
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PlayService {

  constructor() { }

  private inQueue = new Subject<boolean>()
  private inLobby = new Subject<boolean>()

  changeQueueState(url) {

    this.inQueue.next(url)
  
  }



  getQueueObservable(): Observable<any> {

    return this.inQueue.asObservable()

  }



  changeLobbyState(url) {

    this.inLobby.next(url)
  
  }



  getLobbyObservable(): Observable<any> {

    return this.inLobby.asObservable()

  }
  
}


================================================
FILE: src/app/modules/client/profile/match-history/match-history.component.html
================================================
<ul class="match-history">

    <li *ngFor="let match of matchs" class="match">

        <div class="champion-image-wrapper">
            <img src="{{ match.playerChampion.picture }}">
            <span class="champion-level">{{ match.championLevel }}</span>
        </div>

        <div class="info-match-wrapper">
            <span [ngClass]="{'victory': match.status == 'Victory', 'defeat': match.status == 'Defeat'}" class="match-status">{{ match.status }}</span>
            <span class="match-mode">{{ match.gameMode }}</span> 
            <div class="spells">
                <img *ngFor="let spell of match.spells" src="{{ spell.image }}">
            </div>
        </div>

        <div class="overview-match-wrapper">
            
            <div class="items">
                <span *ngIf="match.items[0]" style="background-image: url('{{ match.items[0].image }}')" class="item"></span>
                <span *ngIf="!match.items[0]" class="item"></span>
                <span *ngIf="match.items[1]" style="background-image: url('{{ match.items[1].image }}')" class="item"></span>
                <span *ngIf="!match.items[1]" class="item"></span>
                <span *ngIf="match.items[2]" style="background-image: url('{{ match.items[2].image }}')" class="item"></span>
                <span *ngIf="!match.items[2]" class="item"></span>
                <span *ngIf="match.items[3]" style="background-image: url('{{ match.items[3].image }}')" class="item"></span>
                <span *ngIf="!match.items[3]" class="item"></span>
                <span *ngIf="match.items[4]" style="background-image: url('{{ match.items[4].image }}')" class="item"></span>
                <span *ngIf="!match.items[4]" class="item"></span>
                <span *ngIf="match.items[5]" style="background-image: url('{{ match.items[5].image }}')" class="item"></span>
                <span *ngIf="!match.items[5]" class="item"></span>
                <span style="background-image: url('{{ match.trinket.image }}')" class="item"></span>
            </div>

            <div class="info">
                <span class="score">{{ match.score }}</span>
                <span class="cs">{{ match.cs }}</span>
                <span class="gold">{{ match.gold }}</span>
            </div>

        </div>

        <div class="time-match-wrapper">

            <span class="map">{{ match.map }}</span>
            <span class="duration">{{ match.matchDuration }} - {{ match.matchDate }}</span>

        </div>

    </li>

</ul>

<aside class="recently-champions">

    <span class="recently-title">Recently played champions</span>

    <div class="champions">

        <div *ngFor="let champion of recentlyChampions" class="champion">

            <img class="champion-picture" src="{{ champion.champion.picture }}">
            <img class="banner-mastery" src="./../../../../../assets/images/profile/banner-mastery.png">
            <img class="mastery" src="./../../../../../assets/images/profile/mastery-seven.png">
            <span class="percent">{{ champion.percent }}%</span>
            <div class="win-rate-wrapper">
                <span class="win-rate-title">Win rate</span>
                <span [ngClass]="{'positive': champion.winRate > 50, 'negative': 50 > champion.winRate}" class="win-rate">{{ champion.winRate }}%</span>
            </div>

        </div>

    </div>

    <span class="separator"></span>

    <div class="recent-activity-wrapper">

        <span class="activity-title">Recent activity</span>

        <div class="bars">

            <div *ngFor="let activity of recentActivity" class="bar-wrapper">
                <div class="bar">
                    <span id="{{activity.class}}" class="bar-content"></span>
                </div>
                <img src="./../../../../../assets/images/profile/{{ activity.class }}.png">
            </div>

        </div>

    </div>

</aside>

================================================
FILE: src/app/modules/client/profile/match-history/match-history.component.scss
================================================
.match-history {
    
    width: calc(100% - 532px);
    height: calc(100% - 68px);
    overflow: auto;
    position: absolute;
    left: 0;
    padding: 2rem;

    .match {

        width: 100%;
        display: flex;
        align-items: center;
        padding: .5rem 0;
        border-bottom: .5px solid #ffffff35;
        box-sizing: border-box;
        transition-duration: .5s;
        opacity: 0;
        animation: FadeInLeft 1s forwards;

        .champion-image-wrapper {

            position: relative;
            padding-left: 1rem;
            width: 11%;

            img {

                width: 80px;
                border-radius: 50%;
                border: 2px solid #c7984a;
                box-sizing: border-box;

            }

            .champion-level {

                color: white;
                background-color: #161616;
                padding: 6px 6px 6px 4px;
                border: 1px solid #c7984a;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
                left: 62px;

            }

        }

        .info-match-wrapper {

            width: 21%;

            span {

                display: block;

            }

            .match-status {
                font-size: 20px;
                text-transform: uppercase;
                padding-top: 8px;
                font-weight: bold;

            }

            .victory {

                color: #0acbe6;

            }

            .defeat {

                color: #fd0352;

            }

            .match-mode {

                color: #ffffff9c;
                padding: 6px 0;

            }

            .spells {

                padding-bottom: 8px;

                img {

                    width: 30px;

                }

            }

        }

        .overview-match-wrapper {
            
            width: 310px;

            .items {

                .item {

                    background-color: #1d1d1d5b;
                    background-position: center;
                    background-size: cover;
                    width: 42px;
                    height: 42px;
                    border: 1px solid #57460074;
                    display: inline-block;

                }

            }

            .info {

                color: #ffffff9c;
                font-size: 20px;
                display: flex;
                justify-content: space-between;
                padding-top: 6px;

                .cs {

                    position: relative;

                    &::after {

                        content: '';
                        position: absolute;
                        width: 14px;
                        height: 16px;
                        background-image: url('./../../../../../assets/images/profile/creep.png');
                        top: 2px;
                        left: -20px;

                    }

                }

                .gold {

                    position: relative;

                    &::after {

                        content: '';
                        position: absolute;
                        width: 20px;
                        height: 15px;
                        background-image: url('./../../../../../assets/images/profile/money.png');
                        top: 2px;
                        left: -22px;

                    }

                }

            }

        }

        .time-match-wrapper {

            color: #ffffff9c;
            width: calc(60% - 310px);
            padding-left: 2rem;

            .map {

                display: block;
                padding-bottom: 18px;

            }

        }

        &:hover {

            background-color: #ffffff33;
            transform: scale(1.02);

        }

        &:nth-child(2) { animation-delay: .1s; }
        &:nth-child(3) { animation-delay: .2s; }
        &:nth-child(4) { animation-delay: .3s; }
        &:nth-child(5) { animation-delay: .4s; }
        &:nth-child(6) { animation-delay: .5s; }
        &:nth-child(7) { animation-delay: .6s; }
        &:nth-child(8) { animation-delay: .7s; }
        &:nth-child(9) { animation-delay: .8s; }
        &:nth-child(10) { animation-delay: .9s; }
        &:nth-child(11) { animation-delay: 1s; }
        &:nth-child(12) { animation-delay: 1.1s; }
        &:nth-child(13) { animation-delay: 1.2s; }
        &:nth-child(14) { animation-delay: 1.3s; }
        &:nth-child(15) { animation-delay: 1.4s; }
        &:nth-child(16) { animation-delay: 1.5s; }
        &:nth-child(17) { animation-delay: 1.6s; }
        &:nth-child(18) { animation-delay: 1.7s; }
        &:nth-child(19) { animation-delay: 1.8s; }
        &:nth-child(20) { animation-delay: 1.9s; }

    }

}

.recently-champions {

    width: 500px;
    height: calc(100% - 150px);
    position: fixed;
    top: 140px;
    right: 280px;
    text-align: center;
    padding-top: 1rem;
    opacity: 0;
    animation: FadeInRight 1s forwards;

    .recently-title {

        color: #f0e6d2;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        margin-bottom: 2rem;
        display: block;

    }

    .champions {

        display: flex;
        justify-content: center;

        .champion {

            position: relative;
            padding: 0 1rem;

            .champion-picture {

                width: 80px;
                display: block;
                border: 2px solid #c7974a91;
                box-sizing: border-box;

            }

            .banner-mastery {

                width: 78px;

            }

            .mastery {

                width: 60px;
                position: absolute;
                left: 26px;
                top: 84px;

            }

            .percent {

                color: #aa9261;
                font-size: 1.2rem;
                display: block;
                margin-top: 1.3rem;

            }

            .win-rate-wrapper {

                .positive {

                    &::before {

                        background-image: url('./../../../../../assets/images/profile/angle-up.png');

                    }

                }

                .negative {

                    &::before {

                        background-image: url('./../../../../../assets/images/profile/angle-down.png');

                    }

                }

                .win-rate-title {

                    color: #f0e6d2;
                    padding-top: 1.2rem;
                    display: block;

                }

                .win-rate {

                    color: #f0e6d2;
                    font-size: 1.2rem;
                    display: block;
                    margin-top: 12px;
                    position: relative;
                    transform: translateX(-10px);

                    &::before {

                        content: '';
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 45px;
                        height: 27px;
                        position: absolute;
                        right: -20px;
                        bottom: -4px;
                        transform: scale(.4);

                    }

                }

            }

        }

    }

    .separator {

        background-color: rgba(255, 255, 255, 0.200);
        height: 1px;
        display: block;
        margin: 4rem;

    }

    .recent-activity-wrapper {

        .activity-title {

            color: #f0e6d2;
            font-size: 18px;
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 1px;
            margin-bottom: 2rem;
            display: block;

        }

        .bars {

            display: flex;
            justify-content: center;

            .bar-wrapper {

                width: 25px;
                padding: 0 1rem;

                .bar {

                    background-color: #00000080;
                    width: 10px;
                    height: 180px;
                    position: relative;
                    margin: 0 auto;

                    .bar-content {

                        background-color: #0acbe6;
                        box-shadow: 0 0 10px #0acce67a;
                        width: 10px;
                        height: 2%;
                        left: 0;
                        bottom: 0;
                        position: absolute;
                        transition-delay: .5s;
                        transition-duration: .5s;

                    }

                }

                img {

                    width: 25px;
                    margin-top: 1rem;

                }

            }

        }

    }

}

@keyframes FadeInLeft {

    0% {

        position: relative;
        left: -40px;

    }
    100% {

        opacity: 1;
        position: relative;
        left: 0px;

    }

}

@keyframes FadeInRight {

    0% {

        transform: translateX(60px);

    }
    100% {

        opacity: 1;
        transform: translateX(0px);

    }

}

================================================
FILE: src/app/modules/client/profile/match-history/match-history.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { MatchHistoryComponent } from './match-history.component';

describe('MatchHistoryComponent', () => {
  let component: MatchHistoryComponent;
  let fixture: ComponentFixture<MatchHistoryComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MatchHistoryComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MatchHistoryComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/profile/match-history/match-history.component.ts
================================================
import { AfterViewInit, Component, OnInit } from '@angular/core'
import { Champions } from 'src/data/champions'
import { Items } from 'src/data/items'
import { Spells } from 'src/data/spells'

@Component({
  selector: 'app-match-history',
  templateUrl: './match-history.component.html',
  styleUrls: ['./match-history.component.scss']
})
export class MatchHistoryComponent implements OnInit, AfterViewInit {

  matchs: any = [

    { id: 1, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[0], Items[4], Items[5] ,Items[8] ,Items[3] ,Items[9] ,Items[10] ], trinket: Items[10], score: '11/2/4', cs: 318, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 2, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[1], Items[4], Items[5], Items[7] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '28:20', matchDate: '02/18/2021' },
    { id: 3, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '32:00', matchDate: '02/18/2021' },
    { id: 4, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[126], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[11], Items[13], Items[9] ], trinket: Items[10], score: '11/2/4', cs: 152, gold: 17239, map: "Summoner's Rift", matchDuration: '17:22', matchDate: '02/18/2021' },
    { id: 5, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 6, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '27:00', matchDate: '02/18/2021' },
    { id: 7, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 8, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[52], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[11], Items[17], Items[13], Items[9] ], trinket: Items[10], score: '4/2/4', cs: 178, gold: 15784, map: "Summoner's Rift", matchDuration: '19:22', matchDate: '02/18/2021' },
    { id: 9, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 10, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[126], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[19], Items[13], Items[17], Items[9] ], trinket: Items[10], score: '7/1/9', cs: 201, gold: 22036, map: "Summoner's Rift", matchDuration: '26:13', matchDate: '02/18/2021' },
    { id: 11, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[52], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[11], Items[17], Items[13], Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 12, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 13, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 14, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[126], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[11], Items[13], Items[16],  Items[15],  Items[14], Items[9] ], trinket: Items[10], score: '16/6/12', cs: 268, gold: 30055, map: "Summoner's Rift", matchDuration: '32:47', matchDate: '02/18/2021' },
    { id: 15, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 16, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 17, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 18, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[126], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[11], Items[13], Items[18], Items[9] ], trinket: Items[10], score: '3/7/8', cs: 143, gold: 12369, map: "Summoner's Rift", matchDuration: '22:50', matchDate: '02/18/2021' },
    { id: 19, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' },
    { id: 20, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: "Summoner's Rift", matchDuration: '25:00', matchDate: '02/18/2021' }

  ]

  recentlyChampions: any = [

    {champion: Champions[149], percent: 70, winRate: 90},
    {champion: Champions[126], percent: 20, winRate: 52},
    {champion: Champions[52], percent: 10, winRate: 20}

  ]

  recentActivity: any = [

    { id: 1, class: 'fighter', percent: '2' },
    { id: 2, class: 'tank', percent: '2' },
    { id: 3, class: 'mage', percent: '30' },
    { id: 4, class: 'assassin', percent: '70' },
    { id: 5, class: 'support', percent: '2' },
    { id: 6, class: 'marksman', percent: '2' }

  ]

  constructor() { }

  ngOnInit(): void {

  }



  ngAfterViewInit(): void {

    setTimeout( () => {

      for( let activity of this.recentActivity ) {

        document.getElementById(activity.class).style.height = `${activity.percent}%`

      }

    }, 0)

  }

}


================================================
FILE: src/app/modules/client/profile/overview/overview.component.html
================================================
<ul class="profile-info">

    <li class="rank-item">
        <span>Solo/duo</span>
        <span class="subtitle">platinum ii</span>
        <img class="rank" src="https://i.pinimg.com/originals/d7/47/1e/d7471e2ef48175986e9b75b566f61408.png">
    </li>
    <li class="delay1">
        <span>Honor</span>
        <img class="honor" src="./../../../../../assets/images/profile/honor.png">
    </li>
    <li class="delay2">
        <span>Mastery score</span>
        <span class="subtitle">127</span>
        <div class="mastery-wrapper">
            <img class="champion-image" src="https://www.mobafire.com/images/avatars/zed-classic.png">
            <img class="banner" src="./../../../../../assets/images/profile/banner-mastery.png">
            <img class="mastery" src="./../../../../../assets/images/profile/mastery-seven.png">
        </div>
        <div class="mastery-popover">
            <span class="popover-title">Highest champion mastery</span>
            <div class="highest-champion-mastery">
                <div class="mastery-wrapper">
                    <img class="champion-image" src="https://www.mobafire.com/images/avatars/twisted-fate-classic.png">
                    <img class="banner" src="./../../../../../assets/images/profile/banner-mastery.png">
                    <img class="mastery" src="./../../../../../assets/images/profile/mastery-seven.png">
                    <div class="mastery-info">
                        <span class="champion-name">Twisted fate</span>
                        <span class="champion-points">304.230 pts</span>
                        <span class="champion-best-grade">Best grade: S+</span>
                    </div>
                </div>
                <div class="mastery-wrapper">
                    <img class="champion-image" src="https://www.mobafire.com/images/avatars/zed-classic.png">
                    <img class="banner" src="./../../../../../assets/images/profile/banner-mastery.png">
                    <img class="mastery" src="./../../../../../assets/images/profile/mastery-seven.png">
                    <div class="mastery-info">
                        <span class="champion-name">Zed</span>
                        <span class="champion-points">920.030 pts</span>
                        <span class="champion-best-grade">Best grade: S+</span>
                    </div>
                </div>
                <div class="mastery-wrapper">
                    <img class="champion-image" src="https://www.mobafire.com/images/avatars/kassadin-classic.png">
                    <img class="banner" src="./../../../../../assets/images/profile/banner-mastery.png">
                    <img class="mastery"  src="./../../../../../assets/images/profile/mastery-seven.png">
                    <div class="mastery-info">
                        <span class="champion-name">Kassadin</span>
                        <span class="champion-points">250.010 pts</span>
                        <span class="champion-best-grade">Best grade: S+</span>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="delay3">
        <span>Trophy</span>
        <img class="trophy" src="./../../../../../assets/images/profile/trophy.png">
    </li>
    <li class="delay4">
        <span>Banner</span>
        <img class="banner" src="./../../../../../assets/images/profile/banner.png">
    </li>

</ul>

================================================
FILE: src/app/modules/client/profile/overview/overview.component.scss
================================================
.profile-info {

    width: calc( 100% - 380px);
    height: 100%;
    float: right;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    overflow: hidden;

    li {

        color: #beb088;
        font-size: .8rem;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-align: center;
        padding: 0 2rem 4rem 2rem;
        height: 230px;
        position: relative;
        cursor: default !important;

        img {

            padding-top: 4rem;
            display: block;
            position: relative;

        }

        .banner, .honor, .trophy {

            bottom: -28px;

        }

        .rank {

            width: 130px;
            bottom: 6px;


        }

        .subtitle {

            color: #f0e6d2;
            width: 100%;
            font-size: 28px;
            position: absolute;
            top: 20px;
            left: 0;
            margin: 0 auto;

        }

        .mastery-wrapper {

            position: relative;
            bottom: -25px;

            img {

                margin: 0 auto;

            }

            .champion-image {

                width: 80px;
                border: 2px solid #95732e;
                border-radius: 50%;
                padding: 0;
                position: relative;
                bottom: 14px;
                z-index: 1;
                margin-top: 75px;

            }

            .banner {

                width: 70px;
                position: absolute;
                bottom: -4px;
                left: 22px;
                z-index: 0;

            }

            .mastery {

                width: 52px;
                position: absolute;
                z-index: 2;
                bottom: -18px;
                left: 32px;

            }

        }

        .mastery-popover {

            opacity: 0;
            background-color: hsla(210, 90%, 4%, 0.500);
            width: 650px;
            border: 2px solid #463714;
            position: absolute;
            left: -262px;
            bottom: 333px;
            transition-duration: .2s;
            transform: translateY(20px);
            padding: 2rem;
            backdrop-filter: blur(12px);
            z-index: -2;

            .popover-title {

                color: #f0e6d2;
                font-size: 18px;
                
            }

            .highest-champion-mastery {

                margin: 1rem 100px;
                display: flex;
                justify-content: space-between;

                .mastery-wrapper {
    
                    width: 250px;
                    transform: scale(.9);

                    .champion-image {

                        margin-top: 0;

                    }

                    .banner {

                        bottom: 133px;
                        left: 39px;
    
                    }
    
                    .mastery {

                        width: 52px;
                        bottom: 112px;
                        left: 50px;
    
                    }

                    .mastery-info {

                        text-align: center;

                        .champion-name {
    
                            color: #f0e6d2;
                            font-size: 18px;
                            display: block;
                            margin-top: 2rem;
    
                        }

                        .champion-points {
    
                            font-size: 14px;
                            display: block;
                            margin-top: 1rem;
                            font-weight: lighter;
    
                        }

                        .champion-best-grade {
    
                            font-size: 14px;
                            display: block;
                            margin-top: .5rem;
                            font-weight: lighter;
                            text-transform: initial;
                            padding-bottom: 2rem;
    
                        }  

                    }

                    &:nth-child(2) {
    
                        transform: scale(1.05);
    
                    }

                }

            }

            &::after {

                content: '';
                width: 30px;
                height: 19px;
                position: absolute;
                background-image: url('./../../../../../assets/images/profile/popover-detail.png');
                bottom: -19px;
                left: calc(50% - 15px);

            }

        }

        &:hover {

            background: linear-gradient(0deg, rgba(235, 235, 244, 0.1348914566) 0%, rgba(255, 255, 255, 0) 70%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ebebf4",endColorstr="#ffffff",GradientType=1);
            cursor: pointer;
            transition-duration: 0.2s;

            .mastery-popover {

                opacity: 1;
                z-index: 2;
                transform: translateY(0);

                .mastery-wrapper {

                    position: relative;

                }

            }

        }

    }

    .rank-item {

        .subtitle { font-size: 12px }

    }

}

================================================
FILE: src/app/modules/client/profile/overview/overview.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { OverviewComponent } from './overview.component';

describe('OverviewComponent', () => {
  let component: OverviewComponent;
  let fixture: ComponentFixture<OverviewComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ OverviewComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(OverviewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/profile/overview/overview.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { BackgroundService } from '../../background.service';

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.scss']
})
export class OverviewComponent implements OnInit {

  constructor(private backgroundService: BackgroundService) {

    this.backgroundService.changeBackground({ 
      backgroundUrl: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zed_10.jpg',
      backgroundSize: 'cover',
      backgroundPosition: 'center'
    })

  }

  ngOnInit(): void {
  }

}


================================================
FILE: src/app/modules/client/profile/profile/profile.component.html
================================================
<div [ngClass]="{'overlay-background-visible': !overview}" class="overlay-background"></div>

<nav class="component-menu">

    <ul>

        <li><a (click)="changeBannerVisible(true); playSound('submenuClick')" routerLinkActive="item-menu-active" routerLink="overview">Overview</a></li>
        <li><a (click)="changeBannerVisible(false); playSound('submenuClick')" routerLinkActive="item-menu-active" routerLink="match-history">Match History</a></li>

    </ul>

</nav>

<div [ngClass]="{'banner-visible': overview}" class="banner">
    <div id='playerBanner' class="banner">
        <div class="player-informations">
            <span class="player-name">{{ player.name }}</span>
            <img class="rank-image" src="./assets/images/aside-icons/platina.png">
            <span class="rank-tier">II</span>
            <img class="profile-image" src="{{ player.picture }}">
        </div>
        <img src="./assets/images/lobby/banner.png">
    </div>
</div>

<div class="content">

    <router-outlet></router-outlet>

</div>

================================================
FILE: src/app/modules/client/profile/profile/profile.component.scss
================================================
@import './../../../../../assets/scss/menu-component.scss';

.overlay-background-visible {

    opacity: .6 !important;

}

.overlay-background {

    background-color: #000000;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    transition-duration: .5s;

}

.banner-visible {

    top: 478px !important;

}

.banner {

    position: absolute;
    top: -400px;
    transform: scale(1.1);
    left: 40px;
    transition-duration: .5s;

    .player-informations {

        position: absolute;
        width: 100%;
        text-align: center;
        padding-top: 200px;
        text-align: center;

        .player-name {

            color: #f0e6d2;
            font-size: 1.8rem;
            font-weight: bold;
            letter-spacing: 2px;
            display: block;

        }

        .rank-image {

            width: 200px;
            padding-top: 2rem;
            position: relative;
            z-index: 2;

        }

        .rank-tier {

            color: white;
            z-index: 2;
            display: block;
            position: relative;
            top: -68px;


        }

        .profile-image {

            width: 126px;
            display: block;
            z-index: 1;
            border-radius: 50%;
            margin: -201px auto;

        }

    }

}

================================================
FILE: src/app/modules/client/profile/profile/profile.component.spec.ts
================================================
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ProfileComponent } from './profile.component';

describe('ProfileComponent', () => {
  let component: ProfileComponent;
  let fixture: ComponentFixture<ProfileComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ProfileComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ProfileComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/modules/client/profile/profile/profile.component.ts
================================================
import { Component, OnInit } from '@angular/core';
import { Player } from 'src/data/player';
import { SoundService } from '../../sound.service';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {

  player: any = Player
  overview: boolean = true

  constructor(private soundService: SoundService) { }

  ngOnInit(): void {
  }



  changeBannerVisible(condition) {

    this.overview = condition

  }



  playSound(sound) {

    this.soundService.playSound(sound)

  }

}


================================================
FILE: src/app/modules/client/profile/profile-routing.module.ts
================================================
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OverviewComponent } from '../profile/overview/overview.component';
import { MatchHistoryComponent } from './match-history/match-history.component';
import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [

  { path: '', component: ProfileComponent, children: [

    { path: '', redirectTo: 'overview', pathMatch: 'full' },
    { path: 'overview', component: OverviewComponent },
    { path: 'match-history', component: MatchHistoryComponent }

  ]}

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProfileRoutingModule { }


================================================
FILE: src/app/modules/client/profile/profile.module.ts
================================================
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ProfileRoutingModule } from './profile-routing.module';
import { ProfileComponent } from './profile/profile.component';
import { OverviewComponent } from './overview/overview.component';
import { MatchHistoryComponent } from './match-history/match-history.component';


@NgModule({
  declarations: [ProfileComponent, OverviewComponent, MatchHistoryComponent],
  imports: [
    CommonModule,
    ProfileRoutingModule
  ]
})
export class ProfileModule { }


================================================
FILE: src/app/modules/client/sound.service.ts
================================================
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SoundService {

  path: string = '../../../assets/sounds/'

  playButtonHover = new Audio(`${this.path}button-play-hover.mp3`)
  playButtonClick = new Audio(`${this.path}button-play-click.mp3`)
  menuClick = new Audio(`${this.path}menu-click.mp3`)
  submenuClick = new Audio(`${this.path}submenu-click.mp3`)
  confirmButtonHover = new Audio(`${this.path}confirm-button-hover.mp3`)
  confirmButtonClick = new Audio(`${this.path}confirm-button-click.mp3`)
  confirmButtonCancelClick = new Audio(`${this.path}confirm-button-cancel-click.mp3`)
  lobbyIntro = new Audio(`${this.path}lobby-intro.mp3`)
  changeGameModeButtonHover = new Audio(`${this.path}change-game-mode-button-hover.mp3`)
  changeGameModeButtonClick = new Audio(`${this.path}change-game-mode-button-click.mp3`)
  roleSelectButtonClick = new Audio(`${this.path}role-select-button-click.mp3`)
  roleSelectButtonLaneHover = new Audio(`${this.path}role-select-button-lane-hover.mp3`)
  roleSelectButtonLaneClick = new Audio(`${this.path}role-select-button-lane-click.mp3`)
  findMatchButtonHover = new Audio(`${this.path}find-match-button-hover.mp3`)
  findMatchButtonClick = new Audio(`${this.path}find-match-button-click.mp3`)
  matchFound = new Audio(`${this.path}match-found.mp3`)
  matchFoundAcceptButtonClick = new Audio(`${this.path}match-found-accept-button-click.mp3`)
  matchFoundDeclineButtonClick = new Audio(`${this.path}match-found-decline-button-click.mp3`)
  championSelectIntro = new Audio(`${this.path}champion-select-intro.mp3`)
  championSelectChampionsVisible = new Audio(`${this.path}champion-select-champions-visible.mp3`)
  championSelectChampionsFilter = new Audio(`${this.path}champion-select-champions-filter.mp3`)
  championSelectChampionHover = new Audio(`${this.path}champion-select-champion-hover.mp3`)
  championSelectChampionClick = new Audio(`${this.path}champion-select-champion-click.mp3`)
  championSelectBanIntro = new Audio(`${this.path}champion-select-ban-intro.mp3`)
  championSelectBan = new Audio(`${this.path}champion-select-ban.mp3`)
  championSelectBanReviewIntro = new Audio(`${this.path}champion-select-ban-review-intro.mp3`)
  championSelectPickIntro = new Audio(`${this.path}champion-select-pick-intro.mp3`)
  championSelectPick = new Audio(`${this.path}champion-select-pick.mp3`)
  championSelectLoadoutIntro = new Audio(`${this.path}champion-select-loadout-intro.mp3`)
  championSelectTimer = new Audio(`${this.path}champion-select-timer.mp3`)
  championSelectTimerCount = new Audio(`${this.path}champion-select-timer-count.mp3`)
  pickPeriodIntro = new Audio(`${this.path}pick-period-intro.mp3`)
  khazix = new Audio(`${this.path}khazix.mp3`)
  tf = new Audio(`${this.path}tf.mp3`)
  zed = new Audio(`${this.path}zed.mp3`)

  constructor() { }



  playSound(sound) {

    this[sound].play()

  }



  pauseSound(sound) {

    this[sound].pause()
    this[sound].currentTime = 0

  }

}


================================================
FILE: src/assets/.gitkeep
================================================


================================================
FILE: src/assets/scss/animations.scss
================================================
@keyframes SlideUp {

    0% {

        transform: translateY(100%);
        opacity: 0;

    }
    100% {

        transform: translateY(0);
        opacity: 1;

    }

}

@keyframes SlideDown {

    0% {

        transform: translateY(-100%);
        opacity: 0;

    }
    100% {

        transform: translateY(0);
        opacity: 1;

    }

}

.delay1 {

    animation-delay: .2s !important;

}

.delay2 {

    animation-delay: .4s !important;

}

.delay3 {

    animation-delay: .6s !important;

}

.delay4 {

    animation-delay: .8s !important;

}

.delay5 {

    animation-delay: 1s !important;

}

.delay6 {

    animation-delay: 1.2s !important;

}

.delay7 {

    animation-delay: 1.4s !important;

}

================================================
FILE: src/assets/scss/buttons.scss
================================================
.button-client {

    color: #938f83;
    background-color: #1e2328;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 2rem;
    padding: 0.8rem 2rem;
    display: inline-block;
    border: 2px solid #c8aa6d;
    transition-duration: 0.2s;
    font-weight: bold;
    cursor: pointer;

    &:hover {

        color: #f0e6d2;

    }

}

================================================
FILE: src/assets/scss/menu-component.scss
================================================
.component-menu {

    margin-top: 7rem;
    margin-bottom: 6px;
    padding: 0 2rem;
    position: relative;
    z-index: 2;

    ul {

        li {

            display: inline-block;

            a { 

                color: #beb088;
                font-size: 14px;
                text-transform: uppercase;
                font-weight: bold;
                letter-spacing: 1px;
                padding: 1rem 1.5rem;
                display: block;
                transition-duration: .2s;
                cursor: pointer;
                text-decoration: none;

                &:hover {

                    color: #f0e6d2;
                    transition-duration: .2s;

                }

            }

            .item-menu-active {

                color: #f0e6d2 !important;

            }

            .item-menu-disabled {
            
                cursor: not-allowed !important;
                filter: grayscale(100%);

                &:hover {

                    color: #beb088;

                }
            
            }

        }

    }

}

.content {

    height: calc(100% - 164px);
    width: 100%;
    overflow-y: auto;
    position: relative;
    z-index: 2;

}

================================================
FILE: src/data/champions.ts
================================================
export let Champions: any  = [

        {name: 'Ahri', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/ahri-classic.png', selectable: true, coverPicture: 'https://cdn1.dotesports.com/wp-content/uploads/sites/3/2020/07/25201017/Ahri_0.jpg'},
        {name: 'Aatrox', role: 'top', picture: 'https://www.mobafire.com/images/avatars/aatrox-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_0.jpg'},
        {name: 'Akali', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/akali-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Akali_0.jpg'},
        {name: 'Alistar', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/alistar-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg'},
        {name: 'Amumu', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/amumu-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Amumu_0.jpg'},
        {name: 'Anivia', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/anivia-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Anivia_0.jpg'},
        {name: 'Annie', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/annie-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Annie_0.jpg'},
        {name: 'Aphelios', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/aphelios-classic.png', selectable: true, coverPicture: 'https://universe-meeps.leagueoflegends.com/v1/assets/images/aphelios-splash.jpg'},
        {name: 'Ashe', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/ashe-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ashe_0.jpg'},
        {name: 'Aurelion Sol', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/aurelion-sol-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/AurelionSol_0.jpg'},
        {name: 'Azir', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/azir-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Azir_0.jpg'},
        {name: 'Bard', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/bard-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Bard_0.jpg'},
        {name: 'Blitzcrank', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/blitzcrank-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Blitzcrank_0.jpg'},
        {name: 'Brand', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/brand-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Brand_2.jpg'},
        {name: 'Braum', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/braum-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Braum_0.jpg'},
        {name: 'Caitlyn', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/caitlyn-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Caitlyn_0.jpg'},
        {name: 'Camille', role: 'top', picture: 'https://www.mobafire.com/images/avatars/camille-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Camille_0.jpg'},
        {name: 'Cassiopeia', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/cassiopeia-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Cassiopeia_0.jpg'},
        {name: "Cho'Gatch", role: 'top', picture: 'https://www.mobafire.com/images/avatars/chogath-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Chogath_0.jpg'},
        {name: 'Corki', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/corki-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Corki_0.jpg'},
        {name: 'Darius', role: 'top', picture: 'https://www.mobafire.com/images/avatars/darius-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Darius_0.jpg'},
        {name: 'Diana', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/diana-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Diana_0.jpg'},
        {name: 'Dr.Mundo', role: 'top', picture: 'https://www.mobafire.com/images/avatars/dr-mundo-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/DrMundo_0.jpg'},
        {name: 'Draven', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/draven-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Draven_0.jpg'},
        {name: 'Ekko', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/ekko-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ekko_0.jpg'},
        {name: 'Elise', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/elise-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Elise_0.jpg'},
        {name: 'Evelynn', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/evelynn-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Evelynn_0.jpg'},
        {name: 'Ezreal', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/ezreal-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ezreal_0.jpg'},
        {name: 'Fiddlesticks', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/fiddlesticks-classic.png', selectable: true, coverPicture: 'https://i.ytimg.com/vi/sNKbKrNQRr0/maxresdefault.jpg'},
        {name: 'Fiora', role: 'top', picture: 'https://www.mobafire.com/images/avatars/fiora-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Fiora_0.jpg'},
        {name: 'Fizz', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/fizz-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Fizz_0.jpg'},
        {name: 'Galio', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/galio-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Galio_0.jpg'},
        {name: 'Gangplank', role: 'top', picture: 'https://www.mobafire.com/images/avatars/gangplank-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Gangplank_0.jpg'},
        {name: 'Garen', role: 'top', picture: 'https://www.mobafire.com/images/avatars/garen-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Garen_0.jpg'},
        {name: 'Gnar', role: 'top', picture: 'https://www.mobafire.com/images/avatars/gnar-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Gnar_0.jpg'},
        {name: 'Gragas', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/gragas-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Gragas_0.jpg'},
        {name: 'Graves', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/graves-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Graves_0.jpg'},
        {name: 'Hecarim', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/hecarim-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Hecarim_0.jpg'},
        {name: 'Heimerdinger', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/heimerdinger-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Heimerdinger_0.jpg'},
        {name: 'Illaoi', role: 'top', picture: 'https://www.mobafire.com/images/avatars/illaoi-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Illaoi_0.jpg'},
        {name: 'Irelia', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/irelia-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Irelia_0.jpg'},
        {name: 'Ivern', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/ivern-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ivern_0.jpg'},
        {name: 'Janna', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/janna-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Janna_0.jpg'},
        {name: 'Jarvan IV', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/jarvan-iv-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/JarvanIV_0.jpg'},
        {name: 'Jax', role: 'top', picture: 'https://www.mobafire.com/images/avatars/jax-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Jax_0.jpg'},
        {name: 'Jayce', role: 'top', picture: 'https://www.mobafire.com/images/avatars/jayce-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Jayce_0.jpg'},
        {name: 'Jhin', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/jhin-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Jhin_0.jpg'},
        {name: 'Jinx', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/jinx-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Jinx_0.jpg'},
        {name: "Kai'Sa", role: 'adc', picture: 'https://www.mobafire.com/images/avatars/kaisa-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kaisa_0.jpg'},
        {name: 'Kalista', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/kalista-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kalista_0.jpg'},
        {name: 'Karma', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/karma-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Karma_0.jpg'},
        {name: 'Karthus', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/karthus-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Karthus_0.jpg'},
        {name: 'Kassadin', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/kassadin-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kassadin_0.jpg'},
        {name: 'Katarina', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/katarina-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Katarina_0.jpg'},
        {name: 'Kayle', role: 'top', picture: 'https://www.mobafire.com/images/avatars/kayle-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kayle_3.jpg'},
        {name: 'Kayn', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/kayn-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kayn_0.jpg'},
        {name: 'Kennen', role: 'top', picture: 'https://www.mobafire.com/images/avatars/kennen-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kennen_0.jpg'},
        {name: "Kha'Zix", role: 'jg', picture: 'https://www.mobafire.com/images/avatars/khazix-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Khazix_0.jpg'},
        {name: 'Kindred', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/kindred-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kindred_0.jpg'},
        {name: 'Kled', role: 'top', picture: 'https://www.mobafire.com/images/avatars/kled-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kled_0.jpg'},
        {name: "Kog'Maw", role: 'adc', picture: 'https://www.mobafire.com/images/avatars/kogmaw-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/KogMaw_0.jpg'},
        {name: 'LeBlanc', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/leblanc-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Leblanc_0.jpg'},
        {name: 'Lee Sin', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/lee-sin-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/LeeSin_0.jpg'},
        {name: 'Leona', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/leona-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Leona_0.jpg'},
        {name: 'Lillia', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/lillia-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Lillia_0.jpg'},
        {name: 'Lissandra', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/lissandra-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Lissandra_0.jpg'},
        {name: 'Lucian', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/lucian-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Lucian_0.jpg'},
        {name: 'Lulu', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/lulu-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Lulu_0.jpg'},
        {name: 'Lux', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/lux-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Lux_0.jpg'},
        {name: 'Malphite', role: 'top', picture: 'https://www.mobafire.com/images/avatars/malphite-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Malphite_0.jpg'},
        {name: 'Malzahar', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/malzahar-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Malzahar_0.jpg'},
        {name: 'Maokai', role: 'top', picture: 'https://www.mobafire.com/images/avatars/maokai-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Maokai_0.jpg'},
        {name: 'Master Yi', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/master-yi-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/MasterYi_0.jpg'},
        {name: 'Miss Fortune', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/miss-fortune-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/MissFortune_0.jpg'},
        {name: 'Mordekaiser', role: 'top', picture: 'https://www.mobafire.com/images/avatars/mordekaiser-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Mordekaiser_0.jpg'},
        {name: 'Morgana', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/morgana-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Morgana_3.jpg'},
        {name: 'Nami', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/nami-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nami_0.jpg'},
        {name: 'Nasus', role: 'top', picture: 'https://www.mobafire.com/images/avatars/nasus-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nasus_0.jpg'},
        {name: 'Nautilus', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/nautilus-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nautilus_0.jpg'},
        {name: 'Neeko', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/neeko-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Neeko_0.jpg'},
        {name: 'Nidalee', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/nidalee-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nidalee_0.jpg'},
        {name: 'Nocturne', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/nocturne-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nocturne_0.jpg'},
        {name: 'Nunu & Willump', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/nunu-amp-willump-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nunu_0.jpg'},
        {name: 'Olaf', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/olaf-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Olaf_0.jpg'},
        {name: 'Orianna', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/orianna-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Orianna_0.jpg'},
        {name: 'Ornn', role: 'top', picture: 'https://www.mobafire.com/images/avatars/ornn-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ornn_0.jpg'},
        {name: 'Pantheon', role: 'top', picture: 'https://www.mobafire.com/images/avatars/pantheon-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Pantheon_0.jpg'},
        {name: 'Poppy', role: 'top', picture: 'https://www.mobafire.com/images/avatars/poppy-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Poppy_0.jpg'},
        {name: 'Pyke', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/pyke-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Pyke_0.jpg'},
        {name: 'Qiyana', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/qiyana-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Qiyana_0.jpg'},
        {name: 'Quinn', role: 'top', picture: 'https://www.mobafire.com/images/avatars/quinn-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Quinn_0.jpg'},
        {name: 'Rakan', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/rakan-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Rakan_0.jpg'},
        {name: 'Rammus', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/rammus-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Rammus_0.jpg'},
        {name: "Rek'Sai", role: 'jg', picture: 'https://www.mobafire.com/images/avatars/reksai-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/RekSai_0.jpg'},
        {name: 'Rell', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/rell-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Rell_0.jpg'},
        {name: 'Renekton', role: 'top', picture: 'https://www.mobafire.com/images/avatars/renekton-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Renekton_0.jpg'},
        {name: 'Rengar', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/rengar-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Rengar_0.jpg'},
        {name: 'Riven', role: 'top', picture: 'https://www.mobafire.com/images/avatars/riven-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Riven_0.jpg'},
        {name: 'Rumble', role: 'top', picture: 'https://www.mobafire.com/images/avatars/rumble-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Rumble_0.jpg'},
        {name: 'Ryze', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/ryze-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ryze_0.jpg'},
        {name: 'Samira', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/samira-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Samira_0.jpg'},
        {name: 'Sejuani', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/sejuani-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sejuani_0.jpg'},
        {name: 'Senna', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/senna-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Senna_0.jpg'},
        {name: 'Seraphine', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/seraphine-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Seraphine_0.jpg'},
        {name: 'Sett', role: 'top', picture: 'https://www.mobafire.com/images/avatars/sett-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sett_0.jpg'},
        {name: 'Shaco', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/shaco-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Shaco_0.jpg'},
        {name: 'Shen', role: 'top', picture: 'https://www.mobafire.com/images/avatars/shen-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Shen_0.jpg'},
        {name: 'Shyvana', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/shyvana-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Shyvana_0.jpg'},
        {name: 'Singed', role: 'top', picture: 'https://www.mobafire.com/images/avatars/singed-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Singed_0.jpg'},
        {name: 'Sion', role: 'top', picture: 'https://www.mobafire.com/images/avatars/sion-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sion_0.jpg'},
        {name: 'Sivir', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/sivir-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sivir_0.jpg'},
        {name: 'Skarner', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/skarner-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Skarner_0.jpg'},
        {name: 'Sona', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/sona-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sona_0.jpg'},
        {name: 'Soraka', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/soraka-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Soraka_0.jpg'},
        {name: 'Swain', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/swain-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Swain_0.jpg'},
        {name: 'Sylas', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/sylas-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sylas_0.jpg'},
        {name: 'Syndra', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/syndra-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Syndra_0.jpg'},
        {name: 'Tahm Kench', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/tahm-kench-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/TahmKench_0.jpg'},
        {name: 'Taliyah', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/taliyah-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Taliyah_0.jpg'},
        {name: 'Talon', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/talon-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Talon_0.jpg'},
        {name: 'Taric', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/taric-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Taric_0.jpg'},
        {name: 'Teemo', role: 'top', picture: 'https://www.mobafire.com/images/avatars/teemo-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Teemo_0.jpg'},
        {name: 'Thresh', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/thresh-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Thresh_0.jpg'},
        {name: 'Tristana', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/tristana-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Tristana_0.jpg'},
        {name: 'Trundle', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/trundle-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Trundle_0.jpg'},
        {name: 'Tryndamere', role: 'top', picture: 'https://www.mobafire.com/images/avatars/tryndamere-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Tryndamere_0.jpg'},
        {name: 'Twisted Fate', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/twisted-fate-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/TwistedFate_0.jpg'},
        {name: 'Twitch', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/twitch-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Twitch_0.jpg'},
        {name: 'Udyr', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/udyr-classic.png', selectable: true, coverPicture: 'https://pbs.twimg.com/media/ERFKIbnW4AIXZLf.jpg'},
        {name: 'Urgot', role: 'top', picture: 'https://www.mobafire.com/images/avatars/urgot-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Urgot_0.jpg'},
        {name: 'Varus', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/varus-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Varus_0.jpg'},
        {name: 'Vayne', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/vayne-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Vayne_0.jpg'},
        {name: 'Veigar', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/veigar-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Veigar_0.jpg'},
        {name: "Vel'Koz", role: 'sup', picture: 'https://www.mobafire.com/images/avatars/velkoz-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Velkoz_0.jpg'},
        {name: 'Vi', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/vi-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Vi_0.jpg'},
        {name: 'Viego', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/viego-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Viego_0.jpg'},
        {name: 'Viktor', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/viktor-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Viktor_0.jpg'},
        {name: 'Vladimir', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/vladimir-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Vladimir_0.jpg'},
        {name: 'Volibear', role: 'top', picture: 'https://www.mobafire.com/images/avatars/volibear-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Volibear_0.jpg'},
        {name: 'Warwick', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/warwick-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Warwick_0.jpg'},
        {name: 'Wukong', role: 'top', picture: 'https://www.mobafire.com/images/avatars/wukong-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/MonkeyKing_0.jpg'},
        {name: 'Xayah', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/xayah-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Xayah_0.jpg'},
        {name: 'Xerath', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/xerath-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Xerath_0.jpg'},
        {name: 'Xin Zhao', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/xin-zhao-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/XinZhao_0.jpg'},
        {name: 'Yasuo', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/yasuo-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Yasuo_0.jpg'},
        {name: 'Yone', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/yone-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Yone_0.jpg'},
        {name: 'Yorick', role: 'top', picture: 'https://www.mobafire.com/images/avatars/yorick-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Yorick_0.jpg'},
        {name: 'Yuumi', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/yuumi-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Yuumi_0.jpg'},
        {name: 'Zac', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/zac-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zac_0.jpg'},
        {name: 'Zed', role:'mid', picture: 'https://www.mobafire.com/images/avatars/zed-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zed_0.jpg'},
        {name: 'Ziggs', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/ziggs-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ziggs_0.jpg'},
        {name: 'Zilean', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/zilean-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zilean_0.jpg'},
        {name: 'Zoe', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/zoe-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zoe_0.jpg'},
        {name: 'Zyra', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/zyra-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zyra_0.jpg'}

]

================================================
FILE: src/data/friends.ts
================================================
export let Friends = [

    { id: 1, name: 'Weslley', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon4770.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://www.mobafire.com/images/champion/skins/landscape/irelia-high-noon.jpg', rank: 'Platinum', rankTier: 'II', messages: [{ text: 'Hello friend :)', type: 'friend' }] },
    { id: 2, name: 'Kevin', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon3018.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zoe_0.jpg', rank: 'Platinum', rankTier: 'I', messages: [] },
    { id: 3, name: 'Mark', status: 2, statusMessage: 'Ranked Solo/Duo', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon4653.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://www.mobafire.com/images/champion/skins/landscape/vayne-spirit-blossom.jpg', rank: 'Platinum', rankTier: 'IV', messages: [] },
    { id: 4, name: 'Paul', status: 2, statusMessage: 'Ranked Flex', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon4025.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://blogoflegends.com/files/2019/02/sinful-succulence-morgana.jpg', rank: 'Platinum', rankTier: 'III', messages: [] },
    { id: 5, name: 'Jorge', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1636.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Darius_15.jpg', rank: 'Platinum', rankTier: 'I', messages: [] },
    { id: 6, name: 'Link', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1626.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://preview.redd.it/0fhoka1lrlf51.png?width=822&format=png&auto=webp&s=ed3ba56b804eee1300f85c1173c60b4bd9ea5eb9', rank: 'Platinum', rankTier: 'II', messages: [] },
    { id: 7, name: 'Elly', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1625.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Jinx_13.jpg', rank: 'Platinum', rankTier: 'II', messages: [] },
    { id: 8, name: 'Zelda', status: 2, statusMessage: 'Na Fila', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1627.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://support-leagueoflegends.riotgames.com/hc/article_attachments/360089636874/PsyOps_Samira_FINAL.jpg', rank: 'Platinum', rankTier: 'II', messages: [] },
    { id: 9, name: 'Epona', status: 3, statusMessage: 'AFK', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1628.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://www.mobafire.com/images/champion/skins/landscape/tryndamere-chemtech.jpg', rank: 'Platinum', rankTier: 'III', messages: [] },
    { id: 10, name: 'Luke', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1629.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ryze_4.jpg', rank: 'Platinum', rankTier: 'IV', messages: [] },
    { id: 11, name: 'Darth', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1630.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://www.mobafire.com/images/champion/skins/landscape/vladimir-cosmic-devourer.jpg', rank: 'Platinum', rankTier: 'I', messages: [] },
    { id: 12, name: 'Leia', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1631.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://uailistar.com/wp-content/uploads/2020/05/Lux_7-696x411.jpg', rank: 'Platinum', rankTier: 'I', messages: [] },
    { id: 13, name: 'Jhon smurf', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1632.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://images.contentstack.io/v3/assets/blt731acb42bb3d1659/blt1168636c3a93b9e9/5f52d5af95701623b75e6d1d/01_Banner_State_Of_Skins_Kindred_Splash.jpg', rank: 'Platinum', rankTier: 'IV', messages: [] },
    { id: 14, name: 'Yoda', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1634.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Katarina_8.jpg', rank: 'Platinum', rankTier: 'IV', messages: [] },
    { id: 15, name: 'Kami', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1635.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://images2.minutemediacdn.com/image/upload/c_fill,w_720,ar_16:9,f_auto,q_auto,g_auto/shape/cover/sport/Katarina_DeathSwornSkin-f0d9492b7a83186ecc95b4ce3547d833.jpg', rank: 'Platinum', rankTier: 'I', messages: [] }

]

================================================
FILE: src/data/items.ts
================================================
export let Items: any = [

    { id:1, name: 'Duskblade of Draktharr', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6691.png' },
    { id:2, name: 'Eclipse', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6692.png' },
    { id:3, name: "Prowler's Claw", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6693.png' },
    { id:4, name: "Serylda's Grudge", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6694.png' },
    { id:5, name: "Youmuu's Ghostblade", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3142.png' },
    { id:6, name: 'Chempunk Chainsword', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6609.png' },
    { id:7, name: "Executioner's Calling", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3123.png' },
    { id:8, name: 'Serrated Dirk', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3134.png' },
    { id:9, name: 'Edge of Night', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3814.png' },
    { id:10, name: 'Ionian Boots of Lucidity', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3158.png' },
    { id:11, name: 'Stealth Ward', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3340.png' },
    { id:12, name: "Luden's Tempest", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6655.png' },
    { id:13, name: 'Morellonomicon', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3165.png' },
    { id:14, name: 'Lich Bane', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3100.png' },
    { id:15, name: "Rabadon's Deathcap", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3089.png' },
    { id:16, name: 'Void Staff', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3135.png' },
    { id:17, name: 'Rapid Firecannon', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3094.png' },
    { id:18, name: "Archangel's Staff", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3048.png' },
    { id:19, name: "Zhonya's Hourglass", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3157.png' },
    { id:20, name:'Hextech Rocketbelt', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3152.png' }

]

================================================
FILE: src/data/player.ts
================================================
export let Player: any = {

    name: localStorage.getItem('username'),
    picture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon4791.jpg?image=q_auto:best&v=1518361200'

}

================================================
FILE: src/data/spells.ts
================================================
export let Spells: any = [

    { id: 1, name: 'Ignite', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/spell/SummonerDot.png' },
    { id: 2, name: 'Flash', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/spell/SummonerFlash.png' },
    { id: 3, name: 'Teleport', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/spell/SummonerTeleport.png' }

]

================================================
FILE: src/environments/environment.prod.ts
================================================
export const environment = {
  production: true
};


================================================
FILE: src/environments/environment.ts
================================================
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false
};

/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.


================================================
FILE: src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="author" content="Ivin Rodrigues">
  <meta name="description" content="League of Legends client clone developed in Angular">
  <title>Angular Of Legends</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./assets/images/icon.png">
  <meta property="og:title" content="Angular Of Legends">
  <meta property="og:description" content="League of Legends client clone developed in Angular">
  <meta property="og:image" content="./assets/images/preview.png">
  <meta property="og:url" content="https://angularoflegends.ivinrodrigues.com">
</head>
<body>
  <app-root></app-root>
</body>
</html>


================================================
FILE: src/main.ts
================================================
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

================================================
FILE: src/polyfills.ts
================================================
/***************************************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
 */
import '@angular/localize/init';
/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
 *
 *  (window as any).__Zone_enable_cross_context_check = true;
 *
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.


/***************************************************************************************************
 * APPLICATION IMPORTS
 */


================================================
FILE: src/styles.scss
================================================
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@font-face {

    font-family: FrizQuadrata;
    src: url(assets/fonts/FrizQuadrata.ttf);

}

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar {
	width: 4px;
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #785a28;
	border-radius: 300px;
}

*:focus {

	outline: 0 !important;

}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'FrizQuadrata';
	text-rendering: optimizeLegibility;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    line-height: 1;
    background-color: #030619;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@media only screen and (max-width: 1450px) {

	app-root app-main-client-layout .main-aside .friend-list .scrollable-area-lobby {

		height: calc(100vh - 277px) !important;

	}

	app-main-client-layout {

		.main-layout-horizontal-line {

			top: 75px !important;

		}

		.main-header {

			width: calc(100vw - 240px) !important;
			height: 75px !important;

			nav {

				height: 75px;

				ul {

					height: 75px;
					display: flex !important;
					justify-content: flex-start;

					.button-play-wrapper {

						transform: scale(.8) translateY(-7px);
						margin-right: -26px;

					}

					li {

						font-size: 14px !important;
						height: 100%;

						a {

							padding: 30px .5rem !important;

						}

					}

				}

				.right-list {

					height: 75px;
					top: 0 !important;

					li {

						a {

							padding: 0 1rem !important;
							display: block;

							img {

								width: 24px;
								padding: 24px .5rem !important;

							}

						}

						.divider { margin-top: 6px !important }

					}

					.money { 
						
						top: 9px !important;

						img { width: 14px; }

						span { font-size: 12px !important; }

						.riot-points { margin-top: 6px; }

					}

				}

			}

		}

		.main-aside {

			width: 240px !important;

			.user-information {

				height: 75px;

				.user-wrapper { 
					
					width: 145px !important;
					height: 100% !important;

					.user-nickname {

						padding-top: 16px !important;

					}
					
				}

				.profile-image { width: 67px !important }

				img {
					
					width: 66px;
					margin: 2px !important;

				}

				.user-level {

					left: 22px !important;
					top: 55.6px !important;

				}

			}

			.play-informations {

				width: 240px !important;

				.lobby, .queue { width: 208px !important; }

			}

			.menu-aside {

				font-size: 14px;
				
				img { width: 16px }

			}

			.group-area {

				li {

					img { width: 30px; }
					.group-name { font-size: 14px !important }

				}

			}

			.scrollable-area {

				height: calc(100vh - 162px) !important;

			}

			footer {

				height: 43px !important;

				.client-version { width: 63px !important }

				img { width: 16px !important }

			}

		}

		.match-found {

			.external-circle { transform: scale(.7) !important }

		}

	}

	.component-menu {

		margin-top: 5rem !important;

	}

	.main-content {

		width: calc(100% - 304px) !important;

		
		.content {
			
			height: calc(100% - 132px);

		}

	}

	// app-main-client-layout main app-profile .content { height: 100% !important; }

	app-profile {

		.banner.banner-visible {
			
			transform: scale(.8) !important;
			top: 357px !important;

		}

		.content {

			.profile-info {

				transform: scale(0.8) translate(60px, 80px);
				position: fixed;
				bottom: 0;
				right: 214px;

				.delay2 {

					.subtitle {

						top: 30px !important;

					}

				}

				.mastery-wrapper {

					position: relative;

					.banner { left: calc(50% - 35px) !important }

					.mastery { 
						
						bottom: -24px !important;
    					left: calc(50% - 26px) !important;

					}

				}

				.mastery-popover {
		
					transform: scale(.8) !important;
					left: -288px !important;
					bottom: 298px !important;

					.banner {

    					left: 39px !important;

					}

					.mastery { 

						bottom: 112px !important;
						left: 50px !important;

					}
		
				}

			}

		}

	}

	app-play-menu {

		app-pvp {

			ul {

				li {

					img { width: 100px !important }

					.game-type { margin-top: .8rem !important }

					.game-title {
						
						font-size: 20px !important;
						padding-bottom: 1.5rem !important;

					}

					.game-title-lg {

						padding-bottom: 2.75rem !important;

					}

					.game-description {

						font-size: 16px !important;

					}

					.game-options { transform: scale(0.8) translate(-26px, -32px) }

				}

			}

		}

	}

	app-lobby {

		header {

			margin-top: 5rem !important;

		}

		.banners {

			.banner {
				
				width: 253px !important;

				img { width: 100%; }

				.player-informations {

					transform: scale(.8);
					padding-top: 131px !important;	

					.role-select-button {

						img { width: auto !important; }

					}

				}
			
			}

		}

		.role-select {

			background: none !important;
			transform: scale(.8);
			height: 250px !important;
			top: 305px !important;
			
			.role-select-button{

				margin-top: 100px !important;

			}

			.mid, .top, .sup, .adc, .jg, .fill { height: auto !important; }

			.mid { top: 10px !important; }

			.jg, .adc { top: 80px !important; }

			.top, .sup { top: 140px !important; }

			.fill { top: 190px !important; }

		}

	}

	app-loading {

		overflow: hidden;

		.teams {

			transform: scale(.7);

			ul {
				
				flex-wrap: nowrap !important;
			
			}

		}

	}

	app-match-history {

		.match-history {

			width: calc(100% - 422px) !important;

			.match {

				.champion-image-wrapper {

					img { width: 60px !important; }

				}

				.champion-level {
					
					font-size: 14px !important;
					left: 50px !important;
				
				}
				
				.info-match-wrapper {

					padding-left: 12px;

					.match-status {

						font-size: 16px !important;

					}

					.match-mode { font-size: 14px !important; }

				}

				.spells {

					img { width: 25px !important; }

				}

				.overview-match-wrapper {

					width: 266px !important;
					padding-left: 12px;

					.item {

						width: 36px !important;
						height: 35px !important;

					}

					span { font-size: 14px !important; }

				}

				.time-match-wrapper {

					display: none;

				}

			}

		}

		.recently-champions {

			overflow: auto;
			width: 350px !important;
			height: calc(100% - 156px) !important;

			.recent-activity-wrapper {

				padding-bottom: 24px;

			}

		}

	}
	
	.chat-open {

		transform: scale(.8);
		bottom: -51px !important;
		right: 180px !important;

	}

}

================================================
FILE: src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: {
  context(path: string, deep?: boolean, filter?: RegExp): {
    keys(): string[];
    <T>(id: string): T;
  };
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);


================================================
FILE: tsconfig.app.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}


================================================
FILE: tsconfig.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}


================================================
FILE: tsconfig.spec.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine"
    ]
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}


================================================
FILE: tslint.json
================================================
{
  "extends": "tslint:recommended",
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    "align": {
      "options": [
        "parameters",
        "statements"
      ]
    },
    "array-type": false,
    "arrow-return-shorthand": true,
    "curly": true,
    "deprecation": {
      "severity": "warning"
    },
    "eofline": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": {
      "options": [
        "spaces"
      ]
    },
    "max-classes-per-file": false,
    "max-line-length": [
      true,
      140
    ],
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-empty": false,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-non-null-assertion": true,
    "no-redundant-jsdoc": true,
    "no-switch-case-fall-through": true,
    "no-var-requires": false,
    "object-literal-key-quotes": [
      true,
      "as-needed"
    ],
    "quotemark": [
      true,
      "single"
    ],
    "semicolon": {
      "options": [
        "always"
      ]
    },
    "space-before-function-paren": {
      "options": {
        "anonymous": "never",
        "asyncArrow": "always",
        "constructor": "never",
        "method": "never",
        "named": "never"
      }
    },
    "typedef": [
      true,
      "call-signature"
    ],
    "typedef-whitespace": {
      "options": [
        {
          "call-signature": "nospace",
          "index-signature": "nospace",
          "parameter": "nospace",
          "property-declaration": "nospace",
          "variable-declaration": "nospace"
        },
        {
          "call-signature": "onespace",
          "index-signature": "onespace",
          "parameter": "onespace",
          "property-declaration": "onespace",
          "variable-declaration": "onespace"
        }
      ]
    },
    "variable-name": {
      "options": [
        "ban-keywords",
        "check-format",
        "allow-pascal-case"
      ]
    },
    "whitespace": {
      "options": [
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type",
        "check-typecast"
      ]
    },
    "component-class-suffix": true,
    "contextual-lifecycle": true,
    "directive-class-suffix": true,
    "no-conflicting-lifecycle": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-inputs-metadata-property": true,
    "no-output-native": true,
    "no-output-on-prefix": true,
    "no-output-rename": true,
    "no-outputs-metadata-property": true,
    "template-banana-in-box": true,
    "template-no-negated-async": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ]
  }
}