RagePeanut · RagePeanut · Feb 16, 2018 · Feb 16, 2018
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "app.js",
   "scripts": {
     "start": "node app.js",
-    "dev": "nodemon app.js",
+    "dev": "nodemon --exec \"heroku local\" --signal SIGTERM",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [

diff --git a/public/.angular-cli.json b/public/.angular-cli.json
@@ -19,7 +19,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.css",
+        "../node_modules/font-awesome/css/font-awesome.css"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

diff --git a/public/dist/fontawesome-webfont.674f50d287a8c48dc19b.eot b/public/dist/fontawesome-webfont.674f50d287a8c48dc19b.eot
diff --git a/public/dist/fontawesome-webfont.912ec66d7572ff821749.svg b/public/dist/fontawesome-webfont.912ec66d7572ff821749.svg
diff --git a/public/dist/fontawesome-webfont.af7ae505a9eed503f8b8.woff2 b/public/dist/fontawesome-webfont.af7ae505a9eed503f8b8.woff2
diff --git a/public/dist/fontawesome-webfont.b06871f281fee6b241d6.ttf b/public/dist/fontawesome-webfont.b06871f281fee6b241d6.ttf
diff --git a/public/dist/fontawesome-webfont.fee66e712a8a08eef580.woff b/public/dist/fontawesome-webfont.fee66e712a8a08eef580.woff
diff --git a/public/dist/index.html b/public/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SteamMates</title><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="SteamMates makes it easier than ever before to find multiplayer and co-op games to play online or locally with your friends !"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"><link href="styles.65884954d910f9236232.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="inline.b2a2bc76c04b094c75ac.bundle.js"></script><script type="text/javascript" src="polyfills.f20484b2fa4642e0dca8.bundle.js"></script><script type="text/javascript" src="main.8f0eea798d3e8c4485fa.bundle.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SteamMates</title><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="SteamMates makes it easier than ever before to find multiplayer and co-op games to play online or locally with your friends !"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"><link href="styles.9ae013b0e195ad23cfba.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="inline.39b659e602e1f2533641.bundle.js"></script><script type="text/javascript" src="polyfills.f20484b2fa4642e0dca8.bundle.js"></script><script type="text/javascript" src="main.8ba8f28311078571b11d.bundle.js"></script></body></html>
diff --git a/...ist/inline.b2a2bc76c04b094c75ac.bundle.js → ...ist/inline.39b659e602e1f2533641.bundle.js b/...ist/inline.b2a2bc76c04b094c75ac.bundle.js → ...ist/inline.39b659e602e1f2533641.bundle.js
diff --git a/public/dist/main.8ba8f28311078571b11d.bundle.js b/public/dist/main.8ba8f28311078571b11d.bundle.js
diff --git a/public/dist/main.8f0eea798d3e8c4485fa.bundle.js b/public/dist/main.8f0eea798d3e8c4485fa.bundle.js
diff --git a/public/dist/styles.65884954d910f9236232.bundle.css b/public/dist/styles.65884954d910f9236232.bundle.css
diff --git a/public/dist/styles.9ae013b0e195ad23cfba.bundle.css b/public/dist/styles.9ae013b0e195ad23cfba.bundle.css
diff --git a/public/package-lock.json b/public/package-lock.json
diff --git a/public/package.json b/public/package.json
@@ -21,7 +21,9 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "angular-font-awesome": "^3.1.2",
     "core-js": "^2.4.1",
+    "font-awesome": "^4.7.0",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },

diff --git a/public/src/app/app.component.css b/public/src/app/app.component.css
diff --git a/public/src/app/app.component.css.map b/public/src/app/app.component.css.map
diff --git a/public/src/app/app.component.html b/public/src/app/app.component.html
@@ -3,8 +3,8 @@ <h1>{{ players.length }} player<span *ngIf="players.length !== 1">s</span></h1>
   <input id="text-field" type="text" placeholder="Put your steamid or your custom url here..." [(ngModel)]="playerID">
   <div id="buttons">
     <button type="button" (click)="addPlayer()" [disabled]="state">Add</button>
-    <div id="analyze" #analyze>
-      <button type="submit" (click)="state=!state">{{ state?'Stop':'Start' }} analyzing</button>
+    <div id="analyze" (mouseleave)="changeFiltersPointerEvents('none')">
+      <button type="submit" (click)="state=!state" (mouseenter)="changeFiltersPointerEvents('all')">{{ state?'Stop':'Start' }} analyzing</button>
       <ul id="filters">
         <li>
           <input id="online" type="checkbox" (change)="filters.online=!filters.online" [checked]="filters.online">
@@ -27,6 +27,11 @@ <h1>{{ players.length }} player<span *ngIf="players.length !== 1">s</span></h1>
   </div>
 </div>
 <div id="players" [ngClass]="state?'out':'in'">
-  <a *ngFor="let player of players" href="{{ player.profileurl }}" target="_blank"><img src="{{ player.avatarmedium }}" alt="Profile picture" class="state{{ player.personastate }}"></a>
+  <div *ngFor="let player of players; let i = index">
+    <!-- Always leave this hidden input as first ! -->
+    <input type="hidden" value="{{ i }}">
+    <fa name="times" size="2x" (click)="removePlayer($event)"></fa>
+    <a href="{{ player.profileurl }}" target="_blank"><img src="{{ player.avatarmedium }}" alt="Profile picture"></a>
+  </div>
 </div>
 <app-games *ngIf="state" [players]="players" [filters]="filters"></app-games>
diff --git a/public/src/app/app.component.sass b/public/src/app/app.component.sass
@@ -7,6 +7,7 @@ $input-background: #465360
 $placeholder: #8F98A0
 $button-text: #66C0EA
 $button: #1D6F95
+$delete: darkred
 
 // STYLES
 #inputs
@@ -54,16 +55,19 @@ $button: #1D6F95
                     color: $button-text
         #analyze
             display: inline-block
+            position: relative
             #filters
                 position: absolute
                 z-index: 1
+                width: 100%
                 padding: 5px 0
                 font-family: arial
                 color: $white
                 text-align: left
                 list-style-type: none
                 box-sizing: border-box
                 background-color: $input-background
+                pointer-events: none
                 opacity: 0
                 transition: 100ms ease-in-out opacity
                 li
@@ -105,12 +109,28 @@ $button: #1D6F95
     left: 10%
     text-align: center
     transition: 1000ms ease-in-out opacity, 1000ms ease-in-out top
-    a
-        margin: 0 10px
-        img
-            height: 128px
-            margin-bottom: 20px
-            vertical-align: bottom
+    div
+        display: inline-block
+        position: relative
+        margin: 0 10px 20px 10px
+        fa
+            position: absolute
+            top: 0
+            right: 0
+            padding-right: 3px
+            color: $delete
+            cursor: pointer
+            opacity: 0
+            transition: 100ms ease-in-out color, 100ms ease-in-out opacity
+            &:hover
+                color: darken($delete, 5)
+        a
+            img
+                height: 128px
+                vertical-align: bottom
+        &:hover
+            fa
+                opacity: 1
     &.in
         opacity: 1
         top: 64vh

diff --git a/public/src/app/app.component.ts b/public/src/app/app.component.ts
@@ -2,16 +2,14 @@ import { User } from './user.model';
 
 import { SteamUsersService } from './steam-users.service';
 
-import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit, AfterViewInit {
-
-  @ViewChild('analyze') analyze: ElementRef;
+export class AppComponent implements OnInit {
 
   filters = {
     online: true,
@@ -30,10 +28,6 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   }
 
-  ngAfterViewInit() {
-    document.getElementById('filters').style.width = this.analyze.nativeElement.offsetWidth + 'px';
-  }
-
   addPlayer() {
 
     if (!this.playersIDs.includes(this.playerID)) {
@@ -67,10 +61,26 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   }
 
-  changeState() {
+  changeFiltersPointerEvents(newEvent: string) {
+    document.getElementById('filters').style.pointerEvents = newEvent;
+  }
 
+  changeState() {
     this.state = !this.state;
+  }
 
+  removePlayer() {
+    // Getting the index from the hidden input
+    let index = event.target['parentNode'].parentNode.firstElementChild.attributes.value.nodeValue;
+    // Verifying that the index is possible
+    if (index >= 0 && index < this.playersIDs.length) {
+      // Removing the player from the players array
+      const steamid = this.players[index].steamid;
+      this.players.splice(index, 1);
+      // Removing the steamid from the playersIDs array
+      index = this.playersIDs.indexOf(steamid);
+      this.playersIDs.splice(index, 1);
+    }
   }
 
 }
diff --git a/public/src/app/app.module.ts b/public/src/app/app.module.ts
@@ -1,14 +1,14 @@
 import { SteamUsersService } from './steam-users.service';
+import { SteamGamesService } from './games/steam-games.service';
 
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-
+import { AngularFontAwesomeModule } from 'angular-font-awesome';
 
 import { AppComponent } from './app.component';
 import { GamesComponent } from './games/games.component';
-import { SteamGamesService } from './games/steam-games.service';
 
 
 @NgModule({
@@ -19,7 +19,8 @@ import { SteamGamesService } from './games/steam-games.service';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpClientModule
+    HttpClientModule,
+    AngularFontAwesomeModule
   ],
   providers: [
     SteamUsersService,