add home screen components

app/main.js

@@ -11,8 +11,8 @@ function createWindow() {
     win = new electron_1.BrowserWindow({
         x: 0,
         y: 0,
-        width: 1215,
+        width: size.width,
-        height: 750,
+        height: size.height,
         webPreferences: {
             nodeIntegration: true,
             allowRunningInsecureContent: (serve),

src/app/app.module.ts

@@ -15,13 +15,12 @@ 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, GameSideButtonComponent],
+  declarations: [AppComponent],
   imports: [
     BrowserModule,
     FormsModule,

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

@@ -1,10 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-/*********************************************/
-/************** 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

@@ -1,23 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

src/app/home/button/button.component.scss

@@ -1,17 +0,0 @@
-.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.ts

@@ -1,15 +0,0 @@
-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,17 +1,4 @@
-<div class="GameBar">
+<div id="LeftBar">
-	<div class="img cornering">
+    <app-user-info></app-user-info>
-		<img src="https://ar.toneden.io/32268493/tracks/temp9217?cache=1581399956399" height="60px" width="60px">
+    <app-game-button></app-game-button>
-	</div>
+</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

@@ -1,16 +0,0 @@
-.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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,18 @@
+<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.spec.ts

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

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

@@ -0,0 +1,15 @@
+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

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

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

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

src/app/home/game-body/game-body.component.spec.ts

@@ -1,23 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,9 +0,0 @@
-<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

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

src/app/home/game-footer/game-footer.component.spec.ts

@@ -1,23 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,18 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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,8 +1 @@
-<!-- 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,42 +1,4 @@
 <div class="container">
-	<div id="LeftBar">
+	<app-game-bar></app-game-bar>
-		<!-- Profile bar -->
+	<app-generic-game></app-generic-game>
-		<app-profile-bar></app-profile-bar>
+</div>
-
-		<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>
-		</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,60 +2,10 @@
   
 }
 
-/*********************************************/
-/************** 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;
-	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,19 +6,12 @@ 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 { GameButtonComponent } from './game-bar/game-button/game-button.component';
-import { GameBodyComponent } from './game-body/game-body.component';
+import { UserInfoComponent } from './game-bar/user-info/user-info.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, SessionCountComponent, ProfileBarComponent, LabelComponent, GenericGameComponent, GameHeaderComponent, GameBodyComponent, GameFooterComponent, ButtonComponent, ButtonSvgComponent, PlayersBarComponent],
+  declarations: [HomeComponent, GameBarComponent, GenericGameComponent, GameButtonComponent, UserInfoComponent],
   imports: [CommonModule, SharedModule, HomeRoutingModule]
 })
 export class HomeModule {}

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

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

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

@@ -1,23 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,17 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,16 +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>
-			<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

@@ -1,22 +0,0 @@
-/*********************************************/
-/************** 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

@@ -1,23 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<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

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

src/app/home/session-count/session-count.component.spec.ts

@@ -1,23 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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,7 +8,6 @@ html, body {
 	background-size: cover;
 	font-family: "Poppins-Regular";
 	color: white;
-	backdrop-filter: brightness(0.7);
 	height: 100%;
 }
 
@@ -28,14 +27,6 @@ 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"
@@ -44,6 +35,28 @@ 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 ******************/
@@ -82,27 +95,57 @@ 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;
-/*********************************************/
+}
-/************** Generic Game *****************/
+.GameBar {
-/*********************************************/
-
-
-
-
-
-
-.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%);
+}