game screen

This commit is contained in:
wagonsoftware 2022-11-04 23:41:10 +03:00
parent 8456ab78e9
commit 5d15b7648d
38 changed files with 641 additions and 94 deletions

View File

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

View File

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

View File

@ -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();
});
});

View File

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

View File

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

View File

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

View File

@ -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();
});
});

View File

@ -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);
},
})
);
}
}
}

View File

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

View File

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

View File

@ -0,0 +1,7 @@
:host {
font-size: var(--sk-typo-subtitle);
opacity: 0.5;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05rem;
}

View File

@ -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();
});
});

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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>

View File

@ -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>

View File

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

View File

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

View File

@ -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,

View File

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

View File

@ -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>

View File

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

View File

@ -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();
});
});

View File

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

View File

@ -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>

View File

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

View File

@ -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}`);
// })
// );
// }
}

View File

@ -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>

View File

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

View File

@ -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();
});
});

View File

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

View File

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

View File

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