Credentials

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

src/app/app.module.ts

@@ -15,12 +15,13 @@ import { HomeModule } from './home/home.module';
 import { DetailModule } from './detail/detail.module';
 
 import { AppComponent } from './app.component';
+import { GameSideButtonComponent } from './game-side-button/game-side-button.component';
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, GameSideButtonComponent],
   imports: [
     BrowserModule,
     FormsModule,

src/app/game-bar/game-bar-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class GameBarRoutingModule { }

src/app/game-bar/game-bar.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { GameBarRoutingModule } from './game-bar-routing.module';
+import { GameButtonComponent } from './game-button/game-button.component';
+
+
+@NgModule({
+  declarations: [
+    GameButtonComponent
+  ],
+  imports: [
+    CommonModule,
+    GameBarRoutingModule
+  ]
+})
+export class GameBarModule { }

src/app/game-bar/game-button/game-button.component.html

@@ -0,0 +1 @@
+<p>game-button works!</p>

src/app/game-side-button/game-side-button.component.html

@@ -0,0 +1,18 @@
+<div class="GameBar">
+	<div class="img cornering">
+		<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTENKPSC6g94JwGU4-HeYtwTDS6MW2_RO6TL51IDw9H2Gy9HfOkt8xx3VYAqSqW944M03E&usqp=CAU" height="60px" width="60px">
+	</div>
+	<div class="two-lines-centered">
+		<div class="first-line">
+			<div class="text header">
+				<span>Warface</span>
+			</div>
+			<div class="label">
+				Pirate
+			</div>
+		</div> 
+		<div class="text light darken">
+			<span>2 people voted. Need 4 more to play.</span>
+		</div>
+	</div>
+</div>

src/app/game-side-button/game-side-button.component.scss

@@ -0,0 +1,27 @@
+/*********************************************/
+/************** Games Bar *******************/
+/*********************************************/
+
+#GamesBar {
+	margin-left: 15px;
+}
+.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;
+}
+.SessionCount {
+	font-size: 13px;
+	margin: 20px 0 20px 10px;
+}

src/app/game-side-button/game-side-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameSideButtonComponent } from './game-side-button.component';
+
+describe('GameSideButtonComponent', () => {
+  let component: GameSideButtonComponent;
+  let fixture: ComponentFixture<GameSideButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GameSideButtonComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GameSideButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/game-side-button/game-side-button.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-game-side-button',
+  templateUrl: './game-side-button.component.html',
+  styleUrls: ['./game-side-button.component.scss']
+})
+export class GameSideButtonComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/button-svg/button-svg.component.html

@@ -0,0 +1,6 @@
+<div class="button">
+	<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 48 48">
+	    <path d="M0 0h48v48h-48z" fill="none"/>
+	    <path d="M38.86 25.95c.08-.64.14-1.29.14-1.95s-.06-1.31-.14-1.95l4.23-3.31c.38-.3.49-.84.24-1.28l-4-6.93c-.25-.43-.77-.61-1.22-.43l-4.98 2.01c-1.03-.79-2.16-1.46-3.38-1.97l-.75-5.3c-.09-.47-.5-.84-1-.84h-8c-.5 0-.91.37-.99.84l-.75 5.3c-1.22.51-2.35 1.17-3.38 1.97l-4.98-2.01c-.45-.17-.97 0-1.22.43l-4 6.93c-.25.43-.14.97.24 1.28l4.22 3.31c-.08.64-.14 1.29-.14 1.95s.06 1.31.14 1.95l-4.22 3.31c-.38.3-.49.84-.24 1.28l4 6.93c.25.43.77.61 1.22.43l4.98-2.01c1.03.79 2.16 1.46 3.38 1.97l.75 5.3c.08.47.49.84.99.84h8c.5 0 .91-.37.99-.84l.75-5.3c1.22-.51 2.35-1.17 3.38-1.97l4.98 2.01c.45.17.97 0 1.22-.43l4-6.93c.25-.43.14-.97-.24-1.28l-4.22-3.31zm-14.86 5.05c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
+	</svg>
+</div>

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

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

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

src/app/home/button/button.component.html

@@ -0,0 +1,3 @@
+<div class="button">
+	<div class="text">Play</div>
+</div>

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

src/app/home/button/button.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { UserInfoComponent } from './user-info.component';
+import { ButtonComponent } from './button.component';
 
-describe('UserInfoComponent', () => {
-  let component: UserInfoComponent;
-  let fixture: ComponentFixture<UserInfoComponent>;
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ UserInfoComponent ]
+      declarations: [ ButtonComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(UserInfoComponent);
+    fixture = TestBed.createComponent(ButtonComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

src/app/home/game-bar/game-bar.component.html

@@ -1,4 +1,17 @@
-<div id="LeftBar">
-    <app-user-info></app-user-info>
-    <app-game-button></app-game-button>
+<div class="GameBar">
+	<div class="img cornering">
+		<img src="https://ar.toneden.io/32268493/tracks/temp9217?cache=1581399956399" height="60px" width="60px">
+	</div>
+	<div class="two-lines-centered">
+		<div class="first-line">
+			<div class="text header">
+				<span>Minecraft</span>
+			</div>
+			<app-label></app-label>
+			<app-label></app-label>
+		</div> 
+		<div class="text light darken">
+			<span>12 days left</span>
+		</div>
+	</div>
 </div>

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

src/app/home/game-bar/game-button/game-button.component.html

@@ -1,16 +0,0 @@
-<div class="two-lines-centered">
-    <div class="first-line">
-        <div class="text header">
-            <span>Minecraft</span>
-        </div>
-        <div class="label">
-            Survival
-        </div>
-        <div class="label">
-            1.12.2
-        </div>
-    </div>
-    <div class="text light darken">
-        <span>Survival world with mods such as Industrial Craft, RailCraft, etc.</span>
-    </div>
-</div>

src/app/home/game-bar/user-info/user-info.component.html

@@ -1,18 +0,0 @@
-<div class="ProfileBar">
-    <div class="img rounded" id="ProfilePicture">
-        <img src="./assets/avatar.jpeg" height="45px" width="45px">
-    </div>
-    <div class="two-lines-centered">
-        <div class="first-line">
-            <div class="text header big">
-                <span>MrSandyMoon</span>
-            </div>
-            <div class="label">
-                Booster
-            </div>
-        </div>
-        <div class="text light darken">
-            <span>Administrator</span>
-        </div>
-    </div>
-</div>

src/app/home/game-bar/user-info/user-info.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-user-info',
-  templateUrl: './user-info.component.html',
-  styleUrls: ['./user-info.component.scss']
-})
-export class UserInfoComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/home/game-body/game-body.component.html

@@ -0,0 +1,3 @@
+<div class="GameBody">
+	
+</div>

src/app/home/game-body/game-body.component.scss

@@ -0,0 +1,3 @@
+.GameBody {
+	height: calc(100% - 225px);
+}

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

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

src/app/home/game-footer/game-footer.component.html

@@ -0,0 +1,9 @@
+<div class="GameFooter">
+	<div>
+		<app-players-bar></app-players-bar>
+	</div>
+	<div class="ButtonsBar">
+		<app-button-svg></app-button-svg>
+		<app-button></app-button>
+	</div>
+</div>

src/app/home/game-footer/game-footer.component.scss

@@ -0,0 +1,3 @@
+.GameFooter {
+	display: flex;
+}

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

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

src/app/home/game-header/game-header.component.html

@@ -0,0 +1,18 @@
+<div class="GameHeader">
+	<div class="two-lines-centered">
+		<div class="first-line">
+			<div class="text header">
+				<span>Minecraft</span>
+			</div>
+			<div class="label">
+				Survival
+			</div>
+			<div class="label">
+				1.12.2
+			</div>
+		</div>
+		<div class="text light darken">
+			<span>Survival world with mods such as Industrial Craft, RailCraft, etc.</span>
+		</div>
+	</div>
+</div>

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

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

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

src/app/home/generic-game/generic-game.component.html

@@ -1 +1,8 @@
-ОГО, ну и хуита эта ваша игра
+<!-- Game header and description -->
+<app-game-header></app-game-header>
+
+<!-- Game body (currently blank) -->
+<app-game-body></app-game-body>
+
+<!-- Online\voted players, buttons (game settings) -->
+<app-game-footer></app-game-footer>

src/app/home/home.component.html

@@ -1,4 +1,42 @@
 <div class="container">
+	<div id="LeftBar">
+		<!-- Profile bar -->
+		<app-profile-bar></app-profile-bar>
+
+		<hr><!-- Divider -->
+
+		<div id="GamesBar">
+			<!-- Active sessions -->
+			<app-session-count></app-session-count>
+			<app-game-bar></app-game-bar>
+			<app-game-bar></app-game-bar>
+
+			<!-- Announced sessions -->
+			<app-session-count></app-session-count>
+			<app-game-bar></app-game-bar>
+
+			<!-- To be voted sessions -->
+			<app-session-count></app-session-count>
+			<app-game-bar></app-game-bar>
 			<app-game-bar></app-game-bar>
-	<app-generic-game></app-generic-game>
 		</div>
+		
+		<div class="Credentials">
+			<center>
+				<span id="credentials-name">Created by Skirda Team</span>
+			</center>
+			<center>
+				<span id="credentials-version" class="light darken">Version 0.0 Beta</span>
+			</center>
+		</div>
+
+	</div>
+	<div id="RightBar">
+
+		<app-generic-game></app-generic-game>
+
+		
+	</div>
+</div>
+
+

src/app/home/home.component.scss

@@ -2,6 +2,29 @@
   
 }
 
+/*********************************************/
+/************** 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;
@@ -9,3 +32,30 @@
     margin-left: auto;
     float: left
 }
+
+#GamesBar {
+	margin-left: 15px;
+	height: calc(100% - 150px);
+}
+
+.ButtonsBar {
+	margin-left: auto; 
+	margin-right: 70px;
+	display: flex;
+}
+
+/*********************************************/
+/************** Credentials ******************/
+/*********************************************/
+.Credentials {
+
+}
+.Credentials > center {
+	margin-bottom: -8px;
+}
+#credentials-name {
+	font-size: 12px;
+}
+#credentials-version {
+	font-size: 10px;
+}

src/app/home/home.module.ts

@@ -6,12 +6,19 @@ 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 { GameButtonComponent } from './game-bar/game-button/game-button.component';
-import { UserInfoComponent } from './game-bar/user-info/user-info.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, GameBarComponent, GenericGameComponent, GameButtonComponent, UserInfoComponent],
+  declarations: [HomeComponent, GameBarComponent, SessionCountComponent, ProfileBarComponent, LabelComponent, GenericGameComponent, GameHeaderComponent, GameBodyComponent, GameFooterComponent, ButtonComponent, ButtonSvgComponent, PlayersBarComponent],
   imports: [CommonModule, SharedModule, HomeRoutingModule]
 })
 export class HomeModule {}

src/app/home/label/label.component.html

@@ -0,0 +1,3 @@
+<div class="label">
+	Booster
+</div>

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

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

src/app/home/players-bar/players-bar.component.html

@@ -0,0 +1,17 @@
+<div class="PlayersBar">
+	<div class="PlayersCount">
+		<span>Players online: </span>
+		<span>3</span>
+	</div>
+	<div class="PlayersIcons">
+		<div class="rounded">
+			<img src="./assets/avatar.jpeg" width="30px" height="30px">
+		</div>
+		<div class="rounded">
+			<img src="./assets/avatar.jpeg" width="30px" height="30px">
+		</div>
+		<div class="rounded">
+			<img src="./assets/avatar.jpeg" width="30px" height="30px">
+		</div>
+	</div>
+</div>

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

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

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

src/app/home/profile-bar/profile-bar.component.html

@@ -0,0 +1,16 @@
+<div class="ProfileBar">
+	<div class="img rounded" id="ProfilePicture">
+		<img src="./assets/avatar.jpeg" height="45px" width="45px">
+	</div>
+	<div class="two-lines-centered">
+		<div class="first-line">
+			<div class="text header big">
+				<span>MrSandyMoon</span>
+			</div>
+			<app-label></app-label>
+		</div>
+		<div class="text light darken">
+			<span>Administrator</span>
+		</div>
+	</div>
+</div>

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

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

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

src/app/home/session-count/session-count.component.html

@@ -0,0 +1,4 @@
+<div class="SessionCount">
+	<span class="semi-bold">2 </span>
+	<span class="light">sessions active</span>
+</div>

src/app/home/session-count/session-count.component.scss

@@ -0,0 +1,4 @@
+.SessionCount {
+	font-size: 13px;
+	margin: 20px 0 20px 10px;
+}

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

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

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