Showing preview only (349K chars total). Download the full file or copy to clipboard to get everything.
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
================================================
# 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
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
SYMBOL INDEX (121 symbols across 34 files)
FILE: e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: src/app/app-routing.module.ts
class AppRoutingModule (line 15) | class AppRoutingModule { }
FILE: src/app/app.component.ts
class AppComponent (line 8) | class AppComponent {
FILE: src/app/app.module.ts
class AppModule (line 18) | class AppModule { }
FILE: src/app/layout/main-client-layout/main-client-layout.component.ts
class MainClientLayoutComponent (line 14) | class MainClientLayoutComponent implements OnInit, AfterViewInit {
method constructor (line 31) | constructor(private backgroundService: BackgroundService,
method ngOnInit (line 106) | ngOnInit(): void {
method playSound (line 111) | playSound(sound) {
method pauseSound (line 119) | pauseSound(sound) {
method ngAfterViewInit (line 127) | ngAfterViewInit(): void {
method changeOnlineStatus (line 133) | changeOnlineStatus() {
method changeGeralVisibility (line 141) | changeGeralVisibility() {
method ajustPopoversPosition (line 149) | ajustPopoversPosition() {
method showPopover (line 168) | showPopover(id) {
method hidePopover (line 176) | hidePopover(id) {
method changeChatVisibility (line 184) | changeChatVisibility(friend?) {
method queueTime (line 193) | queueTime() {
method cancelQueue (line 238) | cancelQueue() {
method acceptMatch (line 246) | acceptMatch() {
method cancelMatch (line 260) | cancelMatch() {
method changeBugModalVisibility (line 279) | changeBugModalVisibility() {
FILE: src/app/modules/auth/auth-routing.module.ts
class AuthRoutingModule (line 15) | class AuthRoutingModule { }
FILE: src/app/modules/auth/auth.module.ts
class AuthModule (line 18) | class AuthModule { }
FILE: src/app/modules/auth/login/login.component.ts
class LoginComponent (line 11) | class LoginComponent implements OnInit {
method constructor (line 17) | constructor( private route: Router,
method ngOnInit (line 30) | ngOnInit(): void {
method makeLogin (line 38) | makeLogin() {
method usernameIdentify (line 51) | usernameIdentify() {
method closeModal (line 67) | closeModal() {
FILE: src/app/modules/client/background.service.ts
class BackgroundService (line 7) | class BackgroundService {
method changeBackground (line 11) | changeBackground(url) {
method getBackgroundObservable (line 19) | getBackgroundObservable(): Observable<any> {
FILE: src/app/modules/client/chat/chat.component.ts
class ChatComponent (line 10) | class ChatComponent implements OnInit {
method constructor (line 17) | constructor() {
method ngOnInit (line 27) | ngOnInit(): void {
method selectChat (line 35) | selectChat(friend) {
method sendMessage (line 43) | sendMessage() {
FILE: src/app/modules/client/client-routing.module.ts
class ClientRoutingModule (line 23) | class ClientRoutingModule { }
FILE: src/app/modules/client/client.module.ts
class ClientModule (line 22) | class ClientModule { }
FILE: src/app/modules/client/game/champion-select/champion-select.component.ts
class ChampionSelectComponent (line 12) | class ChampionSelectComponent implements OnInit {
method constructor (line 45) | constructor(private router: Router,
method ngOnInit (line 50) | ngOnInit(): void {
method initDeclarePeriod (line 132) | initDeclarePeriod() {
method initBanPeriod (line 160) | initBanPeriod() {
method initBanReviewPeriod (line 180) | initBanReviewPeriod() {
method initPickPeriod (line 259) | initPickPeriod() {
method initLoadOutPeriod (line 287) | initLoadOutPeriod() {
method initTimer (line 312) | initTimer() {
method pickEnemyChampions (line 345) | pickEnemyChampions() {
method selectChampion (line 369) | selectChampion(champion, index) {
method banChampion (line 391) | banChampion() {
method pickChampion (line 412) | pickChampion() {
method changeFilter (line 440) | changeFilter(filter) {
method adjustChampion (line 456) | adjustChampion(champion) {
method playSound (line 695) | playSound(sound) {
method pauseSound (line 703) | pauseSound(sound) {
FILE: src/app/modules/client/game/game-routing.module.ts
class GameRoutingModule (line 17) | class GameRoutingModule { }
FILE: src/app/modules/client/game/game.module.ts
class GameModule (line 16) | class GameModule { }
FILE: src/app/modules/client/game/loading/loading.component.ts
class LoadingComponent (line 8) | class LoadingComponent implements OnInit {
method constructor (line 16) | constructor() { }
method ngOnInit (line 18) | ngOnInit(): void {
method adjustChampion (line 26) | adjustChampion(champion) {
method onMouseMove (line 287) | onMouseMove(mouseTrack) {
FILE: src/app/modules/client/home/home-routing.module.ts
class HomeRoutingModule (line 23) | class HomeRoutingModule { }
FILE: src/app/modules/client/home/home.module.ts
class HomeModule (line 17) | class HomeModule { }
FILE: src/app/modules/client/home/home/home.component.ts
class HomeComponent (line 10) | class HomeComponent implements OnInit {
method constructor (line 12) | constructor( private soundService: SoundService ) {}
method ngOnInit (line 14) | ngOnInit(): void {
method playSound (line 19) | playSound(sound) {
FILE: src/app/modules/client/home/overview/overview.component.ts
class OverviewComponent (line 9) | class OverviewComponent implements OnInit {
method constructor (line 11) | constructor(private backgroundService: BackgroundService) {
method ngOnInit (line 21) | ngOnInit(): void {
FILE: src/app/modules/client/home/patch-notes/patch-notes.component.ts
class PatchNotesComponent (line 9) | class PatchNotesComponent implements OnInit {
method constructor (line 11) | constructor(private backgroundService: BackgroundService) {
method ngOnInit (line 17) | ngOnInit(): void {
FILE: src/app/modules/client/play.service.ts
class PlayService (line 7) | class PlayService {
method constructor (line 9) | constructor() { }
method changeQueueState (line 14) | changeQueueState(url) {
method getQueueObservable (line 22) | getQueueObservable(): Observable<any> {
method changeLobbyState (line 30) | changeLobbyState(url) {
method getLobbyObservable (line 38) | getLobbyObservable(): Observable<any> {
FILE: src/app/modules/client/play/lobby/lobby.component.ts
class LobbyComponent (line 11) | class LobbyComponent implements OnInit {
method constructor (line 17) | constructor(private backgroundService: BackgroundService,
method ngOnInit (line 49) | ngOnInit(): void {
method enterQueue (line 76) | enterQueue() {
method cancelQueue (line 89) | cancelQueue() {
method closeLobby (line 98) | closeLobby() {
method openRoleSelect (line 106) | openRoleSelect() {
method closeRoleSelect (line 118) | closeRoleSelect() {
method selectRole (line 130) | selectRole(role) {
method playSound (line 139) | playSound(sound) {
FILE: src/app/modules/client/play/play-menu/play-menu.component.ts
class PlayMenuComponent (line 9) | class PlayMenuComponent implements OnInit {
method constructor (line 11) | constructor(private soundService: SoundService) {}
method ngOnInit (line 13) | ngOnInit(): void {
method playSound (line 18) | playSound(sound) {
FILE: src/app/modules/client/play/play-routing.module.ts
class PlayRoutingModule (line 23) | class PlayRoutingModule { }
FILE: src/app/modules/client/play/play.module.ts
class PlayModule (line 17) | class PlayModule { }
FILE: src/app/modules/client/play/pvp/pvp.component.ts
class PvpComponent (line 10) | class PvpComponent implements OnInit {
method constructor (line 14) | constructor(private backgroundService: BackgroundService) {
method ngOnInit (line 24) | ngOnInit(): void {
FILE: src/app/modules/client/profile/match-history/match-history.component.ts
class MatchHistoryComponent (line 11) | class MatchHistoryComponent implements OnInit, AfterViewInit {
method constructor (line 57) | constructor() { }
method ngOnInit (line 59) | ngOnInit(): void {
method ngAfterViewInit (line 65) | ngAfterViewInit(): void {
FILE: src/app/modules/client/profile/overview/overview.component.ts
class OverviewComponent (line 9) | class OverviewComponent implements OnInit {
method constructor (line 11) | constructor(private backgroundService: BackgroundService) {
method ngOnInit (line 21) | ngOnInit(): void {
FILE: src/app/modules/client/profile/profile-routing.module.ts
class ProfileRoutingModule (line 23) | class ProfileRoutingModule { }
FILE: src/app/modules/client/profile/profile.module.ts
class ProfileModule (line 17) | class ProfileModule { }
FILE: src/app/modules/client/profile/profile/profile.component.ts
class ProfileComponent (line 10) | class ProfileComponent implements OnInit {
method constructor (line 15) | constructor(private soundService: SoundService) { }
method ngOnInit (line 17) | ngOnInit(): void {
method changeBannerVisible (line 22) | changeBannerVisible(condition) {
method playSound (line 30) | playSound(sound) {
FILE: src/app/modules/client/sound.service.ts
class SoundService (line 6) | class SoundService {
method constructor (line 46) | constructor() { }
method playSound (line 50) | playSound(sound) {
method pauseSound (line 58) | pauseSound(sound) {
Condensed preview — 114 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (349K chars).
[
{
"path": ".browserslistrc",
"chars": 853,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": ".editorconfig",
"chars": 274,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": ".gitignore",
"chars": 631,
"preview": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n# Only "
},
{
"path": "README.md",
"chars": 399,
"preview": "\n\n# AngularOfLegends\n\nWelcome to the Ang"
},
{
"path": "angular.json",
"chars": 3748,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \""
},
{
"path": "e2e/protractor.conf.js",
"chars": 869,
"preview": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/bl"
},
{
"path": "e2e/src/app.e2e-spec.ts",
"chars": 649,
"preview": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', ()"
},
{
"path": "e2e/src/app.po.ts",
"chars": 301,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo(): Promise<unknown> {\n return"
},
{
"path": "e2e/tsconfig.json",
"chars": 294,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../tsconfig.json\",\n \"compi"
},
{
"path": "karma.conf.js",
"chars": 1028,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "package.json",
"chars": 1324,
"preview": "{\n \"name\": \"angular-of-legends\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"bui"
},
{
"path": "src/app/app-routing.module.ts",
"chars": 454,
"preview": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\n\nconst routes: Routes "
},
{
"path": "src/app/app.component.html",
"chars": 369,
"preview": "<div class=\"warning\">\n\n <img src=\"https://vignette.wikia.nocookie.net/leagueoflegends/images/e/e3/Despair_Emote.png/r"
},
{
"path": "src/app/app.component.scss",
"chars": 700,
"preview": ".warning {\n\n background-color: black;\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left:"
},
{
"path": "src/app/app.component.spec.ts",
"chars": 1087,
"preview": "import { TestBed } from '@angular/core/testing';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport {"
},
{
"path": "src/app/app.component.ts",
"chars": 221,
"preview": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n"
},
{
"path": "src/app/app.module.ts",
"chars": 394,
"preview": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppRoutin"
},
{
"path": "src/app/layout/main-client-layout/main-client-layout.component.html",
"chars": 12510,
"preview": "<div [ngClass]=\"{'background-client-queue': inQueue}\" id=\"backgroundClient\"></div>\n\n<video [ngClass]=\"{'video-background"
},
{
"path": "src/app/layout/main-client-layout/main-client-layout.component.scss",
"chars": 34980,
"preview": "#backgroundClient {\n\n background-repeat: no-repeat;\n background-size: cover;\n background-position: top;\n pos"
},
{
"path": "src/app/layout/main-client-layout/main-client-layout.component.spec.ts",
"chars": 698,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { MainClientLayoutComponent } from './main-cl"
},
{
"path": "src/app/layout/main-client-layout/main-client-layout.component.ts",
"chars": 6172,
"preview": "import { AfterViewInit, Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { Bac"
},
{
"path": "src/app/modules/auth/auth-routing.module.ts",
"chars": 350,
"preview": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { LoginComponen"
},
{
"path": "src/app/modules/auth/auth.module.ts",
"chars": 453,
"preview": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { AuthRoutingModule } "
},
{
"path": "src/app/modules/auth/login/login.component.html",
"chars": 1887,
"preview": "<div class=\"container\">\n \n <aside>\n\n <img class=\"logo\" src=\"/assets/images/auth/minimalist-logo.png\">\n\n "
},
{
"path": "src/app/modules/auth/login/login.component.scss",
"chars": 7668,
"preview": ".container {\n\n background-image: url('https://images.contentstack.io/v3/assets/blt731acb42bb3d1659/blt7225731dfb1a126"
},
{
"path": "src/app/modules/auth/login/login.component.spec.ts",
"chars": 619,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { LoginComponent } from './login.component';\n"
},
{
"path": "src/app/modules/auth/login/login.component.ts",
"chars": 1204,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { Rou"
},
{
"path": "src/app/modules/client/background.service.ts",
"chars": 372,
"preview": "import { Injectable } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'ro"
},
{
"path": "src/app/modules/client/chat/chat.component.html",
"chars": 1119,
"preview": "<div class=\"chat-container\">\n\n <ul class=\"chat-list\">\n\n <li *ngFor=\"let friend of friends\" (click)=\"selectChat"
},
{
"path": "src/app/modules/client/chat/chat.component.scss",
"chars": 3941,
"preview": ".chat-container {\n\n width: 600px;\n height: 500px;\n background-color: #010911b4;\n backdrop-filter: blur(12px)"
},
{
"path": "src/app/modules/client/chat/chat.component.spec.ts",
"chars": 612,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { ChatComponent } from './chat.component';\n\nd"
},
{
"path": "src/app/modules/client/chat/chat.component.ts",
"chars": 851,
"preview": "import { Component, Input, OnInit } from '@angular/core';\nimport { FormControl, FormGroup } from '@angular/forms';\nimpor"
},
{
"path": "src/app/modules/client/client-routing.module.ts",
"chars": 885,
"preview": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { MainClientLay"
},
{
"path": "src/app/modules/client/client.module.ts",
"chars": 604,
"preview": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ClientRoutingModule "
},
{
"path": "src/app/modules/client/game/champion-select/champion-select.component.html",
"chars": 18580,
"preview": "<div class=\"background\"></div>\n\n<video class=\"video-background\" autoplay muted>\n <source src=\"./assets/images/champio"
},
{
"path": "src/app/modules/client/game/champion-select/champion-select.component.scss",
"chars": 28159,
"preview": "\n\n.delay1 {\n\n animation-delay: 700ms !important;\n\n}\n\n.delay2 {\n\n animation-delay: 1400ms !important;\n\n}\n\n.delay3 {"
},
{
"path": "src/app/modules/client/game/champion-select/champion-select.component.spec.ts",
"chars": 683,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { ChampionSelectComponent } from './champion-"
},
{
"path": "src/app/modules/client/game/champion-select/champion-select.component.ts",
"chars": 17312,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { Champions } from '"
},
{
"path": "src/app/modules/client/game/game-routing.module.ts",
"chars": 519,
"preview": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { ChampionSelec"
},
{
"path": "src/app/modules/client/game/game.module.ts",
"chars": 464,
"preview": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { GameRoutingModule } "
},
{
"path": "src/app/modules/client/game/loading/loading.component.html",
"chars": 12327,
"preview": "<video class=\"video-background\" autoplay loop muted>\n <source src=\"https://lolstatic-a.akamaihd.net/frontpage/apps/pr"
},
{
"path": "src/app/modules/client/game/loading/loading.component.scss",
"chars": 10258,
"preview": ".video-background {\n \n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n transfor"
},
{
"path": "src/app/modules/client/game/loading/loading.component.spec.ts",
"chars": 633,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { LoadingComponent } from './loading.componen"
},
{
"path": "src/app/modules/client/game/loading/loading.component.ts",
"chars": 9191,
"preview": "import { Component, HostListener, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-loading',\n templateUrl:"
},
{
"path": "src/app/modules/client/home/home/home.component.html",
"chars": 384,
"preview": "<nav class=\"component-menu\">\n\n <ul>\n\n <li (click)=\"playSound('submenuClick')\"><a routerLinkActive=\"item-menu-a"
},
{
"path": "src/app/modules/client/home/home/home.component.scss",
"chars": 58,
"preview": "@import './../../../../../assets/scss/menu-component.scss'"
},
{
"path": "src/app/modules/client/home/home/home.component.spec.ts",
"chars": 612,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { HomeComponent } from './home.component';\n\nd"
},
{
"path": "src/app/modules/client/home/home/home.component.ts",
"chars": 486,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\nimport "
},
{
"path": "src/app/modules/client/home/home-routing.module.ts",
"chars": 686,
"preview": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { HomeComponent"
},
{
"path": "src/app/modules/client/home/home.module.ts",
"chars": 522,
"preview": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { HomeRoutingModule } "
},
{
"path": "src/app/modules/client/home/overview/overview.component.html",
"chars": 242,
"preview": "<div class=\"container\">\n\n <h1>Angular of Legends</h1>\n <p>Welcome to Angular of Legends, a clone of League of Lege"
},
{
"path": "src/app/modules/client/home/overview/overview.component.scss",
"chars": 760,
"preview": ".container {\n\n h1 {\n \n color: #f0e6d2;\n font-size: 3rem;\n text-transform: uppercase;\n "
},
{
"path": "src/app/modules/client/home/overview/overview.component.spec.ts",
"chars": 640,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { OverviewComponent } from './overview.compon"
},
{
"path": "src/app/modules/client/home/overview/overview.component.ts",
"chars": 674,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\n\n@Compo"
},
{
"path": "src/app/modules/client/home/patch-notes/patch-notes.component.html",
"chars": 461,
"preview": "<h1 class=\"patch-note-title\">Patch 1.0 notes</h1>\n<p class=\"patch-note-author\">Ivin Rodrigues - 02/20/2021</p>\n<p class="
},
{
"path": "src/app/modules/client/home/patch-notes/patch-notes.component.scss",
"chars": 688,
"preview": ".patch-note-title {\n \n color: #f0e6d2;\n font-size: 2rem;\n text-transform: uppercase;\n font-weight: bold;\n"
},
{
"path": "src/app/modules/client/home/patch-notes/patch-notes.component.spec.ts",
"chars": 655,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { PatchNotesComponent } from './patch-notes.c"
},
{
"path": "src/app/modules/client/home/patch-notes/patch-notes.component.ts",
"chars": 453,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\n\n@Compo"
},
{
"path": "src/app/modules/client/play/lobby/lobby.component.html",
"chars": 6239,
"preview": "<header>\n <img src=\"./assets/images/play-icons/sr-hover.png\">\n <span>Ranked solo/duo</span>\n <span>Draft</span>"
},
{
"path": "src/app/modules/client/play/lobby/lobby.component.scss",
"chars": 8425,
"preview": "@import '/src/assets/scss/animations.scss';\n@import '/src/assets/scss/buttons.scss';\n\nheader {\n\n width: calc(100% - 3"
},
{
"path": "src/app/modules/client/play/lobby/lobby.component.spec.ts",
"chars": 619,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { LobbyComponent } from './lobby.component';\n"
},
{
"path": "src/app/modules/client/play/lobby/lobby.component.ts",
"chars": 2452,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\nimport "
},
{
"path": "src/app/modules/client/play/play-menu/play-menu.component.html",
"chars": 931,
"preview": "<nav class=\"component-menu\">\n\n <ul>\n\n <li><a routerLinkActive=\"item-menu-active\" routerLink=\"pvp\">pvp</a></li>"
},
{
"path": "src/app/modules/client/play/play-menu/play-menu.component.scss",
"chars": 1076,
"preview": "@import './../../../../../assets/scss/menu-component.scss';\n\n.confirm-button {\n\n background-image: url('/assets/image"
},
{
"path": "src/app/modules/client/play/play-menu/play-menu.component.spec.ts",
"chars": 641,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { PlayMenuComponent } from './play-menu.compo"
},
{
"path": "src/app/modules/client/play/play-menu/play-menu.component.ts",
"chars": 441,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { SoundService } from '../../sound.service';\n\n@Component({\n s"
},
{
"path": "src/app/modules/client/play/play-routing.module.ts",
"chars": 641,
"preview": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { LobbyComponen"
},
{
"path": "src/app/modules/client/play/play.module.ts",
"chars": 498,
"preview": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { PlayRoutingModule } "
},
{
"path": "src/app/modules/client/play/pvp/pvp.component.html",
"chars": 2289,
"preview": "<nav>\n\n <ul>\n\n <li id=\"sr\" class=\"game delay1\">\n\n <img src=\"./assets/images/play-icons/sr-enabled.p"
},
{
"path": "src/app/modules/client/play/pvp/pvp.component.scss",
"chars": 4116,
"preview": "@import '/src/assets/scss/animations.scss';\n\nul {\n\n display: flex;\n height: 100%;\n\n .game {\n\n animation:"
},
{
"path": "src/app/modules/client/play/pvp/pvp.component.spec.ts",
"chars": 605,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { PvpComponent } from './pvp.component';\n\ndes"
},
{
"path": "src/app/modules/client/play/pvp/pvp.component.ts",
"chars": 1163,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\nimport "
},
{
"path": "src/app/modules/client/play.service.ts",
"chars": 573,
"preview": "import { Injectable } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'ro"
},
{
"path": "src/app/modules/client/profile/match-history/match-history.component.html",
"chars": 3907,
"preview": "<ul class=\"match-history\">\n\n <li *ngFor=\"let match of matchs\" class=\"match\">\n\n <div class=\"champion-image-wrap"
},
{
"path": "src/app/modules/client/profile/match-history/match-history.component.scss",
"chars": 9143,
"preview": ".match-history {\n \n width: calc(100% - 532px);\n height: calc(100% - 68px);\n overflow: auto;\n position: ab"
},
{
"path": "src/app/modules/client/profile/match-history/match-history.component.spec.ts",
"chars": 669,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { MatchHistoryComponent } from './match-histo"
},
{
"path": "src/app/modules/client/profile/match-history/match-history.component.ts",
"chars": 7997,
"preview": "import { AfterViewInit, Component, OnInit } from '@angular/core'\nimport { Champions } from 'src/data/champions'\nimport {"
},
{
"path": "src/app/modules/client/profile/overview/overview.component.html",
"chars": 3423,
"preview": "<ul class=\"profile-info\">\n\n <li class=\"rank-item\">\n <span>Solo/duo</span>\n <span class=\"subtitle\">plati"
},
{
"path": "src/app/modules/client/profile/overview/overview.component.scss",
"chars": 5240,
"preview": ".profile-info {\n\n width: calc( 100% - 380px);\n height: 100%;\n float: right;\n display: flex;\n justify-cont"
},
{
"path": "src/app/modules/client/profile/overview/overview.component.spec.ts",
"chars": 640,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { OverviewComponent } from './overview.compon"
},
{
"path": "src/app/modules/client/profile/overview/overview.component.ts",
"chars": 609,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\n\n@Compo"
},
{
"path": "src/app/modules/client/profile/profile/profile.component.html",
"chars": 1032,
"preview": "<div [ngClass]=\"{'overlay-background-visible': !overview}\" class=\"overlay-background\"></div>\n\n<nav class=\"component-menu"
},
{
"path": "src/app/modules/client/profile/profile/profile.component.scss",
"chars": 1358,
"preview": "@import './../../../../../assets/scss/menu-component.scss';\n\n.overlay-background-visible {\n\n opacity: .6 !important;\n"
},
{
"path": "src/app/modules/client/profile/profile/profile.component.spec.ts",
"chars": 633,
"preview": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { ProfileComponent } from './profile.componen"
},
{
"path": "src/app/modules/client/profile/profile/profile.component.ts",
"chars": 602,
"preview": "import { Component, OnInit } from '@angular/core';\nimport { Player } from 'src/data/player';\nimport { SoundService } fro"
},
{
"path": "src/app/modules/client/profile/profile-routing.module.ts",
"chars": 717,
"preview": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { OverviewCompo"
},
{
"path": "src/app/modules/client/profile/profile.module.ts",
"chars": 554,
"preview": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ProfileRoutingModule"
},
{
"path": "src/app/modules/client/sound.service.ts",
"chars": 2995,
"preview": "import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class SoundService {\n\n path: "
},
{
"path": "src/assets/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "src/assets/scss/animations.scss",
"chars": 712,
"preview": "@keyframes SlideUp {\n\n 0% {\n\n transform: translateY(100%);\n opacity: 0;\n\n }\n 100% {\n\n tran"
},
{
"path": "src/assets/scss/buttons.scss",
"chars": 357,
"preview": ".button-client {\n\n color: #938f83;\n background-color: #1e2328;\n text-decoration: none;\n text-transform: uppe"
},
{
"path": "src/assets/scss/menu-component.scss",
"chars": 1199,
"preview": ".component-menu {\n\n margin-top: 7rem;\n margin-bottom: 6px;\n padding: 0 2rem;\n position: relative;\n z-inde"
},
{
"path": "src/data/champions.ts",
"chars": 33570,
"preview": "export let Champions: any = [\n\n {name: 'Ahri', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/ah"
},
{
"path": "src/data/friends.ts",
"chars": 5370,
"preview": "export let Friends = [\n\n { id: 1, name: 'Weslley', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-"
},
{
"path": "src/data/items.ts",
"chars": 2333,
"preview": "export let Items: any = [\n\n { id:1, name: 'Duskblade of Draktharr', image: 'https://ddragon.leagueoflegends.com/cdn/1"
},
{
"path": "src/data/player.ts",
"chars": 195,
"preview": "export let Player: any = {\n\n name: localStorage.getItem('username'),\n picture: 'https://opgg-static.akamaized.net/"
},
{
"path": "src/data/spells.ts",
"chars": 379,
"preview": "export let Spells: any = [\n\n { id: 1, name: 'Ignite', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/spel"
},
{
"path": "src/environments/environment.prod.ts",
"chars": 51,
"preview": "export const environment = {\n production: true\n};\n"
},
{
"path": "src/environments/environment.ts",
"chars": 662,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environm"
},
{
"path": "src/index.html",
"chars": 757,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"author\" content=\"Ivin Rodrigues\">\n <meta"
},
{
"path": "src/main.ts",
"chars": 371,
"preview": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynami"
},
{
"path": "src/polyfills.ts",
"chars": 3064,
"preview": "/***************************************************************************************************\n * Load `$localize`"
},
{
"path": "src/styles.scss",
"chars": 7468,
"preview": "/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\n\n@font-face {\n\n "
},
{
"path": "src/test.ts",
"chars": 753,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/"
},
{
"path": "tsconfig.app.json",
"chars": 287,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.json\",\n \"compil"
},
{
"path": "tsconfig.json",
"chars": 458,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"compileOnSave\": false,\n \"compilerOpti"
},
{
"path": "tsconfig.spec.json",
"chars": 333,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.json\",\n \"compil"
},
{
"path": "tslint.json",
"chars": 3185,
"preview": "{\n \"extends\": \"tslint:recommended\",\n \"rulesDirectory\": [\n \"codelyzer\"\n ],\n \"rules\": {\n \"align\": {\n \"optio"
}
]
// ... and 6 more files (download for full content)
About this extraction
This page contains the full source code of the IvinRodrigues/AngularOfLegends GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 114 files (318.1 KB), approximately 84.5k tokens, and a symbol index with 121 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.