From 5d15b7648d4d1ee3ef0fca49afa46a4cab188585 Mon Sep 17 00:00:00 2001 From: wagonsoftware Date: Fri, 4 Nov 2022 23:41:10 +0300 Subject: [PATCH] game screen --- .../switch-case/switch-case.component.html | 3 + .../switch-case/switch-case.component.scss | 21 +++++ .../switch-case/switch-case.component.spec.ts | 23 +++++ .../switch-case/switch-case.component.ts | 31 +++++++ .../ui/src/lib/switch/switch.component.html | 1 + .../ui/src/lib/switch/switch.component.scss | 8 ++ .../src/lib/switch/switch.component.spec.ts | 23 +++++ .../ui/src/lib/switch/switch.component.ts | 80 +++++++++++++++++ projects/ui/src/lib/switch/switch.module.ts | 11 +++ .../subtitle/subtitle.component.html | 1 + .../subtitle/subtitle.component.scss | 7 ++ .../subtitle/subtitle.component.spec.ts | 23 +++++ .../typography/subtitle/subtitle.component.ts | 15 ++++ .../src/lib/typography/typography.module.ts | 5 +- projects/ui/src/lib/ui.module.ts | 3 + projects/ui/src/public-api.ts | 1 + src/_dark.scss | 3 +- src/_light.scss | 5 +- src/_themes.scss | 12 ++- .../main/main-menu/main-menu.component.html | 6 +- .../menu-profile/menu-profile.component.html | 18 ++-- .../menu-profile/menu-profile.component.scss | 31 +++++-- src/app/components/main/main.module.ts | 16 ++-- src/app/components/main/routing.module.ts | 7 +- src/app/components/main/sections/_global.scss | 4 +- .../game-overview.component.html | 28 ++++++ .../game-overview.component.scss | 32 +++++++ .../game-overview.component.spec.ts | 23 +++++ .../game-overview/game-overview.component.ts | 43 +++++++++ .../game-page/game-page.component.html | 47 +++++++--- .../game-page/game-page.component.scss | 46 ++++++++++ .../sections/game-page/game-page.component.ts | 90 ++++++++++--------- .../profile-page/profile-page.component.html | 8 ++ .../profile-page/profile-page.component.scss | 7 ++ .../profile-page.component.spec.ts | 23 +++++ .../profile-page/profile-page.component.ts | 15 ++++ src/app/interfaces/game.interface.ts | 12 ++- src/styles.scss | 3 +- 38 files changed, 641 insertions(+), 94 deletions(-) create mode 100644 projects/ui/src/lib/switch/switch-case/switch-case.component.html create mode 100644 projects/ui/src/lib/switch/switch-case/switch-case.component.scss create mode 100644 projects/ui/src/lib/switch/switch-case/switch-case.component.spec.ts create mode 100644 projects/ui/src/lib/switch/switch-case/switch-case.component.ts create mode 100644 projects/ui/src/lib/switch/switch.component.html create mode 100644 projects/ui/src/lib/switch/switch.component.scss create mode 100644 projects/ui/src/lib/switch/switch.component.spec.ts create mode 100644 projects/ui/src/lib/switch/switch.component.ts create mode 100644 projects/ui/src/lib/switch/switch.module.ts create mode 100644 projects/ui/src/lib/typography/subtitle/subtitle.component.html create mode 100644 projects/ui/src/lib/typography/subtitle/subtitle.component.scss create mode 100644 projects/ui/src/lib/typography/subtitle/subtitle.component.spec.ts create mode 100644 projects/ui/src/lib/typography/subtitle/subtitle.component.ts create mode 100644 src/app/components/main/sections/game-page/game-overview/game-overview.component.html create mode 100644 src/app/components/main/sections/game-page/game-overview/game-overview.component.scss create mode 100644 src/app/components/main/sections/game-page/game-overview/game-overview.component.spec.ts create mode 100644 src/app/components/main/sections/game-page/game-overview/game-overview.component.ts create mode 100644 src/app/components/main/sections/profile-page/profile-page.component.html create mode 100644 src/app/components/main/sections/profile-page/profile-page.component.scss create mode 100644 src/app/components/main/sections/profile-page/profile-page.component.spec.ts create mode 100644 src/app/components/main/sections/profile-page/profile-page.component.ts diff --git a/projects/ui/src/lib/switch/switch-case/switch-case.component.html b/projects/ui/src/lib/switch/switch-case/switch-case.component.html new file mode 100644 index 0000000..2332ae8 --- /dev/null +++ b/projects/ui/src/lib/switch/switch-case/switch-case.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/projects/ui/src/lib/switch/switch-case/switch-case.component.scss b/projects/ui/src/lib/switch/switch-case/switch-case.component.scss new file mode 100644 index 0000000..b2f2852 --- /dev/null +++ b/projects/ui/src/lib/switch/switch-case/switch-case.component.scss @@ -0,0 +1,21 @@ +:host { + display: flex; + gap: var(--sk-gap-m); + padding: var(--sk-gap-m) var(--sk-gap-xl); + border-radius: calc(var(--sk-br-l) - var(--sk-gap-s)); + color: var(--sk-text); + opacity: 0.5; + transition: 0.15s ease; + align-items: center; + cursor: pointer; + + &:hover { + background-color: var(--sk-background); + } + + &.active { + opacity: 1; + background-color: var(--sk-background); + box-shadow: 0px 1px 6px 0px var(--sk-shadow); + } +} diff --git a/projects/ui/src/lib/switch/switch-case/switch-case.component.spec.ts b/projects/ui/src/lib/switch/switch-case/switch-case.component.spec.ts new file mode 100644 index 0000000..862065b --- /dev/null +++ b/projects/ui/src/lib/switch/switch-case/switch-case.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SwitchCaseComponent } from './switch-case.component'; + +describe('SwitchCaseComponent', () => { + let component: SwitchCaseComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SwitchCaseComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SwitchCaseComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/switch/switch-case/switch-case.component.ts b/projects/ui/src/lib/switch/switch-case/switch-case.component.ts new file mode 100644 index 0000000..6aeb358 --- /dev/null +++ b/projects/ui/src/lib/switch/switch-case/switch-case.component.ts @@ -0,0 +1,31 @@ +import { + Component, + EventEmitter, + HostBinding, + HostListener, + Input, + OnInit, + Output, +} from '@angular/core'; + +@Component({ + selector: 'skirda-switch-case[case]', + templateUrl: './switch-case.component.html', + styleUrls: ['./switch-case.component.scss'], +}) +export class SwitchCaseComponent implements OnInit { + @Input() case!: string; + @Output() picked: EventEmitter = new EventEmitter(); + + constructor() {} + + ngOnInit(): void {} + + @HostListener('click') + public pick() { + this.picked.emit(this.case); + } + + @HostBinding('class.active') + active: boolean = false; +} diff --git a/projects/ui/src/lib/switch/switch.component.html b/projects/ui/src/lib/switch/switch.component.html new file mode 100644 index 0000000..7ba7282 --- /dev/null +++ b/projects/ui/src/lib/switch/switch.component.html @@ -0,0 +1 @@ + diff --git a/projects/ui/src/lib/switch/switch.component.scss b/projects/ui/src/lib/switch/switch.component.scss new file mode 100644 index 0000000..33725bb --- /dev/null +++ b/projects/ui/src/lib/switch/switch.component.scss @@ -0,0 +1,8 @@ +:host { + display: inline-flex; + gap: var(--sk-gap-s); + padding: var(--sk-gap-s); + background-color: var(--sk-switch-background); + backdrop-filter: blur(2rem); + border-radius: var(--sk-br-l); +} diff --git a/projects/ui/src/lib/switch/switch.component.spec.ts b/projects/ui/src/lib/switch/switch.component.spec.ts new file mode 100644 index 0000000..6d6d9d2 --- /dev/null +++ b/projects/ui/src/lib/switch/switch.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SwitchComponent } from './switch.component'; + +describe('SwitchComponent', () => { + let component: SwitchComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SwitchComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SwitchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/switch/switch.component.ts b/projects/ui/src/lib/switch/switch.component.ts new file mode 100644 index 0000000..f5ca725 --- /dev/null +++ b/projects/ui/src/lib/switch/switch.component.ts @@ -0,0 +1,80 @@ +import { + AfterContentInit, + AfterViewInit, + Component, + ContentChildren, + EventEmitter, + Input, + OnInit, + Output, + QueryList, +} from '@angular/core'; +import { Subscription } from 'rxjs'; +import { SwitchCaseComponent } from './switch-case/switch-case.component'; + +@Component({ + selector: 'skirda-switch', + templateUrl: './switch.component.html', + styleUrls: ['./switch.component.scss'], +}) +export class SwitchComponent implements OnInit, AfterContentInit { + @Input() active?: string; + @Output() activeChange: EventEmitter = new EventEmitter(); + @ContentChildren(SwitchCaseComponent) + private caseList!: QueryList; + private subs: Map = new Map(); + + constructor() {} + + ngOnInit(): void {} + + ngAfterContentInit(): void { + this.initActive(); + + this.listenCases(); + } + + ngOnDestroy(): void { + //Called once, before the instance is destroyed. + //Add 'implements OnDestroy' to the class. + this.subs.forEach((value) => value.unsubscribe()); + } + + initActive() { + if (!this.active) { + let first = this.caseList.get(0); + if (!first) return; + + first.active = true; + return; + } + + this.setActiveByCaseName(this.active); + } + + resetAll() { + this.caseList.forEach((value) => (value.active = false)); + } + + setActiveByCaseName(name: string) { + let candidate = this.caseList.find((value) => value.case == name); + if (!candidate) return; + + candidate.active = true; + } + + listenCases() { + for (let item of this.caseList) { + this.subs.set( + `case-${item.case}`, + item.picked.subscribe({ + next: (value: string) => { + this.resetAll(); + this.setActiveByCaseName(value); + this.activeChange.emit(value); + }, + }) + ); + } + } +} diff --git a/projects/ui/src/lib/switch/switch.module.ts b/projects/ui/src/lib/switch/switch.module.ts new file mode 100644 index 0000000..2cd04dd --- /dev/null +++ b/projects/ui/src/lib/switch/switch.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SwitchComponent } from './switch.component'; +import { SwitchCaseComponent } from './switch-case/switch-case.component'; + +@NgModule({ + declarations: [SwitchComponent, SwitchCaseComponent], + imports: [CommonModule], + exports: [SwitchComponent, SwitchCaseComponent], +}) +export class SwitchModule {} diff --git a/projects/ui/src/lib/typography/subtitle/subtitle.component.html b/projects/ui/src/lib/typography/subtitle/subtitle.component.html new file mode 100644 index 0000000..6dbc743 --- /dev/null +++ b/projects/ui/src/lib/typography/subtitle/subtitle.component.html @@ -0,0 +1 @@ + diff --git a/projects/ui/src/lib/typography/subtitle/subtitle.component.scss b/projects/ui/src/lib/typography/subtitle/subtitle.component.scss new file mode 100644 index 0000000..04b21e9 --- /dev/null +++ b/projects/ui/src/lib/typography/subtitle/subtitle.component.scss @@ -0,0 +1,7 @@ +:host { + font-size: var(--sk-typo-subtitle); + opacity: 0.5; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05rem; +} diff --git a/projects/ui/src/lib/typography/subtitle/subtitle.component.spec.ts b/projects/ui/src/lib/typography/subtitle/subtitle.component.spec.ts new file mode 100644 index 0000000..8af6169 --- /dev/null +++ b/projects/ui/src/lib/typography/subtitle/subtitle.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubtitleComponent } from './subtitle.component'; + +describe('SubtitleComponent', () => { + let component: SubtitleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SubtitleComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SubtitleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/typography/subtitle/subtitle.component.ts b/projects/ui/src/lib/typography/subtitle/subtitle.component.ts new file mode 100644 index 0000000..2ae1a1e --- /dev/null +++ b/projects/ui/src/lib/typography/subtitle/subtitle.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'skirda-subtitle', + templateUrl: './subtitle.component.html', + styleUrls: ['./subtitle.component.scss'] +}) +export class SubtitleComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/projects/ui/src/lib/typography/typography.module.ts b/projects/ui/src/lib/typography/typography.module.ts index c2a942a..0994a7c 100644 --- a/projects/ui/src/lib/typography/typography.module.ts +++ b/projects/ui/src/lib/typography/typography.module.ts @@ -2,10 +2,11 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HeadingComponent } from './heading/heading.component'; import { TextComponent } from './text/text.component'; +import { SubtitleComponent } from './subtitle/subtitle.component'; @NgModule({ - declarations: [HeadingComponent, TextComponent], + declarations: [HeadingComponent, TextComponent, SubtitleComponent], imports: [CommonModule], - exports: [HeadingComponent, TextComponent], + exports: [HeadingComponent, TextComponent, SubtitleComponent], }) export class TypographyModule {} diff --git a/projects/ui/src/lib/ui.module.ts b/projects/ui/src/lib/ui.module.ts index 78f90b4..3efaae2 100644 --- a/projects/ui/src/lib/ui.module.ts +++ b/projects/ui/src/lib/ui.module.ts @@ -13,6 +13,7 @@ import { GameModule } from './game/game.module'; import { DirectivesModule } from './directives/directives.module'; import { PopupModule } from './popup/popup.module'; import { AvatarModule } from './avatar/avatar.module'; +import { SwitchModule } from './switch/switch.module'; @NgModule({ declarations: [], @@ -31,6 +32,7 @@ import { AvatarModule } from './avatar/avatar.module'; PopupModule, DirectivesModule, AvatarModule, + SwitchModule, ], exports: [ IconModule, @@ -47,6 +49,7 @@ import { AvatarModule } from './avatar/avatar.module'; PopupModule, DirectivesModule, AvatarModule, + SwitchModule, ], }) export class UiModule {} diff --git a/projects/ui/src/public-api.ts b/projects/ui/src/public-api.ts index 661fc91..b411c61 100644 --- a/projects/ui/src/public-api.ts +++ b/projects/ui/src/public-api.ts @@ -15,3 +15,4 @@ export * from './lib/pipes/pipes.module'; export * from './lib/game/game.module'; export * from './lib/popup/popup.module'; export * from './lib/avatar/avatar.module'; +export * from './lib/switch/switch.module'; diff --git a/src/_dark.scss b/src/_dark.scss index 28888a3..8afda61 100644 --- a/src/_dark.scss +++ b/src/_dark.scss @@ -11,6 +11,7 @@ $ui-foreground: #252525; $ui-left-menu: rgba(0,0,0,0.65); $ui-right-content: rgba(0,0,0,0.45); $ui-shadow: rgba(95, 95, 95, 0.15); +$ui-switch-backround: rgba(0,0,0,0); $ui-item-active: rgba(255, 255, 255, 0.1); $ui-primary-accent: #2698e4; $ui-secondary-accent: #9a74e0; @@ -26,4 +27,4 @@ $ui-black: #000000; @mixin dark { @include theme -} \ No newline at end of file +} diff --git a/src/_light.scss b/src/_light.scss index 7080f1f..9004a3b 100644 --- a/src/_light.scss +++ b/src/_light.scss @@ -11,7 +11,8 @@ $ui-foreground: #f4f4f4; $ui-left-menu: rgba(255, 255, 255, 0.75); $ui-right-content: rgba(255,255,255,0.35); $ui-shadow: rgba(50, 50, 50, 0.1); -$ui-item-active: rgba(0,0,0,0.075); +$ui-switch-backround: rgba(255, 255, 255, 0); +$ui-item-active: rgba(0,0,0,0.1); $ui-secondary-accent: #715AB6; $ui-primary-accent: #5f74ff; $ui-secondary-accent-text: #ffffff; @@ -26,4 +27,4 @@ $ui-black: #000000; @mixin light { @include theme -} \ No newline at end of file +} diff --git a/src/_themes.scss b/src/_themes.scss index 3fe00b5..3605954 100644 --- a/src/_themes.scss +++ b/src/_themes.scss @@ -48,6 +48,7 @@ --sk-item-hovered : #{hovered($ui-item-active, $modifier-item-hover)}; --sk-shadow : #{shade($ui-shadow, 0)}; --sk-shadow-hovered : #{shade($ui-shadow, 0)}; + --sk-switch-background : #{$ui-switch-backround}; // primary color --sk-primary-accent : #{$ui-primary-accent}; @@ -124,9 +125,9 @@ --sk-typo-special: 13px; --sk-typo-title: 24px; --sk-typo-subtitle: 12px; - --sk-typo-h1: 26px; - --sk-typo-h2: 24px; - --sk-typo-h3: 22px; + --sk-typo-h1: 36px; + --sk-typo-h2: 32px; + --sk-typo-h3: 26px; --sk-typo-h4: 20px; --sk-typo-h5: 17px; --sk-typo-h6: 15px; @@ -137,8 +138,11 @@ --sk-gap-m: 0.5rem; --sk-gap-l: 0.75rem; --sk-gap-xl: 1rem; + --sk-gap-xxl: 1.5rem; + --sk-gap-xxxl: 2.2rem; // border-radius --sk-br-s: 0.25rem; --sk-br-m: 0.5rem; -} \ No newline at end of file + --sk-br-l: 0.75rem; +} 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 08818b3..32c1f82 100644 --- a/src/app/components/main/main-menu/main-menu.component.html +++ b/src/app/components/main/main-menu/main-menu.component.html @@ -8,9 +8,7 @@
-
- +
diff --git a/src/app/components/main/main-menu/menu-profile/menu-profile.component.html b/src/app/components/main/main-menu/menu-profile/menu-profile.component.html index d618c35..66638ac 100644 --- a/src/app/components/main/main-menu/menu-profile/menu-profile.component.html +++ b/src/app/components/main/main-menu/menu-profile/menu-profile.component.html @@ -1,11 +1,13 @@ - -
- {{profile.username}} - online -
+ + +
+ {{profile.username}} + online +
+ + + +
- - - \ No newline at end of file diff --git a/src/app/components/main/main-menu/menu-profile/menu-profile.component.scss b/src/app/components/main/main-menu/menu-profile/menu-profile.component.scss index fc3bd9c..d331593 100644 --- a/src/app/components/main/main-menu/menu-profile/menu-profile.component.scss +++ b/src/app/components/main/main-menu/menu-profile/menu-profile.component.scss @@ -1,17 +1,32 @@ :host { display: flex; - gap: var(--sk-gap-l); - padding: var(--sk-gap-l); + gap: var(--sk-gap-xl); align-items: center; + padding-right: var(--sk-gap-m); - .profile-info { - flex: 1; + a.profile-area { + color: inherit; + text-decoration: none; display: flex; - flex-direction: column; - gap: var(--sk-gap-s); + padding: var(--sk-gap-l); + flex: 1; + border-radius: var(--sk-br-m); + gap: var(--sk-gap-l); + align-items: center; - skirda-text { - opacity: 0.5; + &.active { + background-color: var(--sk-item-active); + } + + .profile-info { + flex: 1; + display: flex; + flex-direction: column; + gap: var(--sk-gap-s); + + skirda-text { + opacity: 0.5; + } } } diff --git a/src/app/components/main/main.module.ts b/src/app/components/main/main.module.ts index 0f73a9b..53b6018 100644 --- a/src/app/components/main/main.module.ts +++ b/src/app/components/main/main.module.ts @@ -13,8 +13,10 @@ import { SessionPageComponent } from './sections/session-page/session-page.compo import { GamePageComponent } from './sections/game-page/game-page.component'; import { MainRoutingModule } from './routing.module'; import { DownloadsPageComponent } from './sections/downloads-page/downloads-page.component'; -import { MenuProfileComponent } from './main-menu/menu-profile/menu-profile.component' -import { SettingsPageComponent } from './sections/settings-page/settings-page.component' +import { MenuProfileComponent } from './main-menu/menu-profile/menu-profile.component'; +import { SettingsPageComponent } from './sections/settings-page/settings-page.component'; +import { ProfilePageComponent } from './sections/profile-page/profile-page.component'; +import { GameOverviewComponent } from './sections/game-page/game-overview/game-overview.component'; @NgModule({ declarations: [ @@ -29,14 +31,16 @@ import { SettingsPageComponent } from './sections/settings-page/settings-page.co GamePageComponent, DownloadsPageComponent, SettingsPageComponent, - MenuProfileComponent + MenuProfileComponent, + ProfilePageComponent, + GameOverviewComponent, ], imports: [ CommonModule, UiModule, ReactiveFormsModule, FormsModule, - MainRoutingModule + MainRoutingModule, ], exports: [ MainRootComponent, @@ -50,7 +54,9 @@ import { SettingsPageComponent } from './sections/settings-page/settings-page.co GamePageComponent, DownloadsPageComponent, SettingsPageComponent, - MenuProfileComponent + MenuProfileComponent, + ProfilePageComponent, + GameOverviewComponent, ], }) export class MainModule {} diff --git a/src/app/components/main/routing.module.ts b/src/app/components/main/routing.module.ts index 939f2ba..b9c9540 100644 --- a/src/app/components/main/routing.module.ts +++ b/src/app/components/main/routing.module.ts @@ -5,9 +5,10 @@ import { DownloadsPageComponent } from './sections/downloads-page/downloads-page 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 { ProfilePageComponent } from './sections/profile-page/profile-page.component'; import { ServersPageComponent } from './sections/servers-page/servers-page.component'; import { SessionPageComponent } from './sections/session-page/session-page.component'; -import { SettingsPageComponent } from './sections/settings-page/settings-page.component' +import { SettingsPageComponent } from './sections/settings-page/settings-page.component'; const routes: Routes = [ { @@ -34,6 +35,10 @@ const routes: Routes = [ path: 'settings', component: SettingsPageComponent, }, + { + path: 'profile', + component: ProfilePageComponent, + }, { path: 'session/:id', component: SessionPageComponent, diff --git a/src/app/components/main/sections/_global.scss b/src/app/components/main/sections/_global.scss index 9d00ae9..5e484db 100644 --- a/src/app/components/main/sections/_global.scss +++ b/src/app/components/main/sections/_global.scss @@ -2,12 +2,14 @@ width: 100%; .section { - padding: 3rem; + padding: 4rem; flex: 1; box-sizing: border-box; width: 100%; height: 100%; overflow-y: auto; + display: flex; + flex-direction: column; // background-color: #fff; .section-head { diff --git a/src/app/components/main/sections/game-page/game-overview/game-overview.component.html b/src/app/components/main/sections/game-page/game-overview/game-overview.component.html new file mode 100644 index 0000000..8e00eb9 --- /dev/null +++ b/src/app/components/main/sections/game-page/game-overview/game-overview.component.html @@ -0,0 +1,28 @@ +
+
+
+ +
+ + +
+
+ +
+
+ + + + + + + + +
+ {{field.label}} + {{field.value}} + {{field.value}} +
+ diff --git a/src/app/components/main/sections/game-page/game-overview/game-overview.component.scss b/src/app/components/main/sections/game-page/game-overview/game-overview.component.scss new file mode 100644 index 0000000..6816024 --- /dev/null +++ b/src/app/components/main/sections/game-page/game-overview/game-overview.component.scss @@ -0,0 +1,32 @@ +:host { + display: block; + + .sides { + + .line { + display: flex; + align-items: flex-start; + display: flex; + gap: var(--sk-gap-xxxl); + padding-bottom: var(--sk-gap-xxxl); + } + + .field { + display: flex; + flex-direction: column; + gap: var(--sk-gap-s); + + skirda-text { + line-height: 140%; + } + } + + .left-side { + width: 60%; + } + + .right-side { + + } + } +} diff --git a/src/app/components/main/sections/game-page/game-overview/game-overview.component.spec.ts b/src/app/components/main/sections/game-page/game-overview/game-overview.component.spec.ts new file mode 100644 index 0000000..ae21b56 --- /dev/null +++ b/src/app/components/main/sections/game-page/game-overview/game-overview.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GameOverviewComponent } from './game-overview.component'; + +describe('GameOverviewComponent', () => { + let component: GameOverviewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GameOverviewComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GameOverviewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/sections/game-page/game-overview/game-overview.component.ts b/src/app/components/main/sections/game-page/game-overview/game-overview.component.ts new file mode 100644 index 0000000..9e025f8 --- /dev/null +++ b/src/app/components/main/sections/game-page/game-overview/game-overview.component.ts @@ -0,0 +1,43 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Game, GameOverview } from 'src/app/interfaces/game.interface'; + +@Component({ + selector: 'app-game-overview[game]', + templateUrl: './game-overview.component.html', + styleUrls: ['./game-overview.component.scss'], +}) +export class GameOverviewComponent implements OnInit { + @Input() game!: Game; + overview: GameOverview = { + fields: [ + [ + { + label: 'Description', + value: + 'Minecraft is a sandbox video game developed by Mojang Studios. The game was created by Markus "Notch" Persson in the Java programming language. Following several early private testing versions, it was first made public in May 2009 before being fully released in November 2011, with Notch stepping down and Jens "Jeb" Bergensten taking over development. Minecraft has since been ported to several other platforms and is the best-selling video game of all time, with over 238 million copies sold and nearly 140 million monthly active players as of 2021.', + }, + ], + [ + { + label: 'Developer', + value: 'Mojang Studios', + large: true, + }, + { + label: 'Release date', + value: '2011', + large: true, + }, + { + label: 'Current version', + value: '1.19.2', + large: true, + }, + ], + ], + }; + + 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 index 7335a29..d568b22 100644 --- a/src/app/components/main/sections/game-page/game-page.component.html +++ b/src/app/components/main/sections/game-page/game-page.component.html @@ -1,24 +1,47 @@ - + +
- Game +
+ +
+ {{game.title}}
-
Game page will be here
- - - Run game - - +
+ + + Overview + + + Map + + + Settings + + +
+
+ +
+
+
+ Friends online +
+ +
+
+ Play +
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 index e61ca7a..6165768 100644 --- a/src/app/components/main/sections/game-page/game-page.component.scss +++ b/src/app/components/main/sections/game-page/game-page.component.scss @@ -4,4 +4,50 @@ display: block; @include global.page(); + + .head-title { + display: flex; + gap: var(--sk-gap-xxl); + align-items: center; + + .head-icon { + width: 50px; + height: 50px; + } + } + + .section { + + .section-content { + display: flex; + flex-direction: column; + flex: 1; + + section { + padding-top: 2rem; + flex: 1; + } + + .game-actions { + border-top: 2px solid var(--sk-border); + padding-top: var(--sk-gap-xxl); + display: flex; + justify-content: space-between; + align-items: center; + + .field { + + .friends { + display: flex; + margin-top: var(--sk-gap-l); + + skirda-avatar { + margin-right: calc(-1 * var(--sk-gap-l)); + } + } + } + } + } + } + } 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 index ffbc954..59269b0 100644 --- a/src/app/components/main/sections/game-page/game-page.component.ts +++ b/src/app/components/main/sections/game-page/game-page.component.ts @@ -4,6 +4,7 @@ import { PopupConfiguration } from 'projects/ui/src/lib/popup/popup.class'; import { PopupDirective } from 'projects/ui/src/lib/popup/popup.directive'; import { PopupService } from 'projects/ui/src/lib/popup/popup.service'; import { first, Subscription } from 'rxjs'; +import { Game } from 'src/app/interfaces/game.interface'; @Component({ selector: 'app-game-page', @@ -11,10 +12,19 @@ import { first, Subscription } from 'rxjs'; styleUrls: ['./game-page.component.scss'], }) export class GamePageComponent implements OnInit, OnDestroy { - @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective; + // @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective; subs: Map = new Map(); + game: Game = { + gameId: 'minecraft', + title: 'Minecraft', + image: '/assets/games/minecraft/icon.png', + description: 'Minecraft description', + }; - constructor(private popup: PopupService) {} + currentSection: string = 'overview'; + friends: string[] = ['svensken', 'cyberdream', 'e11te']; + + constructor() {} // private popup: PopupService ngOnInit(): void {} @@ -22,45 +32,39 @@ export class GamePageComponent implements OnInit, OnDestroy { this.subs.forEach((value) => value.unsubscribe()); } - ngAfterViewInit(): void { - //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only. - //Add 'implements AfterViewInit' to the class. - // this.openPopup(); - } - - openPopup(template?: TemplateRef) { - this.subs.set( - 'popup-events', - this.popup - .open(this.popupPortal, undefined, { - header: { closable: false, title: 'Warning' }, - actions: [ - { - title: 'I understand, delete file', - event: 'delete', - appearance: 'primary', - }, - { - title: 'Do not delete', - event: 'cancel', - appearance: 'outline', - }, - // { - // title: 'Primary button', - // event: 'button-2', - // appearance: 'primary', - // }, - ], - overlay: { - closable: true, - // background: 'rgba(255, 255, 255, 1)', - }, - body: 'Humblebrag chillwave sriracha, ramps polaroid distillery edison bulb palo santo etsy sus pabst knausgaard typewriter dreamcatcher.', - theme: 'dark', - }) - .subscribe((event) => { - console.log(`event: ${event}`); - }) - ); - } + // openPopup(template?: TemplateRef) { + // this.subs.set( + // 'popup-events', + // this.popup + // .open(this.popupPortal, undefined, { + // header: { closable: false, title: 'Warning' }, + // actions: [ + // { + // title: 'I understand, delete file', + // event: 'delete', + // appearance: 'primary', + // }, + // { + // title: 'Do not delete', + // event: 'cancel', + // appearance: 'outline', + // }, + // // { + // // title: 'Primary button', + // // event: 'button-2', + // // appearance: 'primary', + // // }, + // ], + // overlay: { + // closable: true, + // // background: 'rgba(255, 255, 255, 1)', + // }, + // body: 'Humblebrag chillwave sriracha, ramps polaroid distillery edison bulb palo santo etsy sus pabst knausgaard typewriter dreamcatcher.', + // theme: 'dark', + // }) + // .subscribe((event) => { + // console.log(`event: ${event}`); + // }) + // ); + // } } diff --git a/src/app/components/main/sections/profile-page/profile-page.component.html b/src/app/components/main/sections/profile-page/profile-page.component.html new file mode 100644 index 0000000..6b151f0 --- /dev/null +++ b/src/app/components/main/sections/profile-page/profile-page.component.html @@ -0,0 +1,8 @@ +
+
+
+ Profile +
+
Profile page will be here
+
+
diff --git a/src/app/components/main/sections/profile-page/profile-page.component.scss b/src/app/components/main/sections/profile-page/profile-page.component.scss new file mode 100644 index 0000000..e61ca7a --- /dev/null +++ b/src/app/components/main/sections/profile-page/profile-page.component.scss @@ -0,0 +1,7 @@ +@use '../global'; + +:host { + display: block; + + @include global.page(); +} diff --git a/src/app/components/main/sections/profile-page/profile-page.component.spec.ts b/src/app/components/main/sections/profile-page/profile-page.component.spec.ts new file mode 100644 index 0000000..ab182e6 --- /dev/null +++ b/src/app/components/main/sections/profile-page/profile-page.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProfilePageComponent } from './profile-page.component'; + +describe('ProfilePageComponent', () => { + let component: ProfilePageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ProfilePageComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ProfilePageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/main/sections/profile-page/profile-page.component.ts b/src/app/components/main/sections/profile-page/profile-page.component.ts new file mode 100644 index 0000000..7437393 --- /dev/null +++ b/src/app/components/main/sections/profile-page/profile-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-profile-page', + templateUrl: './profile-page.component.html', + styleUrls: ['./profile-page.component.scss'] +}) +export class ProfilePageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/interfaces/game.interface.ts b/src/app/interfaces/game.interface.ts index 350daf3..314baea 100644 --- a/src/app/interfaces/game.interface.ts +++ b/src/app/interfaces/game.interface.ts @@ -1,6 +1,16 @@ export interface Game { - gameId: string + gameId: string; title: string; image: string; description?: string; } + +export interface GameOverviewField { + label: string; + value: string; + large?: boolean; +} + +export interface GameOverview { + fields: GameOverviewField[][]; +} diff --git a/src/styles.scss b/src/styles.scss index 62d6d7d..88677e3 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -8,7 +8,6 @@ html, body { font-size: var(--sk-typo-base); margin: 0; font-family: var(--font); - line-height: 90%; user-select: none; } @@ -52,4 +51,4 @@ html[data-theme="dark"]:root { *::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 0.5rem; -} \ No newline at end of file +}