[ { "path": ".browserslistrc", "content": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For additional information regarding the format and rule options, please see:\n# https://github.com/browserslist/browserslist#queries\n\n# For the full list of supported browsers by the Angular framework, please see:\n# https://angular.io/guide/browser-support\n\n# You can see what browsers were selected by your queries by running:\n# npx browserslist\n\nlast 1 Chrome version\nlast 1 Firefox version\nlast 2 Edge major versions\nlast 2 Safari major versions\nlast 2 iOS major versions\nFirefox ESR\nnot 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.\nnot IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.\n" }, { "path": ".editorconfig", "content": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.ts]\nquote_type = single\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n" }, { "path": ".gitignore", "content": "# 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 exists if Bazel was run\n/bazel-out\n\n# dependencies\n/node_modules\n\n# profiling files\nchrome-profiler-events*.json\nspeed-measure-plugin*.json\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history/*\n\n# misc\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\nyarn-error.log\ntestem.log\n/typings\n\n# System Files\n.DS_Store\nThumbs.db\n" }, { "path": "README.md", "content": "![Preview](https://angularoflegends.ivinrodrigues.com/assets/images/preview.png)\n\n# AngularOfLegends\n\nWelcome 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\n\n[Live demo](https://angularoflegends.ivinrodrigues.com/) \n\n## Settings\n\n[Angular CLI](https://github.com/angular/angular-cli) version 10.2.0.\n" }, { "path": "angular.json", "content": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"AngularOfLegends\": {\n \"projectType\": \"application\",\n \"schematics\": {\n \"@schematics/angular:component\": {\n \"style\": \"scss\"\n }\n },\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:browser\",\n \"options\": {\n \"outputPath\": \"dist/AngularOfLegends\",\n \"index\": \"src/index.html\",\n \"main\": \"src/main.ts\",\n \"polyfills\": \"src/polyfills.ts\",\n \"tsConfig\": \"tsconfig.app.json\",\n \"aot\": true,\n \"assets\": [\n \"src/favicon.ico\",\n \"src/assets\"\n ],\n \"styles\": [\n \"src/styles.scss\"\n ],\n \"scripts\": [\n ]\n },\n \"configurations\": {\n \"production\": {\n \"fileReplacements\": [\n {\n \"replace\": \"src/environments/environment.ts\",\n \"with\": \"src/environments/environment.prod.ts\"\n }\n ],\n \"optimization\": true,\n \"outputHashing\": \"all\",\n \"sourceMap\": false,\n \"extractCss\": true,\n \"namedChunks\": false,\n \"extractLicenses\": true,\n \"vendorChunk\": false,\n \"buildOptimizer\": true,\n \"budgets\": [\n {\n \"type\": \"initial\",\n \"maximumWarning\": \"2mb\",\n \"maximumError\": \"22mb\"\n },\n {\n \"type\": \"anyComponentStyle\",\n \"maximumWarning\": \"6kb\",\n \"maximumError\": \"22kb\"\n }\n ]\n }\n }\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"options\": {\n \"browserTarget\": \"AngularOfLegends:build\"\n },\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"AngularOfLegends:build:production\"\n }\n }\n },\n \"extract-i18n\": {\n \"builder\": \"@angular-devkit/build-angular:extract-i18n\",\n \"options\": {\n \"browserTarget\": \"AngularOfLegends:build\"\n }\n },\n \"test\": {\n \"builder\": \"@angular-devkit/build-angular:karma\",\n \"options\": {\n \"main\": \"src/test.ts\",\n \"polyfills\": \"src/polyfills.ts\",\n \"tsConfig\": \"tsconfig.spec.json\",\n \"karmaConfig\": \"karma.conf.js\",\n \"assets\": [\n \"src/favicon.ico\",\n \"src/assets\"\n ],\n \"styles\": [\n \"src/styles.scss\"\n ],\n \"scripts\": []\n }\n },\n \"lint\": {\n \"builder\": \"@angular-devkit/build-angular:tslint\",\n \"options\": {\n \"tsConfig\": [\n \"tsconfig.app.json\",\n \"tsconfig.spec.json\",\n \"e2e/tsconfig.json\"\n ],\n \"exclude\": [\n \"**/node_modules/**\"\n ]\n }\n },\n \"e2e\": {\n \"builder\": \"@angular-devkit/build-angular:protractor\",\n \"options\": {\n \"protractorConfig\": \"e2e/protractor.conf.js\",\n \"devServerTarget\": \"AngularOfLegends:serve\"\n },\n \"configurations\": {\n \"production\": {\n \"devServerTarget\": \"AngularOfLegends:serve:production\"\n }\n }\n }\n }\n }},\n \"defaultProject\": \"AngularOfLegends\"\n}\n" }, { "path": "e2e/protractor.conf.js", "content": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/blob/master/lib/config.ts\n\nconst { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');\n\n/**\n * @type { import(\"protractor\").Config }\n */\nexports.config = {\n allScriptsTimeout: 11000,\n specs: [\n './src/**/*.e2e-spec.ts'\n ],\n capabilities: {\n browserName: 'chrome'\n },\n directConnect: true,\n baseUrl: 'http://localhost:4200/',\n framework: 'jasmine',\n jasmineNodeOpts: {\n showColors: true,\n defaultTimeoutInterval: 30000,\n print: function() {}\n },\n onPrepare() {\n require('ts-node').register({\n project: require('path').join(__dirname, './tsconfig.json')\n });\n jasmine.getEnv().addReporter(new SpecReporter({\n spec: {\n displayStacktrace: StacktraceOption.PRETTY\n }\n }));\n }\n};" }, { "path": "e2e/src/app.e2e-spec.ts", "content": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', () => {\n let page: AppPage;\n\n beforeEach(() => {\n page = new AppPage();\n });\n\n it('should display welcome message', () => {\n page.navigateTo();\n expect(page.getTitleText()).toEqual('AngularOfLegends app is running!');\n });\n\n afterEach(async () => {\n // Assert that there are no errors emitted from the browser\n const logs = await browser.manage().logs().get(logging.Type.BROWSER);\n expect(logs).not.toContain(jasmine.objectContaining({\n level: logging.Level.SEVERE,\n } as logging.Entry));\n });\n});\n" }, { "path": "e2e/src/app.po.ts", "content": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo(): Promise {\n return browser.get(browser.baseUrl) as Promise;\n }\n\n getTitleText(): Promise {\n return element(by.css('app-root .content span')).getText() as Promise;\n }\n}\n" }, { "path": "e2e/tsconfig.json", "content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"module\": \"commonjs\",\n \"target\": \"es2018\",\n \"types\": [\n \"jasmine\",\n \"jasminewd2\",\n \"node\"\n ]\n }\n}\n" }, { "path": "karma.conf.js", "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-file.html\n\nmodule.exports = function (config) {\n config.set({\n basePath: '',\n frameworks: ['jasmine', '@angular-devkit/build-angular'],\n plugins: [\n require('karma-jasmine'),\n require('karma-chrome-launcher'),\n require('karma-jasmine-html-reporter'),\n require('karma-coverage-istanbul-reporter'),\n require('@angular-devkit/build-angular/plugins/karma')\n ],\n client: {\n clearContext: false // leave Jasmine Spec Runner output visible in browser\n },\n coverageIstanbulReporter: {\n dir: require('path').join(__dirname, './coverage/AngularOfLegends'),\n reports: ['html', 'lcovonly', 'text-summary'],\n fixWebpackSourcePaths: true\n },\n reporters: ['progress', 'kjhtml'],\n port: 9876,\n colors: true,\n logLevel: config.LOG_INFO,\n autoWatch: true,\n browsers: ['Chrome'],\n singleRun: false,\n restartOnFileChange: true\n });\n};\n" }, { "path": "package.json", "content": "{\n \"name\": \"angular-of-legends\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\",\n \"test\": \"ng test\",\n \"lint\": \"ng lint\",\n \"e2e\": \"ng e2e\"\n },\n \"private\": true,\n \"dependencies\": {\n \"@angular/animations\": \"~10.2.0\",\n \"@angular/common\": \"~10.2.0\",\n \"@angular/compiler\": \"~10.2.0\",\n \"@angular/core\": \"~10.2.0\",\n \"@angular/forms\": \"~10.2.0\",\n \"@angular/localize\": \"~10.2.0\",\n \"@angular/platform-browser\": \"~10.2.0\",\n \"@angular/platform-browser-dynamic\": \"~10.2.0\",\n \"@angular/router\": \"~10.2.0\",\n \"bootstrap\": \"^4.5.0\",\n \"rxjs\": \"~6.6.0\",\n \"tslib\": \"^2.0.0\",\n \"zone.js\": \"~0.10.2\"\n },\n \"devDependencies\": {\n \"@angular-devkit/build-angular\": \"~0.1002.0\",\n \"@angular/cli\": \"~10.2.0\",\n \"@angular/compiler-cli\": \"~10.2.0\",\n \"@types/node\": \"^12.11.1\",\n \"@types/jasmine\": \"~3.5.0\",\n \"@types/jasminewd2\": \"~2.0.3\",\n \"codelyzer\": \"^6.0.0\",\n \"jasmine-core\": \"~3.6.0\",\n \"jasmine-spec-reporter\": \"~5.0.0\",\n \"karma\": \"~5.0.0\",\n \"karma-chrome-launcher\": \"~3.1.0\",\n \"karma-coverage-istanbul-reporter\": \"~3.0.2\",\n \"karma-jasmine\": \"~4.0.0\",\n \"karma-jasmine-html-reporter\": \"^1.5.0\",\n \"protractor\": \"~7.0.0\",\n \"ts-node\": \"~8.3.0\",\n \"tslint\": \"~6.1.0\",\n \"typescript\": \"~4.0.2\"\n }\n}\n" }, { "path": "src/app/app-routing.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\n\nconst routes: Routes = [\n\n { path: '', loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule)},\n { path: 'client', loadChildren: () => import('./modules/client/client.module').then(m => m.ClientModule) }\n\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n" }, { "path": "src/app/app.component.html", "content": "
\n\n \n\n

Sorry

\n\n

Angular of Legends doesn't work very well at resolutions smaller than 1.000px.
\n I'm working to resolve this as soon as possible :D

\n\n
\n\n" }, { "path": "src/app/app.component.scss", "content": ".warning {\n\n background-color: black;\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n display: none;\n z-index: 50;\n justify-content: center;\n align-items: center;\n color: white;\n\n h1 {\n\n color: white;\n font-size: 2rem;\n text-transform: uppercase;\n font-weight: bold;\n margin-top: 2rem;\n\n }\n\n p {\n\n font-family: 'Roboto', sans-serif;\n color: white;\n font-size: 1rem;\n margin-top: 1rem;\n text-align: center;\n\n }\n\n}\n\n@media only screen and (max-width: 1000px) {\n\n .warning {\n\n display: flex;\n flex-direction: column;\n overflow: auto;\n\n }\n\n}" }, { "path": "src/app/app.component.spec.ts", "content": "import { TestBed } from '@angular/core/testing';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { AppComponent } from './app.component';\n\ndescribe('AppComponent', () => {\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n imports: [\n RouterTestingModule\n ],\n declarations: [\n AppComponent\n ],\n }).compileComponents();\n });\n\n it('should create the app', () => {\n const fixture = TestBed.createComponent(AppComponent);\n const app = fixture.componentInstance;\n expect(app).toBeTruthy();\n });\n\n it(`should have as title 'AngularOfLegends'`, () => {\n const fixture = TestBed.createComponent(AppComponent);\n const app = fixture.componentInstance;\n expect(app.title).toEqual('AngularOfLegends');\n });\n\n it('should render title', () => {\n const fixture = TestBed.createComponent(AppComponent);\n fixture.detectChanges();\n const compiled = fixture.nativeElement;\n expect(compiled.querySelector('.content span').textContent).toContain('AngularOfLegends app is running!');\n });\n});\n" }, { "path": "src/app/app.component.ts", "content": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n title = 'AngularOfLegends';\n}\n" }, { "path": "src/app/app.module.ts", "content": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [\n AppComponent,\n ],\n imports: [\n BrowserModule,\n AppRoutingModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n" }, { "path": "src/app/layout/main-client-layout/main-client-layout.component.html", "content": "
\n\n\n\n
\n \n
\n
\n
\n
\n \n Match found\n Summoner's Rift - Featured - 5v5\n Match accepted\n Waiting other players\n
\n
\n \n
\n \n Accept!\n \n \n \n
\n\n
\n\n\n\n
\n\n \n\n
\n\n\n\n
\n\n \n\n
\n\n\n\n
\n\n
\n \n \n
\n\n

Found a Kha'Zix?

\n

Contact me or create a pull request

\n\n \n\n
" }, { "path": "src/app/layout/main-client-layout/main-client-layout.component.scss", "content": "#backgroundClient {\n\n background-repeat: no-repeat;\n background-size: cover;\n background-position: top;\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 0;\n transition-duration: .5s;\n opacity: .6;\n\n}\n\n.background-client-queue {\n\n opacity: .2 !important;\n\n}\n\n.video-background {\n\n position: fixed;\n height: 100vh;\n width: 100vw;\n object-fit: cover;\n opacity: 0;\n transition-duration: .5s;\n\n}\n\n.video-background-visible {\n\n opacity: .05;\n\n}\n\n\n\n.scrollable-area-lobby {\n\n height: calc(100vh - 315px) !important;\n\n}\n\n.match-found-visible {\n\n opacity: 1 !important;\n z-index: 6 !important;\n transform: scale(1) !important;\n\n .progress-circle {\n\n animation: Shine 2s infinite;\n\n @keyframes Shine {\n \n 0% {\n \n filter: brightness(100%);\n \n }\n 50% {\n \n filter: brightness(120%);\n \n }\n 100% {\n \n filter: brightness(100%);\n \n }\n \n }\n\n }\n\n}\n\n.match-accepted {\n\n .bar {\n\n transform: translateY(-680px) scale(1.2);\n\n }\n\n .external-circle {\n\n animation-name: AcceptAnimation;\n animation-duration: .5s;\n\n }\n\n .progress-circle {\n\n filter: brightness(200%);\n animation-name: None !important;\n\n }\n\n .accept-button {\n\n img {\n\n filter: grayscale(100%) !important;\n cursor: default !important;\n\n &:hover {\n\n transform: scale(1) !important;\n\n }\n\n }\n\n }\n\n .decline-button {\n\n cursor: default !important;\n\n }\n\n @keyframes AcceptAnimation {\n \n 0% {\n\n transform: scale(1)\n\n }\n 50% {\n\n transform: scale(1.2)\n\n }\n 100% {\n\n transform: scale(1)\n\n }\n\n }\n\n}\n\n.match-found {\n\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.39);\n backdrop-filter: blur(12px);\n position: fixed;\n top: 0;\n left: 0;\n z-index: 10;\n align-items: center;\n justify-content: center;\n display: flex;\n transition-duration: .2s;\n transform: scale(3) rotate(-30deg);\n z-index: -1;\n opacity: 0;\n\n .external-circle {\n\n width: 780px;\n height: 780px;\n background-color: transparent;\n border: 3px solid #71582a;\n border-radius: 50%;\n position: relative;\n\n .internal-circle {\n \n width: 640px;\n height: 640px;\n margin: calc(50% - 320px) auto;\n border: 3px solid #71582a;\n border-radius: 50%;\n overflow: hidden;\n\n .bar {\n\n width: 100%;\n height: 100%;\n background: #4cd7eb;\n background: linear-gradient(0deg, #4cd7eb 80%, transparent 100%);\n display: block;\n animation-duration: 20s;\n transition-duration: 1s;\n position: relative;\n z-index: 2;\n\n }\n\n @keyframes ProgressBar {\n \n 0% {\n\n transform: translateY(-670px);\n\n }\n 100% {\n\n transform: translateY(0);\n\n }\n\n }\n\n .progress-circle {\n \n width: 580px;\n height: 580px;\n margin: calc(50% - 292px) auto;\n background-color: transparent;\n background-image: url('https://images2.alphacoders.com/913/thumb-1920-913622.jpg');\n background-size: cover;\n background-position: center;\n border: 3px solid #71582a;\n border-radius: 50%;\n position: relative;\n z-index: 3;\n overflow: hidden;\n\n .match-informations {\n\n width: 580px;\n height: 580px;\n background-color: #00000085;\n text-align: center;\n\n img {\n\n margin-top: 160px;\n\n }\n\n .match-announcement {\n\n color: #f0e6d2;\n font-size: 2rem;\n text-transform: uppercase;\n font-weight: bold;\n background: transparent;\n padding-top: 1rem;\n letter-spacing: 2px;\n display: block;\n\n }\n\n .match-description {\n\n font-family: 'Roboto', sans-serif;\n color: #918874;\n padding-top: 12px;\n letter-spacing: 1px;\n display: block;\n\n }\n\n }\n\n }\n \n }\n\n .accept-button {\n\n display: flex;\n justify-content: center;\n position: absolute;\n top: 650px;\n left: calc(50% - 138px);\n z-index: 6;\n transition-duration: .2s;\n cursor: pointer;\n\n img {\n \n transition-duration: .2s;\n\n }\n\n span {\n\n color: #f0e6d2;\n font-size: 1.4rem;\n text-transform: uppercase;\n font-weight: bold;\n background: transparent;\n letter-spacing: 2px;\n position: absolute;\n top: 28px;\n z-index: 7;\n\n }\n\n &:hover {\n\n transform: scale(1.05);\n\n img {\n\n filter: brightness(150%);\n\n }\n\n }\n \n }\n\n .decline-button {\n\n font-family: FrizQuadrata;\n color: #f0e6d2;\n font-size: 1.2rem;\n text-transform: uppercase;\n font-weight: bold;\n background: transparent;\n letter-spacing: 1px;\n padding: 0.6rem 3rem;\n border: 2px solid #c8aa6d;\n background-color: #1e2328;\n position: absolute;\n top: 750px;\n left: calc(50% - 93.5px);\n z-index: 6;\n cursor: pointer;\n \n }\n\n }\n\n}\n\n.main-layout-horizontal-line {\n\n display: block;\n width: 100%;\n height: 1px;\n background-color: #ffffff54;\n position: absolute;\n top: 104px;\n z-index: 5;\n\n}\n\n.main-header {\n\n width: calc(100% - 280px);\n height: 100px;\n background-color: transparent;\n z-index: 4;\n position: fixed;\n\n nav {\n\n background-color: #010a13bb;\n\n ul {\n\n display: inline-block;\n\n .button-play-wrapper:hover {\n\n cursor: pointer;\n\n .play-button-click-area {\n\n filter: brightness(150%);\n transition-duration: .2s;\n\n }\n\n }\n\n li {\n\n display: inline-block;\n position: relative;\n\n .play-button-shape {\n\n margin: 0 2.2rem;\n position: relative;\n top: 20px;\n\n }\n\n .play-button-click-area {\n \n position: absolute;\n top: 26px;\n left: 78px;\n transition-duration: .2s;\n\n\n }\n\n .play-button-text {\n\n text-transform: uppercase;\n color: #f0e6d2;\n font-weight: bold;\n letter-spacing: 1px;\n position: absolute;\n left: 130px;\n top: 38px;\n cursor: pointer;\n\n }\n\n .item-link-formated {\n\n color: #beb088;\n text-transform: uppercase;\n font-weight: bold;\n background: transparent;\n letter-spacing: 1px;\n padding: 44.5px 1.5rem;\n display: block;\n transition-duration: .2s;\n\n &:hover {\n\n color: #f0e6d2;\n transition-duration: .2s;\n\n }\n\n }\n\n }\n\n }\n\n .right-list {\n\n text-align: right;\n position: absolute;\n right: 0;\n\n .item-background-hover {\n\n img {\n\n padding: 38px 1.5rem;\n transition-duration: .2s;\n\n &:hover {\n\n filter: brightness(150%);\n\n }\n\n }\n\n }\n\n .money {\n\n color: #f0e6d2;\n letter-spacing: 2px;\n font-weight: bold;\n position: relative;\n top: -28px;\n text-align: left;\n margin-right: 3rem;\n\n .blue-essence {\n\n padding: .5rem 0;\n\n }\n\n img {\n\n display: inline-block;\n margin-right: 6px;\n transform: translateY(2px);\n\n }\n \n }\n\n .divider {\n\n display: block;\n width: 2px;\n height: 60px;\n margin: 0 2.2rem 1.1rem 1rem;\n\n }\n\n }\n\n }\n\n}\n\n.main-aside {\n\n width: 280px;\n background-color: #010a13bb;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 2;\n\n .user-information {\n\n color: #f0e6d2;\n position: relative;\n\n img { \n\n margin: .6rem .5rem;\n display: inline-block;\n cursor: pointer;\n transition-duration: .2s;\n position: relative;\n z-index: 2;\n\n &:hover {\n\n filter: brightness(125%);\n transition-duration: .2s;\n\n }\n\n }\n\n .profile-image {\n\n width: 76px;\n position: absolute;\n left: 0;\n border-radius: 50%;\n z-index: 1;\n\n }\n\n .user-level {\n\n color: #a09b8c;\n font-size: 14px;\n position: absolute;\n left: 33.5px;\n top: 74px;\n z-index: 3;\n\n }\n\n .user-nickname {\n\n display: block;\n font-size: 18px;\n letter-spacing: 1px;\n padding: 2rem 0 0 .2rem;\n\n }\n\n .user-wrapper {\n\n width: 173px;\n display: inline-block;\n height: 105px;\n vertical-align: bottom;\n margin-left: .2rem;\n\n }\n\n .user-status { \n \n font-family: 'Roboto', sans-serif;\n display: block;\n margin-top: .5rem;\n\n }\n\n .user-status-message {\n\n width: calc(100% - 20px);\n display: inline-block;\n color: #09a646;\n vertical-align: middle;\n padding-left: 6px;\n\n }\n\n .user-status-message-afk {\n\n color: #beb088;\n\n }\n\n .user-status-circle {\n\n display: inline-block;\n width: 10px;\n height: 10px;\n border: solid 2px;\n border-color: #66f8a0;\n background-color: #09a646;\n border-radius: 300px;\n vertical-align: middle;\n cursor: pointer;\n\n }\n\n .user-status-circle-afk {\n\n border-color: #9c3213;\n background-color: transparent;\n\n }\n\n }\n\n .play-informations {\n\n position: absolute;\n width: 280px;\n right: -280px;\n z-index: 2;\n transition-duration: .2s;\n background: linear-gradient(216deg, #113351, #174670, #126aae);\n background-size: 600% 600%;\n overflow: hidden;\n \n -webkit-animation: BackgroundAnimation 5s ease infinite;\n -moz-animation: BackgroundAnimation 5s ease infinite;\n -o-animation: BackgroundAnimation 5s ease infinite;\n animation: BackgroundAnimation 5s ease infinite;\n \n @-webkit-keyframes BackgroundAnimation {\n 0%{background-position:78% 0%}\n 50%{background-position:23% 100%}\n 100%{background-position:78% 0%}\n }\n @-moz-keyframes BackgroundAnimation {\n 0%{background-position:78% 0%}\n 50%{background-position:23% 100%}\n 100%{background-position:78% 0%}\n }\n @-o-keyframes BackgroundAnimation {\n 0%{background-position:78% 0%}\n 50%{background-position:23% 100%}\n 100%{background-position:78% 0%}\n }\n @keyframes BackgroundAnimation {\n 0%{background-position:78% 0%}\n 50%{background-position:23% 100%}\n 100%{background-position:78% 0%}\n }\n\n .lobby {\n\n width: 248px;\n padding: 1rem 1rem 1.4rem 1rem;\n position: relative;\n transition-duration: .2s;\n\n header {\n\n display: block;\n\n }\n\n .friend-icon {\n\n transform: translateY(2px);\n\n }\n\n .party-status {\n\n color: #a39e8f;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 14px;\n letter-spacing: 2px;\n margin-left: 6px;\n\n }\n\n .mini-sr {\n\n padding-top: 14px;\n padding-right: 12px;\n display: inline-block;\n\n }\n\n .players {\n\n padding: 1rem 0;\n display: inline-block;\n position: absolute;\n top: 32px;\n\n .active {\n \n opacity: 1;\n \n }\n\n img {\n\n width: 16px;\n margin: 0 4px;\n opacity: .6;\n\n }\n\n }\n\n .queue-type {\n\n font-family: 'Roboto', sans-serif;\n color: #beb088;\n display: block;\n padding-left: 42px;\n position: absolute;\n top: 78px;\n left: 30px;\n\n }\n\n }\n\n .queue {\n\n width: 248px;\n padding: 1rem 1rem 1.4rem 1rem;\n position: absolute;\n top: 0;\n right: -284px;\n transition-duration: .2s;\n\n header {\n\n display: block;\n\n .close {\n\n color: #beb088;\n font-size: 26px;\n float: right;\n transition-duration: .2s;\n cursor: pointer;\n\n &:hover {\n\n color: #e4dbc8;\n\n }\n\n }\n\n }\n\n .queue-message {\n\n color: #a39e8f;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 14px;\n letter-spacing: 2px;\n margin-left: 6px;\n\n }\n\n .mini-sr {\n\n padding-top: 14px;\n padding-right: 12px;\n display: inline-block;\n\n }\n\n .time {\n\n font-family: 'Roboto', sans-serif;\n font-size: 40px;\n font-weight: bold;\n color: #e4dbc8;\n padding: 1rem 0;\n display: inline-block;\n position: absolute;\n top: 22px;\n }\n\n .queue-type {\n\n font-family: 'Roboto', sans-serif;\n color: #0ac5e1;\n display: block;\n padding-left: 42px;\n position: absolute;\n top: 80px;\n left: 30px;\n\n }\n\n }\n\n }\n\n .menu-aside {\n\n text-transform: uppercase;\n color: #e4dbc8;\n padding: .6rem;\n font-weight: bold;\n letter-spacing: 2px;\n transition-duration: .2s;\n\n span {\n\n width: 69px;\n display: inline-block;\n vertical-align: middle;\n\n }\n\n .menu-aside-icons-wrapper {\n \n display: inline-block;\n width: calc(100% - 69px);\n text-align: right;\n\n img {\n\n padding-left: .8rem;\n transition-duration: .2s;\n cursor: pointer;\n\n &:hover {\n\n filter: brightness(150%);\n transition-duration: .2s;\n\n }\n\n }\n\n }\n\n }\n\n .scrollable-area {\n\n overflow: auto;\n height: calc(100vh - 200px);\n padding-bottom: 8px;\n transition-duration: .2s;\n\n .group-area {\n\n ul {\n\n li {\n\n padding: .8rem 0 .8rem .6rem;\n transition-duration: .2s;\n cursor: pointer;\n\n &:hover {\n\n background-color: #192026;\n transition-duration: .2s;\n\n }\n\n img { display: inline-block;\n vertical-align: middle; }\n\n .group-information-wrapper {\n \n display: inline-block;\n\n .group-abreviation {\n\n color: #aa9261;\n padding-left: .8rem;\n height: 46px;\n vertical-align: middle;\n\n }\n\n .group-name {\n\n padding-left: .4rem;\n color: #e4dbc8;\n height: 46px;\n vertical-align: middle;\n\n }\n \n }\n\n }\n\n }\n\n }\n\n .friends-agroupment {\n\n .friend-popover {\n \n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n width: 480px;\n height: 260px;\n position: absolute;\n left: -508px;\n transition-duration: .2s;\n display: none;\n\n &::after {\n\n content: '';\n background-image: url(./../../../assets/images/aside-icons/popover-wrapper.png);\n background-repeat: no-repeat;\n background-size: cover;\n width: 494px;\n height: 285px;\n display: block;\n position: absolute;\n right: -14px;\n top: 0;\n z-index: 2;\n\n }\n\n .popover-information {\n\n background-color: #010a13;\n width: 100%;\n height: 162px;\n margin-top: 120px;\n\n .popover-profile-image-wrapper {\n\n display: inline-block;\n\n .popover-rank-image {\n\n position: absolute;\n top: 48px;\n left: 20px;\n z-index: 2;\n\n }\n\n .popover-profile-image {\n\n width: 90px;\n border-radius: 300px;\n position: relative;\n top: -20px;\n margin-left: 3.7rem;\n z-index: 1;\n\n }\n\n .tier {\n\n color: white;\n text-align: center;\n position: absolute;\n bottom: 55px;\n z-index: 2;\n\n }\n\n .one {\n\n left: 101px !important;\n\n }\n\n .two {\n\n left: 99px;\n\n }\n\n .three {\n\n left: 97px;\n\n }\n\n .four {\n\n left: 96px;\n\n }\n\n }\n\n .popover-friend-informations {\n\n font-family: 'Roboto', sans-serif;\n display: inline-block;\n padding: 1rem;\n position: relative;\n top: -20px;\n left: 50px;\n\n .popover-friend-name {\n\n display: inline-block;\n color: white;\n font-weight: bold;\n font-size: 20px;\n letter-spacing: 1.5px;\n\n }\n\n .popover-friend-group-abreviation {\n\n font-family: 'Roboto', sans-serif;\n display: inline-block;\n color: #c8aa6e;\n font-size: 14px;\n text-transform: uppercase;\n margin-left: 4px;\n\n }\n\n }\n\n .popover-friend-server-information {\n\n font-family: 'Roboto', sans-serif;\n display: block;\n color: #ffffff2e;\n font-size: 14px;\n letter-spacing: 1px;\n margin-top: 7px;\n \n\n }\n\n .popover-friend-rank {\n\n font-family: 'Roboto', sans-serif;\n display: block;\n color: #ffffff9f;\n font-weight: bold;\n font-size: 12px;\n letter-spacing: 1.5px;\n margin-top: 6px;\n\n }\n\n .popover-status {\n\n font-family: 'Roboto', sans-serif;\n border-top: 1px solid #ffffff3d;\n\n span {\n\n font-family: 'Roboto', sans-serif;\n display: block;\n padding: 9px 24px 0 32px;\n color: #0ac5e1;\n font-size: 14px;\n\n .friend-status-circle {\n\n position: absolute;\n left: 1rem;\n\n }\n\n span, p {\n\n display: inline-block;\n\n }\n\n p {\n\n margin-left: 8px;\n\n }\n\n .time {\n\n float: right;\n\n }\n\n }\n\n span:nth-child(2) {\n\n padding-left: 16px !important;\n color: #a09b8c;\n\n }\n\n }\n\n }\n\n }\n\n ul {\n\n li {\n\n color: #e4dbc8;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-size: 14px;\n font-weight: bold;\n padding: .6rem;\n transition-duration: .2s;\n cursor: pointer;\n\n &:hover {\n\n background-color: #192026;\n transition-duration: .2s;\n\n }\n\n }\n\n .friends-sublist {\n\n display: none;\n position: relative;\n\n .friend-status-circle {\n\n position: absolute;\n transform: translate(28px, -15px);\n\n }\n\n .friend-profile-image-border {\n\n width: 42px;\n height: 42px;\n background: rgb(106,80,40);\n background: -moz-linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);\n background: -webkit-linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);\n background: linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#6a5028\",endColorstr=\"#be9c57\",GradientType=1);\n border-radius: 300px;\n display: inline-block;\n margin-right: .8rem;\n vertical-align: middle;\n position: relative;\n\n .friend-profile-image {\n\n position: absolute;\n width: 38px;\n height: 38px;\n border-radius: 300px;\n left: 2px;\n top: 2px;\n\n }\n\n }\n\n .friend-informations {\n\n display: inline-block;\n width: calc(100% - 56px);\n height: 42px;\n vertical-align: middle;\n\n .friend-name, .friend-status {\n\n font-weight: normal;\n display: block;\n text-transform: initial;\n letter-spacing: 0px;\n\n }\n\n .friend-name {\n\n font-size: 18px;\n color: #e4dbc883;\n\n }\n\n .friend-status {\n\n margin-top: .5rem;\n color: #09a646;\n\n }\n\n .friend-status-queue {\n\n color: #0ac5e1 !important;\n\n }\n\n .friend-status-afk {\n\n color: #e4dbc883 !important;\n\n }\n\n .friend-status-offline {\n\n color: #e4dbc883 !important;\n\n }\n\n &:hover {\n\n .friend-name {\n\n color: #e4dbc8 !important;\n\n }\n\n }\n\n }\n\n }\n\n .friends-sublist-open {\n\n display: initial;\n\n }\n\n }\n\n }\n\n }\n\n footer {\n\n height: 47px;\n width: 99%;\n border: solid 1px #1e282d;\n\n img {\n\n width: 20px;\n padding: .8rem;\n background-color: #1e2328;\n transition-duration: .2s;\n border: solid 1px #c8a96b;\n cursor: pointer;\n\n &:hover {\n\n filter: brightness(150%);\n transition-duration: .2s;\n\n }\n\n }\n\n .bug {\n\n float: right;\n\n }\n\n .client-version {\n\n width: 86px;\n height: 50px;\n font-size: 14px;\n color: #34353b;\n vertical-align: middle;\n display: inline-block;\n font-weight: bold;\n text-align: center;\n\n }\n\n }\n\n}\n\n.truncate {\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n}\n\n.item-background-active {\n\n background: rgb(235,235,244);\n background: -moz-linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);\n background: -webkit-linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);\n background: linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ebebf4\",endColorstr=\"#ffffff\",GradientType=1);\n cursor: pointer;\n transition-duration: .2s;\n\n a {\n\n color: #f0e6d2 !important;\n\n }\n\n}\n\n.item-background-hover:hover {\n\n background: rgb(235,235,244);\n background: -moz-linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);\n background: -webkit-linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);\n background: linear-gradient(0deg, rgba(235,235,244,0.13489145658263302) 0%, rgba(255,255,255,0) 70%);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ebebf4\",endColorstr=\"#ffffff\",GradientType=1);\n cursor: pointer;\n transition-duration: .2s;\n \n}\n\n.friend-status-circle {\n\n width: 6px;\n height: 6px;\n border-color: #66f8a0;\n background-color: #09a646;\n border: solid 4px;\n border-radius: 300px;\n\n}\n\n.friend-status-circle-queue {\n\n border-color: #0ac5e1 !important;\n background-color: #005176 !important;\n\n}\n\n.friend-status-circle-afk {\n\n border-color: #9c3213;\n background-color: #010a13 !important;\n\n}\n\n.friend-status-circle-offline {\n\n border-color: #4f514f !important;\n background-color: #010a13 !important;\n\n}\n\n.main-content {\n\n height: 100vh;\n width: calc(100% - 344px);\n overflow-x: auto;\n background-repeat: no-repeat;\n background-size: cover;\n background-blend-mode: color;\n padding: 0 2rem;\n position: relative;\n z-index: 0;\n\n}\n\napp-chat {\n\n position: fixed;\n bottom: -600px;\n right: 280px;\n z-index: 2;\n transition-duration: .2s;\n\n}\n\n.chat-open {\n\n bottom: 0;\n\n}\n\n.item-desabled {\n\n cursor: not-allowed;\n filter: grayscale(100%);\n opacity: .4;\n\n}\n\n\n.modal-visible {\n\n opacity: 1 !important;\n z-index: 12 !important;\n\n}\n\n\n.modal {\n\n color: white;\n background-color: #030619d4;\n width: 60%;\n height: 60%;\n position: fixed;\n top: 20%;\n left: 20%;\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: 2px solid #c7974a80;\n border-radius: 16px;\n box-sizing: border-box;\n backdrop-filter: blur(12px);\n opacity: 0;\n z-index: -2;\n transition-duration: .5s;\n overflow: auto;\n\n .image-wrapper {\n\n position: relative;\n\n .slipper {\n\n position: absolute;\n width: 85px;\n animation: Slap 2s infinite;\n\n @keyframes Slap {\n 0% {\n\n left: 16px;\n top: 56px;\n transform: scale(.9) rotate(0deg);\n filter: blur(0);\n\n }\n 83% {\n\n filter: blur(0);\n\n }\n 84% {\n\n filter: blur(4px);\n\n }\n 85% {\n\n top: -24px;\n left: -24px;\n transform: scale(1.4) rotate(-45deg);\n\n }\n 98% {\n\n filter: blur(4px);\n\n }\n 100% {\n\n left: 16px;\n top: 56px;\n transform: scale(.9) rotate(0deg);\n filter: blur(0);\n\n }\n }\n\n }\n\n .khazix {\n\n width: 140px;\n margin-top: 20px !important;\n margin-bottom: 2rem;\n animation: DieCockroach 2s infinite;\n\n @keyframes DieCockroach {\n 0% {\n\n transform: scale(1) translate(0);\n\n }\n 94% {\n\n transform: scale(1) translate(0);\n\n }\n 95% {\n\n transform: scale(1) translate(4px, -4px);\n -webkit-filter: none;\n filter: none;\n\n }\n 94% {\n\n transform: scale(1.1) translate(-4px, 4px);\n\n }\n 95% {\n\n transform: scale(1) translate(-4px, 4px);\n\n }\n 96% {\n\n transform: scale(.9) translate(-4px, 8px);\n\n }\n 97% {\n\n transform: scale(1) translate(8px, -4px);\n\n }\n 98% {\n\n transform: scale(1.1) translate(-4px, 4px);\n\n }\n 99% {\n\n transform: scale(1) translate(0);\n -webkit-filter: invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);\n filter: grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);\n\n }\n 100% {\n\n transform: scale(1) translate(0);\n\n }\n }\n\n }\n\n }\n\n h1 {\n\n color: white;\n font-size: 2rem;\n text-transform: uppercase;\n font-weight: bold;\n\n b {\n\n color: #fd0352;\n\n }\n\n }\n\n h2 {\n\n font-size: 1.2rem;\n margin: 1rem 0;\n\n a {\n\n color: #0acbe6;\n text-decoration: none;\n\n }\n\n }\n\n p {\n\n font-family: 'Roboto', sans-serif;\n font-size: 1.2rem;\n line-height: 1.8rem;\n width: 500px;\n margin-top: 2rem;\n text-align: justify;\n\n b {\n\n color: #fd0352;\n font-weight: bold;\n\n }\n\n }\n\n button {\n\n color: #ffffff80;\n background-color: #fd035207;\n font-size: 1.2rem;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 2px;\n border: 2px solid #fd03521c;\n margin-top: 10px;\n padding: 1rem 4rem;\n border-radius: 16px;\n transition-duration: .2s;\n margin-bottom: 20px;\n cursor: pointer;\n \n &:hover {\n \n color: #ffffff;\n background-color: #fd0352;\n box-shadow: 0 0 20px #fd03527c;\n transform: scale(1.1);\n\n }\n\n }\n\n}" }, { "path": "src/app/layout/main-client-layout/main-client-layout.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { MainClientLayoutComponent } from './main-client-layout.component';\n\ndescribe('MainClientLayoutComponent', () => {\n let component: MainClientLayoutComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ MainClientLayoutComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(MainClientLayoutComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/layout/main-client-layout/main-client-layout.component.ts", "content": "import { AfterViewInit, Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { BackgroundService } from 'src/app/modules/client/background.service';\nimport { PlayService } from 'src/app/modules/client/play.service';\nimport { SoundService } from 'src/app/modules/client/sound.service';\nimport { Friends } from 'src/data/friends'\nimport { Player } from 'src/data/player';\n\n@Component({\n selector: 'app-main-client-layout',\n templateUrl: './main-client-layout.component.html',\n styleUrls: ['./main-client-layout.component.scss']\n})\nexport class MainClientLayoutComponent implements OnInit, AfterViewInit {\n\n player = Player\n onlineStatus: boolean = true\n geral: boolean = true\n chat: boolean = false\n currentChat: any = {}\n friends: any = Friends\n allFriends: number = this.friends.length\n inQueue: boolean = false\n inLobby: boolean = false\n queueTimeMinutes: number = 0\n queueTimeSeconds: any = 0\n matchAccepted: boolean = false\n matchDeclined: boolean = false\n bugModal: boolean = false\n\n constructor(private backgroundService: BackgroundService,\n private playService: PlayService,\n private soundService: SoundService,\n private router: Router) {\n\n this.backgroundService.getBackgroundObservable().subscribe(\n\n response => {\n\n document.getElementById('backgroundClient').style.backgroundImage = `url('${response.backgroundUrl}')`\n document.getElementById('backgroundClient').style.backgroundSize = response.backgroundSize\n document.getElementById('backgroundClient').style.backgroundPosition = response.backgroundPosition\n\n }\n\n )\n\n this.playService.getLobbyObservable().subscribe(\n\n response => {\n\n if(response == true) {\n\n this.inLobby = true\n // document.getElementById('scrollableArea').style.height = 'calc(100vh - 314px)'\n document.getElementById('menuAside').style.marginTop = '115px'\n document.getElementById('playInformations').style.right = '0'\n\n } else {\n\n this.inLobby = false\n document.getElementById('playInformations').style.right = '-280px'\n setTimeout( () => {\n\n // document.getElementById('scrollableArea').style.height = 'calc(100vh - 200px)'\n document.getElementById('menuAside').style.marginTop = '0'\n\n }, 100)\n\n }\n\n }\n\n )\n\n this.playService.getQueueObservable().subscribe(\n\n response => {\n\n if(response == true) {\n\n document.getElementById('lobbyPreview').style.transform = 'translateX(-280px)'\n document.getElementById('queuePreview').style.right = '0'\n this.inQueue = true\n setTimeout( () => { this.queueTime() }, 1000 )\n\n } else {\n\n document.getElementById('lobbyPreview').style.transform = 'translateX(0)'\n document.getElementById('queuePreview').style.right = '-280px'\n document.getElementById('matchFound').classList.remove('match-found-visible')\n this.inQueue = false\n this.queueTimeMinutes = 0\n this.queueTimeSeconds = 0\n\n }\n\n }\n\n )\n\n }\n\n\n\n ngOnInit(): void {\n }\n\n\n\n playSound(sound) {\n\n this.soundService.playSound(sound)\n\n }\n\n\n\n pauseSound(sound) {\n\n this.soundService.pauseSound(sound)\n\n }\n\n\n\n ngAfterViewInit(): void {\n\n }\n\n\n\n changeOnlineStatus() {\n\n this.onlineStatus = !this.onlineStatus\n\n }\n\n\n\n changeGeralVisibility() {\n\n this.geral = !this.geral\n\n }\n\n\n\n ajustPopoversPosition() {\n\n for(let friend of this.friends) {\n\n var friendContainer = document.getElementById(`friend${friend.id}`)\n var popover = document.getElementById(`popover${friend.id}`)\n \n var bodyRect = document.body.getBoundingClientRect(),\n elemRect = friendContainer.getBoundingClientRect(),\n offset = (elemRect.top - bodyRect.top) - 110\n \n popover.style.top = `${offset}px`\n\n }\n\n }\n\n\n\n showPopover(id) {\n\n document.getElementById(`popover${id}`).style.display = 'block'\n\n }\n\n\n\n hidePopover(id) {\n\n document.getElementById(`popover${id}`).style.display = 'none'\n\n }\n\n\n\n changeChatVisibility(friend?) {\n\n this.chat = !this.chat\n this.currentChat = friend\n\n }\n\n\n\n queueTime() {\n\n if(this.queueTimeSeconds < 60) {\n\n this.queueTimeSeconds = this.queueTimeSeconds + 1\n \n } else {\n\n this.queueTimeMinutes = this.queueTimeMinutes + 1\n this.queueTimeSeconds = 0\n\n }\n\n if(this.queueTimeSeconds == 5) {\n\n document.getElementById('matchFound').classList.add('match-found-visible')\n document.getElementById('progressBar').style.animationName = 'ProgressBar'\n this.inQueue = false\n this.playSound('matchFound')\n\n setTimeout( () => { \n\n if(this.matchAccepted == false && this.inQueue == false) {\n\n this.playService.changeQueueState(false)\n document.getElementById('matchFound').classList.remove('match-found-visible')\n document.getElementById('progressBar').style.animationName = ''\n\n }\n\n }, 14000)\n\n }\n\n if(this.inQueue == true) {\n\n setTimeout( () => { this.queueTime() }, 1000 )\n\n }\n \n\n }\n\n\n\n cancelQueue() {\n\n this.playService.changeQueueState(false)\n\n }\n\n\n\n acceptMatch() {\n \n this.playSound('matchFoundAcceptButtonClick')\n this.matchAccepted = true\n this.matchDeclined = false\n document.getElementById('progressBar').style.animationName = ''\n setTimeout( () => {\n this.router.navigateByUrl('/client/game/champion-select')\n }, 2000 )\n\n }\n\n\n\n cancelMatch() {\n\n if(this.matchAccepted == false) {\n\n this.pauseSound('matchFound')\n this.playSound('matchFoundDeclineButtonClick')\n this.matchAccepted = false\n this.matchDeclined = true\n this.playService.changeQueueState(false)\n document.getElementById('progressBar').style.animationName = ''\n setTimeout( () => { this.matchDeclined = false }, 1000 )\n this.playService.changeQueueState(false)\n\n }\n\n }\n\n\n\n changeBugModalVisibility() {\n\n this.bugModal = !this.bugModal\n\n if(this.bugModal == true) {\n \n this.playSound('khazix')\n\n }\n\n }\n\n}\n" }, { "path": "src/app/modules/auth/auth-routing.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { LoginComponent } from './login/login.component';\n\nconst routes: Routes = [\n\n { path: '', component: LoginComponent }\n\n];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule]\n})\nexport class AuthRoutingModule { }\n" }, { "path": "src/app/modules/auth/auth.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { AuthRoutingModule } from './auth-routing.module';\nimport { LoginComponent } from './login/login.component';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n\n@NgModule({\n declarations: [LoginComponent],\n imports: [\n CommonModule,\n AuthRoutingModule,\n FormsModule,\n ReactiveFormsModule\n ]\n})\nexport class AuthModule { }\n" }, { "path": "src/app/modules/auth/login/login.component.html", "content": "
\n \n \n\n
\n\n
\n\n \n\n

Hey Summoner, welcome to

\n

Angular of Legends

\n

This is a project for educational purposes only.
\n 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. \n 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).
\n In no way do I intend to monetize this project. It was created just to test my Front-End and Angular skills :).\n

\n\n \n\n
\n\n
\n \n
\n

Stop right there cowboy!

\n

This is a Twisted Fate alert

\n

For a better experience please activate the sound :D
(please i did all the sound part too)

\n
\n
" }, { "path": "src/app/modules/auth/login/login.component.scss", "content": ".container {\n\n background-image: url('https://images.contentstack.io/v3/assets/blt731acb42bb3d1659/blt7225731dfb1a126a/60249b80f4a7946af0338313/LoL-Patch-Notes-11-4-Article-Banner.jpg');\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100vw;\n height: 100vh;\n\n .video-background {\n \n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n object-fit: cover;\n\n }\n\n aside {\n\n background-color: #ffffffea;\n border-right: 2px solid #ffffff44;\n width: 400px;\n height: 100vh;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n opacity: 0;\n animation: FadeInLeft 1s forwards;\n\n @keyframes FadeInLeft {\n \n 0%{\n\n transform: translateX(-400px);\n\n }\n 100% {\n\n opacity: 1;\n transform: translateX(0);\n\n }\n\n }\n\n .logo {\n\n display: block;\n margin-bottom: 4rem;\n\n }\n\n span {\n\n font-family: 'Roboto', sans-serif;\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 2rem;\n\n }\n\n form {\n\n position: relative;\n margin: 0;\n\n input {\n\n width: 100%;\n height: 58px;\n font-family: 'Roboto', sans-serif;\n font-size: 16px;\n font-weight: 900;\n letter-spacing: 1px;\n background-color: #ededed;\n border: 2px solid #ededed;\n border-radius: 8px;\n padding: 14px 16px 4px;\n box-sizing: border-box;\n\n &:focus {\n\n border: 2px solid black;\n background-color: transparent;\n\n }\n\n &:focus + label {\n\n transform: scale(.6);\n top: 7px;\n left: -10px;\n \n }\n \n }\n\n .label-top {\n\n transform: scale(.6);\n top: 7px;\n left: -10px;\n\n }\n \n label {\n \n font-family: 'Roboto', sans-serif;\n font-size: 16px;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 1px;\n position: absolute;\n top: 22px;\n left: 16px;\n transition-duration: .2s;\n opacity: .6;\n \n }\n\n small {\n \n font-family: 'Roboto', sans-serif;\n color: #fd0352;\n margin-bottom: 8rem;\n font-size: 14px;\n width: 300px;\n display: block;\n margin-top: 14px;\n text-align: center;\n\n }\n\n button {\n\n width: 80px;\n height: 80px;\n border: 2px solid #f2f2f2;\n border-radius: 16px;\n background-color: #ededed;\n transition-duration: .2s;\n cursor: not-allowed;\n\n }\n\n .button-enabled {\n\n background-color: #d13639;\n border-color: #d13639;\n\n &:hover {\n\n cursor: pointer;\n transform: scale(1.1);\n filter: brightness(150%);\n\n }\n\n }\n\n }\n\n }\n\n}\n\n.modal-close {\n\n opacity: 0 !important;\n transform: scale(.5) !important;\n\n}\n\n.modal {\n\n color: white;\n background-color: #030619d4;\n width: 80%;\n height: 80%;\n position: fixed;\n top: 10%;\n left: 10%;\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n border: 2px solid #c7974a80;\n border-radius: 16px;\n box-sizing: border-box;\n backdrop-filter: blur(12px);\n opacity: 0;\n transition-duration: .5s;\n animation: FadeIn .5s forwards;\n overflow: auto;\n\n @keyframes FadeIn {\n \n 0% {\n\n transform: scale(.5);\n\n }\n 100% {\n\n opacity: 1;\n transform: scale(1);\n\n }\n\n }\n\n img {\n\n padding-top: 20px;\n width: 200px;\n animation: OwwntZed 2s infinite;\n\n @keyframes OwwntZed {\n \n 0% {\n\n transform: scale(.95);\n\n }\n 50% {\n\n transform: scale(1);\n filter: brightness(120%);\n\n }\n 100% {\n\n transform: scale(.95);\n\n }\n\n }\n\n }\n\n h1 {\n\n color: #c7984a;\n font-size: 2rem;\n text-transform: uppercase;\n font-weight: bold;\n\n b {\n\n color: #fd0352;\n\n }\n\n }\n\n h2 {\n\n font-size: 1.2rem;\n margin: 1rem 0;\n\n }\n\n p {\n\n font-family: 'Roboto', sans-serif;\n font-size: 1.2rem;\n line-height: 1.8rem;\n width: 500px;\n margin-top: 2rem;\n text-align: justify;\n\n b {\n\n color: #fd0352;\n font-weight: bold;\n\n }\n\n }\n\n button {\n\n color: #ffffff80;\n background-color: #fd035207;\n font-size: 1.2rem;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 2px;\n border: 2px solid #fd03521c;\n margin-top: 4rem;\n padding: 1rem 4rem;\n border-radius: 16px;\n transition-duration: .2s;\n margin-bottom: 20px;\n cursor: pointer;\n \n &:hover {\n \n color: #ffffff;\n background-color: #fd0352;\n box-shadow: 0 0 20px #fd03527c;\n transform: scale(1.1);\n\n }\n\n }\n\n}\n\n.warning-visible {\n\n top: 2rem !important;\n opacity: 1 !important;\n\n}\n\n.warning {\n\n position: fixed;\n top: -14rem;\n left: calc(50% - 311px);\n z-index: 2;\n background-color: #c7bf4a58;\n backdrop-filter: blur(12px);\n display: flex;\n align-items: center;\n padding: 2rem 2rem;\n border-radius: 16px;\n border: solid 2px #fd03521c;\n transition-duration: .5s;\n opacity: 0;\n\n img {\n \n width: 150px;\n display: inline-block;\n animation: TwistedFateHeadBanger 2s infinite;\n\n @keyframes TwistedFateHeadBanger {\n \n 0% {\n\n transform: rotate(6deg);\n\n }\n 50% {\n\n transform: rotate(-6deg);\n filter: brightness(120%);\n\n }\n 100% {\n\n transform: rotate(6deg);\n\n }\n\n }\n \n }\n\n .text-wrapper {\n\n display: inline-block;\n text-align: center;\n\n h1 {\n\n color: #e2db71;\n font-size: 1.8rem;\n text-transform: uppercase;\n font-weight: bold;\n padding-bottom: 1rem;\n display: block;\n\n }\n\n h2 {\n\n color: #c7bf4a;\n font-size: 1.2rem;\n text-transform: uppercase;\n font-weight: bold;\n padding-bottom: 1rem;\n display: block;\n\n }\n\n p {\n\n color: white;\n font-family: \"Roboto\", sans-serif;\n font-size: 1.2rem;\n line-height: 1.8rem;\n margin-left: 2rem;\n\n b {\n\n color: #00000052;\n font-weight: bold;\n\n }\n\n }\n\n }\n\n}" }, { "path": "src/app/modules/auth/login/login.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { LoginComponent } from './login.component';\n\ndescribe('LoginComponent', () => {\n let component: LoginComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ LoginComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(LoginComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/auth/login/login.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { Router } from '@angular/router';\nimport { SoundService } from '../../client/sound.service';\n\n@Component({\n selector: 'app-login',\n templateUrl: './login.component.html',\n styleUrls: ['./login.component.scss']\n})\nexport class LoginComponent implements OnInit {\n\n modal: boolean = true\n loginForm: FormGroup\n haveCharacters: boolean = false\n\n constructor( private route: Router,\n private soundService: SoundService ) {\n\n this.loginForm = new FormGroup({\n\n username: new FormControl()\n\n })\n\n }\n\n\n\n ngOnInit(): void {\n\n this.soundService.playSound('zed')\n\n }\n\n\n\n makeLogin() {\n\n if(this.haveCharacters == true) {\n\n localStorage.setItem('username', this.loginForm.value.username)\n this.route.navigateByUrl('client')\n \n }\n\n }\n\n\n\n usernameIdentify() {\n\n if(this.loginForm.value.username !== null && this.loginForm.value.username?.length > 0) {\n\n this.haveCharacters = true\n\n } else {\n\n this.haveCharacters = false\n\n }\n\n }\n\n\n\n closeModal() {\n\n this.soundService.playSound('tf')\n this.modal = false\n\n }\n\n}\n" }, { "path": "src/app/modules/client/background.service.ts", "content": "import { Injectable } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class BackgroundService {\n\n private background = new Subject()\n\n changeBackground(url) {\n\n this.background.next(url)\n \n }\n\n\n\n getBackgroundObservable(): Observable {\n\n return this.background.asObservable()\n\n }\n\n}\n" }, { "path": "src/app/modules/client/chat/chat.component.html", "content": "
\n\n
    \n\n
  • \n \n {{ friend.name }}\n
    • \n\n
\n\n
\n\n
\n\n
\n \n
\n
\n\n
\n\n {{ currentChat.name }}\n\n
\n\n
\n\n
\n\n
{{ message.text }}
\n\n
\n\n
\n \n
\n\n
\n\n
" }, { "path": "src/app/modules/client/chat/chat.component.scss", "content": ".chat-container {\n\n width: 600px;\n height: 500px;\n background-color: #010911b4;\n backdrop-filter: blur(12px);\n border: 1px solid #ffffff38;\n\n .chat-list {\n\n height: 580px;\n width: 200px;\n display: inline-block;\n overflow: auto;\n\n .friend {\n\n display: flex;\n align-items: center;\n padding: .5rem;\n transition-duration: .2s;\n cursor: pointer;\n\n img {\n\n width: 50px;\n border: 2px solid #8e7341;\n box-sizing: border-box;\n border-radius: 50%;\n margin-right: .5rem;\n\n }\n\n span {\n\n font-size: 18px;\n color: #e4dbc8;\n font-family: \"Roboto\", sans-serif;\n\n }\n\n &:hover {\n\n background-color: #ffffff23;\n\n }\n\n }\n\n }\n\n .current-chat {\n\n width: 400px;\n height: 100%;\n display: inline-block;\n border-left: 1px solid #ffffff1a;\n box-sizing: border-box;\n position: relative;\n\n header {\n\n width: 383px;\n height: 42px;\n position: absolute;\n top: 0;\n left: 0;\n padding: .5rem;\n border-bottom: 1px solid #8e7341;\n backdrop-filter: blur(12px);\n\n }\n\n main {\n\n width: 335px;\n height: 456px;\n overflow: auto;\n padding: 6rem 2rem 2rem 2rem;\n\n .message {\n\n background-color: #8e734157;\n color: white;\n font-family: 'Roboto', sans-serif;\n line-height: 26px;\n text-rendering:optimizeLegibility;\n width: 70%;\n border-radius: 14px;\n display: block;\n padding: .5rem 1rem;\n margin: .5rem 0;\n float: right;\n transition-duration: .2s;\n overflow-wrap: break-word;\n\n }\n \n .friend-message {\n\n background-color: #37373757;\n float: left;\n\n\n }\n\n }\n\n input {\n\n color: white;\n font-size: 1.4;\n background-color: transparent;\n width: 100%;\n height: 44px;\n position: absolute;\n bottom: 0;\n left: 0;\n padding: 0 1rem;\n border-left: 1px solid #ffffff1a;\n border-bottom: none;\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n\n }\n\n }\n\n}\n\n.friend-status-circle {\n\n position: absolute;\n transform: translate(28px, -15px);\n\n}\n\n.friend-profile-image-border {\n\n width: 42px;\n height: 42px;\n background: rgb(106,80,40);\n background: -moz-linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);\n background: -webkit-linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);\n background: linear-gradient(0deg, rgba(106,80,40,1) 0%, rgba(190,156,87,1) 100%);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#6a5028\",endColorstr=\"#be9c57\",GradientType=1);\n border-radius: 300px;\n display: inline-block;\n margin-right: .8rem;\n\n .friend-profile-image {\n\n position: absolute;\n width: 38px;\n height: 38px;\n border-radius: 300px;\n left: 10px;\n top: 10px;\n\n }\n\n}\n\n.friend-informations {\n\n display: inline-block;\n width: calc(100% - 56px);\n height: 20px;\n position: relative;\n top: -14px;\n\n .friend-name, .friend-status {\n\n font-weight: normal;\n display: block;\n text-transform: initial;\n letter-spacing: 0px;\n\n }\n\n .friend-name {\n\n font-size: 18px;\n color: #e4dbc8;\n font-family: 'Roboto', sans-serif;\n\n }\n\n}" }, { "path": "src/app/modules/client/chat/chat.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { ChatComponent } from './chat.component';\n\ndescribe('ChatComponent', () => {\n let component: ChatComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ ChatComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(ChatComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/chat/chat.component.ts", "content": "import { Component, Input, OnInit } from '@angular/core';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { Friends } from 'src/data/friends'\n\n@Component({\n selector: 'app-chat',\n templateUrl: './chat.component.html',\n styleUrls: ['./chat.component.scss']\n})\nexport class ChatComponent implements OnInit {\n\n messageForm: FormGroup\n\n @Input() currentChat: any = {}\n friends: any\n\n constructor() {\n\n this.messageForm = new FormGroup({\n\n message: new FormControl()\n\n })\n\n }\n\n ngOnInit(): void {\n\n this.friends = Friends\n\n }\n\n\n\n selectChat(friend) {\n\n this.currentChat = friend\n\n }\n\n\n\n sendMessage() {\n\n if(this.messageForm.value.message !== null) {\n\n Friends[this.currentChat.id - 1].messages.push({ text: this.messageForm.value.message, type: 'user' })\n this.messageForm.reset()\n\n }\n\n }\n\n}\n" }, { "path": "src/app/modules/client/client-routing.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { MainClientLayoutComponent } from 'src/app/layout/main-client-layout/main-client-layout.component';\n\nconst routes: Routes = [\n\n { path: '', component: MainClientLayoutComponent, children: [\n \n { path: '', redirectTo: 'home', pathMatch: 'full' },\n { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },\n { path: 'play', loadChildren: () => import('./play/play.module').then(m => m.PlayModule) },\n { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }\n\n ]},\n { path: 'game', loadChildren: () => import('./game/game.module').then(m => m.GameModule) }\n\n];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule]\n})\nexport class ClientRoutingModule { }\n" }, { "path": "src/app/modules/client/client.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ClientRoutingModule } from './client-routing.module';\nimport { MainClientLayoutComponent } from 'src/app/layout/main-client-layout/main-client-layout.component';\nimport { ChatComponent } from './chat/chat.component';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n\n@NgModule({\n declarations: [\n MainClientLayoutComponent,\n ChatComponent\n ],\n imports: [\n CommonModule,\n ClientRoutingModule,\n FormsModule,\n ReactiveFormsModule\n ]\n})\nexport class ClientModule { }\n" }, { "path": "src/app/modules/client/game/champion-select/champion-select.component.html", "content": "
\n\n\n\n
\n\n
\n You were assigned\n Middle\n
\n\n
\n\n\n\n
\n\n Choose your champion!\n Declare your champion!\n Ban a champion!\n Choose your loadout!\n {{ timerNumber }}\n\n
\n \n
\n
\n \n
\n\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n\n
\n\n
\n\n Your team's bans\n\n
    \n \n
  • \n \n \n {{ allyBans[0].name }}\n
    • \n
  • \n \n \n {{ allyBans[1].name }}\n
    • \n
  • \n \n \n {{ allyBans[2].name }}\n
    • \n
  • \n \n {{ currentChampionBanSelected.name }}\n
    • \n
  • \n \n \n {{ allyBans[3].name }}\n
    • \n\n
\n\n
\n\n Bans locked in\n\n
\n\n
    \n \n
  • \n \n \n {{ enemyBans[0].name }}\n
    • \n
  • \n \n \n {{ enemyBans[1].name }}\n
    • \n
  • \n \n \n {{ enemyBans[2].name }}\n
    • \n
  • \n \n \n {{ enemyBans[3].name }}\n
    • \n
  • \n \n \n {{ enemyBans[4].name }}\n
    • \n\n
\n\n Enemy team's bans\n\n
\n\n
\n\n
    \n
  • \n \n {{ champion.name }}\n \n \n \n \n \n \n \n \n
    • \n
\n\n
\n \n
\n
\n\n
\n {{ currentChampionSelected.name }}\n
\n
\n \n
\n
\n
\n\n \n \n \n \n Lock in\n \n \n \n \n Ban\n \n \n\n
\n\n
\n\n \n\n \n\n
\n \n \n
\n\n
\n\n" }, { "path": "src/app/modules/client/game/champion-select/champion-select.component.scss", "content": "\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 {\n\n animation-delay: 2000ms !important;\n\n}\n\n.delay4 {\n\n animation-delay: 2800ms !important;\n\n}\n\n.delay5 {\n\n animation-delay: 3500ms !important;\n\n}\n\n.background {\n\n width: 100vw;\n height: 100vh;\n background-color: #010614;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 0;\n\n}\n\n.assigned-container {\n\n color: white;\n position: fixed;\n left: 0;\n right: 0;\n top: 70%;\n text-align: center;\n font-weight: bold;\n opacity: 0;\n transition-duration: .2s;\n\n .assigned {\n\n font-size: 1.5rem;\n letter-spacing: 2px;\n font-style: italic;\n\n }\n\n .role {\n\n font-size: 4rem;\n display: block;\n margin-top: 12px;\n text-transform: uppercase;\n\n }\n\n}\n\n.overlay-background {\n\n width: 100vw;\n height: 100vh;\n background-color: #000000cb;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 0;\n opacity: 0;\n transition-duration: .2s;\n\n}\n\n.overlay-background-ban {\n\n background-color: rgb(255,0,36) !important;\n background: radial-gradient(circle, rgba(255, 0, 34, 0.500) 0%, rgba(62, 0, 25, 0.500) 100%) !important;\n\n}\n\n.video-background {\n \n position: fixed;\n width: 900px;\n top: calc(50% - 250px);\n left: calc(50% - 450px);\n transform: scale(1.8);\n\n}\n\n.champion-background {\n\n position: fixed;\n width: 100vw;\n height: 100vh;\n background-image: url('https://images.wallpapersden.com/image/download/psyops-zed-league-of-legends_bGhtaG6UmZqaraWkpJRmbmdlrWZlbWU.jpg');\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n animation: FadeIn .2s forwards;\n\n @keyframes FadeIn {\n 0% {\n\n opacity: 0;\n transform: scale(2);\n\n }\n 100% {\n\n opacity: 1;\n transform: scale(1);\n\n }\n }\n\n}\n\n.ally-team {\n\n width: 20%;\n position: absolute;\n left: 0;\n top: 0;\n\n .ally-bans {\n\n li {\n\n display: inline-block;\n padding: 2.8rem .5rem 4rem;\n position: relative;\n\n .champion-picture {\n\n opacity: 0;\n position: absolute;\n left: 8px;\n animation: Entrance 1s forwards;\n\n @keyframes Entrance {\n \n 0% {\n\n transform: scale(2);\n\n }\n 100% {\n\n opacity: 1;\n transform: scale(1);\n\n }\n\n }\n\n }\n\n\n img {\n\n width: 35px;\n border: 1px solid rgba(255, 255, 255, 0.103);\n\n }\n\n }\n\n }\n\n .ally-team-champs-border {\n \n border-top: 1px solid #785b2881 !important;\n border-bottom: 1px solid #785b2881 !important;\n\n }\n\n .ally-team-champs {\n\n position: fixed;\n top: calc(50vh - 255px);\n width: calc(50vw - 450px);\n\n li {\n\n display: flex;\n align-items: center;\n justify-items: center;\n justify-content: left;\n padding: 12px 6px;\n border-top: 1px solid transparent;\n border-bottom: 1px solid transparent;\n box-sizing: border-box;\n transition-duration: .2s;\n\n .spells {\n\n display: none;\n\n img {\n\n width: 35px;\n display: block;\n margin: .5rem;\n\n }\n\n }\n\n .champion-preview {\n\n width: 70px;\n border: 3px solid #a07c30;\n border-radius: 50%;\n margin: 0 16px 0 10px;\n\n }\n\n .informations {\n\n span {\n\n color: #f0e6d2;\n display: block;\n font-weight: bold;\n\n }\n\n .champion-name {\n\n font-size: .8rem;\n color: #908769;\n font-family: 'Roboto', sans-serif;\n\n }\n\n .picking {\n\n color: #f7bc0a;\n font-family: 'Roboto', sans-serif;\n\n }\n\n .role {\n\n text-transform: uppercase;\n font-size: 1.3rem;\n padding: 4px 0;\n\n }\n\n .user-name {\n\n font-family: 'Roboto', sans-serif;\n font-size: .9rem;\n letter-spacing: 2px;\n opacity: .8;\n\n }\n\n }\n\n }\n\n }\n\n .ally-team-champs-intro-animation {\n\n .spells {\n\n display: block;\n\n }\n\n .champion-preview {\n\n animation: PreviewIntro 1s;\n opacity: 0;\n\n @keyframes PreviewIntro {\n \n 0% {\n\n }\n 50% {\n\n transform: scale(1.2);\n opacity: 1;\n box-shadow: 0 0 20px #a07c30;\n\n }\n 100% {\n\n transform: scale(1);\n opacity: 1;\n\n }\n\n }\n\n }\n\n .informations {\n\n animation: InfroIntro 1s;\n opacity: 0;\n\n @keyframes InfroIntro {\n \n 0% {\n\n transform: translateX(-20px);\n opacity: 1;\n\n }\n 100% {\n\n opacity: 1;\n\n }\n\n }\n\n }\n\n }\n\n}\n\n.enemy-team {\n\n width: 20%;\n position: absolute;\n right: 0;\n top: 0;\n\n .enemy-bans {\n\n display: flex;\n justify-content: flex-end;\n\n li {\n\n display: inline-block;\n padding: 2.8rem .5rem 4rem;\n position: relative;\n\n .champion-picture {\n\n opacity: 0;\n position: absolute;\n animation: Entrance 1s forwards;\n\n @keyframes Entrance {\n \n 0% {\n\n transform: scale(2);\n\n }\n 100% {\n\n opacity: 1;\n transform: scale(1);\n\n }\n\n }\n\n }\n\n img {\n\n width: 35px;\n border: 1px solid rgba(255, 255, 255, 0.103);\n\n }\n\n }\n\n }\n\n .enemy-team-champs-visible {\n\n position: fixed;\n top: calc(50vh - 255px);\n right: 0;\n width: calc(50vw - 450px);\n\n li {\n\n animation: FadeInLeft 1s;\n animation-fill-mode: forwards;\n\n @keyframes FadeInLeft {\n 0% {\n\n opacity: 0;\n transform: translateX(-50px);\n\n }\n 100% {\n\n opacity: 1;\n transform: translateX(0);\n\n }\n }\n\n }\n\n }\n\n .enemy-team-champs {\n\n li {\n\n display: flex;\n align-items: center;\n justify-items: center;\n justify-content: flex-end;\n padding: 3px 6px;\n border-top: 1px solid #785b2881 !important;\n border-bottom: 1px solid #785b2881 !important;\n box-sizing: border-box;\n text-align: right;\n opacity: 0;\n\n .spells {\n\n img {\n\n width: 35px;\n display: block;\n margin: .5rem;\n\n }\n\n }\n\n .champion-preview {\n\n width: 70px;\n height: 70px;\n background-color: #00040f;\n border: 3px solid #560d0d;\n border-radius: 50%;\n margin: 9px 10px 9px 16px;\n overflow: hidden;\n\n }\n\n .informations {\n\n span {\n\n color: #f0e6d2;\n display: block;\n font-weight: bold;\n\n }\n\n .champion-name {\n\n font-size: .8rem;\n color: #908769;\n font-family: 'Roboto', sans-serif;\n\n }\n\n .picking {\n\n color: #f7bc0a;\n font-family: 'Roboto', sans-serif;\n\n }\n\n .role {\n\n text-transform: uppercase;\n font-size: 1.3rem;\n padding: 4px 0;\n\n }\n\n .user-name {\n\n font-family: 'Roboto', sans-serif;\n font-size: .9rem;\n letter-spacing: 2px;\n opacity: .8;\n\n }\n\n }\n\n &:nth-child(2) {\n\n animation-delay: .2s;\n \n }\n\n &:nth-child(3) {\n\n animation-delay: .4s;\n \n }\n\n &:nth-child(4) {\n\n animation-delay: .6s;\n \n }\n\n &:nth-child(5) {\n\n animation-delay: .8s;\n \n }\n\n }\n\n } \n\n}\n\nmain {\n\n display: inline-block;\n position: absolute;\n top: 0;\n left: calc(50% - 400px);\n opacity: 0;\n z-index: -1;\n transition-duration: .2s;\n\n .announcement, .announcement-timer {\n \n color: white;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px;\n display: block;\n text-align: center;\n\n }\n \n .announcement {\n\n font-size: 2.4rem;\n text-align: center;\n padding-top: 1rem;\n\n }\n\n .announcement-timer {\n\n font-size: 3.5rem;\n\n }\n\n .ally-progress-bar {\n\n width: 338px;\n height: 6px;\n margin: 10px;\n position: absolute;\n top: 80.5px;\n left: -3px;\n\n .bar {\n\n width: 100%;\n height: 6px;\n display: block;\n float: right;\n\n }\n\n }\n\n .enemy-progress-bar {\n\n width: 338px;\n height: 6px;\n margin: 10px;\n position: absolute;\n top: 80.5px;\n right: -3px;\n\n .bar {\n\n width: 100%;\n height: 6px;\n display: block;\n transform: scaleX(-1);\n\n }\n\n }\n\n .blue-bar {\n\n background-color: #67c9d479;\n\n .bar {\n\n background: rgb(112,206,218);\n background: linear-gradient(100deg, #70ceda 0%, #005f86 100%);\n\n }\n\n }\n\n .red-bar {\n\n background-color: #250e16b7;\n\n .bar {\n\n background: rgb(104,13,26);\n background: linear-gradient(100deg, #680d1a 0%, #d66f4e 100%);\n\n }\n\n }\n\n .hidde-filters {\n\n opacity: 0;\n z-index: -2;\n\n }\n\n .filters {\n\n width: 100%;\n padding: .5rem;\n border-bottom: 1px solid #785b2873;\n margin-bottom: 12px;\n position: relative;\n z-index: 2;\n\n .lane {\n\n display: inline-block;\n margin: 0 1rem;\n\n img {\n\n width: 25px;\n opacity: .6;\n transition-duration: .2s;\n cursor: pointer;\n filter: grayscale(100%);\n\n }\n\n &:hover {\n \n img {\n \n opacity: 1;\n \n }\n \n }\n\n }\n\n .lane-active {\n\n img {\n\n opacity: 1;\n filter: grayscale(100%) brightness(120%);\n\n }\n\n }\n\n .sup {\n\n img {\n\n width: 30px;\n }\n\n }\n\n }\n\n .bans {\n\n text-align: center;\n width: 800px;\n height: calc(100vh - 345px);\n position: fixed;\n top: 35%;\n z-index: 2;\n animation: AjustTop .4s;\n animation-delay: 4s;\n animation-fill-mode: forwards;\n\n @keyframes AjustTop {\n 0% {\n\n top: 35%;\n\n }\n 100% {\n\n top: 18%;\n\n }\n }\n\n .announcement {\n\n font-size: 1.2rem;\n padding: 2rem 0;\n\n }\n\n .bans-announcement {\n\n color: #f0e6d2;\n font-size: 2rem;\n padding: 4rem 0;\n position: relative;\n opacity: 0;\n animation: Entrance .2s;\n animation-delay: 4s;\n animation-fill-mode: forwards;\n\n @keyframes Entrance {\n 0% {\n\n opacity: 0;\n transform: scale(2);\n\n }\n 100% {\n\n opacity: 1;\n transform: scale(1);\n\n }\n }\n\n &::before, &::after {\n\n content: '';\n width: 28%;\n height: 2px;\n background-color: #f0e6d2;\n position: absolute;\n top: calc(50% - 2px);\n\n }\n\n &::before {\n\n left: 0;\n\n }\n\n &::after {\n\n right: 0;\n\n }\n\n }\n\n .ally-bans {\n\n .announcement {\n\n color: #217b86;\n animation: Entrance .2s;\n animation-fill-mode: forwards;\n\n @keyframes Entrance {\n 0% {\n\n opacity: 0;\n transform: scale(2);\n color: white;\n\n }\n 100% {\n\n opacity: 1;\n transform: scale(1);\n color: #217b86;\n\n }\n }\n\n }\n\n }\n\n .enemy-bans {\n \n animation: Entrance .2s;\n opacity: 0;\n animation-delay: 4.2s;\n animation-fill-mode: forwards;\n\n @keyframes Entrance {\n 0% {\n\n opacity: 0;\n\n }\n 100% {\n\n opacity: 1;\n\n }\n }\n\n .announcement {\n\n color: #8d4c56;\n\n }\n\n \n .ban {\n\n animation-delay: 5s;\n\n }\n\n }\n\n ul {\n\n display: flex;\n flex-wrap: nowrap;\n justify-content: space-between;\n\n .ban {\n\n animation: Entrance .4s;\n animation-fill-mode: forwards;\n opacity: 0;\n\n @keyframes Entrance {\n 0% {\n\n opacity: 0;\n transform: scale(1.2);\n\n }\n 100% {\n\n opacity: 1;\n transform: scale(1);\n }\n }\n\n img { \n \n width: 85px;\n display: block;\n border: 1px solid rgba(255, 255, 255, 0.103);\n box-sizing: border-box;\n \n }\n\n span {\n\n font-family: 'Roboto', sans-serif;\n font-size: 16px;\n color: #918874;\n padding-top: 8px;\n display: block;\n\n }\n\n &:nth-child(1), &:nth-child(5), &:nth-child(6), &:nth-child(10) {\n\n animation-delay: .4s;\n\n }\n\n &:nth-child(2), &:nth-child(4), &:nth-child(7), &:nth-child(9) {\n\n animation-delay: .5s;\n\n }\n\n &:nth-child(3), &:nth-child(8) {\n\n animation-delay: .6s;\n\n }\n\n }\n\n }\n\n }\n\n\n .champion-list {\n\n width: 800px;\n height: calc(100vh - 345px);\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n padding-bottom: 12px;\n overflow: auto;\n position: relative;\n z-index: 2;\n opacity: 1;\n transition-duration: .2s;\n\n .champion-desable {\n\n filter: grayscale(100%);\n cursor: default !important;\n\n &:hover {\n\n filter: brightness(100%) !important;\n transform: scale(1) !important;\n\n }\n\n }\n\n .champion-visible {\n\n opacity: 1 !important;\n position: relative !important;\n z-index: 2 !important;\n transition-duration: .2s;\n\n }\n\n .champion {\n\n display: inline-block;\n text-align: center ;\n margin: 1rem;\n position: absolute;\n top: 0;\n opacity: 0;\n z-index: -2;\n\n .champion-select-frame {\n\n width: 85px;\n height: 85px;\n border: 4px solid #e7ddcad8;\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n box-shadow: 0 0 10px #e7ddca77;\n\n .circle {\n\n width: 69px;\n height: 69px;\n border: 4px solid #e7ddcad8;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n box-shadow: 0 0 10px #e7ddca6e;\n\n }\n\n }\n\n .champion-ban-frame {\n\n width: 85px;\n height: 85px;\n border: 4px solid #da3e48;\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n box-shadow: 0 0 10px #da3e48;\n\n .circle {\n\n width: 69px;\n height: 69px;\n border: 4px solid #da3e48;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n box-shadow: 0 0 10px #da3e48;\n\n .line {\n\n width: 71px;\n height: 8px;\n background-color: #da3e48;\n position: absolute;\n top: calc(50% - 2px);\n left: 0;\n transform: rotate(320deg);\n box-shadow: 0 0 10px #da3e48;\n\n }\n\n }\n\n }\n\n .champion-picture {\n \n width: 85px;\n height: 85px;\n display: block;\n cursor: pointer;\n border: 2px solid #ffffff70;\n box-sizing: border-box;\n\n }\n\n .champion-name {\n\n font-family: 'Roboto', sans-serif;\n font-size: 16px;\n color: #918874;\n padding-top: 8px;\n display: block;\n\n }\n\n &:hover {\n\n filter: brightness(110%);\n transform: scale(1.01);\n\n }\n\n }\n\n }\n\n .button-detail {\n\n position: absolute;\n opacity: .6;\n\n }\n\n .button-detail-left {\n\n width: 300px;\n\n }\n\n .button-detail-right {\n\n right: 0;\n transform: scaleX(-1);\n width: 300px;\n\n }\n\n .accept-button-desabled {\n\n cursor: default !important;\n\n img { filter: grayscale(100%); }\n\n &:hover {\n\n transform: scale(1) !important;\n\n img {\n\n filter: brightness(100%) !important;\n filter: grayscale(100%) !important;\n\n }\n\n }\n\n }\n\n .accept-button {\n\n display: flex;\n width: 213px;\n margin: 0 auto;\n justify-content: center;\n z-index: 1;\n position: relative;\n transition-duration: 0.2s;\n margin-top: 12px;\n cursor: pointer;\n\n img {\n \n transition-duration: .2s;\n\n }\n\n span {\n\n color: #f0e6d2;\n font-size: 1.2rem;\n text-transform: uppercase;\n font-weight: bold;\n background: transparent;\n letter-spacing: 2px;\n position: absolute;\n top: 15px;\n z-index: 2;\n\n }\n\n &:hover {\n\n transform: scale(1.05);\n\n img {\n\n filter: brightness(150%);\n\n }\n\n }\n\n }\n\n .lined-circle-wrapper {\n\n height: calc(100vh - 321px);\n position: fixed;\n top: 158px;\n left: calc(50% - 450px);\n z-index: 1;\n overflow: hidden;\n\n .current-champion-selected {\n\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n width: 900px;\n height: 900px;\n z-index: 1;\n position: absolute;\n top: calc(50% - 450px);\n border-radius: 50%;\n filter: brightness(120%);\n\n }\n\n .lined-circle {\n\n width: 900px;\n animation: Rotate 60s infinite linear;\n position: relative;\n top: calc(50% - 450px);\n z-index: 2;\n\n @keyframes Rotate {\n \n 0% {\n\n transform: rotate(0deg);\n\n }\n 100% {\n\n transform: rotate(180deg);\n\n }\n\n }\n\n\n }\n\n }\n\n .champion-finalization {\n\n width: 100%;\n text-align: center;\n position: absolute;\n bottom: 2rem;\n z-index: 2;\n\n .champion-name {\n\n color: white;\n font-size: 1.5rem;\n font-style: italic;\n font-family: 'Roboto';\n\n }\n\n .skins {\n\n padding-top: 1rem;\n\n .skin {\n\n width: 145px;\n height: 85px;\n border: 2px solid #9a8048;\n margin: 0 auto;\n overflow: hidden;\n\n img {\n\n width: 120%;\n\n }\n\n }\n\n }\n\n }\n\n &::after {\n\n content: '';\n width: 425px;\n height: 43px;\n position: absolute;\n top: 57px;\n left: -100px;\n transform: scale(1.1);\n background-image: url('/assets/images/champion-select/announcement-detail.png');\n z-index: 2;\n\n\n }\n\n &::before {\n\n content: '';\n width: 425px;\n height: 43px;\n position: absolute;\n top: 57px;\n right: -100px;\n background-image: url('/assets/images/champion-select/announcement-detail.png');\n transform: scaleX(-1) scale(1.1);\n z-index: 2;\n\n\n }\n\n \n .bar-fifteen-seconds {\n\n animation-name: AnimationBar;\n animation-duration: 15s;\n animation-timing-function: linear;\n\n }\n\n \n .bar-thirty-seconds {\n\n animation-name: AnimationBar;\n animation-duration: 30s;\n animation-timing-function: linear;\n\n }\n\n @keyframes AnimationBar {\n 0% {\n\n width: 100%;\n\n }\n 100% {\n\n width: 0%;\n\n }\n }\n\n}\n\nfooter {\n\n width: 800px;\n margin: 2rem auto 0;\n display: flex;\n align-items: center;\n justify-items: center;\n justify-content: center;\n position: absolute;\n bottom: 1rem;\n left: calc(50% - 400px);\n\n .edit-rune {\n\n width: 35px;\n height: 35px;\n background-color: #1e2328;\n border-radius: 50%;\n border: 2px solid #9d7730;\n transition-duration: .2s;\n cursor: pointer;\n\n &:hover {\n\n transform: scale(1.05);\n filter: brightness(150%);\n\n }\n\n }\n\n select {\n\n background-color: #1e2328;\n font-size: 1rem;\n color: #d4bf90;\n font-weight: bold;\n border: 2px solid #9d7730;\n letter-spacing: 1px;\n padding: .6rem 2rem;\n margin: 0 2rem;\n transition-duration: .2s;\n cursor: pointer;\n\n &:hover {\n\n transform: scale(1.05);\n filter: brightness(150%);\n\n }\n\n }\n\n .summoners-spells {\n\n img {\n \n width: 42px;\n padding: 0 4px\n\n }\n\n }\n\n &::after {\n\n content: '';\n width: 200px;\n height: 2px;\n background-color: #9d773070;\n position: absolute;\n left: 0;\n z-index: 2;\n\n }\n\n &::before {\n\n content: '';\n width: 200px;\n height: 2px;\n background-color: #9d773070;\n position: absolute;\n right: 0;\n z-index: 2;\n\n }\n\n}\n\n\n\n.ahri { background-position: -550px -5px !important }\n.amumu { background-position: -550px -5px !important }\n.annie { background-position: -628px -5px !important }\n.ashe { background-position: -628px -5px !important }\n.azir { background-position: -619px -5px !important }\n.brand { background-position: -619px -5px !important }\n.braum { \n\n background-position: -1095px -5px !important;\n background-size: 2000px !important;\n\n}\n.caitlyn { background-position: -619px -5px !important }\n.camille { \n\n background-position: -1095px -5px !important;\n background-size: 2000px !important;\n\n}\n.cassiopeia { background-position: -619px -5px !important }\n.chogatch { background-position: -460px -5px !important }\n.corki { background-position: -619px -5px !important }\n.diana { background-position: -619px -5px !important }\n.drmundo { background-position: -619px -5px !important }\n.draven { background-position: -619px -5px !important }\n.ekko { background-position: -619px -5px !important }\n.elise { \n\n background-position: -990px -5px !important;\n background-size: 2000px !important;\n\n}\n.ezreal { background-position: -619px -5px !important }\n.fiora { \n\n background-position: -990px -5px !important;\n background-size: 2500px !important;\n\n}\n.fizz { background-position: -619px -5px !important }\n.galio { \n\n background-position: -480px 102px !important;\n background-size: 2000px !important;\n\n}\n.gp { background-position: -619px -5px !important }\n.graves { background-position: -619px 110px !important }\n.illaoi { background-position: -526px 115px !important }\n.irelia { background-position: -325px 115px !important }\n.janna { background-position: -614px -10px !important }\n.jarvan {\n\n background-position: -929px -5px !important;\n background-size: 2000px !important;\n\n}\n.jhin { background-position: -462px 110px !important }\n.jinx { background-position: -568px 5px !important }\n.kaisa { background-position: -237px 102px !important }\n.kalista { background-position: -584px 68px !important }\n.katarina { background-position: -470px -37px !important }\n.kayle { background-position: -363px 118px !important }\n.kayn { background-position: -311px -8px !important }\n.khazix { \n \n background-position: -929px -222px !important;\n background-size: 2000px !important;\n\n}\n.kindred { background-position: -550px !important }\n.kled { background-position: -536px 72px !important }\n.kogmaw { background-position: -597px -61px !important }\n.leona { background-position: -619px 68px !important }\n.lucian { background-position: -619px 43px !important }\n.lux { background-position: -501px 21px !important }\n.malphite { background-position: -573px -51px !important }\n.malzahar { background-position: -501px 104px !important }\n.mordekaiser { background-position: -275px 116px !important }\n.morgana { background-position: -145px 30px !important }\n.nami { background-position: -618px 30px !important }\n.nunu { background-position: -618px -106px !important }\n.orianna { background-position: -618px 107px !important }\n.poppy { background-position: -618px 98px !important }" }, { "path": "src/app/modules/client/game/champion-select/champion-select.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { ChampionSelectComponent } from './champion-select.component';\n\ndescribe('ChampionSelectComponent', () => {\n let component: ChampionSelectComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ ChampionSelectComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(ChampionSelectComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/game/champion-select/champion-select.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { Champions } from 'src/data/champions';\nimport { Player } from 'src/data/player';\nimport { SoundService } from '../../sound.service';\n\n@Component({\n selector: 'app-champion-select',\n templateUrl: './champion-select.component.html',\n styleUrls: ['./champion-select.component.scss']\n})\nexport class ChampionSelectComponent implements OnInit {\n\n player: any = Player\n\n champions: any = Champions\n\n declarePeriod: boolean = false\n banPeriod: boolean = false\n banReviewPeriod: boolean = false\n pickPeriod: boolean = false\n loadOutPeriod: boolean = false\n\n filter: string = 'all'\n\n timerActive: boolean = false\n timerNumber: number = 15\n\n currentChampionSelected: any = null\n currentChampionSelectedIndex: number = null\n currentChampionBanSelected: any = null\n currentChampionBanSelectedIndex: number = null\n\n playerPick: boolean = false\n allyPicks: any = []\n enemyPicks: any = []\n\n playerBan: any = null\n allyBans: any = []\n enemyBans: any = []\n\n championsAvaliables: any = []\n\n\n constructor(private router: Router,\n private soundService: SoundService) {\n\n }\n\n ngOnInit(): void {\n\n this.pauseSound('matchFound')\n\n setTimeout( () => { this.playSound('championSelectIntro') }, 400)\n\n setTimeout( () => {\n\n document.getElementById('player1').classList.remove('ally-team-champs-intro-animation')\n\n setTimeout( () => {\n\n document.getElementById('player2').classList.remove('ally-team-champs-intro-animation')\n\n setTimeout( () => {\n\n document.getElementById('player3').classList.remove('ally-team-champs-intro-animation')\n document.getElementById('assigned').style.opacity = '1' \n\n setTimeout( () => {\n \n document.getElementById('player4').classList.remove('ally-team-champs-intro-animation')\n\n setTimeout( () => {\n \n document.getElementById('player5').classList.remove('ally-team-champs-intro-animation')\n\n setTimeout( () => {\n\n this.initDeclarePeriod()\n\n setTimeout( () => {\n\n this.timerActive = false\n\n document.getElementById('allyBarWrapper').classList.remove('blue-bar')\n document.getElementById('enemyBarWrapper').classList.remove('blue-bar')\n document.getElementById('allyBar').classList.remove('bar-fifteen-seconds')\n document.getElementById('enemyBar').classList.remove('bar-fifteen-seconds')\n document.getElementById('allyBarWrapper').classList.add('red-bar')\n document.getElementById('enemyBarWrapper').classList.add('red-bar')\n\n setTimeout( () => {\n \n this.initBanPeriod()\n\n setTimeout( () => {\n\n if(this.timerActive == true) {\n\n this.timerActive = false \n\n }\n\n if(this.playerBan == null) {\n\n this.router.navigateByUrl('/client/play/lobby')\n\n }\n\n }, 31000)\n \n }, 100)\n\n }, 15000)\n\n },1000 )\n \n },700 )\n \n },800 )\n\n },500 )\n\n },700 )\n\n }, 1700 )\n\n }\n\n\n\n initDeclarePeriod() {\n\n this.declarePeriod = true\n\n this.playSound('championSelectChampionsVisible')\n\n document.getElementById('assigned').style.opacity = '0' \n document.getElementById('overlayBackground').style.opacity = '.6' \n document.getElementById('mainContent').style.opacity = '1' \n document.getElementById('mainContent').style.zIndex = '1' \n document.getElementById('player1').classList.add('ally-team-champs-border')\n document.getElementById('player2').classList.add('ally-team-champs-border')\n document.getElementById('player3').classList.add('ally-team-champs-border')\n document.getElementById('player4').classList.add('ally-team-champs-border')\n document.getElementById('player5').classList.add('ally-team-champs-border')\n\n document.getElementById('allyBarWrapper').classList.add('blue-bar')\n document.getElementById('enemyBarWrapper').classList.add('blue-bar')\n document.getElementById('allyBar').classList.add('bar-fifteen-seconds')\n document.getElementById('enemyBar').classList.add('bar-fifteen-seconds')\n\n this.timerActive = true\n this.initTimer()\n\n }\n\n\n\n initBanPeriod() {\n\n this.declarePeriod = false\n this.banPeriod = true\n\n this.playSound('championSelectBanIntro')\n\n document.getElementById('overlayBackground').classList.add('overlay-background-ban')\n document.getElementById('allyBar').classList.add('bar-thirty-seconds')\n document.getElementById('enemyBar').classList.add('bar-thirty-seconds')\n document.getElementById('enemyTeamChamps').classList.add('enemy-team-champs-visible')\n\n this.timerNumber = 30\n this.timerActive = true\n this.initTimer()\n\n }\n\n\n\n initBanReviewPeriod() {\n\n document.getElementById('allyBarWrapper').style.opacity = '0'\n document.getElementById('enemyBarWrapper').style.opacity = '0'\n document.getElementById('allyBar').classList.remove('bar-thirty-seconds')\n this.banPeriod = false\n this.banReviewPeriod = true\n this.timerActive = false\n this.timerNumber = 30\n\n setTimeout( () => { this.playSound('championSelectBanReviewIntro') }, 4000 )\n\n do {\n\n let randomChampion = this.champions[Math.floor(Math.random() * this.champions.length)]\n\n this.allyBans.push(randomChampion)\n\n } while( this.allyBans.length < 4 )\n\n do {\n\n let randomChampion = this.champions[Math.floor(Math.random() * this.champions.length)]\n\n this.enemyBans.push(randomChampion)\n\n } while( this.enemyBans.length < 5 )\n\n setTimeout( () => {\n\n for(let ban of this.enemyBans) {\n \n this.champions[this.champions.indexOf(ban)].selectable = false\n \n }\n\n for(let ban of this.allyBans) {\n \n this.champions[this.champions.indexOf(ban)].selectable = false\n \n }\n\n this.championsAvaliables = this.champions.filter(champion => champion.selectable == true)\n\n do {\n\n let randomChampion = this.championsAvaliables[Math.floor(Math.random() * this.championsAvaliables.length)]\n \n this.enemyPicks.push(randomChampion)\n \n } while( this.enemyPicks.length < 5 )\n\n do {\n\n let randomChampion = this.championsAvaliables[Math.floor(Math.random() * this.championsAvaliables.length)]\n \n this.allyPicks.push(randomChampion)\n \n } while( this.allyPicks.length < 4 )\n\n },2000 )\n\n setTimeout( () => {\n\n document.getElementById('overlayBackground').classList.remove('overlay-background-ban')\n document.getElementById('bans').style.opacity = '0'\n document.getElementById('bans').style.zIndex = '-2'\n document.getElementById('chamiponList').style.opacity = '1'\n document.getElementById('chamiponList').style.zIndex = '2'\n\n this.initPickPeriod()\n\n }, 7000 )\n\n\n }\n\n\n\n initPickPeriod() {\n\n this.playSound('championSelectPickIntro')\n this.playSound('pickPeriodIntro')\n\n document.getElementById('allyBarWrapper').classList.remove('red-bar')\n document.getElementById('allyBarWrapper').classList.add('blue-bar')\n document.getElementById('allyBarWrapper').style.opacity = '1'\n document.getElementById('allyBar').classList.add('bar-thirty-seconds')\n this.banReviewPeriod = false\n this.pickPeriod = true\n this.timerNumber = 30\n this.timerActive = true\n\n setTimeout(()=> { \n\n if(this.playerPick == false) {\n \n this.router.navigateByUrl('/client/play/lobby')\n\n }\n\n }, 30000)\n\n }\n\n\n\n initLoadOutPeriod() {\n\n this.playSound('championSelectLoadoutIntro')\n\n this.loadOutPeriod = true\n document.getElementById('allyBar').classList.add('bar-thirty-seconds')\n document.getElementById('allyBar').style.width = '100%'\n document.getElementById('enemyBarWrapper').classList.add('blue-bar')\n document.getElementById('enemyBar').classList.add('bar-thirty-seconds')\n document.getElementById('enemyBar').style.width = '100%'\n\n localStorage.setItem('playerPick', JSON.stringify(this.currentChampionSelected))\n localStorage.setItem('allyTeam', JSON.stringify(this.allyPicks))\n localStorage.setItem('enemyTeam', JSON.stringify(this.enemyPicks))\n\n setTimeout(()=> { \n\n this.router.navigateByUrl('/client/game/loading')\n\n }, 30000)\n\n }\n\n\n\n initTimer() {\n\n setTimeout( () => {\n\n this.timerNumber = this.timerNumber - 1\n\n if(this.timerNumber > 0) {\n\n if(this.timerNumber < 6) {\n\n if(this.declarePeriod == true) {\n\n this.playSound('championSelectTimerCount')\n\n } else {\n\n this.playSound('championSelectTimer')\n\n }\n\n }\n\n this.initTimer()\n\n }\n\n }, 1000)\n\n\n }\n\n\n\n pickEnemyChampions() {\n\n do {\n\n let randomChampion = this.champions[Math.floor(Math.random() * this.champions.length)]\n\n this.enemyBans.push(randomChampion)\n\n } while( this.enemyPicks.length < 5 )\n\n setTimeout( () => {\n\n for(let ban of this.enemyBans) {\n \n this.champions[this.champions.indexOf(ban)].selectable = false\n \n }\n\n }, 2000)\n\n }\n\n\n\n selectChampion(champion, index) {\n\n if(this.champions[index].selectable == true) {\n\n if(this.declarePeriod || this.pickPeriod) {\n\n this.currentChampionSelected = champion\n this.currentChampionSelectedIndex = index\n\n } else if(this.banPeriod) {\n\n this.currentChampionBanSelected = champion\n this.currentChampionBanSelectedIndex = index\n\n }\n\n }\n\n }\n\n\n\n banChampion() {\n\n if(this.currentChampionBanSelected !== null) {\n\n this.playSound('changeGameModeButtonClick')\n this.playSound('championSelectBan')\n \n document.getElementById('chamiponList').style.opacity = '0'\n document.getElementById('chamiponList').style.zIndex = '-1'\n\n this.playerBan = this.currentChampionBanSelected\n this.champions[this.currentChampionBanSelectedIndex].selectable = false\n\n this.initBanReviewPeriod()\n\n }\n\n }\n\n\n\n pickChampion() {\n\n if(this.currentChampionSelected !== null) {\n\n this.playSound('championSelectPick')\n\n this.playerPick = true\n this.pickPeriod = false\n this.timerActive = false\n this.timerNumber = 30\n document.getElementById('chamiponList').style.opacity = '0'\n document.getElementById('chamiponList').style.zIndex = '-2'\n document.getElementById('allyBar').classList.remove('bar-thirty-seconds')\n document.getElementById('enemyBar').classList.remove('bar-thirty-seconds')\n document.getElementById('enemyBarWrapper').classList.remove('red-bar')\n\n setTimeout(()=>{\n\n this.initLoadOutPeriod()\n\n },1)\n\n }\n\n }\n\n\n\n changeFilter(filter) {\n\n this.playSound('championSelectChampionsFilter')\n\n if(this.filter == filter) {\n\n this.filter = 'all'\n\n } else {\n\n this.filter = filter\n\n }\n\n }\n\n adjustChampion(champion) {\n\n switch (champion) {\n case 'Ahri':\n return 'ahri'\n case 'Amumu':\n return 'amumu'\n case 'Annie':\n return 'annie'\n case 'Ashe':\n return 'ashe'\n case 'Azir':\n return 'azir'\n case 'Brand':\n return 'brand'\n case 'Braum':\n return 'braum'\n case 'Caitlyn':\n return 'caitlyn'\n case 'Camille':\n return 'camille'\n case 'Cassiopeia':\n return 'cassiopeia'\n case \"Cho'Gatch\":\n return 'chogatch'\n case 'Corki':\n return 'corki'\n case 'Diana':\n return 'diana'\n case 'Dr.Mundo':\n return 'drmundo'\n case 'Draven':\n return 'draven'\n case 'Ekko':\n return 'ekko'\n case 'Elise':\n return 'elise'\n case 'Ezreal':\n return 'ezreal'\n case 'Fiora':\n return 'fiora'\n case 'Fizz':\n return 'fizz'\n case 'Galio':\n return 'galio'\n case 'Gangplank':\n return 'gp'\n case 'Garen':\n return 'gp'\n case 'Gnar':\n return 'gp'\n case 'Gragas':\n return 'gp'\n case 'Graves':\n return 'graves'\n case 'Hecarim':\n return 'graves'\n case 'Heimerdinger':\n return 'gp'\n case 'Illaoi':\n return 'illaoi'\n case 'Irelia':\n return 'irelia'\n case 'Janna':\n return 'janna'\n case 'Jarvan IV':\n return 'jarvan'\n case 'Jax':\n return 'jarvan'\n case 'Jayce':\n return 'jarvan'\n case 'Jhin':\n return 'jhin'\n case 'Jinx':\n return 'jinx'\n case \"Kai'Sa\":\n return 'kaisa'\n case 'Kalista':\n return 'kalista'\n case 'Karma':\n return 'kalista'\n case 'Karthus':\n return 'kalista'\n case 'Kassadin':\n return 'kalista'\n case 'Katarina':\n return 'katarina'\n case 'Kayle':\n return 'kayle'\n case 'Kayn':\n return 'kayn'\n case 'Kennen':\n return 'jarvan'\n case \"Kha'Zix\":\n return 'khazix'\n case 'Kindred':\n return 'kindred'\n case 'Kled':\n return 'kled'\n case `Kog'Maw`:\n return 'kogmaw'\n case 'Leona':\n return 'leona'\n case 'Lissandra':\n return 'leona'\n case 'Lucian':\n return 'lucian'\n case 'Lulu':\n return 'leona'\n case 'Lux':\n return 'lux'\n case 'Malphite':\n return 'malphite'\n case 'Malzahar':\n return 'malzahar'\n case 'Maokai':\n return 'lucian'\n case 'Master Yi':\n return 'lux'\n case 'Miss Fortune':\n return 'lux'\n case 'Mordekaiser':\n return 'mordekaiser'\n case 'Morgana':\n return 'morgana'\n case 'Nami':\n return 'nami'\n case 'Nasus':\n return 'nami'\n case 'Nautilus':\n return 'nami'\n case 'Nidalee':\n return 'nami'\n case 'Nocturne':\n return 'nami'\n case 'Nunu & Willump':\n return 'nunu'\n case 'Orianna':\n return 'orianna'\n case 'Poppy':\n return 'poppy'\n case 'Quinn':\n return 'three-hundred-sixty-pixels'\n case 'Rakan':\n return 'three-hundred-sixty-pixels'\n case 'Rammus':\n return 'three-hundred-sixty-pixels'\n case 'Rengar':\n return 'three-hundred-sixty-pixels'\n case 'Riven':\n return 'three-hundred-pixels'\n case 'Rumble':\n return 'three-hundred-sixty-pixels'\n case 'Ryze':\n return 'three-hundred-pixels'\n case 'Sejuani':\n return 'three-hundred-sixty-pixels'\n case 'Shaco':\n return 'three-hundred-pixels'\n case 'Shen':\n return 'three-hundred-pixels'\n case 'Shyvana':\n return 'three-hundred-twenty-five-pixels'\n case 'Singed':\n return 'three-hundred-twenty-five-pixels'\n case 'Sion':\n return 'three-hundred-twenty-five-pixels'\n case 'Sivir':\n return 'three-hundred-sixty-pixels'\n case 'Skarner':\n return 'three-hundred-sixty-pixels'\n case 'Skarner':\n return 'three-hundred-sixty-pixels'\n case 'Sona':\n return 'three-hundred-sixty-pixels'\n case 'Swain':\n return 'three-hundred-sixty-pixels'\n case 'Syndra':\n return 'three-hundred-pixels'\n case 'Tahm Kench':\n return 'three-hundred-twenty-five-pixels'\n case 'Taliyah':\n return 'three-hundred-twenty-five-pixels'\n case 'Talon':\n return 'three-hundred-sixty-pixels'\n case 'Taric':\n return 'three-hundred-pixels'\n case 'Teemo':\n return 'three-hundred-pixels'\n case 'Thresh':\n return 'three-hundred-sixty-pixels'\n case 'Tristana':\n return 'three-hundred-sixty-pixels'\n case 'Trundle':\n return 'three-hundred-sixty-pixels'\n case 'Tryndamere':\n return 'three-hundred-pixels'\n case 'Twisted Fate':\n return 'three-hundred-pixels'\n case 'Vayne':\n return 'three-hundred-pixels'\n case 'Veigar':\n return 'three-hundred-sixty-pixels'\n case 'Vi':\n return 'three-hundred-sixty-pixels'\n case 'Viego':\n return 'three-hundred-sixty-pixels'\n case 'Viktor':\n return 'three-hundred-sixty-pixels'\n case 'Vladimir':\n return 'three-hundred-sixty-pixels'\n case 'Volibear':\n return 'three-hundred-sixty-pixels'\n case 'Warwick':\n return 'three-hundred-sixty-pixels'\n case 'Wukong':\n return 'three-hundred-sixty-pixels'\n case 'Xayah':\n return 'three-hundred-sixty-pixels'\n case 'Yasuo':\n return 'three-hundred-pixels'\n case 'Yorick':\n return 'three-hundred-sixty-pixels'\n case 'Yuumi':\n return 'four-hundred-seventy-pixels'\n case 'Zac':\n return 'three-hundred-sixty-pixels'\n case 'Zed':\n return 'three-hundred-twenty-five-pixels'\n case 'Ziggs':\n return 'three-hundred-pixels'\n case 'Zyra':\n return 'three-hundred-pixels'\n }\n\n }\n\n\n\n playSound(sound) {\n\n this.soundService.playSound(sound)\n\n }\n\n\n\n pauseSound(sound) {\n\n this.soundService.pauseSound(sound)\n\n }\n\n}\n" }, { "path": "src/app/modules/client/game/game-routing.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { ChampionSelectComponent } from './champion-select/champion-select.component';\nimport { LoadingComponent } from './loading/loading.component';\n\nconst routes: Routes = [\n\n { path: 'champion-select', component: ChampionSelectComponent },\n { path: 'loading', component: LoadingComponent }\n\n];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule]\n})\nexport class GameRoutingModule { }\n" }, { "path": "src/app/modules/client/game/game.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { GameRoutingModule } from './game-routing.module';\nimport { ChampionSelectComponent } from './champion-select/champion-select.component';\nimport { LoadingComponent } from './loading/loading.component';\n\n\n@NgModule({\n declarations: [ChampionSelectComponent, LoadingComponent],\n imports: [\n CommonModule,\n GameRoutingModule\n ]\n})\nexport class GameModule { }\n" }, { "path": "src/app/modules/client/game/loading/loading.component.html", "content": "\n\nBack to home\n\n
\n\n
\n\n
    \n
  • \n
    \n
    \n {{allyTeam[0].name}}\n \n Teste\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n Diamound III\n 87 lp\n
    \n
    \n \n 2.000.000\n
    \n
    \n
    \n
    • \n
  • \n
    \n
    \n {{allyTeam[1].name}}\n \n Teste\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n Diamound III\n 87 lp\n
    \n
    \n \n 2.000.000\n
    \n
    \n
    \n
    • \n
  • \n
    \n
    \n {{playerPick.name}}\n \n {{player.name}}\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n Diamound III\n 87 lp\n
    \n
    \n \n 2.000.000\n
    \n
    \n
    \n
    • \n
  • \n
    \n
    \n {{allyTeam[2].name}}\n \n Teste\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n Diamound III\n 87 lp\n
    \n
    \n \n 2.000.000\n
    \n
    \n
    \n
    • \n
  • \n
    \n
    \n {{allyTeam[3].name}}\n \n Teste\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n Diamound III\n 87 lp\n
    \n
    \n \n 2.000.000\n
    \n
    \n
    \n
    • \n
\n\n
    \n
  • \n
    \n
    \n {{enemy.name}}\n \n Teste\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n Diamound I\n 27 lp\n
    \n
    \n \n 25.200\n
    \n
    \n
    \n
    • \n
\n\n
\n\n
" }, { "path": "src/app/modules/client/game/loading/loading.component.scss", "content": ".video-background {\n \n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n transform: scale(1.8);\n\n}\n\n.back-home {\n\n right: 1rem !important;\n opacity: 1;\n\n}\n\na {\n\n color: #938f83;\n background-color: #1e2328;\n text-decoration: none;\n text-transform: uppercase;\n font-weight: bold;\n margin-top: 2rem;\n padding: 0.8rem 2rem;\n display: inline-block;\n border: 2px solid #c8aa6d;\n transition-duration: 0.2s;\n z-index: 2;\n cursor: pointer;\n position: fixed;\n transition-duration: 1s;\n bottom: 1rem;\n right: -12rem;\n opacity: 0;\n\n &:hover {\n\n transform: scale(1.1);\n filter: brightness(120%);\n\n }\n\n}\n\n.container {\n\n width: 100%;\n height: 100vh;\n backdrop-filter: blur(6px);\n background: rgb(0,224,255);\n background: linear-gradient(180deg, rgba(0, 225, 255, 0.200) 0%, rgba(135,105,139,0) 50%, rgba(255,0,36,0.200) 100%);\n overflow: hidden;\n\n .teams {\n\n display: flex;\n flex-flow: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n transition-duration: .2s;\n\n .team {\n\n color: white;\n font-size: 18px;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-around;\n padding: 2rem 0;\n\n }\n\n li {\n\n background-size: cover;\n background-position: center;\n height: 400px;\n border: solid 2px #88652b;\n width: 250px;\n margin: 0 1rem;\n transition-duration: .5s;\n transform: scale(1);\n opacity: 0;\n\n .wrapper {\n\n overflow: hidden;\n width: 100%;\n height: 100%;\n\n }\n\n .informations {\n\n width: 100%;\n height: 510px;\n background: rgb(255,0,36);\n background: linear-gradient(180deg, #ff002400 0%, #000000a8 30%);\n margin-top: 282px;\n text-align: center;\n position: relative;\n transition-duration: .5s;\n\n .profile-image {\n\n display: block;\n width: 50px;\n margin: .8rem auto 4px;\n border-radius: 50%;\n border: 2px solid #c69f43;\n\n }\n\n .player-name {\n\n font-size: 14px;\n padding-top: 12px;\n\n }\n\n .current-player {\n\n color: #c69f43;\n\n }\n\n .summoners-spells {\n\n position: absolute;\n top: 42px;\n left: 2px;\n\n img {\n\n width: 34px;\n margin: 0 .2rem;\n border: 2px solid #6464627c;\n box-sizing: border-box;\n\n }\n\n }\n\n .runes {\n\n position: absolute;\n top: 30px;\n right: -14px;\n\n img {\n\n background-color: #000000b9;\n border-radius: 50%;\n border: 2px solid #c69f43;\n padding: 2px;\n\n }\n\n .primary-rune {\n\n width: 40px;\n position: relative;\n z-index: 1;\n\n }\n\n .secondary-rune {\n\n width: 25px;\n position: relative;\n z-index: 2;\n top: 10px;\n left: -20px;\n\n }\n\n\n }\n\n &::before {\n\n content: '';\n position: absolute;\n top: 1.2rem;\n left: 0;\n background-image: url('./../../../../../assets/images/loading-screen/loading-screen-detail.png');\n width: 85px;\n height: 15px;\n\n }\n\n &::after {\n\n content: '';\n position: absolute;\n top: 1.2rem;\n right: 0;\n background-image: url('./../../../../../assets/images/loading-screen/loading-screen-detail.png');\n width: 85px;\n height: 15px;\n transform: rotateY(180deg);\n\n }\n\n .rank {\n\n img {\n \n padding-top: 32px;\n width: 160px;\n }\n\n span {\n\n color: #ffffffad;\n font-size: 18px;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 2px;\n display: block;\n\n }\n\n .tier {\n\n font-size: 18px;\n\n }\n\n .lp {\n\n padding-top: 12px;\n font-size: 14px;\n\n }\n\n }\n\n .maestry {\n\n img {\n \n padding-top: 32px;\n width: 60px;\n \n }\n\n .points {\n\n color: #ffffffad;\n font-size: 12px;\n display: block;\n\n }\n\n }\n\n }\n\n &:hover {\n\n transform: scale(1.1) !important;\n box-shadow: 0 0 60px rgba(0, 0, 0, 0.500);\n\n .informations {\n\n transform: translateY(-390px);\n\n }\n\n }\n\n }\n\n .blue-team {\n\n position: relative;\n left: -12px;\n\n li {\n\n animation: FadeInDown 1s forwards;\n position: relative;\n\n @keyframes FadeInDown {\n \n 0% {\n\n opacity: 0;\n top: -80px;\n\n }\n 100% {\n\n opacity: 1;\n top: 0;\n\n }\n\n }\n\n &:nth-child(2) {\n\n animation-delay: .2s;\n\n }\n\n &:nth-child(3) {\n\n animation-delay: .3s;\n\n }\n\n &:nth-child(4) {\n\n animation-delay: .4s;\n\n }\n\n &:nth-child(5) {\n\n animation-delay: .5s;\n\n }\n\n &::after {\n\n content: '';\n background-image: url('./../../../../../assets/images/loading-screen/border-detail.png');\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 250px;\n height: 15px;\n position: absolute;\n bottom: -15px;\n\n }\n\n }\n\n }\n\n .red-team {\n\n position: relative;\n right: -12px;\n\n li {\n\n animation: FadeInUp 1s forwards;\n position: relative;\n\n @keyframes FadeInUp {\n \n 0% {\n\n opacity: 0;\n bottom: -80px;\n\n }\n 100% {\n\n opacity: 1;\n bottom: 0;\n\n }\n\n }\n\n &:nth-child(1) {\n\n animation-delay: .5s;\n\n }\n\n &:nth-child(2) {\n\n animation-delay: .4s;\n\n }\n\n &:nth-child(3) {\n\n animation-delay: .3s;\n\n }\n\n &:nth-child(4) {\n\n animation-delay: .2s;\n\n }\n\n &::after {\n\n content: '';\n background-image: url('./../../../../../assets/images/loading-screen/border-detail.png');\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 250px;\n height: 15px;\n position: absolute;\n top: -15px;\n transform: rotateX(160deg);\n\n }\n\n }\n\n }\n\n }\n\n}\n\n.two-hundred-sixty-five-pixels {\n\n background-position: 265px !important;\n\n}\n\n.two-hundred-seventy-five-pixels {\n\n background-position: 275px !important;\n\n}\n\n.two-hundred-ninety-pixels {\n\n background-position: 290px !important;\n\n}\n\n.two-hundred-ninety-five-pixels {\n\n background-position: 295px !important;\n\n}\n\n.three-hundred-pixels {\n\n background-position: 300px !important;\n\n}\n\n.three-hundred-ten-pixels {\n\n background-position: 310px !important;\n\n}\n\n.three-hundred-fifteen-pixels {\n\n background-position: 315px !important;\n\n}\n\n.three-hundred-twenty-five-pixels {\n\n background-position: 325px !important;\n\n}\n\n.three-hundred-fourty-five-pixels {\n\n background-position: 345px !important;\n\n}\n\n.three-hundred-sixty-pixels {\n\n background-position: 360px !important;\n\n}\n\n.three-hundred-ninety-pixels {\n\n background-position: 390px !important;\n\n}\n\n.four-hundred-pixels {\n\n background-position: 400px !important;\n\n}\n\n.four-hundred-fifteen-pixels {\n\n background-position: 415px !important;\n\n}\n\n.four-hundred-thirty-pixels {\n\n background-position: 430px !important;\n\n}\n\n.four-hundred-forty-pixels {\n\n background-position: 440px !important;\n\n}\n\n.four-hundred-seventy-pixels {\n\n background-position: 470px !important;\n\n}\n\n.five-hundred-forty-pixels {\n\n background-position: 540px !important;\n\n}" }, { "path": "src/app/modules/client/game/loading/loading.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { LoadingComponent } from './loading.component';\n\ndescribe('LoadingComponent', () => {\n let component: LoadingComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ LoadingComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(LoadingComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/game/loading/loading.component.ts", "content": "import { Component, HostListener, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-loading',\n templateUrl: './loading.component.html',\n styleUrls: ['./loading.component.scss']\n})\nexport class LoadingComponent implements OnInit {\n\n player: any = localStorage.getItem('username')\n playerPick: any = JSON.parse(localStorage.getItem('playerPick'))\n allyTeam: any = JSON.parse(localStorage.getItem('allyTeam'))\n enemyTeam: any = JSON.parse(localStorage.getItem('enemyTeam'))\n backHome: boolean = false\n\n constructor() { }\n\n ngOnInit(): void {\n\n setTimeout(() => {this.backHome = true}, 2000)\n\n }\n\n\n\n adjustChampion(champion) {\n\n switch (champion) {\n case 'Ahri':\n return 'three-hundred-sixty-pixels'\n case 'Aatrox':\n return 'three-hundred-sixty-pixels'\n case 'Alistar':\n return 'three-hundred-ninety-pixels'\n case 'Amumu':\n return 'three-hundred-sixty-pixels'\n case 'Annie':\n return 'two-hundred-sixty-five-pixels'\n case 'Ashe':\n return 'three-hundred-ten-pixels'\n case 'Aurelion Sol':\n return 'four-hundred-thirty-pixels'\n case 'Azir':\n return 'three-hundred-fifteen-pixels'\n case 'Bard':\n return 'three-hundred-sixty-pixels'\n case 'Blitzcrank':\n return 'three-hundred-twenty-five-pixels'\n case 'Brand':\n return 'two-hundred-seventy-five-pixels'\n case 'Braum':\n return 'two-hundred-ninety-pixels'\n case 'Caitlyn':\n return 'two-hundred-ninety-five-pixels'\n case 'Camille':\n return 'two-hundred-ninety-five-pixels'\n case 'Cassiopeia':\n return 'three-hundred-sixty-pixels'\n case \"Cho'Gatch\":\n return 'three-hundred-sixty-pixels'\n case 'Corki':\n return 'three-hundred-fifteen-pixels'\n case 'Darius':\n return 'three-hundred-ninety-pixels'\n case 'Diana':\n return 'three-hundred-fifteen-pixels'\n case 'Dr.Mundo':\n return 'three-hundred-fifteen-pixels'\n case 'Draven':\n return 'three-hundred-twenty-five-pixels'\n case 'Ekko':\n return 'three-hundred-twenty-five-pixels'\n case 'Elise':\n return 'three-hundred-twenty-five-pixels'\n case 'Evelynn':\n return 'four-hundred-forty-pixels'\n case 'Ezreal':\n return 'three-hundred-sixty-pixels'\n case 'Fiddlesticks':\n return 'five-hundred-forty-pixels'\n case 'Fiora':\n return 'three-hundred-sixty-pixels'\n case 'Fizz':\n return 'three-hundred-pixels'\n case 'Galio':\n return 'four-hundred-seventy-pixels'\n case 'Gangplank':\n return 'three-hundred-pixels'\n case 'Garen':\n return 'three-hundred-pixels'\n case 'Gnar':\n return 'three-hundred-pixels'\n case 'Gragas':\n return 'three-hundred-sixty-pixels'\n case 'Graves':\n return 'three-hundred-sixty-pixels'\n case 'Hecarim':\n return 'three-hundred-pixels'\n case 'Heimerdinger':\n return 'three-hundred-pixels'\n case 'Illaoi':\n return 'three-hundred-fourty-five-pixels'\n case 'Irelia':\n return 'four-hundred-forty-pixels'\n case 'Ivern':\n return 'four-hundred-forty-pixels'\n case 'Janna':\n return 'two-hundred-ninety-pixels'\n case 'Jarvan IV':\n return 'three-hundred-fourty-five-pixels'\n case 'Jax':\n return 'three-hundred-fourty-five-pixels'\n case 'Jayce':\n return 'three-hundred-fourty-five-pixels'\n case 'Jhin':\n return 'four-hundred-fifteen-pixels'\n case 'Jinx':\n return 'three-hundred-fourty-five-pixels'\n case \"Kai'Sa\":\n return 'four-hundred-seventy-pixels'\n case 'Kalista':\n return 'three-hundred-sixty-pixels'\n case 'Karma':\n return 'three-hundred-pixels'\n case 'Karthus':\n return 'four-hundred-pixels'\n case 'Kassadin':\n return 'three-hundred-ten-pixels'\n case 'Katarina':\n return 'three-hundred-sixty-pixels'\n case 'Kayle':\n return 'four-hundred-thirty-pixels'\n case 'Kayle':\n return 'four-hundred-thirty-pixels'\n case 'Kennen':\n return 'three-hundred-twenty-five-pixels'\n case \"Kha'Zix\":\n return 'three-hundred-twenty-five-pixels'\n case 'Kindred':\n return 'three-hundred-twenty-five-pixels'\n case 'Kled':\n return 'three-hundred-pixels'\n case \"Kog'Maw\":\n return 'three-hundred-pixels'\n case 'LeBlanc':\n return 'three-hundred-twenty-five-pixels'\n case 'Lee Sin':\n return 'three-hundred-sixty-pixels'\n case 'Leona':\n return 'two-hundred-sixty-five-pixels'\n case 'Lissandra':\n return 'three-hundred-twenty-five-pixels'\n case 'Lucian':\n return 'three-hundred-twenty-five-pixels'\n case 'Lulu':\n return 'three-hundred-twenty-five-pixels'\n case 'Lux':\n return 'three-hundred-sixty-pixels'\n case 'Malphite':\n return 'three-hundred-sixty-pixels'\n case 'Malzahar':\n return 'four-hundred-pixels'\n case 'Maokai':\n return 'four-hundred-pixels'\n case 'Master Yi':\n return 'two-hundred-ninety-pixels'\n case 'Miss Fortune':\n return 'two-hundred-ninety-pixels'\n case 'Morgana':\n return 'five-hundred-forty-pixels'\n case 'Nami':\n return 'two-hundred-ninety-pixels'\n case 'Nasus':\n return 'three-hundred-sixty-pixels'\n case 'Nautilus':\n return 'three-hundred-pixels'\n case 'Nidalee':\n return 'three-hundred-pixels'\n case 'Nocturne':\n return 'three-hundred-sixty-pixels'\n case 'Nunu & Willump':\n return 'three-hundred-sixty-pixels'\n case 'Olaf':\n return 'three-hundred-sixty-pixels'\n case 'Orianna':\n return 'two-hundred-ninety-pixels'\n case 'Poppy':\n return 'three-hundred-sixty-pixels'\n case 'Quinn':\n return 'three-hundred-sixty-pixels'\n case 'Rakan':\n return 'three-hundred-sixty-pixels'\n case 'Rammus':\n return 'three-hundred-sixty-pixels'\n case 'Rengar':\n return 'three-hundred-sixty-pixels'\n case 'Riven':\n return 'three-hundred-pixels'\n case 'Rumble':\n return 'three-hundred-sixty-pixels'\n case 'Ryze':\n return 'three-hundred-pixels'\n case 'Sejuani':\n return 'three-hundred-sixty-pixels'\n case 'Shaco':\n return 'three-hundred-pixels'\n case 'Shen':\n return 'three-hundred-pixels'\n case 'Shyvana':\n return 'three-hundred-twenty-five-pixels'\n case 'Singed':\n return 'three-hundred-twenty-five-pixels'\n case 'Sion':\n return 'three-hundred-twenty-five-pixels'\n case 'Sivir':\n return 'three-hundred-sixty-pixels'\n case 'Skarner':\n return 'three-hundred-sixty-pixels'\n case 'Skarner':\n return 'three-hundred-sixty-pixels'\n case 'Sona':\n return 'three-hundred-sixty-pixels'\n case 'Swain':\n return 'three-hundred-sixty-pixels'\n case 'Syndra':\n return 'three-hundred-pixels'\n case 'Tahm Kench':\n return 'three-hundred-twenty-five-pixels'\n case 'Taliyah':\n return 'three-hundred-twenty-five-pixels'\n case 'Talon':\n return 'three-hundred-sixty-pixels'\n case 'Taric':\n return 'three-hundred-pixels'\n case 'Teemo':\n return 'three-hundred-pixels'\n case 'Thresh':\n return 'three-hundred-sixty-pixels'\n case 'Tristana':\n return 'three-hundred-sixty-pixels'\n case 'Trundle':\n return 'three-hundred-sixty-pixels'\n case 'Tryndamere':\n return 'three-hundred-pixels'\n case 'Twisted Fate':\n return 'three-hundred-pixels'\n case 'Vayne':\n return 'three-hundred-pixels'\n case 'Veigar':\n return 'three-hundred-sixty-pixels'\n case 'Vi':\n return 'three-hundred-sixty-pixels'\n case 'Viego':\n return 'three-hundred-sixty-pixels'\n case 'Viktor':\n return 'three-hundred-sixty-pixels'\n case 'Vladimir':\n return 'three-hundred-sixty-pixels'\n case 'Volibear':\n return 'three-hundred-sixty-pixels'\n case 'Warwick':\n return 'three-hundred-sixty-pixels'\n case 'Wukong':\n return 'three-hundred-sixty-pixels'\n case 'Xayah':\n return 'three-hundred-sixty-pixels'\n case 'Yasuo':\n return 'three-hundred-pixels'\n case 'Yorick':\n return 'three-hundred-sixty-pixels'\n case 'Yuumi':\n return 'four-hundred-seventy-pixels'\n case 'Zac':\n return 'three-hundred-sixty-pixels'\n case 'Zed':\n return 'three-hundred-twenty-five-pixels'\n case 'Ziggs':\n return 'three-hundred-pixels'\n case 'Zyra':\n return 'three-hundred-pixels'\n }\n\n }\n\n @HostListener('document:mousemove', ['$event']) \n\n onMouseMove(mouseTrack) {\n\n let offsetX = mouseTrack.pageX / 100\n \n document.getElementById('blueTeam').style.transform = `translateX(${offsetX}px)`\n document.getElementById('redTeam').style.transform = `translateX(-${offsetX}px)`\n\n }\n\n}\n" }, { "path": "src/app/modules/client/home/home/home.component.html", "content": "\n\n
\n \n
" }, { "path": "src/app/modules/client/home/home/home.component.scss", "content": "@import './../../../../../assets/scss/menu-component.scss'" }, { "path": "src/app/modules/client/home/home/home.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { HomeComponent } from './home.component';\n\ndescribe('HomeComponent', () => {\n let component: HomeComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ HomeComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(HomeComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/home/home/home.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\nimport { SoundService } from '../../sound.service';\n\n@Component({\n selector: 'app-home',\n templateUrl: './home.component.html',\n styleUrls: ['./home.component.scss']\n})\nexport class HomeComponent implements OnInit {\n\n constructor( private soundService: SoundService ) {}\n\n ngOnInit(): void {\n }\n\n\n\n playSound(sound) {\n\n this.soundService.playSound(sound)\n\n }\n\n}\n" }, { "path": "src/app/modules/client/home/home-routing.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { HomeComponent } from './home/home.component';\nimport { OverviewComponent } from './overview/overview.component';\nimport { PatchNotesComponent } from './patch-notes/patch-notes.component';\n\nconst routes: Routes = [\n\n { path: '', redirectTo: 'overview', pathMatch: 'full' },\n { path: '', component: HomeComponent, children: [\n \n { path: 'overview', component: OverviewComponent },\n { path: 'patch-notes', component: PatchNotesComponent },\n \n ]}\n\n];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule]\n})\nexport class HomeRoutingModule { }\n" }, { "path": "src/app/modules/client/home/home.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { HomeRoutingModule } from './home-routing.module';\nimport { OverviewComponent } from './overview/overview.component';\nimport { HomeComponent } from './home/home.component';\nimport { PatchNotesComponent } from './patch-notes/patch-notes.component';\n\n\n@NgModule({\n declarations: [OverviewComponent, HomeComponent, PatchNotesComponent],\n imports: [\n CommonModule,\n HomeRoutingModule\n ]\n})\nexport class HomeModule { }\n" }, { "path": "src/app/modules/client/home/overview/overview.component.html", "content": "
\n\n

Angular of Legends

\n

Welcome to Angular of Legends, a clone of League of Legends Client made by Ivin Rodrigues

\n My Github\n\n
" }, { "path": "src/app/modules/client/home/overview/overview.component.scss", "content": ".container {\n\n h1 {\n \n color: #f0e6d2;\n font-size: 3rem;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px;\n display: block;\n margin-top: 20%;\n \n }\n \n p {\n \n font-family: 'Roboto', sans-serif;\n margin-top: 2rem;\n color: #938f83;\n display: block;\n \n }\n\n a {\n\n color: #938f83;\n background-color: #1e2328;\n text-decoration: none;\n text-transform: uppercase;\n font-weight: bold;\n margin-top: 2rem;\n padding: .8rem 2rem;\n display: inline-block;\n border: 2px solid #c8aa6d;\n transition-duration: .2s;\n\n &:hover {\n\n color: #f0e6d2;\n\n\n }\n\n }\n\n}" }, { "path": "src/app/modules/client/home/overview/overview.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { OverviewComponent } from './overview.component';\n\ndescribe('OverviewComponent', () => {\n let component: OverviewComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ OverviewComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(OverviewComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/home/overview/overview.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\n\n@Component({\n selector: 'app-overview',\n templateUrl: './overview.component.html',\n styleUrls: ['./overview.component.scss']\n})\nexport class OverviewComponent implements OnInit {\n\n constructor(private backgroundService: BackgroundService) {\n\n this.backgroundService.changeBackground({ \n backgroundUrl: 'https://4.bp.blogspot.com/-fXQUf52mB0I/XO98d2WF4ZI/AAAAAAAAGls/P3BtEoQqEoszt_NmeXJxyi2Tx9rB_qJeACKgBGAs/w0/galaxy-slayer-zed-lol-4K-97.jpg',\n backgroundSize: 'cover',\n backgroundPosition: 'top'\n })\n\n }\n\n ngOnInit(): void {\n }\n\n}\n" }, { "path": "src/app/modules/client/home/patch-notes/patch-notes.component.html", "content": "

Patch 1.0 notes

\n

Ivin Rodrigues - 02/20/2021

\n

Welcome to first patch of the project.

\n

Features developed in this patch

\n
    \n\n
  • - Login
    • \n
  • - Client Layout
    • \n
  • - Chat
    • \n
  • - Profile
    • \n
  • - Match history
    • \n
  • - Lobby
    • \n
  • - Champion select
    • \n
  • - Loading screen
    • \n\n
" }, { "path": "src/app/modules/client/home/patch-notes/patch-notes.component.scss", "content": ".patch-note-title {\n \n color: #f0e6d2;\n font-size: 2rem;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px;\n display: block;\n margin-top: 2rem;\n\n}\n\n.patch-note-author {\n\n font-family: 'Roboto', sans-serif;\n margin-top: 1rem;\n color: #938f83;\n text-transform: uppercase;\n display: block;\n\n}\n\n.patch-note-text {\n\n font-family: 'Roboto', sans-serif;\n margin: 2rem;\n font-size: 1.2rem;\n color: #f0e6d2;\n letter-spacing: 1px;\n display: block;\n\n}\n\nul {\n\n margin-left: 2.5rem;\n \n li {\n\n font-family: 'Roboto', sans-serif;\n color: white;\n font-size: 18px;\n padding: 12px 0;\n\n }\n\n}" }, { "path": "src/app/modules/client/home/patch-notes/patch-notes.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { PatchNotesComponent } from './patch-notes.component';\n\ndescribe('PatchNotesComponent', () => {\n let component: PatchNotesComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ PatchNotesComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(PatchNotesComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/home/patch-notes/patch-notes.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\n\n@Component({\n selector: 'app-patch-notes',\n templateUrl: './patch-notes.component.html',\n styleUrls: ['./patch-notes.component.scss']\n})\nexport class PatchNotesComponent implements OnInit {\n\n constructor(private backgroundService: BackgroundService) {\n\n this.backgroundService.changeBackground('')\n\n }\n\n ngOnInit(): void {\n }\n\n}\n" }, { "path": "src/app/modules/client/play/lobby/lobby.component.html", "content": "
\n \n Ranked solo/duo\n Draft\n Summoner's rift 5v5\n Change mode\n
\n\n
\n\n
\n \n
\n
\n \n
\n
\n
\n Ivinzivel\n \n II\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n\n
\n\n\n
\n \n Middle\n \n \n \n \n Bottom\n \n \n Jungle\n \n \n \n \n Support\n \n \n Top\n \n \n \n \n Fill\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n
\n
\n\n
\n \n \n Find match\n \n \n \n \n Find match\n \n \n
" }, { "path": "src/app/modules/client/play/lobby/lobby.component.scss", "content": "@import '/src/assets/scss/animations.scss';\n@import '/src/assets/scss/buttons.scss';\n\nheader {\n\n width: calc(100% - 312px);\n position: fixed;\n margin-top: 7rem;\n z-index: 2;\n\n img {\n\n width: 50px;\n display: inline-block;\n\n }\n\n span {\n\n color: #f0e6d2;\n font-size: 14px;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px;\n display: inline-block;\n transform: translateY(-22px);\n padding: 1rem 1.5rem;\n\n }\n\n .map {\n\n color: #8a867b;\n\n }\n\n a {\n\n float: right;\n transform: translateY(-30px);\n margin-right: 3rem;\n\n }\n\n}\n\n.role-select-button-desabled {\n\n cursor: default;\n border-color: #5c5b57 !important;\n filter: grayscale(100%);\n\n img {\n\n filter: grayscale(100%);\n\n }\n\n &:hover {\n\n transform: rotate(45deg) scale(.9) !important;\n\n }\n\n}\n\n.role-select-button {\n\n width: 80px;\n height: 80px;\n background-color: #1e2328;\n border: 5px solid #0596aa;\n box-sizing: border-box;\n margin: 295px auto 0 auto;\n position: relative;\n transform: rotate(45deg) scale(.9);\n transition-duration: .2s;\n cursor: pointer;\n\n img {\n\n padding: 20px;\n transform: rotate(-45deg);\n\n }\n\n .arrow-up {\n\n width: 0; \n height: 0; \n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #0596aa;\n transform: rotate(45deg);\n position: absolute;\n top: 16px;\n right: 13px;\n\n }\n\n .arrow-right {\n\n width: 0; \n height: 0; \n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #0596aa;\n transform: rotate(-45deg);\n position: absolute;\n top: 15.5px;\n left: 13px;\n\n }\n\n .arrow-down {\n\n width: 0; \n height: 0; \n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #0596aa;\n transform: rotate(135deg);\n position: absolute;\n bottom: 15.5px;\n right: 13px;\n\n }\n\n .arrow-left {\n\n width: 0; \n height: 0; \n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent; \n border-right: 5px solid #0596aa;\n transform: rotate(315deg);\n position: absolute;\n bottom: 13px;\n left: 15.5px;\n\n }\n\n .box {\n\n width: 10px;\n height: 10px;\n background-color: #0596aa;\n position: absolute;\n top: calc( 50% - 5px );\n left: calc( 50% - 5px );\n\n }\n\n &:hover {\n\n transform: rotate(45deg) scale(1);\n\n }\n\n}\n\n\n.role-select {\n\n width: 700px;\n height: 700px;\n background: rgb(0,0,0);\n background: radial-gradient(circle, rgba(0, 0, 0, 0.897) 10%, rgba(255,255,255,0) 60%);\n position: absolute; \n top: 217px;\n left: calc(50% - 354px);\n z-index: 5;\n justify-content: center;\n align-content: center;\n display: none;\n\n img {\n\n cursor: pointer;\n transition-duration: .2s;\n\n &:hover {\n\n transform: scale(1.1);\n filter: brightness(150%);\n\n }\n\n }\n\n .role-name {\n\n color: #f0e6d2;\n font-size: 1.8rem;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 2px;\n\n }\n\n .mid {\n\n width: 200px;\n height: 200px;\n position: absolute;\n top: 190px;\n left: 254px;\n text-align: center;\n\n span {\n\n padding-bottom: 1rem;\n display: block;\n\n }\n\n }\n\n .adc {\n\n width: 200px;\n height: 200px;\n position: absolute;\n top: 266px;\n right: 92px;\n text-align: center;\n\n span {\n\n padding-left: 1rem;\n\n }\n\n }\n\n .jg {\n\n width: 200px;\n height: 200px;\n position: absolute;\n top: 266px;\n left: 114px;\n text-align: center;\n\n span {\n\n padding-right: 1rem;\n\n }\n\n }\n\n .sup {\n\n width: 200px;\n height: 200px;\n position: absolute;\n top: 340px;\n right: 62px;\n text-align: center;\n\n span {\n\n padding-left: 1rem;\n\n }\n\n }\n\n .top {\n\n width: 200px;\n height: 200px;\n position: absolute;\n top: 340px;\n left: 113px; \n text-align: center;\n\n span {\n\n padding-right: 1rem;\n\n }\n\n }\n\n .fill {\n\n width: 200px;\n height: 200px;\n padding: 2rem;\n bottom: 36px;\n left: 224px;\n text-align: center;\n position: absolute;\n\n span {\n\n display: block;\n padding-top: 1rem;\n\n }\n\n }\n\n .role-select-button {\n\n border-radius: 50%;\n margin-top: 296px;\n position: relative;\n top: 20px;\n left: 4px;\n\n img {\n\n padding: 20px;\n transform: rotate(-45deg);\n\n }\n\n }\n\n}\n\n.banners {\n\n display: flex;\n\n .banner {\n\n width: 20%;\n position: relative;\n text-align: center;\n opacity: 0;\n animation: SlideDown;\n animation-fill-mode: forwards;\n animation-duration: 1s;\n\n .invite-friend {\n\n color: #e4dbc8;\n width: 100px;\n height: 100px;\n margin: 360px auto 0 auto;\n font-size: 2rem;\n border-radius: 50%;\n border: 2px solid #aa9261;\n background-color: rgb(51, 51, 51);\n opacity: 0;\n transition-duration: .2s;\n position: relative;\n z-index: 1;\n cursor: pointer;\n\n &:hover {\n\n opacity: .8;\n transform: scale(1.1);\n box-shadow: 0 0 20px #aa9261;\n\n }\n\n }\n\n .invite-friend-hidden {\n\n margin: 300px auto 0 auto;\n opacity: 0 !important;\n z-index: -1 !important;\n\n }\n\n .player-informations {\n\n position: absolute;\n width: 100%;\n text-align: center;\n padding-top: 200px;\n\n .owner-room-player {\n\n color: #f0e6d2;\n font-size: 1.8rem;\n font-weight: bold;\n letter-spacing: 2px;\n display: block;\n\n }\n\n .rank-image {\n\n width: 200px;\n padding-top: 2rem;\n position: relative;\n z-index: 2;\n\n }\n\n .rank-tier {\n\n color: white;\n z-index: 2;\n display: block;\n position: relative;\n top: -68px;\n\n\n }\n\n .profile-image {\n\n width: 126px;\n display: block;\n z-index: 1;\n border-radius: 50%;\n margin: -201px auto;\n\n }\n\n }\n\n }\n\n}\n\n.confirm-button {\n\n background-image: url('/assets/images/confirm-button/confirm-button-shape.png');\n width: 257px;\n height: 54px;\n position: fixed;\n bottom: 1rem;\n z-index: 4;\n left: 50%;\n margin-left: -257px;\n\n span, img {\n\n position: absolute;\n\n }\n\n .cancel {\n\n z-index: 1;\n left: 6px;\n \n }\n\n .cancel, .confirm {\n\n transition-duration: .2s;\n cursor: pointer;\n\n &:hover {\n\n filter: brightness(150%);\n\n }\n\n }\n\n .title {\n\n width: 257px;\n height: 54px;\n\n span {\n\n text-transform: uppercase;\n color: #f0e6d2;\n font-weight: bold;\n letter-spacing: 1px;\n z-index: 2;\n right: 60px;\n top: 20px;\n cursor: pointer;\n\n }\n\n .confirm {\n \n right: 0;\n z-index: 1;\n \n }\n\n &:hover {\n\n .confirm {\n\n filter: brightness(150%);\n\n }\n\n }\n\n }\n\n .title-desabled {\n\n span, .confirm {\n\n filter: grayscale(100%);\n cursor: default;\n\n }\n\n &:hover {\n\n .confirm {\n\n filter: grayscale(100%) brightness(100%);\n\n }\n\n }\n\n }\n\n}" }, { "path": "src/app/modules/client/play/lobby/lobby.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { LobbyComponent } from './lobby.component';\n\ndescribe('LobbyComponent', () => {\n let component: LobbyComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ LobbyComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(LobbyComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/play/lobby/lobby.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\nimport { PlayService } from '../../play.service';\nimport { SoundService } from '../../sound.service';\n\n@Component({\n selector: 'app-lobby',\n templateUrl: './lobby.component.html',\n styleUrls: ['./lobby.component.scss']\n})\nexport class LobbyComponent implements OnInit {\n\n inQueue: boolean = false\n roleSelected: string = null\n gameMode: string = null\n\n constructor(private backgroundService: BackgroundService,\n private playService: PlayService,\n private soundService: SoundService) {\n\n this.backgroundService.changeBackground({ \n backgroundUrl: 'https://images2.alphacoders.com/913/thumb-1920-913622.jpg',\n backgroundSize: '150%',\n backgroundPosition: 'bottom'\n })\n\n this.playService.changeLobbyState(true)\n\n this.playService.getQueueObservable().subscribe(\n\n response => {\n\n if(response == true) {\n\n this.inQueue = true\n\n } else {\n\n this.inQueue = false\n\n }\n\n }\n \n )\n\n }\n\n ngOnInit(): void {\n\n setTimeout( () => {\n\n document.getElementById('playerBanner').style.opacity = '1'\n this.soundService.playSound('lobbyIntro')\n\n setTimeout( () => {\n\n document.getElementById('secondBanner').style.opacity = '1'\n document.getElementById('fourthBanner').style.opacity = '1'\n\n setTimeout( () => {\n\n document.getElementById('firstBanner').style.opacity = '1'\n document.getElementById('fifthBanner').style.opacity = '1'\n \n }, 200 )\n \n }, 200 )\n\n }, 200 )\n\n }\n\n\n\n enterQueue() {\n\n if(this.roleSelected !== null) {\n \n this.playService.changeQueueState(true)\n this.inQueue = true\n \n }\n\n }\n\n\n\n cancelQueue() {\n\n this.playService.changeQueueState(false)\n this.inQueue = false\n\n }\n\n\n\n closeLobby() {\n\n this.playService.changeLobbyState(false)\n\n }\n\n\n\n openRoleSelect() {\n\n if(this.inQueue == false) {\n\n document.getElementById('roleSelect').style.display = 'block'\n\n }\n\n }\n\n\n\n closeRoleSelect() {\n\n if(this.inQueue == false) {\n\n document.getElementById('roleSelect').style.display = 'none'\n\n }\n\n }\n\n\n\n selectRole(role) {\n\n this.roleSelected = role\n document.getElementById('roleSelect').style.display = 'none'\n\n }\n\n\n\n playSound(sound) {\n\n this.soundService.playSound(sound)\n\n }\n\n}\n" }, { "path": "src/app/modules/client/play/play-menu/play-menu.component.html", "content": "\n\n
\n \n \n Confirm\n \n \n
\n\n
\n \n
" }, { "path": "src/app/modules/client/play/play-menu/play-menu.component.scss", "content": "@import './../../../../../assets/scss/menu-component.scss';\n\n.confirm-button {\n\n background-image: url('/assets/images/confirm-button/confirm-button-shape.png');\n width: 257px;\n height: 54px;\n position: fixed;\n bottom: 1rem;\n z-index: 4;\n left: 50%;\n margin-left: -257px;\n\n span, img {\n\n position: absolute;\n cursor: pointer;\n\n }\n\n .cancel {\n\n z-index: 1;\n left: 6px;\n \n }\n\n .cancel, .confirm {\n\n transition-duration: .2s;\n\n &:hover {\n\n filter: brightness(150%);\n\n }\n\n }\n\n .title {\n\n width: 257px;\n height: 54px;\n\n span {\n\n text-transform: uppercase;\n color: #f0e6d2;\n font-weight: bold;\n letter-spacing: 1px;\n z-index: 2;\n right: 30%;\n top: 20px;\n\n }\n\n .confirm {\n \n right: 0;\n z-index: 1;\n \n }\n\n &:hover {\n\n .confirm {\n\n filter: brightness(150%);\n\n }\n\n }\n\n }\n\n}" }, { "path": "src/app/modules/client/play/play-menu/play-menu.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { PlayMenuComponent } from './play-menu.component';\n\ndescribe('PlayMenuComponent', () => {\n let component: PlayMenuComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ PlayMenuComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(PlayMenuComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/play/play-menu/play-menu.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { SoundService } from '../../sound.service';\n\n@Component({\n selector: 'app-play-menu',\n templateUrl: './play-menu.component.html',\n styleUrls: ['./play-menu.component.scss']\n})\nexport class PlayMenuComponent implements OnInit {\n\n constructor(private soundService: SoundService) {}\n\n ngOnInit(): void {\n }\n\n\n\n playSound(sound) {\n\n this.soundService.playSound(sound)\n\n }\n\n}\n" }, { "path": "src/app/modules/client/play/play-routing.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { LobbyComponent } from './lobby/lobby.component';\nimport { PlayMenuComponent } from './play-menu/play-menu.component';\nimport { PvpComponent } from './pvp/pvp.component';\n\nconst routes: Routes = [\n\n { path: '', component: PlayMenuComponent, children: [\n\n { path: '', redirectTo: 'pvp', pathMatch: 'full' },\n { path: 'pvp', component: PvpComponent }\n\n ]},\n { path: 'lobby', component: LobbyComponent }\n\n];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule]\n})\nexport class PlayRoutingModule { }\n" }, { "path": "src/app/modules/client/play/play.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { PlayRoutingModule } from './play-routing.module';\nimport { PlayMenuComponent } from './play-menu/play-menu.component';\nimport { PvpComponent } from './pvp/pvp.component';\nimport { LobbyComponent } from './lobby/lobby.component';\n\n\n@NgModule({\n declarations: [PlayMenuComponent, PvpComponent, LobbyComponent],\n imports: [\n CommonModule,\n PlayRoutingModule\n ]\n})\nexport class PlayModule { }\n" }, { "path": "src/app/modules/client/play/pvp/pvp.component.html", "content": "" }, { "path": "src/app/modules/client/play/pvp/pvp.component.scss", "content": "@import '/src/assets/scss/animations.scss';\n\nul {\n\n display: flex;\n height: 100%;\n\n .game {\n\n animation: SlideUp;\n animation-duration: 1s;\n width: 25%;\n height: 240px;\n display: inline-block;\n text-align: center;\n padding: 4rem 0 2.5rem;\n transition-duration: .5s;\n opacity: 0;\n\n img, span {\n\n display: block;\n\n }\n\n span {\n\n color: #f0e6d2;\n font-size: 14px;\n font-weight: bold;\n letter-spacing: 3px;\n\n }\n\n .game-type {\n\n font-size: 1rem;\n margin-top: 1.5rem;\n\n }\n\n .game-title {\n\n text-transform: uppercase;\n font-size: 2rem;\n margin-top: 1rem;\n padding-bottom: 2rem;\n border-bottom: 1px solid #ffffff2f;\n\n }\n\n .game-title-lg {\n\n padding-bottom: 4rem;\n\n }\n\n img {\n\n width: 140px;\n margin: 0 auto;\n cursor: pointer;\n\n }\n\n .game-description {\n \n font-family: 'Roboto', sans-serif;\n color: #f0e6d2;\n font-size: 1.2rem;\n line-height: 1.8rem;\n text-align: left;\n padding: 1rem;\n border-bottom: 1px solid #ffffff2f;\n opacity: 0;\n transition-duration: .2s;\n transform: translateY(-20px);\n\n }\n\n .game-description-visible {\n\n opacity: 1;\n transform: translateY(0);\n\n }\n\n .game-options {\n\n display: block;\n margin-top: 1rem;\n\n .option {\n\n display: block;\n text-align: left;\n position: relative;\n\n label {\n\n color: #beb088;\n font-size: 14px;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 3px;\n font-size: 1rem;\n padding: 1rem 1rem 1rem 2.2rem;\n display: block;\n cursor: pointer;\n transition-duration: .2s;\n\n &:hover {\n\n color: #f0e6d2;\n\n }\n\n }\n\n input[type=\"radio\"] {\n \n position: absolute;\n z-index: -1;\n opacity: 0;\n \n }\n\n input[type=\"radio\"]:disabled + label::before {\n\n filter: grayscale(100%);\n\n }\n\n input[type=\"radio\"]:disabled + label {\n\n cursor: default;\n filter: grayscale(100%);\n\n &:hover {\n\n color: #beb088 !important;\n\n }\n\n }\n\n input[type=\"radio\"] + label::before {\n\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n left: 10px;\n top: 18px;\n outline: #aa9261 solid 4px;\n vertical-align: bottom;\n transform: rotate(230deg);\n\n }\n \n input[type=\"radio\"]:checked + label {\n\n color: #f0e6d2;\n\n }\n\n input[type=\"radio\"]:checked + label::after {\n\n content: \"\";\n background-color: #f0e6d2;\n position: absolute;\n width: 10px;\n height: 10px;\n left: 10px;\n top: 18px;\n outline: #aa9261 solid 4px;\n vertical-align: bottom;\n transform: rotate(230deg);\n\n }\n\n }\n\n }\n\n &:hover {\n\n .game-description {\n\n opacity: 1;\n transform: translateY(0px);\n\n }\n\n }\n\n }\n\n}" }, { "path": "src/app/modules/client/play/pvp/pvp.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { PvpComponent } from './pvp.component';\n\ndescribe('PvpComponent', () => {\n let component: PvpComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ PvpComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(PvpComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/play/pvp/pvp.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\nimport { SoundService } from '../../sound.service';\n\n@Component({\n selector: 'app-pvp',\n templateUrl: './pvp.component.html',\n styleUrls: ['./pvp.component.scss']\n})\nexport class PvpComponent implements OnInit {\n\n gameMode: number = 1\n\n constructor(private backgroundService: BackgroundService) {\n\n this.backgroundService.changeBackground({ \n backgroundUrl: 'https://images2.alphacoders.com/913/thumb-1920-913622.jpg',\n backgroundSize: '150%',\n backgroundPosition: 'top'\n })\n\n }\n\n ngOnInit(): void {\n\n setTimeout( () => { \n \n document.getElementById('sr').style.opacity = '1' \n \n setTimeout( () => { \n \n document.getElementById('aram').style.opacity = '1' \n\n setTimeout( () => { \n \n document.getElementById('tft').style.opacity = '1' \n \n setTimeout( () => { \n \n document.getElementById('urf').style.opacity = '1' \n \n }, 200 )\n\n }, 200 )\n \n }, 200 )\n\n }, 200 )\n\n }\n\n}\n" }, { "path": "src/app/modules/client/play.service.ts", "content": "import { Injectable } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class PlayService {\n\n constructor() { }\n\n private inQueue = new Subject()\n private inLobby = new Subject()\n\n changeQueueState(url) {\n\n this.inQueue.next(url)\n \n }\n\n\n\n getQueueObservable(): Observable {\n\n return this.inQueue.asObservable()\n\n }\n\n\n\n changeLobbyState(url) {\n\n this.inLobby.next(url)\n \n }\n\n\n\n getLobbyObservable(): Observable {\n\n return this.inLobby.asObservable()\n\n }\n \n}\n" }, { "path": "src/app/modules/client/profile/match-history/match-history.component.html", "content": "
    \n\n
  • \n\n
    \n \n {{ match.championLevel }}\n
    \n\n
    \n {{ match.status }}\n {{ match.gameMode }} \n
    \n \n
    \n
    \n\n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n\n
    \n {{ match.score }}\n {{ match.cs }}\n {{ match.gold }}\n
    \n\n
    \n\n
    \n\n {{ match.map }}\n {{ match.matchDuration }} - {{ match.matchDate }}\n\n
    \n\n
    • \n\n
\n\n" }, { "path": "src/app/modules/client/profile/match-history/match-history.component.scss", "content": ".match-history {\n \n width: calc(100% - 532px);\n height: calc(100% - 68px);\n overflow: auto;\n position: absolute;\n left: 0;\n padding: 2rem;\n\n .match {\n\n width: 100%;\n display: flex;\n align-items: center;\n padding: .5rem 0;\n border-bottom: .5px solid #ffffff35;\n box-sizing: border-box;\n transition-duration: .5s;\n opacity: 0;\n animation: FadeInLeft 1s forwards;\n\n .champion-image-wrapper {\n\n position: relative;\n padding-left: 1rem;\n width: 11%;\n\n img {\n\n width: 80px;\n border-radius: 50%;\n border: 2px solid #c7984a;\n box-sizing: border-box;\n\n }\n\n .champion-level {\n\n color: white;\n background-color: #161616;\n padding: 6px 6px 6px 4px;\n border: 1px solid #c7984a;\n border-radius: 50%;\n position: absolute;\n bottom: 0;\n left: 62px;\n\n }\n\n }\n\n .info-match-wrapper {\n\n width: 21%;\n\n span {\n\n display: block;\n\n }\n\n .match-status {\n font-size: 20px;\n text-transform: uppercase;\n padding-top: 8px;\n font-weight: bold;\n\n }\n\n .victory {\n\n color: #0acbe6;\n\n }\n\n .defeat {\n\n color: #fd0352;\n\n }\n\n .match-mode {\n\n color: #ffffff9c;\n padding: 6px 0;\n\n }\n\n .spells {\n\n padding-bottom: 8px;\n\n img {\n\n width: 30px;\n\n }\n\n }\n\n }\n\n .overview-match-wrapper {\n \n width: 310px;\n\n .items {\n\n .item {\n\n background-color: #1d1d1d5b;\n background-position: center;\n background-size: cover;\n width: 42px;\n height: 42px;\n border: 1px solid #57460074;\n display: inline-block;\n\n }\n\n }\n\n .info {\n\n color: #ffffff9c;\n font-size: 20px;\n display: flex;\n justify-content: space-between;\n padding-top: 6px;\n\n .cs {\n\n position: relative;\n\n &::after {\n\n content: '';\n position: absolute;\n width: 14px;\n height: 16px;\n background-image: url('./../../../../../assets/images/profile/creep.png');\n top: 2px;\n left: -20px;\n\n }\n\n }\n\n .gold {\n\n position: relative;\n\n &::after {\n\n content: '';\n position: absolute;\n width: 20px;\n height: 15px;\n background-image: url('./../../../../../assets/images/profile/money.png');\n top: 2px;\n left: -22px;\n\n }\n\n }\n\n }\n\n }\n\n .time-match-wrapper {\n\n color: #ffffff9c;\n width: calc(60% - 310px);\n padding-left: 2rem;\n\n .map {\n\n display: block;\n padding-bottom: 18px;\n\n }\n\n }\n\n &:hover {\n\n background-color: #ffffff33;\n transform: scale(1.02);\n\n }\n\n &:nth-child(2) { animation-delay: .1s; }\n &:nth-child(3) { animation-delay: .2s; }\n &:nth-child(4) { animation-delay: .3s; }\n &:nth-child(5) { animation-delay: .4s; }\n &:nth-child(6) { animation-delay: .5s; }\n &:nth-child(7) { animation-delay: .6s; }\n &:nth-child(8) { animation-delay: .7s; }\n &:nth-child(9) { animation-delay: .8s; }\n &:nth-child(10) { animation-delay: .9s; }\n &:nth-child(11) { animation-delay: 1s; }\n &:nth-child(12) { animation-delay: 1.1s; }\n &:nth-child(13) { animation-delay: 1.2s; }\n &:nth-child(14) { animation-delay: 1.3s; }\n &:nth-child(15) { animation-delay: 1.4s; }\n &:nth-child(16) { animation-delay: 1.5s; }\n &:nth-child(17) { animation-delay: 1.6s; }\n &:nth-child(18) { animation-delay: 1.7s; }\n &:nth-child(19) { animation-delay: 1.8s; }\n &:nth-child(20) { animation-delay: 1.9s; }\n\n }\n\n}\n\n.recently-champions {\n\n width: 500px;\n height: calc(100% - 150px);\n position: fixed;\n top: 140px;\n right: 280px;\n text-align: center;\n padding-top: 1rem;\n opacity: 0;\n animation: FadeInRight 1s forwards;\n\n .recently-title {\n\n color: #f0e6d2;\n font-size: 18px;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px;\n margin-bottom: 2rem;\n display: block;\n\n }\n\n .champions {\n\n display: flex;\n justify-content: center;\n\n .champion {\n\n position: relative;\n padding: 0 1rem;\n\n .champion-picture {\n\n width: 80px;\n display: block;\n border: 2px solid #c7974a91;\n box-sizing: border-box;\n\n }\n\n .banner-mastery {\n\n width: 78px;\n\n }\n\n .mastery {\n\n width: 60px;\n position: absolute;\n left: 26px;\n top: 84px;\n\n }\n\n .percent {\n\n color: #aa9261;\n font-size: 1.2rem;\n display: block;\n margin-top: 1.3rem;\n\n }\n\n .win-rate-wrapper {\n\n .positive {\n\n &::before {\n\n background-image: url('./../../../../../assets/images/profile/angle-up.png');\n\n }\n\n }\n\n .negative {\n\n &::before {\n\n background-image: url('./../../../../../assets/images/profile/angle-down.png');\n\n }\n\n }\n\n .win-rate-title {\n\n color: #f0e6d2;\n padding-top: 1.2rem;\n display: block;\n\n }\n\n .win-rate {\n\n color: #f0e6d2;\n font-size: 1.2rem;\n display: block;\n margin-top: 12px;\n position: relative;\n transform: translateX(-10px);\n\n &::before {\n\n content: '';\n background-repeat: no-repeat;\n background-size: cover;\n width: 45px;\n height: 27px;\n position: absolute;\n right: -20px;\n bottom: -4px;\n transform: scale(.4);\n\n }\n\n }\n\n }\n\n }\n\n }\n\n .separator {\n\n background-color: rgba(255, 255, 255, 0.200);\n height: 1px;\n display: block;\n margin: 4rem;\n\n }\n\n .recent-activity-wrapper {\n\n .activity-title {\n\n color: #f0e6d2;\n font-size: 18px;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px;\n margin-bottom: 2rem;\n display: block;\n\n }\n\n .bars {\n\n display: flex;\n justify-content: center;\n\n .bar-wrapper {\n\n width: 25px;\n padding: 0 1rem;\n\n .bar {\n\n background-color: #00000080;\n width: 10px;\n height: 180px;\n position: relative;\n margin: 0 auto;\n\n .bar-content {\n\n background-color: #0acbe6;\n box-shadow: 0 0 10px #0acce67a;\n width: 10px;\n height: 2%;\n left: 0;\n bottom: 0;\n position: absolute;\n transition-delay: .5s;\n transition-duration: .5s;\n\n }\n\n }\n\n img {\n\n width: 25px;\n margin-top: 1rem;\n\n }\n\n }\n\n }\n\n }\n\n}\n\n@keyframes FadeInLeft {\n\n 0% {\n\n position: relative;\n left: -40px;\n\n }\n 100% {\n\n opacity: 1;\n position: relative;\n left: 0px;\n\n }\n\n}\n\n@keyframes FadeInRight {\n\n 0% {\n\n transform: translateX(60px);\n\n }\n 100% {\n\n opacity: 1;\n transform: translateX(0px);\n\n }\n\n}" }, { "path": "src/app/modules/client/profile/match-history/match-history.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { MatchHistoryComponent } from './match-history.component';\n\ndescribe('MatchHistoryComponent', () => {\n let component: MatchHistoryComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ MatchHistoryComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(MatchHistoryComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/profile/match-history/match-history.component.ts", "content": "import { AfterViewInit, Component, OnInit } from '@angular/core'\nimport { Champions } from 'src/data/champions'\nimport { Items } from 'src/data/items'\nimport { Spells } from 'src/data/spells'\n\n@Component({\n selector: 'app-match-history',\n templateUrl: './match-history.component.html',\n styleUrls: ['./match-history.component.scss']\n})\nexport class MatchHistoryComponent implements OnInit, AfterViewInit {\n\n matchs: any = [\n\n { id: 1, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[0], Items[4], Items[5] ,Items[8] ,Items[3] ,Items[9] ,Items[10] ], trinket: Items[10], score: '11/2/4', cs: 318, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 2, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[1], Items[4], Items[5], Items[7] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '28:20', matchDate: '02/18/2021' },\n { id: 3, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '32:00', matchDate: '02/18/2021' },\n { id: 4, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[126], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[11], Items[13], Items[9] ], trinket: Items[10], score: '11/2/4', cs: 152, gold: 17239, map: \"Summoner's Rift\", matchDuration: '17:22', matchDate: '02/18/2021' },\n { id: 5, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 6, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '27:00', matchDate: '02/18/2021' },\n { id: 7, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 8, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[52], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[11], Items[17], Items[13], Items[9] ], trinket: Items[10], score: '4/2/4', cs: 178, gold: 15784, map: \"Summoner's Rift\", matchDuration: '19:22', matchDate: '02/18/2021' },\n { id: 9, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 10, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[126], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[19], Items[13], Items[17], Items[9] ], trinket: Items[10], score: '7/1/9', cs: 201, gold: 22036, map: \"Summoner's Rift\", matchDuration: '26:13', matchDate: '02/18/2021' },\n { id: 11, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[52], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[11], Items[17], Items[13], Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 12, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 13, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 14, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[126], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[11], Items[13], Items[16], Items[15], Items[14], Items[9] ], trinket: Items[10], score: '16/6/12', cs: 268, gold: 30055, map: \"Summoner's Rift\", matchDuration: '32:47', matchDate: '02/18/2021' },\n { id: 15, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 16, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 17, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 18, status: 'Defeat', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[126], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[11], Items[13], Items[18], Items[9] ], trinket: Items[10], score: '3/7/8', cs: 143, gold: 12369, map: \"Summoner's Rift\", matchDuration: '22:50', matchDate: '02/18/2021' },\n { id: 19, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' },\n { id: 20, status: 'Victory', gameMode: 'Ranked Solo/Duo', playerChampion: Champions[149], championLevel: 18, spells: [Spells[0], Spells[1]], items: [ Items[2], Items[4], Items[8], Items[6] ,Items[9] ], trinket: Items[10], score: '11/2/4', cs: 400, gold: 36000, map: \"Summoner's Rift\", matchDuration: '25:00', matchDate: '02/18/2021' }\n\n ]\n\n recentlyChampions: any = [\n\n {champion: Champions[149], percent: 70, winRate: 90},\n {champion: Champions[126], percent: 20, winRate: 52},\n {champion: Champions[52], percent: 10, winRate: 20}\n\n ]\n\n recentActivity: any = [\n\n { id: 1, class: 'fighter', percent: '2' },\n { id: 2, class: 'tank', percent: '2' },\n { id: 3, class: 'mage', percent: '30' },\n { id: 4, class: 'assassin', percent: '70' },\n { id: 5, class: 'support', percent: '2' },\n { id: 6, class: 'marksman', percent: '2' }\n\n ]\n\n constructor() { }\n\n ngOnInit(): void {\n\n }\n\n\n\n ngAfterViewInit(): void {\n\n setTimeout( () => {\n\n for( let activity of this.recentActivity ) {\n\n document.getElementById(activity.class).style.height = `${activity.percent}%`\n\n }\n\n }, 0)\n\n }\n\n}\n" }, { "path": "src/app/modules/client/profile/overview/overview.component.html", "content": "
    \n\n
  • \n Solo/duo\n platinum ii\n \n
    • \n
  • \n Honor\n \n
    • \n
  • \n Mastery score\n 127\n
    \n \n \n \n
    \n
    \n Highest champion mastery\n
    \n
    \n \n \n \n
    \n Twisted fate\n 304.230 pts\n Best grade: S+\n
    \n
    \n
    \n \n \n \n
    \n Zed\n 920.030 pts\n Best grade: S+\n
    \n
    \n
    \n \n \n \n
    \n Kassadin\n 250.010 pts\n Best grade: S+\n
    \n
    \n
    \n
    \n
    • \n
  • \n Trophy\n \n
    • \n
  • \n Banner\n \n
    • \n\n
" }, { "path": "src/app/modules/client/profile/overview/overview.component.scss", "content": ".profile-info {\n\n width: calc( 100% - 380px);\n height: 100%;\n float: right;\n display: flex;\n justify-content: space-around;\n align-items: flex-end;\n overflow: hidden;\n\n li {\n\n color: #beb088;\n font-size: .8rem;\n font-weight: bold;\n letter-spacing: 1px;\n text-transform: uppercase;\n text-align: center;\n padding: 0 2rem 4rem 2rem;\n height: 230px;\n position: relative;\n cursor: default !important;\n\n img {\n\n padding-top: 4rem;\n display: block;\n position: relative;\n\n }\n\n .banner, .honor, .trophy {\n\n bottom: -28px;\n\n }\n\n .rank {\n\n width: 130px;\n bottom: 6px;\n\n\n }\n\n .subtitle {\n\n color: #f0e6d2;\n width: 100%;\n font-size: 28px;\n position: absolute;\n top: 20px;\n left: 0;\n margin: 0 auto;\n\n }\n\n .mastery-wrapper {\n\n position: relative;\n bottom: -25px;\n\n img {\n\n margin: 0 auto;\n\n }\n\n .champion-image {\n\n width: 80px;\n border: 2px solid #95732e;\n border-radius: 50%;\n padding: 0;\n position: relative;\n bottom: 14px;\n z-index: 1;\n margin-top: 75px;\n\n }\n\n .banner {\n\n width: 70px;\n position: absolute;\n bottom: -4px;\n left: 22px;\n z-index: 0;\n\n }\n\n .mastery {\n\n width: 52px;\n position: absolute;\n z-index: 2;\n bottom: -18px;\n left: 32px;\n\n }\n\n }\n\n .mastery-popover {\n\n opacity: 0;\n background-color: hsla(210, 90%, 4%, 0.500);\n width: 650px;\n border: 2px solid #463714;\n position: absolute;\n left: -262px;\n bottom: 333px;\n transition-duration: .2s;\n transform: translateY(20px);\n padding: 2rem;\n backdrop-filter: blur(12px);\n z-index: -2;\n\n .popover-title {\n\n color: #f0e6d2;\n font-size: 18px;\n \n }\n\n .highest-champion-mastery {\n\n margin: 1rem 100px;\n display: flex;\n justify-content: space-between;\n\n .mastery-wrapper {\n \n width: 250px;\n transform: scale(.9);\n\n .champion-image {\n\n margin-top: 0;\n\n }\n\n .banner {\n\n bottom: 133px;\n left: 39px;\n \n }\n \n .mastery {\n\n width: 52px;\n bottom: 112px;\n left: 50px;\n \n }\n\n .mastery-info {\n\n text-align: center;\n\n .champion-name {\n \n color: #f0e6d2;\n font-size: 18px;\n display: block;\n margin-top: 2rem;\n \n }\n\n .champion-points {\n \n font-size: 14px;\n display: block;\n margin-top: 1rem;\n font-weight: lighter;\n \n }\n\n .champion-best-grade {\n \n font-size: 14px;\n display: block;\n margin-top: .5rem;\n font-weight: lighter;\n text-transform: initial;\n padding-bottom: 2rem;\n \n } \n\n }\n\n &:nth-child(2) {\n \n transform: scale(1.05);\n \n }\n\n }\n\n }\n\n &::after {\n\n content: '';\n width: 30px;\n height: 19px;\n position: absolute;\n background-image: url('./../../../../../assets/images/profile/popover-detail.png');\n bottom: -19px;\n left: calc(50% - 15px);\n\n }\n\n }\n\n &:hover {\n\n background: linear-gradient(0deg, rgba(235, 235, 244, 0.1348914566) 0%, rgba(255, 255, 255, 0) 70%);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ebebf4\",endColorstr=\"#ffffff\",GradientType=1);\n cursor: pointer;\n transition-duration: 0.2s;\n\n .mastery-popover {\n\n opacity: 1;\n z-index: 2;\n transform: translateY(0);\n\n .mastery-wrapper {\n\n position: relative;\n\n }\n\n }\n\n }\n\n }\n\n .rank-item {\n\n .subtitle { font-size: 12px }\n\n }\n\n}" }, { "path": "src/app/modules/client/profile/overview/overview.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { OverviewComponent } from './overview.component';\n\ndescribe('OverviewComponent', () => {\n let component: OverviewComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ OverviewComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(OverviewComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/profile/overview/overview.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { BackgroundService } from '../../background.service';\n\n@Component({\n selector: 'app-overview',\n templateUrl: './overview.component.html',\n styleUrls: ['./overview.component.scss']\n})\nexport class OverviewComponent implements OnInit {\n\n constructor(private backgroundService: BackgroundService) {\n\n this.backgroundService.changeBackground({ \n backgroundUrl: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zed_10.jpg',\n backgroundSize: 'cover',\n backgroundPosition: 'center'\n })\n\n }\n\n ngOnInit(): void {\n }\n\n}\n" }, { "path": "src/app/modules/client/profile/profile/profile.component.html", "content": "
\n\n\n\n
\n
\n
\n {{ player.name }}\n \n II\n \n
\n \n
\n
\n\n
\n\n \n\n
" }, { "path": "src/app/modules/client/profile/profile/profile.component.scss", "content": "@import './../../../../../assets/scss/menu-component.scss';\n\n.overlay-background-visible {\n\n opacity: .6 !important;\n\n}\n\n.overlay-background {\n\n background-color: #000000;\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 0;\n opacity: 0;\n transition-duration: .5s;\n\n}\n\n.banner-visible {\n\n top: 478px !important;\n\n}\n\n.banner {\n\n position: absolute;\n top: -400px;\n transform: scale(1.1);\n left: 40px;\n transition-duration: .5s;\n\n .player-informations {\n\n position: absolute;\n width: 100%;\n text-align: center;\n padding-top: 200px;\n text-align: center;\n\n .player-name {\n\n color: #f0e6d2;\n font-size: 1.8rem;\n font-weight: bold;\n letter-spacing: 2px;\n display: block;\n\n }\n\n .rank-image {\n\n width: 200px;\n padding-top: 2rem;\n position: relative;\n z-index: 2;\n\n }\n\n .rank-tier {\n\n color: white;\n z-index: 2;\n display: block;\n position: relative;\n top: -68px;\n\n\n }\n\n .profile-image {\n\n width: 126px;\n display: block;\n z-index: 1;\n border-radius: 50%;\n margin: -201px auto;\n\n }\n\n }\n\n}" }, { "path": "src/app/modules/client/profile/profile/profile.component.spec.ts", "content": "import { ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { ProfileComponent } from './profile.component';\n\ndescribe('ProfileComponent', () => {\n let component: ProfileComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n declarations: [ ProfileComponent ]\n })\n .compileComponents();\n });\n\n beforeEach(() => {\n fixture = TestBed.createComponent(ProfileComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/modules/client/profile/profile/profile.component.ts", "content": "import { Component, OnInit } from '@angular/core';\nimport { Player } from 'src/data/player';\nimport { SoundService } from '../../sound.service';\n\n@Component({\n selector: 'app-profile',\n templateUrl: './profile.component.html',\n styleUrls: ['./profile.component.scss']\n})\nexport class ProfileComponent implements OnInit {\n\n player: any = Player\n overview: boolean = true\n\n constructor(private soundService: SoundService) { }\n\n ngOnInit(): void {\n }\n\n\n\n changeBannerVisible(condition) {\n\n this.overview = condition\n\n }\n\n\n\n playSound(sound) {\n\n this.soundService.playSound(sound)\n\n }\n\n}\n" }, { "path": "src/app/modules/client/profile/profile-routing.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { OverviewComponent } from '../profile/overview/overview.component';\nimport { MatchHistoryComponent } from './match-history/match-history.component';\nimport { ProfileComponent } from './profile/profile.component';\n\nconst routes: Routes = [\n\n { path: '', component: ProfileComponent, children: [\n\n { path: '', redirectTo: 'overview', pathMatch: 'full' },\n { path: 'overview', component: OverviewComponent },\n { path: 'match-history', component: MatchHistoryComponent }\n\n ]}\n\n];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule]\n})\nexport class ProfileRoutingModule { }\n" }, { "path": "src/app/modules/client/profile/profile.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ProfileRoutingModule } from './profile-routing.module';\nimport { ProfileComponent } from './profile/profile.component';\nimport { OverviewComponent } from './overview/overview.component';\nimport { MatchHistoryComponent } from './match-history/match-history.component';\n\n\n@NgModule({\n declarations: [ProfileComponent, OverviewComponent, MatchHistoryComponent],\n imports: [\n CommonModule,\n ProfileRoutingModule\n ]\n})\nexport class ProfileModule { }\n" }, { "path": "src/app/modules/client/sound.service.ts", "content": "import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class SoundService {\n\n path: string = '../../../assets/sounds/'\n\n playButtonHover = new Audio(`${this.path}button-play-hover.mp3`)\n playButtonClick = new Audio(`${this.path}button-play-click.mp3`)\n menuClick = new Audio(`${this.path}menu-click.mp3`)\n submenuClick = new Audio(`${this.path}submenu-click.mp3`)\n confirmButtonHover = new Audio(`${this.path}confirm-button-hover.mp3`)\n confirmButtonClick = new Audio(`${this.path}confirm-button-click.mp3`)\n confirmButtonCancelClick = new Audio(`${this.path}confirm-button-cancel-click.mp3`)\n lobbyIntro = new Audio(`${this.path}lobby-intro.mp3`)\n changeGameModeButtonHover = new Audio(`${this.path}change-game-mode-button-hover.mp3`)\n changeGameModeButtonClick = new Audio(`${this.path}change-game-mode-button-click.mp3`)\n roleSelectButtonClick = new Audio(`${this.path}role-select-button-click.mp3`)\n roleSelectButtonLaneHover = new Audio(`${this.path}role-select-button-lane-hover.mp3`)\n roleSelectButtonLaneClick = new Audio(`${this.path}role-select-button-lane-click.mp3`)\n findMatchButtonHover = new Audio(`${this.path}find-match-button-hover.mp3`)\n findMatchButtonClick = new Audio(`${this.path}find-match-button-click.mp3`)\n matchFound = new Audio(`${this.path}match-found.mp3`)\n matchFoundAcceptButtonClick = new Audio(`${this.path}match-found-accept-button-click.mp3`)\n matchFoundDeclineButtonClick = new Audio(`${this.path}match-found-decline-button-click.mp3`)\n championSelectIntro = new Audio(`${this.path}champion-select-intro.mp3`)\n championSelectChampionsVisible = new Audio(`${this.path}champion-select-champions-visible.mp3`)\n championSelectChampionsFilter = new Audio(`${this.path}champion-select-champions-filter.mp3`)\n championSelectChampionHover = new Audio(`${this.path}champion-select-champion-hover.mp3`)\n championSelectChampionClick = new Audio(`${this.path}champion-select-champion-click.mp3`)\n championSelectBanIntro = new Audio(`${this.path}champion-select-ban-intro.mp3`)\n championSelectBan = new Audio(`${this.path}champion-select-ban.mp3`)\n championSelectBanReviewIntro = new Audio(`${this.path}champion-select-ban-review-intro.mp3`)\n championSelectPickIntro = new Audio(`${this.path}champion-select-pick-intro.mp3`)\n championSelectPick = new Audio(`${this.path}champion-select-pick.mp3`)\n championSelectLoadoutIntro = new Audio(`${this.path}champion-select-loadout-intro.mp3`)\n championSelectTimer = new Audio(`${this.path}champion-select-timer.mp3`)\n championSelectTimerCount = new Audio(`${this.path}champion-select-timer-count.mp3`)\n pickPeriodIntro = new Audio(`${this.path}pick-period-intro.mp3`)\n khazix = new Audio(`${this.path}khazix.mp3`)\n tf = new Audio(`${this.path}tf.mp3`)\n zed = new Audio(`${this.path}zed.mp3`)\n\n constructor() { }\n\n\n\n playSound(sound) {\n\n this[sound].play()\n\n }\n\n\n\n pauseSound(sound) {\n\n this[sound].pause()\n this[sound].currentTime = 0\n\n }\n\n}\n" }, { "path": "src/assets/.gitkeep", "content": "" }, { "path": "src/assets/scss/animations.scss", "content": "@keyframes SlideUp {\n\n 0% {\n\n transform: translateY(100%);\n opacity: 0;\n\n }\n 100% {\n\n transform: translateY(0);\n opacity: 1;\n\n }\n\n}\n\n@keyframes SlideDown {\n\n 0% {\n\n transform: translateY(-100%);\n opacity: 0;\n\n }\n 100% {\n\n transform: translateY(0);\n opacity: 1;\n\n }\n\n}\n\n.delay1 {\n\n animation-delay: .2s !important;\n\n}\n\n.delay2 {\n\n animation-delay: .4s !important;\n\n}\n\n.delay3 {\n\n animation-delay: .6s !important;\n\n}\n\n.delay4 {\n\n animation-delay: .8s !important;\n\n}\n\n.delay5 {\n\n animation-delay: 1s !important;\n\n}\n\n.delay6 {\n\n animation-delay: 1.2s !important;\n\n}\n\n.delay7 {\n\n animation-delay: 1.4s !important;\n\n}" }, { "path": "src/assets/scss/buttons.scss", "content": ".button-client {\n\n color: #938f83;\n background-color: #1e2328;\n text-decoration: none;\n text-transform: uppercase;\n margin-top: 2rem;\n padding: 0.8rem 2rem;\n display: inline-block;\n border: 2px solid #c8aa6d;\n transition-duration: 0.2s;\n font-weight: bold;\n cursor: pointer;\n\n &:hover {\n\n color: #f0e6d2;\n\n }\n\n}" }, { "path": "src/assets/scss/menu-component.scss", "content": ".component-menu {\n\n margin-top: 7rem;\n margin-bottom: 6px;\n padding: 0 2rem;\n position: relative;\n z-index: 2;\n\n ul {\n\n li {\n\n display: inline-block;\n\n a { \n\n color: #beb088;\n font-size: 14px;\n text-transform: uppercase;\n font-weight: bold;\n letter-spacing: 1px;\n padding: 1rem 1.5rem;\n display: block;\n transition-duration: .2s;\n cursor: pointer;\n text-decoration: none;\n\n &:hover {\n\n color: #f0e6d2;\n transition-duration: .2s;\n\n }\n\n }\n\n .item-menu-active {\n\n color: #f0e6d2 !important;\n\n }\n\n .item-menu-disabled {\n \n cursor: not-allowed !important;\n filter: grayscale(100%);\n\n &:hover {\n\n color: #beb088;\n\n }\n \n }\n\n }\n\n }\n\n}\n\n.content {\n\n height: calc(100% - 164px);\n width: 100%;\n overflow-y: auto;\n position: relative;\n z-index: 2;\n\n}" }, { "path": "src/data/champions.ts", "content": "export let Champions: any = [\n\n {name: 'Ahri', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/ahri-classic.png', selectable: true, coverPicture: 'https://cdn1.dotesports.com/wp-content/uploads/sites/3/2020/07/25201017/Ahri_0.jpg'},\n {name: 'Aatrox', role: 'top', picture: 'https://www.mobafire.com/images/avatars/aatrox-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_0.jpg'},\n {name: 'Akali', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/akali-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Akali_0.jpg'},\n {name: 'Alistar', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/alistar-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg'},\n {name: 'Amumu', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/amumu-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Amumu_0.jpg'},\n {name: 'Anivia', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/anivia-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Anivia_0.jpg'},\n {name: 'Annie', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/annie-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Annie_0.jpg'},\n {name: 'Aphelios', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/aphelios-classic.png', selectable: true, coverPicture: 'https://universe-meeps.leagueoflegends.com/v1/assets/images/aphelios-splash.jpg'},\n {name: 'Ashe', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/ashe-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ashe_0.jpg'},\n {name: 'Aurelion Sol', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/aurelion-sol-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/AurelionSol_0.jpg'},\n {name: 'Azir', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/azir-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Azir_0.jpg'},\n {name: 'Bard', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/bard-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Bard_0.jpg'},\n {name: 'Blitzcrank', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/blitzcrank-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Blitzcrank_0.jpg'},\n {name: 'Brand', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/brand-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Brand_2.jpg'},\n {name: 'Braum', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/braum-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Braum_0.jpg'},\n {name: 'Caitlyn', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/caitlyn-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Caitlyn_0.jpg'},\n {name: 'Camille', role: 'top', picture: 'https://www.mobafire.com/images/avatars/camille-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Camille_0.jpg'},\n {name: 'Cassiopeia', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/cassiopeia-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Cassiopeia_0.jpg'},\n {name: \"Cho'Gatch\", role: 'top', picture: 'https://www.mobafire.com/images/avatars/chogath-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Chogath_0.jpg'},\n {name: 'Corki', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/corki-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Corki_0.jpg'},\n {name: 'Darius', role: 'top', picture: 'https://www.mobafire.com/images/avatars/darius-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Darius_0.jpg'},\n {name: 'Diana', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/diana-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Diana_0.jpg'},\n {name: 'Dr.Mundo', role: 'top', picture: 'https://www.mobafire.com/images/avatars/dr-mundo-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/DrMundo_0.jpg'},\n {name: 'Draven', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/draven-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Draven_0.jpg'},\n {name: 'Ekko', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/ekko-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ekko_0.jpg'},\n {name: 'Elise', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/elise-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Elise_0.jpg'},\n {name: 'Evelynn', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/evelynn-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Evelynn_0.jpg'},\n {name: 'Ezreal', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/ezreal-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ezreal_0.jpg'},\n {name: 'Fiddlesticks', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/fiddlesticks-classic.png', selectable: true, coverPicture: 'https://i.ytimg.com/vi/sNKbKrNQRr0/maxresdefault.jpg'},\n {name: 'Fiora', role: 'top', picture: 'https://www.mobafire.com/images/avatars/fiora-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Fiora_0.jpg'},\n {name: 'Fizz', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/fizz-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Fizz_0.jpg'},\n {name: 'Galio', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/galio-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Galio_0.jpg'},\n {name: 'Gangplank', role: 'top', picture: 'https://www.mobafire.com/images/avatars/gangplank-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Gangplank_0.jpg'},\n {name: 'Garen', role: 'top', picture: 'https://www.mobafire.com/images/avatars/garen-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Garen_0.jpg'},\n {name: 'Gnar', role: 'top', picture: 'https://www.mobafire.com/images/avatars/gnar-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Gnar_0.jpg'},\n {name: 'Gragas', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/gragas-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Gragas_0.jpg'},\n {name: 'Graves', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/graves-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Graves_0.jpg'},\n {name: 'Hecarim', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/hecarim-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Hecarim_0.jpg'},\n {name: 'Heimerdinger', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/heimerdinger-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Heimerdinger_0.jpg'},\n {name: 'Illaoi', role: 'top', picture: 'https://www.mobafire.com/images/avatars/illaoi-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Illaoi_0.jpg'},\n {name: 'Irelia', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/irelia-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Irelia_0.jpg'},\n {name: 'Ivern', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/ivern-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ivern_0.jpg'},\n {name: 'Janna', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/janna-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Janna_0.jpg'},\n {name: 'Jarvan IV', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/jarvan-iv-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/JarvanIV_0.jpg'},\n {name: 'Jax', role: 'top', picture: 'https://www.mobafire.com/images/avatars/jax-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Jax_0.jpg'},\n {name: 'Jayce', role: 'top', picture: 'https://www.mobafire.com/images/avatars/jayce-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Jayce_0.jpg'},\n {name: 'Jhin', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/jhin-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Jhin_0.jpg'},\n {name: 'Jinx', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/jinx-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Jinx_0.jpg'},\n {name: \"Kai'Sa\", role: 'adc', picture: 'https://www.mobafire.com/images/avatars/kaisa-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kaisa_0.jpg'},\n {name: 'Kalista', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/kalista-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kalista_0.jpg'},\n {name: 'Karma', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/karma-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Karma_0.jpg'},\n {name: 'Karthus', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/karthus-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Karthus_0.jpg'},\n {name: 'Kassadin', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/kassadin-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kassadin_0.jpg'},\n {name: 'Katarina', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/katarina-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Katarina_0.jpg'},\n {name: 'Kayle', role: 'top', picture: 'https://www.mobafire.com/images/avatars/kayle-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kayle_3.jpg'},\n {name: 'Kayn', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/kayn-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kayn_0.jpg'},\n {name: 'Kennen', role: 'top', picture: 'https://www.mobafire.com/images/avatars/kennen-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kennen_0.jpg'},\n {name: \"Kha'Zix\", role: 'jg', picture: 'https://www.mobafire.com/images/avatars/khazix-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Khazix_0.jpg'},\n {name: 'Kindred', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/kindred-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kindred_0.jpg'},\n {name: 'Kled', role: 'top', picture: 'https://www.mobafire.com/images/avatars/kled-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Kled_0.jpg'},\n {name: \"Kog'Maw\", role: 'adc', picture: 'https://www.mobafire.com/images/avatars/kogmaw-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/KogMaw_0.jpg'},\n {name: 'LeBlanc', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/leblanc-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Leblanc_0.jpg'},\n {name: 'Lee Sin', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/lee-sin-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/LeeSin_0.jpg'},\n {name: 'Leona', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/leona-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Leona_0.jpg'},\n {name: 'Lillia', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/lillia-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Lillia_0.jpg'},\n {name: 'Lissandra', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/lissandra-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Lissandra_0.jpg'},\n {name: 'Lucian', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/lucian-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Lucian_0.jpg'},\n {name: 'Lulu', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/lulu-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Lulu_0.jpg'},\n {name: 'Lux', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/lux-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Lux_0.jpg'},\n {name: 'Malphite', role: 'top', picture: 'https://www.mobafire.com/images/avatars/malphite-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Malphite_0.jpg'},\n {name: 'Malzahar', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/malzahar-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Malzahar_0.jpg'},\n {name: 'Maokai', role: 'top', picture: 'https://www.mobafire.com/images/avatars/maokai-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Maokai_0.jpg'},\n {name: 'Master Yi', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/master-yi-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/MasterYi_0.jpg'},\n {name: 'Miss Fortune', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/miss-fortune-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/MissFortune_0.jpg'},\n {name: 'Mordekaiser', role: 'top', picture: 'https://www.mobafire.com/images/avatars/mordekaiser-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Mordekaiser_0.jpg'},\n {name: 'Morgana', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/morgana-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Morgana_3.jpg'},\n {name: 'Nami', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/nami-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nami_0.jpg'},\n {name: 'Nasus', role: 'top', picture: 'https://www.mobafire.com/images/avatars/nasus-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nasus_0.jpg'},\n {name: 'Nautilus', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/nautilus-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nautilus_0.jpg'},\n {name: 'Neeko', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/neeko-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Neeko_0.jpg'},\n {name: 'Nidalee', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/nidalee-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nidalee_0.jpg'},\n {name: 'Nocturne', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/nocturne-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nocturne_0.jpg'},\n {name: 'Nunu & Willump', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/nunu-amp-willump-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Nunu_0.jpg'},\n {name: 'Olaf', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/olaf-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Olaf_0.jpg'},\n {name: 'Orianna', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/orianna-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Orianna_0.jpg'},\n {name: 'Ornn', role: 'top', picture: 'https://www.mobafire.com/images/avatars/ornn-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ornn_0.jpg'},\n {name: 'Pantheon', role: 'top', picture: 'https://www.mobafire.com/images/avatars/pantheon-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Pantheon_0.jpg'},\n {name: 'Poppy', role: 'top', picture: 'https://www.mobafire.com/images/avatars/poppy-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Poppy_0.jpg'},\n {name: 'Pyke', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/pyke-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Pyke_0.jpg'},\n {name: 'Qiyana', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/qiyana-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Qiyana_0.jpg'},\n {name: 'Quinn', role: 'top', picture: 'https://www.mobafire.com/images/avatars/quinn-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Quinn_0.jpg'},\n {name: 'Rakan', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/rakan-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Rakan_0.jpg'},\n {name: 'Rammus', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/rammus-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Rammus_0.jpg'},\n {name: \"Rek'Sai\", role: 'jg', picture: 'https://www.mobafire.com/images/avatars/reksai-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/RekSai_0.jpg'},\n {name: 'Rell', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/rell-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Rell_0.jpg'},\n {name: 'Renekton', role: 'top', picture: 'https://www.mobafire.com/images/avatars/renekton-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Renekton_0.jpg'},\n {name: 'Rengar', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/rengar-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Rengar_0.jpg'},\n {name: 'Riven', role: 'top', picture: 'https://www.mobafire.com/images/avatars/riven-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Riven_0.jpg'},\n {name: 'Rumble', role: 'top', picture: 'https://www.mobafire.com/images/avatars/rumble-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Rumble_0.jpg'},\n {name: 'Ryze', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/ryze-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ryze_0.jpg'},\n {name: 'Samira', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/samira-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Samira_0.jpg'},\n {name: 'Sejuani', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/sejuani-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sejuani_0.jpg'},\n {name: 'Senna', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/senna-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Senna_0.jpg'},\n {name: 'Seraphine', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/seraphine-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Seraphine_0.jpg'},\n {name: 'Sett', role: 'top', picture: 'https://www.mobafire.com/images/avatars/sett-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sett_0.jpg'},\n {name: 'Shaco', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/shaco-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Shaco_0.jpg'},\n {name: 'Shen', role: 'top', picture: 'https://www.mobafire.com/images/avatars/shen-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Shen_0.jpg'},\n {name: 'Shyvana', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/shyvana-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Shyvana_0.jpg'},\n {name: 'Singed', role: 'top', picture: 'https://www.mobafire.com/images/avatars/singed-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Singed_0.jpg'},\n {name: 'Sion', role: 'top', picture: 'https://www.mobafire.com/images/avatars/sion-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sion_0.jpg'},\n {name: 'Sivir', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/sivir-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sivir_0.jpg'},\n {name: 'Skarner', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/skarner-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Skarner_0.jpg'},\n {name: 'Sona', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/sona-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sona_0.jpg'},\n {name: 'Soraka', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/soraka-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Soraka_0.jpg'},\n {name: 'Swain', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/swain-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Swain_0.jpg'},\n {name: 'Sylas', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/sylas-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Sylas_0.jpg'},\n {name: 'Syndra', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/syndra-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Syndra_0.jpg'},\n {name: 'Tahm Kench', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/tahm-kench-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/TahmKench_0.jpg'},\n {name: 'Taliyah', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/taliyah-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Taliyah_0.jpg'},\n {name: 'Talon', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/talon-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Talon_0.jpg'},\n {name: 'Taric', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/taric-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Taric_0.jpg'},\n {name: 'Teemo', role: 'top', picture: 'https://www.mobafire.com/images/avatars/teemo-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Teemo_0.jpg'},\n {name: 'Thresh', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/thresh-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Thresh_0.jpg'},\n {name: 'Tristana', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/tristana-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Tristana_0.jpg'},\n {name: 'Trundle', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/trundle-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Trundle_0.jpg'},\n {name: 'Tryndamere', role: 'top', picture: 'https://www.mobafire.com/images/avatars/tryndamere-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Tryndamere_0.jpg'},\n {name: 'Twisted Fate', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/twisted-fate-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/TwistedFate_0.jpg'},\n {name: 'Twitch', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/twitch-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Twitch_0.jpg'},\n {name: 'Udyr', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/udyr-classic.png', selectable: true, coverPicture: 'https://pbs.twimg.com/media/ERFKIbnW4AIXZLf.jpg'},\n {name: 'Urgot', role: 'top', picture: 'https://www.mobafire.com/images/avatars/urgot-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Urgot_0.jpg'},\n {name: 'Varus', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/varus-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Varus_0.jpg'},\n {name: 'Vayne', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/vayne-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Vayne_0.jpg'},\n {name: 'Veigar', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/veigar-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Veigar_0.jpg'},\n {name: \"Vel'Koz\", role: 'sup', picture: 'https://www.mobafire.com/images/avatars/velkoz-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Velkoz_0.jpg'},\n {name: 'Vi', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/vi-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Vi_0.jpg'},\n {name: 'Viego', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/viego-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Viego_0.jpg'},\n {name: 'Viktor', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/viktor-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Viktor_0.jpg'},\n {name: 'Vladimir', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/vladimir-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Vladimir_0.jpg'},\n {name: 'Volibear', role: 'top', picture: 'https://www.mobafire.com/images/avatars/volibear-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Volibear_0.jpg'},\n {name: 'Warwick', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/warwick-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Warwick_0.jpg'},\n {name: 'Wukong', role: 'top', picture: 'https://www.mobafire.com/images/avatars/wukong-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/MonkeyKing_0.jpg'},\n {name: 'Xayah', role: 'adc', picture: 'https://www.mobafire.com/images/avatars/xayah-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Xayah_0.jpg'},\n {name: 'Xerath', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/xerath-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Xerath_0.jpg'},\n {name: 'Xin Zhao', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/xin-zhao-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/XinZhao_0.jpg'},\n {name: 'Yasuo', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/yasuo-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Yasuo_0.jpg'},\n {name: 'Yone', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/yone-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Yone_0.jpg'},\n {name: 'Yorick', role: 'top', picture: 'https://www.mobafire.com/images/avatars/yorick-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Yorick_0.jpg'},\n {name: 'Yuumi', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/yuumi-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Yuumi_0.jpg'},\n {name: 'Zac', role: 'jg', picture: 'https://www.mobafire.com/images/avatars/zac-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zac_0.jpg'},\n {name: 'Zed', role:'mid', picture: 'https://www.mobafire.com/images/avatars/zed-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zed_0.jpg'},\n {name: 'Ziggs', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/ziggs-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ziggs_0.jpg'},\n {name: 'Zilean', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/zilean-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zilean_0.jpg'},\n {name: 'Zoe', role: 'mid', picture: 'https://www.mobafire.com/images/avatars/zoe-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zoe_0.jpg'},\n {name: 'Zyra', role: 'sup', picture: 'https://www.mobafire.com/images/avatars/zyra-classic.png', selectable: true, coverPicture: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zyra_0.jpg'}\n\n]" }, { "path": "src/data/friends.ts", "content": "export let Friends = [\n\n { id: 1, name: 'Weslley', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon4770.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://www.mobafire.com/images/champion/skins/landscape/irelia-high-noon.jpg', rank: 'Platinum', rankTier: 'II', messages: [{ text: 'Hello friend :)', type: 'friend' }] },\n { id: 2, name: 'Kevin', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon3018.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Zoe_0.jpg', rank: 'Platinum', rankTier: 'I', messages: [] },\n { id: 3, name: 'Mark', status: 2, statusMessage: 'Ranked Solo/Duo', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon4653.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://www.mobafire.com/images/champion/skins/landscape/vayne-spirit-blossom.jpg', rank: 'Platinum', rankTier: 'IV', messages: [] },\n { id: 4, name: 'Paul', status: 2, statusMessage: 'Ranked Flex', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon4025.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://blogoflegends.com/files/2019/02/sinful-succulence-morgana.jpg', rank: 'Platinum', rankTier: 'III', messages: [] },\n { id: 5, name: 'Jorge', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1636.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Darius_15.jpg', rank: 'Platinum', rankTier: 'I', messages: [] },\n { id: 6, name: 'Link', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1626.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://preview.redd.it/0fhoka1lrlf51.png?width=822&format=png&auto=webp&s=ed3ba56b804eee1300f85c1173c60b4bd9ea5eb9', rank: 'Platinum', rankTier: 'II', messages: [] },\n { id: 7, name: 'Elly', status: 0, statusMessage: 'Online', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1625.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Jinx_13.jpg', rank: 'Platinum', rankTier: 'II', messages: [] },\n { id: 8, name: 'Zelda', status: 2, statusMessage: 'Na Fila', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1627.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://support-leagueoflegends.riotgames.com/hc/article_attachments/360089636874/PsyOps_Samira_FINAL.jpg', rank: 'Platinum', rankTier: 'II', messages: [] },\n { id: 9, name: 'Epona', status: 3, statusMessage: 'AFK', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1628.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://www.mobafire.com/images/champion/skins/landscape/tryndamere-chemtech.jpg', rank: 'Platinum', rankTier: 'III', messages: [] },\n { id: 10, name: 'Luke', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1629.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ryze_4.jpg', rank: 'Platinum', rankTier: 'IV', messages: [] },\n { id: 11, name: 'Darth', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1630.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://www.mobafire.com/images/champion/skins/landscape/vladimir-cosmic-devourer.jpg', rank: 'Platinum', rankTier: 'I', messages: [] },\n { id: 12, name: 'Leia', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1631.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://uailistar.com/wp-content/uploads/2020/05/Lux_7-696x411.jpg', rank: 'Platinum', rankTier: 'I', messages: [] },\n { id: 13, name: 'Jhon smurf', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1632.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://images.contentstack.io/v3/assets/blt731acb42bb3d1659/blt1168636c3a93b9e9/5f52d5af95701623b75e6d1d/01_Banner_State_Of_Skins_Kindred_Splash.jpg', rank: 'Platinum', rankTier: 'IV', messages: [] },\n { id: 14, name: 'Yoda', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1634.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Katarina_8.jpg', rank: 'Platinum', rankTier: 'IV', messages: [] },\n { id: 15, name: 'Kami', status: 1, statusMessage: 'Offline', profilePicture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon1635.jpg?image=q_auto:best&v=1518361200', profileBackground: 'https://images2.minutemediacdn.com/image/upload/c_fill,w_720,ar_16:9,f_auto,q_auto,g_auto/shape/cover/sport/Katarina_DeathSwornSkin-f0d9492b7a83186ecc95b4ce3547d833.jpg', rank: 'Platinum', rankTier: 'I', messages: [] }\n\n]" }, { "path": "src/data/items.ts", "content": "export let Items: any = [\n\n { id:1, name: 'Duskblade of Draktharr', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6691.png' },\n { id:2, name: 'Eclipse', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6692.png' },\n { id:3, name: \"Prowler's Claw\", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6693.png' },\n { id:4, name: \"Serylda's Grudge\", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6694.png' },\n { id:5, name: \"Youmuu's Ghostblade\", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3142.png' },\n { id:6, name: 'Chempunk Chainsword', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6609.png' },\n { id:7, name: \"Executioner's Calling\", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3123.png' },\n { id:8, name: 'Serrated Dirk', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3134.png' },\n { id:9, name: 'Edge of Night', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3814.png' },\n { id:10, name: 'Ionian Boots of Lucidity', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3158.png' },\n { id:11, name: 'Stealth Ward', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3340.png' },\n { id:12, name: \"Luden's Tempest\", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/6655.png' },\n { id:13, name: 'Morellonomicon', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3165.png' },\n { id:14, name: 'Lich Bane', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3100.png' },\n { id:15, name: \"Rabadon's Deathcap\", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3089.png' },\n { id:16, name: 'Void Staff', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3135.png' },\n { id:17, name: 'Rapid Firecannon', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3094.png' },\n { id:18, name: \"Archangel's Staff\", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3048.png' },\n { id:19, name: \"Zhonya's Hourglass\", image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3157.png' },\n { id:20, name:'Hextech Rocketbelt', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/item/3152.png' }\n\n]" }, { "path": "src/data/player.ts", "content": "export let Player: any = {\n\n name: localStorage.getItem('username'),\n picture: 'https://opgg-static.akamaized.net/images/profile_icons/profileIcon4791.jpg?image=q_auto:best&v=1518361200'\n\n}" }, { "path": "src/data/spells.ts", "content": "export let Spells: any = [\n\n { id: 1, name: 'Ignite', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/spell/SummonerDot.png' },\n { id: 2, name: 'Flash', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/spell/SummonerFlash.png' },\n { id: 3, name: 'Teleport', image: 'https://ddragon.leagueoflegends.com/cdn/11.4.1/img/spell/SummonerTeleport.png' }\n\n]" }, { "path": "src/environments/environment.prod.ts", "content": "export const environment = {\n production: true\n};\n" }, { "path": "src/environments/environment.ts", "content": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n production: false\n};\n\n/*\n * For easier debugging in development mode, you can import the following file\n * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.\n *\n * This import should be commented out in production mode because it will have a negative impact\n * on performance if an error is thrown.\n */\n// import 'zone.js/dist/zone-error'; // Included with Angular CLI.\n" }, { "path": "src/index.html", "content": "\n\n\n \n \n \n Angular Of Legends\n \n \n \n \n \n \n \n\n\n \n\n\n" }, { "path": "src/main.ts", "content": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n .catch(err => console.error(err));" }, { "path": "src/polyfills.ts", "content": "/***************************************************************************************************\n * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.\n */\nimport '@angular/localize/init';\n/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n * 2. Application imports. Files imported after ZoneJS that should be loaded before your main\n * file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/guide/browser-support\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/** IE10 and IE11 requires the following for NgClass support on SVG elements */\n// import 'classlist.js'; // Run `npm install --save classlist.js`.\n\n/**\n * Web Animations `@angular/platform-browser/animations`\n * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.\n * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).\n */\n// import 'web-animations-js'; // Run `npm install --save web-animations-js`.\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n * because those flags need to be set before `zone.js` being loaded, and webpack\n * will put import in the top of bundle, so user need to create a separate file\n * in this directory (for example: zone-flags.ts), and put the following flags\n * into that file, and then add the following code before importing zone.js.\n * import './zone-flags';\n *\n * The flags allowed in zone-flags.ts are listed here.\n *\n * The following flags will work for all browsers.\n *\n * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n *\n * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n * with the following flag, it will bypass `zone.js` patch for IE/Edge\n *\n * (window as any).__Zone_enable_cross_context_check = true;\n *\n */\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js/dist/zone'; // Included with Angular CLI.\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n" }, { "path": "src/styles.scss", "content": "/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\n\n@font-face {\n\n font-family: FrizQuadrata;\n src: url(assets/fonts/FrizQuadrata.ttf);\n\n}\n\n@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');\n\n::-webkit-scrollbar-track {\n\tbackground: transparent;\n}\n\n::-webkit-scrollbar {\n\twidth: 4px;\n\tbackground: transparent;\n}\n\n::-webkit-scrollbar-thumb {\n\tbackground: #785a28;\n\tborder-radius: 300px;\n}\n\n*:focus {\n\n\toutline: 0 !important;\n\n}\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed, \nfigure, figcaption, footer, header, hgroup, \nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n\tfont-family: 'FrizQuadrata';\n\ttext-rendering: optimizeLegibility;\n}\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure, \nfooter, header, hgroup, menu, nav, section {\n\tdisplay: block;\n}\nbody {\n line-height: 1;\n background-color: #030619;\n}\nol, ul {\n\tlist-style: none;\n}\nblockquote, q {\n\tquotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n\n@media only screen and (max-width: 1450px) {\n\n\tapp-root app-main-client-layout .main-aside .friend-list .scrollable-area-lobby {\n\n\t\theight: calc(100vh - 277px) !important;\n\n\t}\n\n\tapp-main-client-layout {\n\n\t\t.main-layout-horizontal-line {\n\n\t\t\ttop: 75px !important;\n\n\t\t}\n\n\t\t.main-header {\n\n\t\t\twidth: calc(100vw - 240px) !important;\n\t\t\theight: 75px !important;\n\n\t\t\tnav {\n\n\t\t\t\theight: 75px;\n\n\t\t\t\tul {\n\n\t\t\t\t\theight: 75px;\n\t\t\t\t\tdisplay: flex !important;\n\t\t\t\t\tjustify-content: flex-start;\n\n\t\t\t\t\t.button-play-wrapper {\n\n\t\t\t\t\t\ttransform: scale(.8) translateY(-7px);\n\t\t\t\t\t\tmargin-right: -26px;\n\n\t\t\t\t\t}\n\n\t\t\t\t\tli {\n\n\t\t\t\t\t\tfont-size: 14px !important;\n\t\t\t\t\t\theight: 100%;\n\n\t\t\t\t\t\ta {\n\n\t\t\t\t\t\t\tpadding: 30px .5rem !important;\n\n\t\t\t\t\t\t}\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t\t.right-list {\n\n\t\t\t\t\theight: 75px;\n\t\t\t\t\ttop: 0 !important;\n\n\t\t\t\t\tli {\n\n\t\t\t\t\t\ta {\n\n\t\t\t\t\t\t\tpadding: 0 1rem !important;\n\t\t\t\t\t\t\tdisplay: block;\n\n\t\t\t\t\t\t\timg {\n\n\t\t\t\t\t\t\t\twidth: 24px;\n\t\t\t\t\t\t\t\tpadding: 24px .5rem !important;\n\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.divider { margin-top: 6px !important }\n\n\t\t\t\t\t}\n\n\t\t\t\t\t.money { \n\t\t\t\t\t\t\n\t\t\t\t\t\ttop: 9px !important;\n\n\t\t\t\t\t\timg { width: 14px; }\n\n\t\t\t\t\t\tspan { font-size: 12px !important; }\n\n\t\t\t\t\t\t.riot-points { margin-top: 6px; }\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\n\t\t.main-aside {\n\n\t\t\twidth: 240px !important;\n\n\t\t\t.user-information {\n\n\t\t\t\theight: 75px;\n\n\t\t\t\t.user-wrapper { \n\t\t\t\t\t\n\t\t\t\t\twidth: 145px !important;\n\t\t\t\t\theight: 100% !important;\n\n\t\t\t\t\t.user-nickname {\n\n\t\t\t\t\t\tpadding-top: 16px !important;\n\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t}\n\n\t\t\t\t.profile-image { width: 67px !important }\n\n\t\t\t\timg {\n\t\t\t\t\t\n\t\t\t\t\twidth: 66px;\n\t\t\t\t\tmargin: 2px !important;\n\n\t\t\t\t}\n\n\t\t\t\t.user-level {\n\n\t\t\t\t\tleft: 22px !important;\n\t\t\t\t\ttop: 55.6px !important;\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\t.play-informations {\n\n\t\t\t\twidth: 240px !important;\n\n\t\t\t\t.lobby, .queue { width: 208px !important; }\n\n\t\t\t}\n\n\t\t\t.menu-aside {\n\n\t\t\t\tfont-size: 14px;\n\t\t\t\t\n\t\t\t\timg { width: 16px }\n\n\t\t\t}\n\n\t\t\t.group-area {\n\n\t\t\t\tli {\n\n\t\t\t\t\timg { width: 30px; }\n\t\t\t\t\t.group-name { font-size: 14px !important }\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\t.scrollable-area {\n\n\t\t\t\theight: calc(100vh - 162px) !important;\n\n\t\t\t}\n\n\t\t\tfooter {\n\n\t\t\t\theight: 43px !important;\n\n\t\t\t\t.client-version { width: 63px !important }\n\n\t\t\t\timg { width: 16px !important }\n\n\t\t\t}\n\n\t\t}\n\n\t\t.match-found {\n\n\t\t\t.external-circle { transform: scale(.7) !important }\n\n\t\t}\n\n\t}\n\n\t.component-menu {\n\n\t\tmargin-top: 5rem !important;\n\n\t}\n\n\t.main-content {\n\n\t\twidth: calc(100% - 304px) !important;\n\n\t\t\n\t\t.content {\n\t\t\t\n\t\t\theight: calc(100% - 132px);\n\n\t\t}\n\n\t}\n\n\t// app-main-client-layout main app-profile .content { height: 100% !important; }\n\n\tapp-profile {\n\n\t\t.banner.banner-visible {\n\t\t\t\n\t\t\ttransform: scale(.8) !important;\n\t\t\ttop: 357px !important;\n\n\t\t}\n\n\t\t.content {\n\n\t\t\t.profile-info {\n\n\t\t\t\ttransform: scale(0.8) translate(60px, 80px);\n\t\t\t\tposition: fixed;\n\t\t\t\tbottom: 0;\n\t\t\t\tright: 214px;\n\n\t\t\t\t.delay2 {\n\n\t\t\t\t\t.subtitle {\n\n\t\t\t\t\t\ttop: 30px !important;\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t\t.mastery-wrapper {\n\n\t\t\t\t\tposition: relative;\n\n\t\t\t\t\t.banner { left: calc(50% - 35px) !important }\n\n\t\t\t\t\t.mastery { \n\t\t\t\t\t\t\n\t\t\t\t\t\tbottom: -24px !important;\n \t\t\t\t\tleft: calc(50% - 26px) !important;\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t\t.mastery-popover {\n\t\t\n\t\t\t\t\ttransform: scale(.8) !important;\n\t\t\t\t\tleft: -288px !important;\n\t\t\t\t\tbottom: 298px !important;\n\n\t\t\t\t\t.banner {\n\n \t\t\t\t\tleft: 39px !important;\n\n\t\t\t\t\t}\n\n\t\t\t\t\t.mastery { \n\n\t\t\t\t\t\tbottom: 112px !important;\n\t\t\t\t\t\tleft: 50px !important;\n\n\t\t\t\t\t}\n\t\t\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\n\t}\n\n\tapp-play-menu {\n\n\t\tapp-pvp {\n\n\t\t\tul {\n\n\t\t\t\tli {\n\n\t\t\t\t\timg { width: 100px !important }\n\n\t\t\t\t\t.game-type { margin-top: .8rem !important }\n\n\t\t\t\t\t.game-title {\n\t\t\t\t\t\t\n\t\t\t\t\t\tfont-size: 20px !important;\n\t\t\t\t\t\tpadding-bottom: 1.5rem !important;\n\n\t\t\t\t\t}\n\n\t\t\t\t\t.game-title-lg {\n\n\t\t\t\t\t\tpadding-bottom: 2.75rem !important;\n\n\t\t\t\t\t}\n\n\t\t\t\t\t.game-description {\n\n\t\t\t\t\t\tfont-size: 16px !important;\n\n\t\t\t\t\t}\n\n\t\t\t\t\t.game-options { transform: scale(0.8) translate(-26px, -32px) }\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\n\t}\n\n\tapp-lobby {\n\n\t\theader {\n\n\t\t\tmargin-top: 5rem !important;\n\n\t\t}\n\n\t\t.banners {\n\n\t\t\t.banner {\n\t\t\t\t\n\t\t\t\twidth: 253px !important;\n\n\t\t\t\timg { width: 100%; }\n\n\t\t\t\t.player-informations {\n\n\t\t\t\t\ttransform: scale(.8);\n\t\t\t\t\tpadding-top: 131px !important;\t\n\n\t\t\t\t\t.role-select-button {\n\n\t\t\t\t\t\timg { width: auto !important; }\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\t\t\t\n\t\t\t}\n\n\t\t}\n\n\t\t.role-select {\n\n\t\t\tbackground: none !important;\n\t\t\ttransform: scale(.8);\n\t\t\theight: 250px !important;\n\t\t\ttop: 305px !important;\n\t\t\t\n\t\t\t.role-select-button{\n\n\t\t\t\tmargin-top: 100px !important;\n\n\t\t\t}\n\n\t\t\t.mid, .top, .sup, .adc, .jg, .fill { height: auto !important; }\n\n\t\t\t.mid { top: 10px !important; }\n\n\t\t\t.jg, .adc { top: 80px !important; }\n\n\t\t\t.top, .sup { top: 140px !important; }\n\n\t\t\t.fill { top: 190px !important; }\n\n\t\t}\n\n\t}\n\n\tapp-loading {\n\n\t\toverflow: hidden;\n\n\t\t.teams {\n\n\t\t\ttransform: scale(.7);\n\n\t\t\tul {\n\t\t\t\t\n\t\t\t\tflex-wrap: nowrap !important;\n\t\t\t\n\t\t\t}\n\n\t\t}\n\n\t}\n\n\tapp-match-history {\n\n\t\t.match-history {\n\n\t\t\twidth: calc(100% - 422px) !important;\n\n\t\t\t.match {\n\n\t\t\t\t.champion-image-wrapper {\n\n\t\t\t\t\timg { width: 60px !important; }\n\n\t\t\t\t}\n\n\t\t\t\t.champion-level {\n\t\t\t\t\t\n\t\t\t\t\tfont-size: 14px !important;\n\t\t\t\t\tleft: 50px !important;\n\t\t\t\t\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t.info-match-wrapper {\n\n\t\t\t\t\tpadding-left: 12px;\n\n\t\t\t\t\t.match-status {\n\n\t\t\t\t\t\tfont-size: 16px !important;\n\n\t\t\t\t\t}\n\n\t\t\t\t\t.match-mode { font-size: 14px !important; }\n\n\t\t\t\t}\n\n\t\t\t\t.spells {\n\n\t\t\t\t\timg { width: 25px !important; }\n\n\t\t\t\t}\n\n\t\t\t\t.overview-match-wrapper {\n\n\t\t\t\t\twidth: 266px !important;\n\t\t\t\t\tpadding-left: 12px;\n\n\t\t\t\t\t.item {\n\n\t\t\t\t\t\twidth: 36px !important;\n\t\t\t\t\t\theight: 35px !important;\n\n\t\t\t\t\t}\n\n\t\t\t\t\tspan { font-size: 14px !important; }\n\n\t\t\t\t}\n\n\t\t\t\t.time-match-wrapper {\n\n\t\t\t\t\tdisplay: none;\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\n\t\t.recently-champions {\n\n\t\t\toverflow: auto;\n\t\t\twidth: 350px !important;\n\t\t\theight: calc(100% - 156px) !important;\n\n\t\t\t.recent-activity-wrapper {\n\n\t\t\t\tpadding-bottom: 24px;\n\n\t\t\t}\n\n\t\t}\n\n\t}\n\t\n\t.chat-open {\n\n\t\ttransform: scale(.8);\n\t\tbottom: -51px !important;\n\t\tright: 180px !important;\n\n\t}\n\n}" }, { "path": "src/test.ts", "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/zone-testing';\nimport { getTestBed } from '@angular/core/testing';\nimport {\n BrowserDynamicTestingModule,\n platformBrowserDynamicTesting\n} from '@angular/platform-browser-dynamic/testing';\n\ndeclare const require: {\n context(path: string, deep?: boolean, filter?: RegExp): {\n keys(): string[];\n (id: string): T;\n };\n};\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(\n BrowserDynamicTestingModule,\n platformBrowserDynamicTesting()\n);\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n// And load the modules.\ncontext.keys().map(context);\n" }, { "path": "tsconfig.app.json", "content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": [\n \"src/main.ts\",\n \"src/polyfills.ts\"\n ],\n \"include\": [\n \"src/**/*.d.ts\"\n ]\n}\n" }, { "path": "tsconfig.json", "content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\": true,\n \"declaration\": false,\n \"downlevelIteration\": true,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"node\",\n \"importHelpers\": true,\n \"target\": \"es2015\",\n \"module\": \"es2020\",\n \"lib\": [\n \"es2018\",\n \"dom\"\n ]\n }\n}\n" }, { "path": "tsconfig.spec.json", "content": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/spec\",\n \"types\": [\n \"jasmine\"\n ]\n },\n \"files\": [\n \"src/test.ts\",\n \"src/polyfills.ts\"\n ],\n \"include\": [\n \"src/**/*.spec.ts\",\n \"src/**/*.d.ts\"\n ]\n}\n" }, { "path": "tslint.json", "content": "{\n \"extends\": \"tslint:recommended\",\n \"rulesDirectory\": [\n \"codelyzer\"\n ],\n \"rules\": {\n \"align\": {\n \"options\": [\n \"parameters\",\n \"statements\"\n ]\n },\n \"array-type\": false,\n \"arrow-return-shorthand\": true,\n \"curly\": true,\n \"deprecation\": {\n \"severity\": \"warning\"\n },\n \"eofline\": true,\n \"import-blacklist\": [\n true,\n \"rxjs/Rx\"\n ],\n \"import-spacing\": true,\n \"indent\": {\n \"options\": [\n \"spaces\"\n ]\n },\n \"max-classes-per-file\": false,\n \"max-line-length\": [\n true,\n 140\n ],\n \"member-ordering\": [\n true,\n {\n \"order\": [\n \"static-field\",\n \"instance-field\",\n \"static-method\",\n \"instance-method\"\n ]\n }\n ],\n \"no-console\": [\n true,\n \"debug\",\n \"info\",\n \"time\",\n \"timeEnd\",\n \"trace\"\n ],\n \"no-empty\": false,\n \"no-inferrable-types\": [\n true,\n \"ignore-params\"\n ],\n \"no-non-null-assertion\": true,\n \"no-redundant-jsdoc\": true,\n \"no-switch-case-fall-through\": true,\n \"no-var-requires\": false,\n \"object-literal-key-quotes\": [\n true,\n \"as-needed\"\n ],\n \"quotemark\": [\n true,\n \"single\"\n ],\n \"semicolon\": {\n \"options\": [\n \"always\"\n ]\n },\n \"space-before-function-paren\": {\n \"options\": {\n \"anonymous\": \"never\",\n \"asyncArrow\": \"always\",\n \"constructor\": \"never\",\n \"method\": \"never\",\n \"named\": \"never\"\n }\n },\n \"typedef\": [\n true,\n \"call-signature\"\n ],\n \"typedef-whitespace\": {\n \"options\": [\n {\n \"call-signature\": \"nospace\",\n \"index-signature\": \"nospace\",\n \"parameter\": \"nospace\",\n \"property-declaration\": \"nospace\",\n \"variable-declaration\": \"nospace\"\n },\n {\n \"call-signature\": \"onespace\",\n \"index-signature\": \"onespace\",\n \"parameter\": \"onespace\",\n \"property-declaration\": \"onespace\",\n \"variable-declaration\": \"onespace\"\n }\n ]\n },\n \"variable-name\": {\n \"options\": [\n \"ban-keywords\",\n \"check-format\",\n \"allow-pascal-case\"\n ]\n },\n \"whitespace\": {\n \"options\": [\n \"check-branch\",\n \"check-decl\",\n \"check-operator\",\n \"check-separator\",\n \"check-type\",\n \"check-typecast\"\n ]\n },\n \"component-class-suffix\": true,\n \"contextual-lifecycle\": true,\n \"directive-class-suffix\": true,\n \"no-conflicting-lifecycle\": true,\n \"no-host-metadata-property\": true,\n \"no-input-rename\": true,\n \"no-inputs-metadata-property\": true,\n \"no-output-native\": true,\n \"no-output-on-prefix\": true,\n \"no-output-rename\": true,\n \"no-outputs-metadata-property\": true,\n \"template-banana-in-box\": true,\n \"template-no-negated-async\": true,\n \"use-lifecycle-interface\": true,\n \"use-pipe-transform-interface\": true,\n \"directive-selector\": [\n true,\n \"attribute\",\n \"app\",\n \"camelCase\"\n ],\n \"component-selector\": [\n true,\n \"element\",\n \"app\",\n \"kebab-case\"\n ]\n }\n}\n" } ]