game screen

projects/ui/src/lib/switch/switch-case/switch-case.component.html

@@ -0,0 +1,3 @@
+<div class="case" [ngClass]="{'active': active}">
+  <ng-content></ng-content>
+</div>

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);
+  }
+}

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<SwitchCaseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SwitchCaseComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SwitchCaseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<string> = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  @HostListener('click')
+  public pick() {
+    this.picked.emit(this.case);
+  }
+
+  @HostBinding('class.active')
+  active: boolean = false;
+}

projects/ui/src/lib/switch/switch.component.html

@@ -0,0 +1 @@
+<ng-content select="skirda-switch-case[case]"></ng-content>

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);
+}

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<SwitchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SwitchComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SwitchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<string> = new EventEmitter();
+  @ContentChildren(SwitchCaseComponent)
+  private caseList!: QueryList<SwitchCaseComponent>;
+  private subs: Map<string, Subscription> = 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);
+          },
+        })
+      );
+    }
+  }
+}

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 {}

projects/ui/src/lib/typography/subtitle/subtitle.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

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;
+}

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<SubtitleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SubtitleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SubtitleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+  }
+
+}

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 {}

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 {}

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';

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
-}
+}

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
-}
+}

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;
-}
+  --sk-br-l: 0.75rem;
+}

src/app/components/main/main-menu/main-menu.component.html

@@ -8,9 +8,7 @@
     </button>
   </div>
   <div class="menu-content" skirdaIsScrolling>
-    <div class="menu-sections">
-      <!-- Здесь class="active" для подсвечивания активного раздела прописывается автоматически,
-      если URL после перехода соддержит routerLink (класс прописывается в routerLinkActive) -->
+    <!-- <div class="menu-sections">
       <skirda-section [routerLink]="['servers']" routerLinkActive="active">
         <skirda-icon name="server"></skirda-icon>
         <skirda-heading size="6">Servers</skirda-heading>
@@ -27,7 +25,7 @@
         <skirda-icon name="download"></skirda-icon>
         <skirda-heading size="6">Downloads</skirda-heading>
       </skirda-section>
-    </div>
+    </div> -->
     <app-menu-games></app-menu-games>
     <app-menu-sessions></app-menu-sessions>
   </div>

src/app/components/main/main-menu/menu-profile/menu-profile.component.html

@@ -1,11 +1,13 @@
-<skirda-avatar [username]="profile.username" size="small"></skirda-avatar>
-<div class="profile-info">
-  <skirda-heading size="6">{{profile.username}}</skirda-heading>
-  <skirda-text>online</skirda-text>
-</div>
+<a [routerLink]="['profile']" routerLinkActive="active" class="profile-area">
+  <skirda-avatar [username]="profile.username" size="small"></skirda-avatar>
+  <div class="profile-info">
+    <skirda-heading size="6">{{profile.username}}</skirda-heading>
+    <skirda-text>online</skirda-text>
+  </div>
+  <a [routerLink]="['settings']">
+    <skirda-icon name="settings" color="var(--sk-primary-accent)"></skirda-icon>
+  </a>
+</a>
 <div class="theme-toggle" (click)="toggleTheme()" [ngClass]="{'active': theme === 'light'}">
   <skirda-icon name="sun" color="var(--sk-primary-accent)"></skirda-icon>
 </div>
-<a [routerLink]="['settings']">
-  <skirda-icon name="settings" color="var(--sk-primary-accent)"></skirda-icon>
-</a>

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;
+      }
     }
   }
 

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 {}

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,

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 {

src/app/components/main/sections/game-page/game-overview/game-overview.component.html

@@ -0,0 +1,28 @@
+<div class="sides">
+  <div class="left-side">
+    <div class="line" *ngFor="let item of overview.fields">
+      <ng-container *ngTemplateOutlet="line; context: {items: item}"></ng-container>
+    </div>
+
+    <!-- <div class="line" *ngFor="let lines of overview.fields">
+      <ng-container *ngTemplateOutlet="field; context: {label: field.label, value: field.value}"></ng-container>
+    </div> -->
+  </div>
+  <div class="right-side">
+
+  </div>
+</div>
+
+<ng-template #line let-items="items">
+  <ng-container *ngFor="let item of items">
+    <ng-container *ngTemplateOutlet="field; context: {field: item}"></ng-container>
+  </ng-container>
+</ng-template>
+
+<ng-template #field let-field="field">
+  <div class="field">
+    <skirda-subtitle>{{field.label}}</skirda-subtitle>
+    <skirda-text *ngIf="!field.large">{{field.value}}</skirda-text>
+    <skirda-heading size="4" *ngIf="field.large">{{field.value}}</skirda-heading>
+  </div>
+</ng-template>

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 {
+
+    }
+  }
+}

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<GameOverviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GameOverviewComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GameOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {}
+}

src/app/components/main/sections/game-page/game-page.component.html

@@ -1,24 +1,47 @@
-<ng-template [skirdaPopup]></ng-template>
+<!-- <ng-template [skirdaPopup]></ng-template>
 <ng-template #popupContent>
   <h1 style="font-size: 72px">😳🕶🤏</h1>
   <p>Church-key listicle whatever hoodie hexagon pour-over ascot paleo tacos, organic aesthetic tbh meggings raclette.</p>
-</ng-template>
+</ng-template> -->
+<!-- <skirda-button (click)="openPopup(popupContent)">
+  <skirda-icon name="play" size="16"></skirda-icon>
+  Run game
+</skirda-button> -->
 
 <div class="section">
   <div class="section-head">
     <div class="head-title">
-      <skirda-heading size="1">Game</skirda-heading>
+      <div class="head-icon">
+        <img [src]="game.image" width="100%">
+      </div>
+      <skirda-heading size="1">{{game.title}}</skirda-heading>
     </div>
-    <div class="head-subtitle">Game page will be here</div>
   </div>
   <div class="section-content">
-    <skirda-button (click)="openPopup(popupContent)">
-      <skirda-icon name="play" size="16"></skirda-icon>
-      Run game
-    </skirda-button>
-    <!-- <skirda-button>
-      <skirda-icon name="play" size="16"></skirda-icon>
-      Run game
-    </skirda-button> -->
+    <div class="section-switch">
+      <skirda-switch [(active)]="currentSection">
+        <skirda-switch-case case="overview">
+          <skirda-heading size="6">Overview</skirda-heading>
+        </skirda-switch-case>
+        <skirda-switch-case case="map">
+          <skirda-heading size="6">Map</skirda-heading>
+        </skirda-switch-case>
+        <skirda-switch-case case="settings">
+          <skirda-heading size="6">Settings</skirda-heading>
+        </skirda-switch-case>
+      </skirda-switch>
+    </div>
+    <section [ngSwitch]="currentSection">
+      <app-game-overview *ngSwitchCase="'overview'" [game]="game"></app-game-overview>
+    </section>
+    <div class="game-actions">
+      <div class="field">
+        <skirda-subtitle>Friends online</skirda-subtitle>
+        <div class="friends">
+          <skirda-avatar *ngFor="let friend of friends" [username]="friend"></skirda-avatar>
+        </div>
+      </div>
+      <skirda-heading size="1">Play</skirda-heading>
+    </div>
   </div>
 </div>

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));
+            }
+          }
+        }
+      }
+    }
+  }
+
 }

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<string, Subscription> = 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<any>) {
-    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<any>) {
+  //   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}`);
+  //       })
+  //   );
+  // }
 }

src/app/components/main/sections/profile-page/profile-page.component.html

@@ -0,0 +1,8 @@
+<div class="section">
+  <div class="section-head">
+    <div class="head-title">
+      <skirda-heading size="1">Profile</skirda-heading>
+    </div>
+    <div class="head-subtitle">Profile page will be here</div>
+  </div>
+</div>

src/app/components/main/sections/profile-page/profile-page.component.scss

@@ -0,0 +1,7 @@
+@use '../global';
+
+:host {
+  display: block;
+
+  @include global.page();
+}

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<ProfilePageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfilePageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProfilePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+  }
+
+}

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[][];
+}

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;
-}
+}