From ac43777da990f43877bde67a48939882287b2900 Mon Sep 17 00:00:00 2001 From: svensken Date: Sat, 22 Oct 2022 18:28:02 +0300 Subject: [PATCH] main sections, sessions, games in left menu --- package-lock.json | 14 ++++++ package.json | 1 + .../ui/src/lib/button/button.component.scss | 5 ++ projects/ui/src/lib/game/game.component.html | 10 ++++ projects/ui/src/lib/game/game.component.scss | 31 ++++++++++++ .../ui/src/lib/game/game.component.spec.ts | 23 +++++++++ projects/ui/src/lib/game/game.component.ts | 20 ++++++++ projects/ui/src/lib/game/game.module.ts | 24 ++++++++++ projects/ui/src/lib/interfaces/session.ts | 3 +- .../ui/src/lib/pipes/countdown.pipe.spec.ts | 8 ++++ projects/ui/src/lib/pipes/countdown.pipe.ts | 28 +++++++++++ projects/ui/src/lib/pipes/pipes.module.ts | 18 +++++++ .../ui/src/lib/section/section.component.scss | 31 ++---------- .../ui/src/lib/session/session.component.html | 10 +++- .../ui/src/lib/session/session.component.scss | 47 +++++++++++++++--- projects/ui/src/lib/session/session.module.ts | 4 +- projects/ui/src/lib/tag/tag.component.html | 5 ++ projects/ui/src/lib/tag/tag.component.scss | 13 +++++ projects/ui/src/lib/tag/tag.component.spec.ts | 23 +++++++++ projects/ui/src/lib/tag/tag.component.ts | 15 ++++++ projects/ui/src/lib/tag/tag.module.ts | 20 ++++++++ projects/ui/src/lib/ui.module.ts | 9 ++++ projects/ui/src/public-api.ts | 3 ++ .../main/main-menu/main-menu.component.html | 9 ++-- .../menu-games/menu-games.component.html | 10 ++++ .../menu-games/menu-games.component.scss | 9 ++++ .../menu-games/menu-games.component.spec.ts | 23 +++++++++ .../menu-games/menu-games.component.ts | 29 +++++++++++ .../menu-sessions.component.html | 8 +++- .../menu-sessions/menu-sessions.component.ts | 17 ++++--- .../main/main-root/main-root.component.html | 5 +- .../main/main-root/main-root.component.scss | 2 - .../main/main-root/main-root.component.ts | 22 --------- src/app/components/main/main.module.ts | 48 +++++++++++++++++-- src/app/components/main/routing.module.ts | 35 ++++++++++++++ src/app/components/main/sections/_global.scss | 17 +++++++ .../friends-page/friends-page.component.html | 8 ++++ .../friends-page/friends-page.component.scss | 7 +++ .../friends-page.component.spec.ts | 23 +++++++++ .../friends-page/friends-page.component.ts | 15 ++++++ .../game-page/game-page.component.html | 14 ++++++ .../game-page/game-page.component.scss | 7 +++ .../game-page/game-page.component.spec.ts | 23 +++++++++ .../sections/game-page/game-page.component.ts | 15 ++++++ .../games-page/games-page.component.html | 8 ++++ .../games-page/games-page.component.scss | 7 +++ .../games-page/games-page.component.spec.ts | 23 +++++++++ .../games-page/games-page.component.ts | 15 ++++++ .../servers-page/servers-page.component.html | 8 ++++ .../servers-page/servers-page.component.scss | 7 +++ .../servers-page.component.spec.ts | 23 +++++++++ .../servers-page/servers-page.component.ts | 15 ++++++ .../session-page/session-page.component.html | 14 ++++++ .../session-page/session-page.component.scss | 7 +++ .../session-page.component.spec.ts | 23 +++++++++ .../session-page/session-page.component.ts | 15 ++++++ src/app/interfaces/game.interface.ts | 2 +- src/app/modules/app-routing.module.ts | 3 +- src/assets/icons/Name=play.svg | 3 ++ src/styles.scss | 2 + 60 files changed, 803 insertions(+), 83 deletions(-) create mode 100644 projects/ui/src/lib/game/game.component.html create mode 100644 projects/ui/src/lib/game/game.component.scss create mode 100644 projects/ui/src/lib/game/game.component.spec.ts create mode 100644 projects/ui/src/lib/game/game.component.ts create mode 100644 projects/ui/src/lib/game/game.module.ts create mode 100644 projects/ui/src/lib/pipes/countdown.pipe.spec.ts create mode 100644 projects/ui/src/lib/pipes/countdown.pipe.ts create mode 100644 projects/ui/src/lib/pipes/pipes.module.ts create mode 100644 projects/ui/src/lib/tag/tag.component.html create mode 100644 projects/ui/src/lib/tag/tag.component.scss create mode 100644 projects/ui/src/lib/tag/tag.component.spec.ts create mode 100644 projects/ui/src/lib/tag/tag.component.ts create mode 100644 projects/ui/src/lib/tag/tag.module.ts create mode 100644 src/app/components/main/main-menu/menu-games/menu-games.component.html create mode 100644 src/app/components/main/main-menu/menu-games/menu-games.component.scss create mode 100644 src/app/components/main/main-menu/menu-games/menu-games.component.spec.ts create mode 100644 src/app/components/main/main-menu/menu-games/menu-games.component.ts create mode 100644 src/app/components/main/routing.module.ts create mode 100644 src/app/components/main/sections/_global.scss create mode 100644 src/app/components/main/sections/friends-page/friends-page.component.html create mode 100644 src/app/components/main/sections/friends-page/friends-page.component.scss create mode 100644 src/app/components/main/sections/friends-page/friends-page.component.spec.ts create mode 100644 src/app/components/main/sections/friends-page/friends-page.component.ts create mode 100644 src/app/components/main/sections/game-page/game-page.component.html create mode 100644 src/app/components/main/sections/game-page/game-page.component.scss create mode 100644 src/app/components/main/sections/game-page/game-page.component.spec.ts create mode 100644 src/app/components/main/sections/game-page/game-page.component.ts create mode 100644 src/app/components/main/sections/games-page/games-page.component.html create mode 100644 src/app/components/main/sections/games-page/games-page.component.scss create mode 100644 src/app/components/main/sections/games-page/games-page.component.spec.ts create mode 100644 src/app/components/main/sections/games-page/games-page.component.ts create mode 100644 src/app/components/main/sections/servers-page/servers-page.component.html create mode 100644 src/app/components/main/sections/servers-page/servers-page.component.scss create mode 100644 src/app/components/main/sections/servers-page/servers-page.component.spec.ts create mode 100644 src/app/components/main/sections/servers-page/servers-page.component.ts create mode 100644 src/app/components/main/sections/session-page/session-page.component.html create mode 100644 src/app/components/main/sections/session-page/session-page.component.scss create mode 100644 src/app/components/main/sections/session-page/session-page.component.spec.ts create mode 100644 src/app/components/main/sections/session-page/session-page.component.ts create mode 100644 src/assets/icons/Name=play.svg diff --git a/package-lock.json b/package-lock.json index f552361..5917248 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@tinkoff/ng-dompurify": "3.0.0", "dompurify": "2.2.9", "fast-average-color": "^9.1.1", + "moment": "^2.29.4", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -8044,6 +8045,14 @@ "node": ">=10" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -17786,6 +17795,11 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==" }, + "moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index 3b9d8fc..2dd9642 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@tinkoff/ng-dompurify": "3.0.0", "dompurify": "2.2.9", "fast-average-color": "^9.1.1", + "moment": "^2.29.4", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/projects/ui/src/lib/button/button.component.scss b/projects/ui/src/lib/button/button.component.scss index ae66956..9a255fa 100644 --- a/projects/ui/src/lib/button/button.component.scss +++ b/projects/ui/src/lib/button/button.component.scss @@ -9,5 +9,10 @@ background-color: var(--sk-accent); border: none; border-radius: var(--sk-br-m); + cursor: pointer; + + &:hover { + opacity: 0.9; + } } } diff --git a/projects/ui/src/lib/game/game.component.html b/projects/ui/src/lib/game/game.component.html new file mode 100644 index 0000000..74fe23a --- /dev/null +++ b/projects/ui/src/lib/game/game.component.html @@ -0,0 +1,10 @@ +
+ +
+
+ {{game.title}} +
+ description +
+ +
\ No newline at end of file diff --git a/projects/ui/src/lib/game/game.component.scss b/projects/ui/src/lib/game/game.component.scss new file mode 100644 index 0000000..b0d0426 --- /dev/null +++ b/projects/ui/src/lib/game/game.component.scss @@ -0,0 +1,31 @@ +:host { + display: block; + + .sk-game { + display: flex; + align-items: center; + gap: var(--sk-gap-l); + padding: var(--sk-gap-l); + border-radius: var(--sk-br-m); + transition: 0.1s ease; + opacity: 0.5; + cursor: pointer; + + &:hover { + opacity: 1; + background-color: rgba(255, 255, 255, 0.05); + } + + .sk-game-info { + flex: 1; + } + } + + &.active { + + .sk-game { + opacity: 1; + background-color: rgba(255, 255, 255, 0.1); + } + } +} diff --git a/projects/ui/src/lib/game/game.component.spec.ts b/projects/ui/src/lib/game/game.component.spec.ts new file mode 100644 index 0000000..0dd0e86 --- /dev/null +++ b/projects/ui/src/lib/game/game.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GameComponent } from './game.component'; + +describe('GameComponent', () => { + let component: GameComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GameComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GameComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/game/game.component.ts b/projects/ui/src/lib/game/game.component.ts new file mode 100644 index 0000000..6042768 --- /dev/null +++ b/projects/ui/src/lib/game/game.component.ts @@ -0,0 +1,20 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Game } from 'src/app/interfaces/game.interface' + +@Component({ + selector: 'skirda-game[game]', + templateUrl: './game.component.html', + styleUrls: ['./game.component.scss'] +}) +export class GameComponent implements OnInit { + @Input() game!: Game + + constructor() { } + + ngOnInit(): void { + } + + run(game: Game) { + console.log('Game to run ' + game.title) + } +} diff --git a/projects/ui/src/lib/game/game.module.ts b/projects/ui/src/lib/game/game.module.ts new file mode 100644 index 0000000..6a75e01 --- /dev/null +++ b/projects/ui/src/lib/game/game.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { GameComponent } from './game.component'; +import { ImageIconModule } from '../image-icon/image-icon.module' +import { TypographyModule } from '../typography/typography.module' +import { TagModule } from '../tag/tag.module' +import { IconModule } from '../icon/icon.module' + +@NgModule({ + declarations: [ + GameComponent + ], + imports: [ + CommonModule, + ImageIconModule, + TypographyModule, + TagModule, + IconModule + ], + exports: [ + GameComponent + ] +}) +export class GameModule { } diff --git a/projects/ui/src/lib/interfaces/session.ts b/projects/ui/src/lib/interfaces/session.ts index dc6aa82..564a347 100644 --- a/projects/ui/src/lib/interfaces/session.ts +++ b/projects/ui/src/lib/interfaces/session.ts @@ -1,7 +1,8 @@ export interface Session { + id: string; icon: string; title: string; status?: string; version: string; - expires: string | Date; + expires: Date; } diff --git a/projects/ui/src/lib/pipes/countdown.pipe.spec.ts b/projects/ui/src/lib/pipes/countdown.pipe.spec.ts new file mode 100644 index 0000000..1be2dc0 --- /dev/null +++ b/projects/ui/src/lib/pipes/countdown.pipe.spec.ts @@ -0,0 +1,8 @@ +import { CountdownPipe } from './countdown.pipe'; + +describe('CountdownPipe', () => { + it('create an instance', () => { + const pipe = new CountdownPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/pipes/countdown.pipe.ts b/projects/ui/src/lib/pipes/countdown.pipe.ts new file mode 100644 index 0000000..bc10c5a --- /dev/null +++ b/projects/ui/src/lib/pipes/countdown.pipe.ts @@ -0,0 +1,28 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import moment from 'moment' +import { map, min, timer } from 'rxjs' + +@Pipe({ + name: 'countdown' +}) +export class CountdownPipe implements PipeTransform { + + transform(value: Date) { + return timer(0, 1000).pipe(map((_) => this.getCountDown(value))) + } + + getCountDown (value: Date) { + let currentTime = new Date() + let duration = moment.duration(value.getTime() - currentTime.getTime(), 'milliseconds') + + let days = duration.days(), hours = duration.hours(), minutes = duration.minutes(), seconds = duration.seconds() + if (days > 0) + return `${days} ${days == 1 ? 'day' : 'days'}` + else + return `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}` + } + + private pad (value: number) { + return value.toString().padStart(2, '0') + } +} diff --git a/projects/ui/src/lib/pipes/pipes.module.ts b/projects/ui/src/lib/pipes/pipes.module.ts new file mode 100644 index 0000000..99690de --- /dev/null +++ b/projects/ui/src/lib/pipes/pipes.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CountdownPipe } from './countdown.pipe'; + + + +@NgModule({ + declarations: [ + CountdownPipe + ], + imports: [ + CommonModule + ], + exports: [ + CountdownPipe + ] +}) +export class PipesModule { } diff --git a/projects/ui/src/lib/section/section.component.scss b/projects/ui/src/lib/section/section.component.scss index 1939834..caa6d0b 100644 --- a/projects/ui/src/lib/section/section.component.scss +++ b/projects/ui/src/lib/section/section.component.scss @@ -9,32 +9,13 @@ align-items: center; padding: var(--sk-gap-l); gap: var(--sk-gap-l); - opacity: 0.75; - mix-blend-mode: overlay; - transition: 0.2s ease; + opacity: 0.5; + transition: 0.1s ease; cursor: pointer; &:hover { opacity: 1; - - &:before { - opacity: 0.5; - } - } - - &:before { - content: ''; - display: block; - position: absolute; - top: 0; - left: 0; - background-color: rgba(255, 255, 255, 0.2); - width: 100%; - height: 100%; - mix-blend-mode: overlay; - z-index: -1; - opacity: 0; - transition: 0.2s ease; + background-color: rgba(255, 255, 255, 0.05); } } @@ -42,11 +23,7 @@ .sk-section { opacity: 1; - mix-blend-mode: normal; - - &:before { - opacity: 1; - } + background-color: rgba(255, 255, 255, 0.1); } } } diff --git a/projects/ui/src/lib/session/session.component.html b/projects/ui/src/lib/session/session.component.html index 73c433d..6e113b0 100644 --- a/projects/ui/src/lib/session/session.component.html +++ b/projects/ui/src/lib/session/session.component.html @@ -1,7 +1,13 @@
- {{session.title}} - {{session.status}} +
+ {{session.title}} + {{session.expires | countdown | async}} +
+
+ {{session.version}} + {{session.status}} +
diff --git a/projects/ui/src/lib/session/session.component.scss b/projects/ui/src/lib/session/session.component.scss index e18a48c..4395630 100644 --- a/projects/ui/src/lib/session/session.component.scss +++ b/projects/ui/src/lib/session/session.component.scss @@ -1,22 +1,55 @@ :host { display: block; - &.active { - - .sk-session { - background-color: var(--image-accent); - } - } - .sk-session { display: flex; align-items: center; gap: var(--sk-gap-l); padding: var(--sk-gap-l); border-radius: var(--sk-br-m); + transition: 0.1s ease; + opacity: 0.5; + cursor: pointer; + + &:hover { + opacity: 1; + background-color: rgba(255, 255, 255, 0.05); + } .sk-session-info { + flex: 1; + display: flex; + flex-direction: column; + gap: var(--sk-gap-s); + .info-heading-line { + display: flex; + justify-content: space-between; + align-items: baseline; + } + + .info-line { + display: flex; + align-items: baseline; + gap: var(--sk-gap-m); + max-width: 248px; + + skirda-text { + flex: 1; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: block; + } + } + } + } + + &.active { + + .sk-session { + opacity: 1; + background-color: rgba(255, 255, 255, 0.1); } } } diff --git a/projects/ui/src/lib/session/session.module.ts b/projects/ui/src/lib/session/session.module.ts index 07f9ffe..c008b03 100644 --- a/projects/ui/src/lib/session/session.module.ts +++ b/projects/ui/src/lib/session/session.module.ts @@ -3,10 +3,12 @@ import { CommonModule } from '@angular/common'; import { SessionComponent } from './session.component'; import { ImageIconModule } from '../image-icon/image-icon.module'; import { TypographyModule } from '../typography/typography.module'; +import { TagModule } from '../tag/tag.module' +import { PipesModule } from '../pipes/pipes.module' @NgModule({ declarations: [SessionComponent], - imports: [CommonModule, ImageIconModule, TypographyModule], + imports: [CommonModule, ImageIconModule, TypographyModule, TagModule, PipesModule], exports: [SessionComponent], }) export class SessionModule {} diff --git a/projects/ui/src/lib/tag/tag.component.html b/projects/ui/src/lib/tag/tag.component.html new file mode 100644 index 0000000..cd8963c --- /dev/null +++ b/projects/ui/src/lib/tag/tag.component.html @@ -0,0 +1,5 @@ +
+ + + +
\ No newline at end of file diff --git a/projects/ui/src/lib/tag/tag.component.scss b/projects/ui/src/lib/tag/tag.component.scss new file mode 100644 index 0000000..d160a58 --- /dev/null +++ b/projects/ui/src/lib/tag/tag.component.scss @@ -0,0 +1,13 @@ +:host { + + &.filled .sk-tag { + background-color: var(--sk-accent); + } + + .sk-tag { + display: inline-block; + padding: 0px var(--sk-gap-m); + border-radius: var(--sk-br-s); + background-color: rgba(255, 255, 255, 0.05); + } +} diff --git a/projects/ui/src/lib/tag/tag.component.spec.ts b/projects/ui/src/lib/tag/tag.component.spec.ts new file mode 100644 index 0000000..e511738 --- /dev/null +++ b/projects/ui/src/lib/tag/tag.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TagComponent } from './tag.component'; + +describe('TagComponent', () => { + let component: TagComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TagComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TagComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/tag/tag.component.ts b/projects/ui/src/lib/tag/tag.component.ts new file mode 100644 index 0000000..92f49c8 --- /dev/null +++ b/projects/ui/src/lib/tag/tag.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'skirda-tag', + templateUrl: './tag.component.html', + styleUrls: ['./tag.component.scss'] +}) +export class TagComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/projects/ui/src/lib/tag/tag.module.ts b/projects/ui/src/lib/tag/tag.module.ts new file mode 100644 index 0000000..8b1771d --- /dev/null +++ b/projects/ui/src/lib/tag/tag.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { TagComponent } from './tag.component'; +import { TypographyModule } from '../typography/typography.module' + + + +@NgModule({ + declarations: [ + TagComponent + ], + imports: [ + CommonModule, + TypographyModule + ], + exports: [ + TagComponent + ] +}) +export class TagModule { } diff --git a/projects/ui/src/lib/ui.module.ts b/projects/ui/src/lib/ui.module.ts index 1d72f31..f39f338 100644 --- a/projects/ui/src/lib/ui.module.ts +++ b/projects/ui/src/lib/ui.module.ts @@ -7,6 +7,9 @@ import { TypographyModule } from './typography/typography.module'; import { SectionLabelModule } from './section-label/section-label.module'; import { ImageIconModule } from './image-icon/image-icon.module'; import { ButtonModule } from './button/button.module'; +import { TagModule } from './tag/tag.module'; +import { PipesModule } from './pipes/pipes.module'; +import { GameModule } from './game/game.module'; @NgModule({ declarations: [], @@ -19,6 +22,9 @@ import { ButtonModule } from './button/button.module'; SectionLabelModule, ImageIconModule, ButtonModule, + TagModule, + PipesModule, + GameModule, ], exports: [ IconModule, @@ -28,6 +34,9 @@ import { ButtonModule } from './button/button.module'; TypographyModule, SectionLabelModule, ImageIconModule, + TagModule, + PipesModule, + GameModule ], }) export class UiModule {} diff --git a/projects/ui/src/public-api.ts b/projects/ui/src/public-api.ts index 4c2d343..9b7aad3 100644 --- a/projects/ui/src/public-api.ts +++ b/projects/ui/src/public-api.ts @@ -10,3 +10,6 @@ export * from './lib/section/section.module'; export * from './lib/typography/typography.module'; export * from './lib/section-label/section-label.module'; export * from './lib/image-icon/image-icon.module'; +export * from './lib/tag/tag.module'; +export * from './lib/pipes/pipes.module'; +export * from './lib/game/game.module'; diff --git a/src/app/components/main/main-menu/main-menu.component.html b/src/app/components/main/main-menu/main-menu.component.html index 743a9bc..445dd5b 100644 --- a/src/app/components/main/main-menu/main-menu.component.html +++ b/src/app/components/main/main-menu/main-menu.component.html @@ -8,18 +8,21 @@
- + + Servers - + Games - + Friends
+ diff --git a/src/app/components/main/main-menu/menu-games/menu-games.component.html b/src/app/components/main/main-menu/menu-games/menu-games.component.html new file mode 100644 index 0000000..d7ff160 --- /dev/null +++ b/src/app/components/main/main-menu/menu-games/menu-games.component.html @@ -0,0 +1,10 @@ + + Pinned games
{{games.length}}
+ +
+ +
\ No newline at end of file diff --git a/src/app/components/main/main-menu/menu-games/menu-games.component.scss b/src/app/components/main/main-menu/menu-games/menu-games.component.scss new file mode 100644 index 0000000..fcfcd51 --- /dev/null +++ b/src/app/components/main/main-menu/menu-games/menu-games.component.scss @@ -0,0 +1,9 @@ +:host { + display: block; + + .games { + display: flex; + flex-direction: column; + gap: 3px; + } +} diff --git a/src/app/components/main/main-menu/menu-games/menu-games.component.spec.ts b/src/app/components/main/main-menu/menu-games/menu-games.component.spec.ts new file mode 100644 index 0000000..912ed1c --- /dev/null +++ b/src/app/components/main/main-menu/menu-games/menu-games.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MenuGamesComponent } from './menu-games.component'; + +describe('MenuGamesComponent', () => { + let component: MenuGamesComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MenuGamesComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MenuGamesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/main-menu/menu-games/menu-games.component.ts b/src/app/components/main/main-menu/menu-games/menu-games.component.ts new file mode 100644 index 0000000..03cc9ab --- /dev/null +++ b/src/app/components/main/main-menu/menu-games/menu-games.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; +import { Game } from 'src/app/interfaces/game.interface' + +@Component({ + selector: 'app-menu-games', + templateUrl: './menu-games.component.html', + styleUrls: ['./menu-games.component.scss'] +}) +export class MenuGamesComponent implements OnInit { + games: Game[] = [{ + gameId: 'id:minecraft', + title: 'Minecraft', + image: '/assets/games/minecraft/icon.png', + }, { + gameId: 'id:garrysmod', + title: 'Garry\'s mod', + image: '/assets/games/garrysmod/icon.png', + }, { + gameId: 'id:openarena', + title: 'OpenArena', + image: '/assets/games/openarena/icon.png', + }] + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html index e182ed7..859d807 100644 --- a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html +++ b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html @@ -1,6 +1,10 @@ - Active sessions
3
+ Active sessions
{{sessions.length}}
- +
diff --git a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts index 69b6217..99227a4 100644 --- a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts +++ b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts @@ -9,23 +9,26 @@ import { Session } from 'projects/ui/src/lib/interfaces/session'; export class MenuSessionsComponent implements OnInit { sessions: Session[] = [ { + id: 'minecraft-001', icon: '/assets/games/minecraft/icon.png', title: 'Minecraft', - version: '000', - status: 'text', - expires: new Date(), + version: '1.19.2', + status: 'Before returning the same line, console log the same logic', + expires: new Date('2022-10-30'), }, { + id: 'minecraft-002', icon: '/assets/games/garrysmod/icon.png', title: 'Minecraft 2', - version: '000', - expires: new Date(), + version: '1.12-dev', + expires: new Date('2022-10-22T20:00:00'), }, { + id: 'minecraft-003', icon: '/assets/games/minecraft/icon.png', title: 'Minecraft 3', - version: '000', - expires: new Date(), + version: '1.7.10', + expires: new Date('2022-10-30T20:00:00'), }, ]; diff --git a/src/app/components/main/main-root/main-root.component.html b/src/app/components/main/main-root/main-root.component.html index eb97eda..bc88ed3 100644 --- a/src/app/components/main/main-root/main-root.component.html +++ b/src/app/components/main/main-root/main-root.component.html @@ -1,7 +1,6 @@ -
- +
- content will be here +
diff --git a/src/app/components/main/main-root/main-root.component.scss b/src/app/components/main/main-root/main-root.component.scss index 6343d15..771d662 100644 --- a/src/app/components/main/main-root/main-root.component.scss +++ b/src/app/components/main/main-root/main-root.component.scss @@ -25,8 +25,6 @@ flex: 1; background-color: rgba(0,0,0,0.05); display: flex; - align-items: center; - justify-content: center; backdrop-filter: blur(1rem); } } diff --git a/src/app/components/main/main-root/main-root.component.ts b/src/app/components/main/main-root/main-root.component.ts index 56eac22..c8c36c6 100644 --- a/src/app/components/main/main-root/main-root.component.ts +++ b/src/app/components/main/main-root/main-root.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit } from '@angular/core'; -import { FastAverageColor, FastAverageColorResult } from 'fast-average-color'; @Component({ selector: 'app-main-root', @@ -8,29 +7,8 @@ import { FastAverageColor, FastAverageColorResult } from 'fast-average-color'; }) export class MainRootComponent implements OnInit { image: string = 'assets/games/minecraft/backgrounds/5.webp'; - color?: FastAverageColorResult; constructor() {} - ngAfterViewInit(): void { - //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only. - //Add 'implements AfterViewInit' to the class. - window.addEventListener('load', () => { - this.setColors(); - }); - } - ngOnInit(): void {} - - setColors() { - // extractColors(this.image).then((value) => { - // console.log(value); - // }); - let fac = new FastAverageColor(); - this.color = fac.getColor( - document.getElementById('image') as HTMLImageElement - ); - - console.log(this.color); - } } diff --git a/src/app/components/main/main.module.ts b/src/app/components/main/main.module.ts index e981102..efabc60 100644 --- a/src/app/components/main/main.module.ts +++ b/src/app/components/main/main.module.ts @@ -3,12 +3,52 @@ import { CommonModule } from '@angular/common'; import { MainRootComponent } from './main-root/main-root.component'; import { MainMenuComponent } from './main-menu/main-menu.component'; import { UiModule } from 'projects/ui/src/lib/ui.module'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { FormsModule, + ReactiveFormsModule } from '@angular/forms'; import { MenuSessionsComponent } from './main-menu/menu-sessions/menu-sessions.component'; +import { MenuGamesComponent } from './main-menu/menu-games/menu-games.component'; +import { ServersPageComponent } from './sections/servers-page/servers-page.component'; +import { FriendsPageComponent } from './sections/friends-page/friends-page.component'; +import { GamesPageComponent } from './sections/games-page/games-page.component'; +import { SessionPageComponent } from './sections/session-page/session-page.component'; +import { GamePageComponent } from './sections/game-page/game-page.component'; +import { MainRoutingModule } from './routing.module' +import { ButtonModule } from 'projects/ui/src/lib/button/button.module' +import { TypographyModule } from 'projects/ui/src/lib/typography/typography.module' +import { IconModule } from 'projects/ui/src/lib/icon/icon.module' @NgModule({ - declarations: [MainRootComponent, MainMenuComponent, MenuSessionsComponent], - imports: [CommonModule, UiModule, ReactiveFormsModule, FormsModule], - exports: [MainRootComponent, MainMenuComponent, MenuSessionsComponent], + declarations: [ + MainRootComponent, + MainMenuComponent, + MenuSessionsComponent, + MenuGamesComponent, + ServersPageComponent, + FriendsPageComponent, + GamesPageComponent, + SessionPageComponent, + GamePageComponent + ], + imports: [ + CommonModule, + UiModule, + ReactiveFormsModule, + FormsModule, + MainRoutingModule, + TypographyModule, + ButtonModule, + IconModule + ], + exports: [ + MainRootComponent, + MainMenuComponent, + MenuSessionsComponent, + MenuGamesComponent, + ServersPageComponent, + FriendsPageComponent, + GamesPageComponent, + SessionPageComponent, + GamePageComponent + ] }) export class MainModule {} diff --git a/src/app/components/main/routing.module.ts b/src/app/components/main/routing.module.ts new file mode 100644 index 0000000..fcb614d --- /dev/null +++ b/src/app/components/main/routing.module.ts @@ -0,0 +1,35 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router' +import { MainRootComponent } from './main-root/main-root.component' +import { FriendsPageComponent } from './sections/friends-page/friends-page.component' +import { GamePageComponent } from './sections/game-page/game-page.component' +import { GamesPageComponent } from './sections/games-page/games-page.component' +import { ServersPageComponent } from './sections/servers-page/servers-page.component' +import { SessionPageComponent } from './sections/session-page/session-page.component' + +const routes: Routes = [{ + path: '', + component: MainRootComponent, + children: [{ + path: 'servers', + component: ServersPageComponent + }, { + path: 'friends', + component: FriendsPageComponent + }, { + path: 'games', + component: GamesPageComponent + }, { + path: 'session/:id', + component: SessionPageComponent + }, { + path: 'game/:id', + component: GamePageComponent + }] +}] + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class MainRoutingModule { } diff --git a/src/app/components/main/sections/_global.scss b/src/app/components/main/sections/_global.scss new file mode 100644 index 0000000..9f3c85e --- /dev/null +++ b/src/app/components/main/sections/_global.scss @@ -0,0 +1,17 @@ +@mixin page { + + .section { + padding: 3rem; + + .section-head { + + .head-title { + padding-bottom: var(--sk-gap-xl); + } + } + + .section-content { + padding: var(--sk-gap-xl) 0rem; + } + } +} \ No newline at end of file diff --git a/src/app/components/main/sections/friends-page/friends-page.component.html b/src/app/components/main/sections/friends-page/friends-page.component.html new file mode 100644 index 0000000..447d3c1 --- /dev/null +++ b/src/app/components/main/sections/friends-page/friends-page.component.html @@ -0,0 +1,8 @@ +
+
+
+ Friends +
+
Friends page will be here
+
+
\ No newline at end of file diff --git a/src/app/components/main/sections/friends-page/friends-page.component.scss b/src/app/components/main/sections/friends-page/friends-page.component.scss new file mode 100644 index 0000000..e61ca7a --- /dev/null +++ b/src/app/components/main/sections/friends-page/friends-page.component.scss @@ -0,0 +1,7 @@ +@use '../global'; + +:host { + display: block; + + @include global.page(); +} diff --git a/src/app/components/main/sections/friends-page/friends-page.component.spec.ts b/src/app/components/main/sections/friends-page/friends-page.component.spec.ts new file mode 100644 index 0000000..c30e3d0 --- /dev/null +++ b/src/app/components/main/sections/friends-page/friends-page.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FriendsPageComponent } from './friends-page.component'; + +describe('FriendsPageComponent', () => { + let component: FriendsPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FriendsPageComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FriendsPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/sections/friends-page/friends-page.component.ts b/src/app/components/main/sections/friends-page/friends-page.component.ts new file mode 100644 index 0000000..73fe4f4 --- /dev/null +++ b/src/app/components/main/sections/friends-page/friends-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-friends-page', + templateUrl: './friends-page.component.html', + styleUrls: ['./friends-page.component.scss'] +}) +export class FriendsPageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/main/sections/game-page/game-page.component.html b/src/app/components/main/sections/game-page/game-page.component.html new file mode 100644 index 0000000..465e354 --- /dev/null +++ b/src/app/components/main/sections/game-page/game-page.component.html @@ -0,0 +1,14 @@ +
+
+
+ Game +
+
Game page will be here
+
+
+ + + Run game + +
+
\ No newline at end of file diff --git a/src/app/components/main/sections/game-page/game-page.component.scss b/src/app/components/main/sections/game-page/game-page.component.scss new file mode 100644 index 0000000..e61ca7a --- /dev/null +++ b/src/app/components/main/sections/game-page/game-page.component.scss @@ -0,0 +1,7 @@ +@use '../global'; + +:host { + display: block; + + @include global.page(); +} diff --git a/src/app/components/main/sections/game-page/game-page.component.spec.ts b/src/app/components/main/sections/game-page/game-page.component.spec.ts new file mode 100644 index 0000000..cbfd6e1 --- /dev/null +++ b/src/app/components/main/sections/game-page/game-page.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GamePageComponent } from './game-page.component'; + +describe('GamePageComponent', () => { + let component: GamePageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GamePageComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GamePageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/sections/game-page/game-page.component.ts b/src/app/components/main/sections/game-page/game-page.component.ts new file mode 100644 index 0000000..3297b81 --- /dev/null +++ b/src/app/components/main/sections/game-page/game-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-game-page', + templateUrl: './game-page.component.html', + styleUrls: ['./game-page.component.scss'] +}) +export class GamePageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/main/sections/games-page/games-page.component.html b/src/app/components/main/sections/games-page/games-page.component.html new file mode 100644 index 0000000..95f6846 --- /dev/null +++ b/src/app/components/main/sections/games-page/games-page.component.html @@ -0,0 +1,8 @@ +
+
+
+ Games +
+
Games page will be here
+
+
\ No newline at end of file diff --git a/src/app/components/main/sections/games-page/games-page.component.scss b/src/app/components/main/sections/games-page/games-page.component.scss new file mode 100644 index 0000000..e61ca7a --- /dev/null +++ b/src/app/components/main/sections/games-page/games-page.component.scss @@ -0,0 +1,7 @@ +@use '../global'; + +:host { + display: block; + + @include global.page(); +} diff --git a/src/app/components/main/sections/games-page/games-page.component.spec.ts b/src/app/components/main/sections/games-page/games-page.component.spec.ts new file mode 100644 index 0000000..c0af01c --- /dev/null +++ b/src/app/components/main/sections/games-page/games-page.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GamesPageComponent } from './games-page.component'; + +describe('GamesPageComponent', () => { + let component: GamesPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GamesPageComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GamesPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/sections/games-page/games-page.component.ts b/src/app/components/main/sections/games-page/games-page.component.ts new file mode 100644 index 0000000..36a0ae6 --- /dev/null +++ b/src/app/components/main/sections/games-page/games-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-games-page', + templateUrl: './games-page.component.html', + styleUrls: ['./games-page.component.scss'] +}) +export class GamesPageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/main/sections/servers-page/servers-page.component.html b/src/app/components/main/sections/servers-page/servers-page.component.html new file mode 100644 index 0000000..6cb9f24 --- /dev/null +++ b/src/app/components/main/sections/servers-page/servers-page.component.html @@ -0,0 +1,8 @@ +
+
+
+ Servers +
+
Servers page will be here
+
+
\ No newline at end of file diff --git a/src/app/components/main/sections/servers-page/servers-page.component.scss b/src/app/components/main/sections/servers-page/servers-page.component.scss new file mode 100644 index 0000000..e61ca7a --- /dev/null +++ b/src/app/components/main/sections/servers-page/servers-page.component.scss @@ -0,0 +1,7 @@ +@use '../global'; + +:host { + display: block; + + @include global.page(); +} diff --git a/src/app/components/main/sections/servers-page/servers-page.component.spec.ts b/src/app/components/main/sections/servers-page/servers-page.component.spec.ts new file mode 100644 index 0000000..bc2f509 --- /dev/null +++ b/src/app/components/main/sections/servers-page/servers-page.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServersPageComponent } from './servers-page.component'; + +describe('ServersPageComponent', () => { + let component: ServersPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ServersPageComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ServersPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/sections/servers-page/servers-page.component.ts b/src/app/components/main/sections/servers-page/servers-page.component.ts new file mode 100644 index 0000000..5e8e2c5 --- /dev/null +++ b/src/app/components/main/sections/servers-page/servers-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-servers-page', + templateUrl: './servers-page.component.html', + styleUrls: ['./servers-page.component.scss'] +}) +export class ServersPageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/main/sections/session-page/session-page.component.html b/src/app/components/main/sections/session-page/session-page.component.html new file mode 100644 index 0000000..cfccea9 --- /dev/null +++ b/src/app/components/main/sections/session-page/session-page.component.html @@ -0,0 +1,14 @@ +
+
+
+ Session +
+
Session page will be here
+
+
+ + + Run session + +
+
\ No newline at end of file diff --git a/src/app/components/main/sections/session-page/session-page.component.scss b/src/app/components/main/sections/session-page/session-page.component.scss new file mode 100644 index 0000000..e61ca7a --- /dev/null +++ b/src/app/components/main/sections/session-page/session-page.component.scss @@ -0,0 +1,7 @@ +@use '../global'; + +:host { + display: block; + + @include global.page(); +} diff --git a/src/app/components/main/sections/session-page/session-page.component.spec.ts b/src/app/components/main/sections/session-page/session-page.component.spec.ts new file mode 100644 index 0000000..c452d3b --- /dev/null +++ b/src/app/components/main/sections/session-page/session-page.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SessionPageComponent } from './session-page.component'; + +describe('SessionPageComponent', () => { + let component: SessionPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SessionPageComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SessionPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/sections/session-page/session-page.component.ts b/src/app/components/main/sections/session-page/session-page.component.ts new file mode 100644 index 0000000..edf2c66 --- /dev/null +++ b/src/app/components/main/sections/session-page/session-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-session-page', + templateUrl: './session-page.component.html', + styleUrls: ['./session-page.component.scss'] +}) +export class SessionPageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/interfaces/game.interface.ts b/src/app/interfaces/game.interface.ts index de967b5..f8ad7fb 100644 --- a/src/app/interfaces/game.interface.ts +++ b/src/app/interfaces/game.interface.ts @@ -3,5 +3,5 @@ export interface Game { gameId: string title: string; image: string; - description: string; + description?: string; } diff --git a/src/app/modules/app-routing.module.ts b/src/app/modules/app-routing.module.ts index ff895ea..73b7b0e 100644 --- a/src/app/modules/app-routing.module.ts +++ b/src/app/modules/app-routing.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { MainRootComponent } from '../components/main/main-root/main-root.component'; +import { MainRoutingModule } from '../components/main/routing.module' import { PlaygroundComponent } from '../components/playground/playground.component'; import { SandboxComponent } from '../components/sandbox/sandbox.component'; import { SignInComponent } from '../components/sign-in/sign-in.component'; @@ -12,7 +13,7 @@ const routes: Routes = [ }, { path: 'main', - component: MainRootComponent, + loadChildren: () => MainRoutingModule }, { path: 'sandbox', diff --git a/src/assets/icons/Name=play.svg b/src/assets/icons/Name=play.svg new file mode 100644 index 0000000..e1a76c1 --- /dev/null +++ b/src/assets/icons/Name=play.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles.scss b/src/styles.scss index a652dc5..f90b79d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -5,6 +5,7 @@ html, body { } :root { + --sk-gap-xs: 0.125rem; --sk-gap-s: 0.25rem; --sk-gap-m: 0.5rem; --sk-gap-l: 0.75rem; @@ -17,5 +18,6 @@ html, body { --sk-accent-dark: #2A3B39; // border-radius + --sk-br-s: 0.25rem; --sk-br-m: 0.5rem; }