From 0cf693ae3bcbe3e896e61ad40ca4a1691f5eeb95 Mon Sep 17 00:00:00 2001 From: MrSandMan Date: Sat, 27 Aug 2022 14:26:01 +0300 Subject: [PATCH] Changed default window size, transferring html, creating components --- app/main.js | 4 +- .../home/button-svg/button-svg.component.html | 6 ++ .../home/button-svg/button-svg.component.scss | 21 +++++ .../button-svg/button-svg.component.spec.ts | 23 +++++ .../home/button-svg/button-svg.component.ts | 15 +++ src/app/home/button/button.component.html | 3 + src/app/home/button/button.component.scss | 17 ++++ src/app/home/button/button.component.spec.ts | 23 +++++ src/app/home/button/button.component.ts | 15 +++ src/app/home/game-bar/game-bar.component.html | 17 ++++ src/app/home/game-bar/game-bar.component.scss | 16 ++++ .../home/game-bar/game-bar.component.spec.ts | 23 +++++ src/app/home/game-bar/game-bar.component.ts | 15 +++ .../home/game-body/game-body.component.html | 3 + .../home/game-body/game-body.component.scss | 3 + .../game-body/game-body.component.spec.ts | 23 +++++ src/app/home/game-body/game-body.component.ts | 15 +++ .../game-footer/game-footer.component.html | 9 ++ .../game-footer/game-footer.component.scss | 3 + .../game-footer/game-footer.component.spec.ts | 23 +++++ .../home/game-footer/game-footer.component.ts | 15 +++ .../game-header/game-header.component.html | 18 ++++ .../game-header/game-header.component.scss | 15 +++ .../game-header/game-header.component.spec.ts | 23 +++++ .../home/game-header/game-header.component.ts | 15 +++ .../generic-game/generic-game.component.html | 8 ++ .../generic-game/generic-game.component.scss | 0 .../generic-game.component.spec.ts | 23 +++++ .../generic-game/generic-game.component.ts | 15 +++ src/app/home/home.component.html | 69 ++++---------- src/app/home/home.component.scss | 33 +++++++ src/app/home/home.module.ts | 13 ++- src/app/home/label/label.component.html | 3 + src/app/home/label/label.component.scss | 0 src/app/home/label/label.component.spec.ts | 23 +++++ src/app/home/label/label.component.ts | 15 +++ .../players-bar/players-bar.component.html | 17 ++++ .../players-bar/players-bar.component.scss | 13 +++ .../players-bar/players-bar.component.spec.ts | 23 +++++ .../home/players-bar/players-bar.component.ts | 15 +++ .../profile-bar/profile-bar.component.html | 16 ++++ .../profile-bar/profile-bar.component.scss | 22 +++++ .../profile-bar/profile-bar.component.spec.ts | 23 +++++ .../home/profile-bar/profile-bar.component.ts | 15 +++ .../session-count.component.html | 4 + .../session-count.component.scss | 4 + .../session-count.component.spec.ts | 23 +++++ .../session-count/session-count.component.ts | 15 +++ src/styles.scss | 93 +++++-------------- 49 files changed, 725 insertions(+), 123 deletions(-) create mode 100644 src/app/home/button-svg/button-svg.component.html create mode 100644 src/app/home/button-svg/button-svg.component.scss create mode 100644 src/app/home/button-svg/button-svg.component.spec.ts create mode 100644 src/app/home/button-svg/button-svg.component.ts create mode 100644 src/app/home/button/button.component.html create mode 100644 src/app/home/button/button.component.scss create mode 100644 src/app/home/button/button.component.spec.ts create mode 100644 src/app/home/button/button.component.ts create mode 100644 src/app/home/game-bar/game-bar.component.html create mode 100644 src/app/home/game-bar/game-bar.component.scss create mode 100644 src/app/home/game-bar/game-bar.component.spec.ts create mode 100644 src/app/home/game-bar/game-bar.component.ts create mode 100644 src/app/home/game-body/game-body.component.html create mode 100644 src/app/home/game-body/game-body.component.scss create mode 100644 src/app/home/game-body/game-body.component.spec.ts create mode 100644 src/app/home/game-body/game-body.component.ts create mode 100644 src/app/home/game-footer/game-footer.component.html create mode 100644 src/app/home/game-footer/game-footer.component.scss create mode 100644 src/app/home/game-footer/game-footer.component.spec.ts create mode 100644 src/app/home/game-footer/game-footer.component.ts create mode 100644 src/app/home/game-header/game-header.component.html create mode 100644 src/app/home/game-header/game-header.component.scss create mode 100644 src/app/home/game-header/game-header.component.spec.ts create mode 100644 src/app/home/game-header/game-header.component.ts create mode 100644 src/app/home/generic-game/generic-game.component.html create mode 100644 src/app/home/generic-game/generic-game.component.scss create mode 100644 src/app/home/generic-game/generic-game.component.spec.ts create mode 100644 src/app/home/generic-game/generic-game.component.ts create mode 100644 src/app/home/label/label.component.html create mode 100644 src/app/home/label/label.component.scss create mode 100644 src/app/home/label/label.component.spec.ts create mode 100644 src/app/home/label/label.component.ts create mode 100644 src/app/home/players-bar/players-bar.component.html create mode 100644 src/app/home/players-bar/players-bar.component.scss create mode 100644 src/app/home/players-bar/players-bar.component.spec.ts create mode 100644 src/app/home/players-bar/players-bar.component.ts create mode 100644 src/app/home/profile-bar/profile-bar.component.html create mode 100644 src/app/home/profile-bar/profile-bar.component.scss create mode 100644 src/app/home/profile-bar/profile-bar.component.spec.ts create mode 100644 src/app/home/profile-bar/profile-bar.component.ts create mode 100644 src/app/home/session-count/session-count.component.html create mode 100644 src/app/home/session-count/session-count.component.scss create mode 100644 src/app/home/session-count/session-count.component.spec.ts create mode 100644 src/app/home/session-count/session-count.component.ts diff --git a/app/main.js b/app/main.js index 7c5ca96..4d84795 100644 --- a/app/main.js +++ b/app/main.js @@ -11,8 +11,8 @@ function createWindow() { win = new electron_1.BrowserWindow({ x: 0, y: 0, - width: size.width, - height: size.height, + width: 1215, + height: 750, webPreferences: { nodeIntegration: true, allowRunningInsecureContent: (serve), diff --git a/src/app/home/button-svg/button-svg.component.html b/src/app/home/button-svg/button-svg.component.html new file mode 100644 index 0000000..50a5f48 --- /dev/null +++ b/src/app/home/button-svg/button-svg.component.html @@ -0,0 +1,6 @@ +
+ + + + +
\ No newline at end of file diff --git a/src/app/home/button-svg/button-svg.component.scss b/src/app/home/button-svg/button-svg.component.scss new file mode 100644 index 0000000..7d22c75 --- /dev/null +++ b/src/app/home/button-svg/button-svg.component.scss @@ -0,0 +1,21 @@ +.button { + background-color: rgba(255, 255, 255, 0.05); + border-radius: 5px; + height: min-content; + margin-left: 10px; + height: 100%; +} +.button:hover { + transition: all 0.2s; + background-color: rgba(255, 255, 255, 0.2); + -webkit-backdrop-filter: drop-shadow(5px 5px 0px #ffffff); + backdrop-filter: drop-shadow(5px 5px 4px #ffffff); +} +.button > .text { + font-size: 25px; + padding: 5px 40px; +} +.button > svg { + padding: 5px 7px 0px 7px; + filter: invert(1) opacity(0.4); +} \ No newline at end of file diff --git a/src/app/home/button-svg/button-svg.component.spec.ts b/src/app/home/button-svg/button-svg.component.spec.ts new file mode 100644 index 0000000..9e82936 --- /dev/null +++ b/src/app/home/button-svg/button-svg.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ButtonSvgComponent } from './button-svg.component'; + +describe('ButtonSvgComponent', () => { + let component: ButtonSvgComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ButtonSvgComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ButtonSvgComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/button-svg/button-svg.component.ts b/src/app/home/button-svg/button-svg.component.ts new file mode 100644 index 0000000..c9b8127 --- /dev/null +++ b/src/app/home/button-svg/button-svg.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-button-svg', + templateUrl: './button-svg.component.html', + styleUrls: ['./button-svg.component.scss'] +}) +export class ButtonSvgComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/button/button.component.html b/src/app/home/button/button.component.html new file mode 100644 index 0000000..967aed5 --- /dev/null +++ b/src/app/home/button/button.component.html @@ -0,0 +1,3 @@ +
+
Play
+
\ No newline at end of file diff --git a/src/app/home/button/button.component.scss b/src/app/home/button/button.component.scss new file mode 100644 index 0000000..0a24a0f --- /dev/null +++ b/src/app/home/button/button.component.scss @@ -0,0 +1,17 @@ +.button { + background-color: rgba(255, 255, 255, 0.05); + border-radius: 5px; + height: min-content; + margin-left: 10px; + height: 100%; +} +.button:hover { + transition: all 0.2s; + background-color: rgba(255, 255, 255, 0.2); + -webkit-backdrop-filter: drop-shadow(5px 5px 0px #ffffff); + backdrop-filter: drop-shadow(5px 5px 4px #ffffff); +} +.button > .text { + font-size: 25px; + padding: 5px 40px; +} diff --git a/src/app/home/button/button.component.spec.ts b/src/app/home/button/button.component.spec.ts new file mode 100644 index 0000000..d9564d8 --- /dev/null +++ b/src/app/home/button/button.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ButtonComponent } from './button.component'; + +describe('ButtonComponent', () => { + let component: ButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ButtonComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/button/button.component.ts b/src/app/home/button/button.component.ts new file mode 100644 index 0000000..be8a5c4 --- /dev/null +++ b/src/app/home/button/button.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-button', + templateUrl: './button.component.html', + styleUrls: ['./button.component.scss'] +}) +export class ButtonComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/game-bar/game-bar.component.html b/src/app/home/game-bar/game-bar.component.html new file mode 100644 index 0000000..d91c8d3 --- /dev/null +++ b/src/app/home/game-bar/game-bar.component.html @@ -0,0 +1,17 @@ +
+
+ +
+
+
+
+ Minecraft +
+ + +
+
+ 12 days left +
+
+
\ No newline at end of file diff --git a/src/app/home/game-bar/game-bar.component.scss b/src/app/home/game-bar/game-bar.component.scss new file mode 100644 index 0000000..04ae97e --- /dev/null +++ b/src/app/home/game-bar/game-bar.component.scss @@ -0,0 +1,16 @@ +.GameBar { + display: flex; + margin-top: 13px; + padding: 10px 0 2px 10px; + margin-right: 15px; +} +.GameBar:hover { + background-color: rgba(255, 255, 255, 0.2); + border-radius: 10px; + -webkit-backdrop-filter: drop-shadow(5px 5px 0px #ffffff); + backdrop-filter: drop-shadow(5px 5px 4px #ffffff); +} +.GameBar > .two-lines-centered { + margin-top: 5px; + margin-left: 15px; +} \ No newline at end of file diff --git a/src/app/home/game-bar/game-bar.component.spec.ts b/src/app/home/game-bar/game-bar.component.spec.ts new file mode 100644 index 0000000..9bd3095 --- /dev/null +++ b/src/app/home/game-bar/game-bar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GameBarComponent } from './game-bar.component'; + +describe('GameBarComponent', () => { + let component: GameBarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GameBarComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GameBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/game-bar/game-bar.component.ts b/src/app/home/game-bar/game-bar.component.ts new file mode 100644 index 0000000..233a93a --- /dev/null +++ b/src/app/home/game-bar/game-bar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-game-bar', + templateUrl: './game-bar.component.html', + styleUrls: ['./game-bar.component.scss'] +}) +export class GameBarComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/game-body/game-body.component.html b/src/app/home/game-body/game-body.component.html new file mode 100644 index 0000000..7f0806c --- /dev/null +++ b/src/app/home/game-body/game-body.component.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/app/home/game-body/game-body.component.scss b/src/app/home/game-body/game-body.component.scss new file mode 100644 index 0000000..0134749 --- /dev/null +++ b/src/app/home/game-body/game-body.component.scss @@ -0,0 +1,3 @@ +.GameBody { + height: calc(100% - 225px); +} \ No newline at end of file diff --git a/src/app/home/game-body/game-body.component.spec.ts b/src/app/home/game-body/game-body.component.spec.ts new file mode 100644 index 0000000..48cf155 --- /dev/null +++ b/src/app/home/game-body/game-body.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GameBodyComponent } from './game-body.component'; + +describe('GameBodyComponent', () => { + let component: GameBodyComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GameBodyComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GameBodyComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/game-body/game-body.component.ts b/src/app/home/game-body/game-body.component.ts new file mode 100644 index 0000000..c8a1c54 --- /dev/null +++ b/src/app/home/game-body/game-body.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-game-body', + templateUrl: './game-body.component.html', + styleUrls: ['./game-body.component.scss'] +}) +export class GameBodyComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/game-footer/game-footer.component.html b/src/app/home/game-footer/game-footer.component.html new file mode 100644 index 0000000..2b36c93 --- /dev/null +++ b/src/app/home/game-footer/game-footer.component.html @@ -0,0 +1,9 @@ +
+
+ +
+
+ + +
+
\ No newline at end of file diff --git a/src/app/home/game-footer/game-footer.component.scss b/src/app/home/game-footer/game-footer.component.scss new file mode 100644 index 0000000..e4e53cd --- /dev/null +++ b/src/app/home/game-footer/game-footer.component.scss @@ -0,0 +1,3 @@ +.GameFooter { + display: flex; +} diff --git a/src/app/home/game-footer/game-footer.component.spec.ts b/src/app/home/game-footer/game-footer.component.spec.ts new file mode 100644 index 0000000..26164ee --- /dev/null +++ b/src/app/home/game-footer/game-footer.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GameFooterComponent } from './game-footer.component'; + +describe('GameFooterComponent', () => { + let component: GameFooterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GameFooterComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GameFooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/game-footer/game-footer.component.ts b/src/app/home/game-footer/game-footer.component.ts new file mode 100644 index 0000000..8d5a429 --- /dev/null +++ b/src/app/home/game-footer/game-footer.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-game-footer', + templateUrl: './game-footer.component.html', + styleUrls: ['./game-footer.component.scss'] +}) +export class GameFooterComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/game-header/game-header.component.html b/src/app/home/game-header/game-header.component.html new file mode 100644 index 0000000..20537e0 --- /dev/null +++ b/src/app/home/game-header/game-header.component.html @@ -0,0 +1,18 @@ +
+
+
+
+ Minecraft +
+
+ Survival +
+
+ 1.12.2 +
+
+
+ Survival world with mods such as Industrial Craft, RailCraft, etc. +
+
+
\ No newline at end of file diff --git a/src/app/home/game-header/game-header.component.scss b/src/app/home/game-header/game-header.component.scss new file mode 100644 index 0000000..82bd73f --- /dev/null +++ b/src/app/home/game-header/game-header.component.scss @@ -0,0 +1,15 @@ +.GameHeader { + margin: 25px 0px 0px 0; +} +.GameHeader > .two-lines-centered > .first-line > .header { + font-size: 40px; + font-family: "Poppins-Bold"; + margin: 0 10px -11px 0; +} +.GameHeader > .two-lines-centered > .light { + font-size: 16px; +} +.GameHeader > .two-lines-centered > .first-line > .label { + font-size: 15px; + margin: 18px 0 0 5px; +} \ No newline at end of file diff --git a/src/app/home/game-header/game-header.component.spec.ts b/src/app/home/game-header/game-header.component.spec.ts new file mode 100644 index 0000000..09185dd --- /dev/null +++ b/src/app/home/game-header/game-header.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GameHeaderComponent } from './game-header.component'; + +describe('GameHeaderComponent', () => { + let component: GameHeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GameHeaderComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GameHeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/game-header/game-header.component.ts b/src/app/home/game-header/game-header.component.ts new file mode 100644 index 0000000..3a37bb3 --- /dev/null +++ b/src/app/home/game-header/game-header.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-game-header', + templateUrl: './game-header.component.html', + styleUrls: ['./game-header.component.scss'] +}) +export class GameHeaderComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/generic-game/generic-game.component.html b/src/app/home/generic-game/generic-game.component.html new file mode 100644 index 0000000..43a4051 --- /dev/null +++ b/src/app/home/generic-game/generic-game.component.html @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/app/home/generic-game/generic-game.component.scss b/src/app/home/generic-game/generic-game.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/generic-game/generic-game.component.spec.ts b/src/app/home/generic-game/generic-game.component.spec.ts new file mode 100644 index 0000000..d22e492 --- /dev/null +++ b/src/app/home/generic-game/generic-game.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GenericGameComponent } from './generic-game.component'; + +describe('GenericGameComponent', () => { + let component: GenericGameComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GenericGameComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GenericGameComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/generic-game/generic-game.component.ts b/src/app/home/generic-game/generic-game.component.ts new file mode 100644 index 0000000..c4bf052 --- /dev/null +++ b/src/app/home/generic-game/generic-game.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-generic-game', + templateUrl: './generic-game.component.html', + styleUrls: ['./generic-game.component.scss'] +}) +export class GenericGameComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index db3ba0a..21f2a75 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,66 +1,31 @@
-
-
- -
-
-
-
- MrSandyMoon -
-
- Booster -
-
-
- Administrator -
-
-
+ + -
+
-
- -
- 2 - sessions active -
+
+ + + + + + + -
- 1 - session announced -
- - -
- 2 - sessions to be voted -
- + + + +
-
-
-
- Minecraft -
-
- Survival -
-
- 1.12.2 -
-
-
- Survival world with mods such as Industrial Craft, RailCraft, etc. -
-
+ +
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index a630e88..2754361 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -2,10 +2,43 @@ } +/*********************************************/ +/************** Main Frame *******************/ +/*********************************************/ + +.container { + display: flex; + height: 100%; +} +#LeftBar { + width: 30%; + display: inline-block; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + min-width: 350px; +} +#RightBar { + width: 70%; + display: inline-block; + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); + padding-left: 60px; +} + .games-icons-panel{ position: fixed; background-color: #454545; height: 100%; margin-left: auto; float: left +} + +#GamesBar { + margin-left: 15px; +} + +.ButtonsBar { + margin-left: auto; + margin-right: 70px; + display: flex; } \ No newline at end of file diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 3bd43bc..d68963d 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -5,9 +5,20 @@ import { HomeRoutingModule } from './home-routing.module'; import { HomeComponent } from './home.component'; import { SharedModule } from '../shared/shared.module'; +import { GameBarComponent } from './game-bar/game-bar.component'; +import { SessionCountComponent } from './session-count/session-count.component'; +import { ProfileBarComponent } from './profile-bar/profile-bar.component'; +import { LabelComponent } from './label/label.component'; +import { GenericGameComponent } from './generic-game/generic-game.component'; +import { GameHeaderComponent } from './game-header/game-header.component'; +import { GameBodyComponent } from './game-body/game-body.component'; +import { GameFooterComponent } from './game-footer/game-footer.component'; +import { ButtonComponent } from './button/button.component'; +import { ButtonSvgComponent } from './button-svg/button-svg.component'; +import { PlayersBarComponent } from './players-bar/players-bar.component'; @NgModule({ - declarations: [HomeComponent], + declarations: [HomeComponent, GameBarComponent, SessionCountComponent, ProfileBarComponent, LabelComponent, GenericGameComponent, GameHeaderComponent, GameBodyComponent, GameFooterComponent, ButtonComponent, ButtonSvgComponent, PlayersBarComponent], imports: [CommonModule, SharedModule, HomeRoutingModule] }) export class HomeModule {} diff --git a/src/app/home/label/label.component.html b/src/app/home/label/label.component.html new file mode 100644 index 0000000..b186278 --- /dev/null +++ b/src/app/home/label/label.component.html @@ -0,0 +1,3 @@ +
+ Booster +
\ No newline at end of file diff --git a/src/app/home/label/label.component.scss b/src/app/home/label/label.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/label/label.component.spec.ts b/src/app/home/label/label.component.spec.ts new file mode 100644 index 0000000..332a6e4 --- /dev/null +++ b/src/app/home/label/label.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LabelComponent } from './label.component'; + +describe('LabelComponent', () => { + let component: LabelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LabelComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LabelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/label/label.component.ts b/src/app/home/label/label.component.ts new file mode 100644 index 0000000..05280da --- /dev/null +++ b/src/app/home/label/label.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-label', + templateUrl: './label.component.html', + styleUrls: ['./label.component.scss'] +}) +export class LabelComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/players-bar/players-bar.component.html b/src/app/home/players-bar/players-bar.component.html new file mode 100644 index 0000000..9b36fd6 --- /dev/null +++ b/src/app/home/players-bar/players-bar.component.html @@ -0,0 +1,17 @@ +
+
+ Players online: + 3 +
+
+
+ +
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/home/players-bar/players-bar.component.scss b/src/app/home/players-bar/players-bar.component.scss new file mode 100644 index 0000000..f694942 --- /dev/null +++ b/src/app/home/players-bar/players-bar.component.scss @@ -0,0 +1,13 @@ +.PlayersBar { + display: flex; + margin-top: 12px; +} +.PlayersIcons { + display: flex; + margin-left: 20px; + backdrop-filter: drop-shadow(1px 0px 4px #000000); + -webkit-backdrop-filter: drop-shadow(1px 0px 4px #000000); +} +.PlayersIcons > .rounded { + margin-left: -15px; +} \ No newline at end of file diff --git a/src/app/home/players-bar/players-bar.component.spec.ts b/src/app/home/players-bar/players-bar.component.spec.ts new file mode 100644 index 0000000..91d69dc --- /dev/null +++ b/src/app/home/players-bar/players-bar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PlayersBarComponent } from './players-bar.component'; + +describe('PlayersBarComponent', () => { + let component: PlayersBarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PlayersBarComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PlayersBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/players-bar/players-bar.component.ts b/src/app/home/players-bar/players-bar.component.ts new file mode 100644 index 0000000..6ed14b9 --- /dev/null +++ b/src/app/home/players-bar/players-bar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-players-bar', + templateUrl: './players-bar.component.html', + styleUrls: ['./players-bar.component.scss'] +}) +export class PlayersBarComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/profile-bar/profile-bar.component.html b/src/app/home/profile-bar/profile-bar.component.html new file mode 100644 index 0000000..7544521 --- /dev/null +++ b/src/app/home/profile-bar/profile-bar.component.html @@ -0,0 +1,16 @@ +
+
+ +
+
+
+
+ MrSandyMoon +
+ +
+
+ Administrator +
+
+
\ No newline at end of file diff --git a/src/app/home/profile-bar/profile-bar.component.scss b/src/app/home/profile-bar/profile-bar.component.scss new file mode 100644 index 0000000..b872868 --- /dev/null +++ b/src/app/home/profile-bar/profile-bar.component.scss @@ -0,0 +1,22 @@ +/*********************************************/ +/************** Profile Bar ******************/ +/*********************************************/ + +.ProfileBar { + display: flex; + padding: 5px 0 0 10px; + margin-bottom: -10px; + height: 60px; +} +.ProfileBar > .two-lines-centered { + margin-top: 4px; + margin-left: 15px; +} +#ProfilePicture { + padding-top: 3px; +} + +.first-line > .header { + font-size: 19px; + margin-bottom: -5px; +} \ No newline at end of file diff --git a/src/app/home/profile-bar/profile-bar.component.spec.ts b/src/app/home/profile-bar/profile-bar.component.spec.ts new file mode 100644 index 0000000..b806d2c --- /dev/null +++ b/src/app/home/profile-bar/profile-bar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProfileBarComponent } from './profile-bar.component'; + +describe('ProfileBarComponent', () => { + let component: ProfileBarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ProfileBarComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ProfileBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/profile-bar/profile-bar.component.ts b/src/app/home/profile-bar/profile-bar.component.ts new file mode 100644 index 0000000..186e095 --- /dev/null +++ b/src/app/home/profile-bar/profile-bar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-profile-bar', + templateUrl: './profile-bar.component.html', + styleUrls: ['./profile-bar.component.scss'] +}) +export class ProfileBarComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/session-count/session-count.component.html b/src/app/home/session-count/session-count.component.html new file mode 100644 index 0000000..755e464 --- /dev/null +++ b/src/app/home/session-count/session-count.component.html @@ -0,0 +1,4 @@ +
+ 2 + sessions active +
\ No newline at end of file diff --git a/src/app/home/session-count/session-count.component.scss b/src/app/home/session-count/session-count.component.scss new file mode 100644 index 0000000..590c996 --- /dev/null +++ b/src/app/home/session-count/session-count.component.scss @@ -0,0 +1,4 @@ +.SessionCount { + font-size: 13px; + margin: 20px 0 20px 10px; +} \ No newline at end of file diff --git a/src/app/home/session-count/session-count.component.spec.ts b/src/app/home/session-count/session-count.component.spec.ts new file mode 100644 index 0000000..b47f9b9 --- /dev/null +++ b/src/app/home/session-count/session-count.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SessionCountComponent } from './session-count.component'; + +describe('SessionCountComponent', () => { + let component: SessionCountComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SessionCountComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SessionCountComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/session-count/session-count.component.ts b/src/app/home/session-count/session-count.component.ts new file mode 100644 index 0000000..2fcaa91 --- /dev/null +++ b/src/app/home/session-count/session-count.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-session-count', + templateUrl: './session-count.component.html', + styleUrls: ['./session-count.component.scss'] +}) +export class SessionCountComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/styles.scss b/src/styles.scss index bc162b5..7c92d30 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -8,6 +8,7 @@ html, body { background-size: cover; font-family: "Poppins-Regular"; color: white; + backdrop-filter: brightness(0.7); height: 100%; } @@ -27,6 +28,14 @@ html, body { font-family: "Poppins-SemiBold"; src: url("./assets/Poppins/Poppins-SemiBold.ttf"); } +@font-face { + font-family: "Poppins-Bold"; + src: url("./assets/Poppins/Poppins-Bold.ttf"); +} +@font-face { + font-family: "Poppins-ExtraBold"; + src: url("./assets/Poppins/Poppins-ExtraBold.ttf"); +} .SemiBold { font-family: "Poppins-SemiBold" @@ -35,28 +44,6 @@ html, body { font-family: "Poppins-Light" } -/*********************************************/ -/************** Main Frame *******************/ -/*********************************************/ - -.container { - display: flex; - height: 100%; -} -#LeftBar { - width: 30%; - display: inline-block; - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); - min-width: 350px; -} -#RightBar { - width: 70%; - display: inline-block; - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); - padding-left: 20px; -} /*********************************************/ /************** Default Set ******************/ @@ -95,57 +82,27 @@ hr { border: 1px solid rgba(0, 0, 0, 0.1); } -/*********************************************/ -/************** Profile Bar ******************/ -/*********************************************/ - -.ProfileBar { - display: flex; - padding: 5px 0 0 10px; - margin-bottom: -10px; - height: 60px; -} -.ProfileBar > .two-lines-centered { - margin-top: 4px; - margin-left: 15px; -} -#ProfilePicture { - padding-top: 3px; -} - -.first-line > .header { - font-size: 19px; - margin-bottom: -5px; -} /*********************************************/ /************** Games Bar *******************/ /*********************************************/ -#GamesBar { - margin-left: 15px; -} -.GameBar { + + +/*********************************************/ +/************** Generic Game *****************/ +/*********************************************/ + + + + + + +.ButtonsBar { + margin-left: auto; + margin-right: 70px; display: flex; - margin-top: 13px; - padding: 10px 0 2px 10px; - margin-right: 15px; -} -.GameBar:hover { - background-color: rgba(255, 255, 255, 0.2); - border-radius: 10px; - -webkit-backdrop-filter: drop-shadow(5px 5px 0px #ffffff); - backdrop-filter: drop-shadow(5px 5px 4px #ffffff); -} -.GameBar > .two-lines-centered { - margin-top: 5px; - margin-left: 15px; -} -.SessionCount { - font-size: 13px; - margin: 20px 0 20px 10px; } -.big { - font-size: calc(+20%); -} + +