Merge branch 'task/release-v1.8.0-rework-outlet-system' of hardi/opt-cc into release/v1.8.0

api/routes/campaigns.js

@@ -24,6 +24,26 @@ const campaigns = new express.Router();
 
 // routes **********************
 campaigns.route('/')
+         .get((req, res, next) => {
+           CampaignModel.find({}, {}, {
+             sort: {
+               timestamp: 'desc',
+             },
+           }, (err, items) => {
+             if (err) {
+               err.status = codes.servererror;
+               return next(err);
+             }
+             if (items && items.length > 0) {
+               res.locals.items = items;
+             } else {
+               res.locals.items = [];
+             }
+             res.locals.processed = true;
+             next();
+           });
+         })
+
          .post(apiAuthenticationMiddleware, checkMT, (req, res, next) => {
            const campaign = new CampaignModel(req.body);
            // timestamp and default are set automatically by Mongoose Schema Validation

static/src/app/admin/admin.component.css

@@ -1,5 +1,5 @@
 .overview {
-  padding: 80px 0 0 10% !important;
+  padding-bottom: 50px!important;
 }
 
 .trash {

static/src/app/app.component.html

@@ -18,10 +18,10 @@
             <a routerLink='{{config.overviewPath}}' class="link">Armeeübersicht</a>
           </li>
           <li routerLinkActive="active">
-            <a [routerLink]="[config.publicPath,{outlets:{right:'ranks'}}]" class="link">Ränge</a>
+            <a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]" class="link">Ränge</a>
           </li>
           <li routerLinkActive="active">
-            <a [routerLink]="[config.publicPath,{outlets:{right:'decorations'}}]" class="link">Auszeichnungen</a>
+            <a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]" class="link">Auszeichnungen</a>
           </li>
           <li routerLinkActive="active">
             <a routerLink='{{config.statsPath}}' class="link">Statistiken</a>
@@ -105,35 +105,15 @@
 </div>
 
 <div>
-  <!--<button mat-icon-button-->
-          <!--class="sidebar-toggle-btn"-->
-          <!--(click)="toggleSidebar()"-->
-          <!--*ngIf="showSidebarToggleBtn">-->
-    <!--<mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">-->
-    <!--</mat-icon>-->
-    <!--<mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">-->
-    <!--</mat-icon>-->
-  <!--</button>-->
-
-
-  <div id="top">
-    <router-outlet name="top"></router-outlet>
-  </div>
-
-  <div id="left"
-       [style.background]="leftBackground"
-       [style.box-shadow]="leftBoxShadow"
-       *ngIf="sidebarOpen">
   <router-outlet></router-outlet>
+
+  <div id="left">
+    <router-outlet name="left"></router-outlet>
   </div>
 
   <div id="right">
     <router-outlet name="right"></router-outlet>
   </div>
-
-  <div id="footer">
-    <router-outlet name="footer"></router-outlet>
-  </div>
 </div>
 
 <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>

static/src/app/app.component.ts

@@ -22,10 +22,6 @@ export class AppComponent implements OnInit {
 
   loading = false;
 
-  sidebarOpen = true;
-
-  showSidebarToggleBtn = false;
-
   scrollTopVisible = false;
 
   scrollBtnVisibleVal = 100;
@@ -44,7 +40,17 @@ export class AppComponent implements OnInit {
     'stats-detail': 'round-assessment-24px',
     'chevron-left': 'baseline-chevron_left-24px',
     'chevron-right': 'baseline-chevron_right-24px',
-    'arrow-up': 'baseline-arrow_upward-24px'
+    'arrow-up': 'baseline-arrow_upward-24px',
+    // --------STATISTICS---------
+    'award': 'stats/award',
+    'battle': 'stats/battle',
+    'flagTouch': 'stats/flagTouch',
+    'friendlyFire': 'stats/friendlyFire',
+    'highscore': 'stats/highscore',
+    'kill': 'stats/kill',
+    'respawn': 'stats/respawn',
+    'revive': 'stats/respawn',
+    'stats-chart': 'stats/statsChart',
   };
 
   version = 'v'.concat(require('./../../../package.json').version);
@@ -74,10 +80,6 @@ export class AppComponent implements OnInit {
           this.scrollToTop();
         }
 
-        // show sidebar menu on initial page access
-        this.sidebarOpen = true;
-        this.showSidebarToggleBtn = currentUrl.includes('/stats');
-
         // remove sidebar styling for components that are rendered inside,
         // but not really shown as sidebar (legacy)
         if (currentUrl.includes('/login') ||
@@ -111,13 +113,6 @@ export class AppComponent implements OnInit {
       || document.documentElement.scrollTop > this.scrollBtnVisibleVal;
   }
 
-  toggleSidebar() {
-    this.sidebarOpen = !this.sidebarOpen;
-    setTimeout(_ => {
-      window.dispatchEvent(new Event('resize'));
-    });
-  }
-
   ngOnInit() {
     if (this.loginService.hasPermission(2)) {
       const fraction = this.loginService.getCurrentUser().squad.fraction;

static/src/app/army/army-member/army-member.component.ts

@@ -6,15 +6,14 @@ import {Subscription} from 'rxjs/Subscription';
 import {RouteConfig} from '../../app.config';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {Fraction} from '../../utils/fraction.enum';
-import {DOCUMENT, Location} from '@angular/common';
+import {Location} from '@angular/common';
-import {CSSHelpers} from '../../utils/global.helpers';
 
 @Component({
   selector: 'army-member',
   templateUrl: './army-member.component.html',
   styleUrls: ['./army-member.component.css']
 })
-export class ArmyMemberComponent implements OnInit, OnDestroy {
+export class ArmyMemberComponent implements OnInit {
 
   subscription: Subscription;
 
@@ -32,13 +31,10 @@ export class ArmyMemberComponent implements OnInit, OnDestroy {
               private route: ActivatedRoute,
               private userService: UserService,
               private awardingService: AwardingService,
-              private location: Location,
+              private location: Location) {
-              @Inject(DOCUMENT) private document) {
   }
 
   ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
 
     this.subscription = this.route.params
                             .map(params => params['id'])
@@ -53,12 +49,6 @@ export class ArmyMemberComponent implements OnInit, OnDestroy {
                             });
   };
 
-  ngOnDestroy() {
-    if (this.router.url !== '/' + RouteConfig.overviewPath) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
-  }
-
   backToOverview() {
     this.location.back();
   }

static/src/app/army/army.component.ts

@@ -1,11 +1,8 @@
-import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Army} from '../models/model-interfaces';
 import {ArmyService} from '../services/army-service/army.service';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Fraction} from '../utils/fraction.enum';
-import {DOCUMENT} from '@angular/common';
-import {RouteConfig} from '../app.config';
-import {CSSHelpers} from '../utils/global.helpers';
 
 
 @Component({
@@ -13,7 +10,7 @@ import {CSSHelpers} from '../utils/global.helpers';
   templateUrl: './army.component.html',
   styleUrls: ['./army.component.css']
 })
-export class ArmyComponent implements OnInit, OnDestroy {
+export class ArmyComponent implements OnInit {
 
   army: Army[] = [{}, {}];
 
@@ -21,14 +18,10 @@ export class ArmyComponent implements OnInit, OnDestroy {
 
   constructor(private router: Router,
               private route: ActivatedRoute,
-              private armyService: ArmyService,
+              private armyService: ArmyService) {
-              @Inject(DOCUMENT) private document) {
   }
 
   ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
-
     // init army data
     this.armyService.getArmy()
         .subscribe(army => {
@@ -36,14 +29,8 @@ export class ArmyComponent implements OnInit, OnDestroy {
         });
   };
 
-  ngOnDestroy() {
-    if (!this.router.url.includes(RouteConfig.overviewPath)) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
-  }
-
   select(memberId) {
-    this.router.navigate([{outlets: {'right': ['member', memberId]}}], {relativeTo: this.route});
+    this.router.navigate(['member', memberId], {relativeTo: this.route});
   }
 
 }

static/src/app/army/army.routing.ts

@@ -3,18 +3,14 @@ import {ArmyComponent} from './army.component';
 import {ArmyMemberComponent} from './army-member/army-member.component';
 import {ArmySquadComponent} from './army-squad/army-squad.component';
 
-
-
 export const armyRoutes: Routes = [
   {
     path: '',
     component: ArmyComponent,
-    outlet: 'right'
   },
   {
     path: 'member/:id',
     component: ArmyMemberComponent,
-    outlet: 'right'
   }
 ];
 

static/src/app/decorations/decoration.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

static/src/app/decorations/decoration.component.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'cc-decorations',
-  templateUrl: './decoration.component.html',
-  styleUrls: ['./decoration.component.css']
-})
-export class DecorationComponent {
-  constructor() {
-  }
-}

static/src/app/decorations/decoration.routing.ts

@@ -1,18 +1,14 @@
 import {RouterModule, Routes} from '@angular/router';
-import {DecorationComponent} from './decoration.component';
 import {DecorationListComponent} from './decoration-list/decoration-list.component';
 import {EditDecorationComponent} from './edit-decoration/edit-decoration.component';
 import {ModuleWithProviders} from '@angular/core';
 import {DecorationItemComponent} from './decoration-list/decoration-item.component';
 
-export const decorationsRoutes: Routes = [{
+export const decorationsRoutes: Routes = [
-  path: '', component: DecorationComponent,
-  children: [
   {
     path: '',
-      component: DecorationListComponent
+    component: DecorationListComponent,
-    }
+    outlet: 'left'
-  ]
   },
   {
     path: 'new',
@@ -27,6 +23,5 @@ export const decorationsRoutes: Routes = [{
 
 export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
 
-export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent,
+export const decorationsRoutingComponents = [DecorationItemComponent, DecorationListComponent, EditDecorationComponent];
-  EditDecorationComponent];
 

static/src/app/pub/decoration-overview/decoration-overview.component.ts

@@ -1,10 +1,7 @@
-import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
-import {DOCUMENT} from '@angular/common';
 import {Fraction} from '../../utils/fraction.enum';
-import {CSSHelpers} from '../../utils/global.helpers';
-import {RouteConfig} from '../../app.config';
 import {Decoration} from '../../models/model-interfaces';
 import {DecorationService} from '../../services/army-management/decoration.service';
 import {MatBottomSheet} from '@angular/material';
@@ -16,7 +13,7 @@ import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.compone
   templateUrl: './decoration-overview.component.html',
   styleUrls: ['./decoration-overview.component.css']
 })
-export class DecorationOverviewComponent implements OnInit, OnDestroy {
+export class DecorationOverviewComponent implements OnInit {
 
   decorationsBlufor: Decoration[];
 
@@ -31,14 +28,10 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
   constructor(private router: Router,
               private route: ActivatedRoute,
               private decorationService: DecorationService,
-              private bottomSheet: MatBottomSheet,
+              private bottomSheet: MatBottomSheet) {
-              @Inject(DOCUMENT) private document) {
   }
 
   ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
-
     // init decoration data
     this.decorationService.findDecorations()
         .subscribe(decorations => {
@@ -51,10 +44,4 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
   select(decoration: Decoration) {
     this.bottomSheet.open(UserListSheetComponent, {data: {decoration: decoration}});
   }
-
-  ngOnDestroy() {
-    if (!this.router.url.includes(RouteConfig.overviewPath)) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
-  }
 }

static/src/app/pub/public.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

static/src/app/pub/public.component.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'cc-public',
-  templateUrl: './public.component.html',
-  styleUrls: ['./public.component.css']
-})
-export class PublicComponent {
-  constructor() {
-  }
-}

static/src/app/pub/public.routing.ts

@@ -2,26 +2,28 @@ import {RouterModule, Routes} from '@angular/router';
 import {RankOverviewComponent} from './rank-overview/rank-overview.component';
 import {ModuleWithProviders} from '@angular/core';
 import {DecorationOverviewComponent} from './decoration-overview/decoration-overview.component';
-import {PublicComponent} from './public.component';
 import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
 import {RankPanelComponent} from './rank-overview/rank-panel/rank-panel.component';
 import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
 
 export const publicRoutes: Routes = [
+  {
+    path: '',
+    children: [
       {
         path: 'ranks',
         component: RankOverviewComponent,
-    outlet: 'right'
       },
       {
         path: 'decorations',
         component: DecorationOverviewComponent,
-    outlet: 'right'
+      },
+    ]
   },
 ];
 
 export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
 
-export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent,
+export const pubRoutingComponents = [RankOverviewComponent, DecorationOverviewComponent, DecorationPanelComponent,
-  DecorationPanelComponent, RankPanelComponent, UserListSheetComponent];
+  RankPanelComponent, UserListSheetComponent];
 

static/src/app/pub/rank-overview/rank-overview.component.ts

@@ -15,7 +15,7 @@ import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.compone
   templateUrl: './rank-overview.component.html',
   styleUrls: ['./rank-overview.component.css']
 })
-export class RankOverviewComponent implements OnInit, OnDestroy {
+export class RankOverviewComponent implements OnInit {
 
   ranksOpfor: Rank[];
 
@@ -28,14 +28,10 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
   constructor(private router: Router,
               private route: ActivatedRoute,
               private rankService: RankService,
-              private bottomSheet: MatBottomSheet,
+              private bottomSheet: MatBottomSheet) {
-              @Inject(DOCUMENT) private document) {
   }
 
   ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
-
     // init rank data
     this.rankService.findRanks()
         .subscribe(ranks => {
@@ -47,10 +43,4 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
   selectRow(rank: Rank) {
     this.bottomSheet.open(UserListSheetComponent, {data: { rank: rank }});
   }
-
-  ngOnDestroy() {
-    if (!this.router.url.includes(RouteConfig.overviewPath)) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
-  }
 }

static/src/app/ranks/ranks.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

static/src/app/ranks/ranks.component.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'cc-ranks',
-  templateUrl: './ranks.component.html',
-  styleUrls: ['./ranks.component.css']
-})
-export class RankComponent {
-  constructor() {
-  }
-}

static/src/app/ranks/ranks.routing.ts

@@ -1,18 +1,14 @@
 import {RouterModule, Routes} from '@angular/router';
-import {RankComponent} from './ranks.component';
 import {RankListComponent} from './rank-list/rank-list.component';
 import {EditRankComponent} from './edit-rank/edit-rank.component';
 import {RankItemComponent} from './rank-list/rank-item.component';
 import {ModuleWithProviders} from '@angular/core';
 
-export const ranksRoutes: Routes = [{
+export const ranksRoutes: Routes = [
-  path: '', component: RankComponent,
-  children: [
   {
     path: '',
-      component: RankListComponent
+    component: RankListComponent,
-    }
+    outlet: 'left'
-  ]
   },
   {
     path: 'new',
@@ -27,5 +23,5 @@ export const ranksRoutes: Routes = [{
 
 export const rankRouterModule: ModuleWithProviders = RouterModule.forChild(ranksRoutes);
 
-export const ranksRoutingComponents = [RankComponent, RankItemComponent, RankListComponent, EditRankComponent];
+export const ranksRoutingComponents = [RankItemComponent, RankListComponent, EditRankComponent];
 

static/src/app/services/logs/campaign.service.ts

@@ -13,6 +13,11 @@ export class CampaignService {
   }
 
   getAllCampaigns() {
+    return this.http.get(this.config.apiCampaignPath)
+               .map(res => res.json());
+  }
+
+  getAllCampaignsWithWars() {
     return this.http.get(this.config.apiWarPath)
                .map(res => res.json());
   }

static/src/app/squads/squads.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

static/src/app/squads/squads.component.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'cc-users',
-  templateUrl: './squads.component.html',
-  styleUrls: ['./squads.component.css']
-})
-export class SquadComponent {
-  constructor() {
-  }
-}

static/src/app/squads/squads.routing.ts

@@ -1,18 +1,14 @@
 import {RouterModule, Routes} from '@angular/router';
-import {SquadComponent} from './squads.component';
 import {SquadListComponent} from './squad-list/squad-list.component';
 import {EditSquadComponent} from './edit-squad/edit-squad.component';
 import {ModuleWithProviders} from '@angular/core';
 import {SquadItemComponent} from './squad-list/squad-item.component';
 
-export const squadsRoutes: Routes = [{
+export const squadsRoutes: Routes = [
-  path: '', component: SquadComponent,
-  children: [
   {
     path: '',
-      component: SquadListComponent
+    component: SquadListComponent,
-    }
+    outlet: 'left'
-  ]
   },
   {
     path: 'new',
@@ -27,5 +23,5 @@ export const squadsRoutes: Routes = [{
 
 export const squadRouterModule: ModuleWithProviders = RouterModule.forChild(squadsRoutes);
 
-export const squadsRoutingComponents = [SquadComponent, SquadItemComponent, SquadListComponent, EditSquadComponent];
+export const squadsRoutingComponents = [SquadItemComponent, SquadListComponent, EditSquadComponent];
 

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css

@@ -30,14 +30,19 @@
 }
 
 .campaign-entry {
-  width: fit-content;
   border: 1px solid #dadada;
-  min-width: 20%;
+  min-width: 120px;
+  width: 20%;
   padding: 15px;
   text-align: center;
   cursor: pointer;
   font-size: 16px;
   float: left;
+  color: #333333;
+}
+
+.active {
+  background: #e7e7e7;
 }
 
 .campaign-entry:hover {

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html

@@ -6,30 +6,21 @@
 </div>
 
 <div class="campaign-horizontal-list" #horizontalList>
-  <div class="campaign-entry">
+  <div class="campaign-entry"
+       [ngClass]="{active : selectedCampaignId === 'all'}"
+       (click)="select({_id:'all'})">
     Ewige Übersicht
   </div>
-  <div class="campaign-entry">
+  <div class="campaign-entry"
-    Operation Schmelztiegel
+       *ngFor="let campaign of campaigns"
-  </div>
+       [ngClass]="{active : campaign._id === selectedCampaignId}"
-  <div class="campaign-entry">
+       (click)="select(campaign)">
-    Return to Hell in a Bowl
+    {{campaign.title}}
-  </div>
-  <div class="campaign-entry">
-    Operation Schmelztiegel
-  </div>
-  <div class="campaign-entry">
-    Return to Hell in a Bowl
-  </div>
-  <div class="campaign-entry">
-    Operation Schmelztiegel
-  </div>
-  <div class="campaign-entry">
-    Return to Hell in a Bowl
   </div>
 </div>
 
 <div class="scroll-btn scroll-btn-right"
+     *ngIf="isRightScrollVisible"
      (mouseenter)="setRepeater(10)"
      (mouseleave)="clearRepeater()">
   <mat-icon svgIcon="chevron-right"></mat-icon>

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts

@@ -1,25 +1,53 @@
-import {Component, ElementRef, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Campaign} from '../../../models/model-interfaces';
 
 @Component({
   selector: 'campaign-navigation',
   templateUrl: './campaign-navigation.component.html',
   styleUrls: ['./campaign-navigation.component.css']
 })
-export class CampaignNavigationComponent {
+export class CampaignNavigationComponent implements OnInit {
+
+  @Input() campaigns: Campaign[];
+
+  @Input() selectedCampaignId;
+
+  @Output() campaignSelect = new EventEmitter();
 
   @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
 
   isLeftScrollVisible = false;
 
+  isRightScrollVisible = true;
+
   repeater;
 
-  constructor() {
+  ngOnInit() {
+    this.isRightScrollVisible = this.campaigns.length > 4;
+  }
+
+  select(campaign) {
+    this.selectedCampaignId = campaign._id;
+    this.campaignSelect.emit(campaign);
   }
 
   public scrollList(scrollValue: number): void {
+    const prevScrollLeftValue = this.panel.nativeElement.scrollLeft;
+
     this.panel.nativeElement.scrollLeft += scrollValue;
-    if (this.panel.nativeElement.scrollLeft > 0) {
+
-      this.isLeftScrollVisible = true
+    const updatedScrollLeftValue = this.panel.nativeElement.scrollLeft;
+
+    if (scrollValue < 0) {
+      this.isRightScrollVisible = true;
+    }
+
+    if (updatedScrollLeftValue > 0) {
+      if (prevScrollLeftValue === updatedScrollLeftValue) {
+        this.isRightScrollVisible = false;
+        this.clearRepeater();
+      }
+      this.isLeftScrollVisible = true;
     } else {
       this.isLeftScrollVisible = false;
       this.clearRepeater();

static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.html

@@ -1,9 +1,9 @@
 <div class="fade-in player-campaign-detail-container" xmlns="http://www.w3.org/1999/html">
   <h2 class="pull-left">Kampagnendetails - {{campaignPlayer.name}}</h2>
-  <h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>
 
   <button class="btn-back" mat-raised-button (click)="navigateBack()">
-    <mat-icon svgIcon="chevron-left"></mat-icon>Zurück
+    <mat-icon svgIcon="chevron-left"></mat-icon>
+    Zurück
   </button>
 
   <div class="sum-container">

static/src/app/statistic/campaign/highscore/highscore.component.css

@@ -7,8 +7,8 @@ h2 {
 }
 
 .search-field {
-  width: 30%;
+  width: 40%;
-  margin: 20px 0 0 10%;
+  margin: 32px 0 0 8%;
 }
 
 .highscore-table-container {

static/src/app/statistic/campaign/highscore/highscore.component.html

@@ -1,6 +1,4 @@
 <div class="highscore-container fade-in">
-  <h2>{{title}} ⟶ Highscore</h2>
-
   <div class="input-group search-field">
     <input id="search-tasks"
            markForCheck

static/src/app/statistic/campaign/highscore/highscore.component.ts

@@ -45,7 +45,8 @@ export class StatisticHighScoreComponent implements OnInit {
           if (this.campaignService.campaigns) {
             this.initData();
           } else {
-            this.campaignService.getAllCampaigns().subscribe(campaigns => {
+            this.campaignService.getAllCampaignsWithWars().subscribe(campaigns => {
+              this.campaignService.campaigns = campaigns;
               this.initData();
             });
           }

static/src/app/statistic/campaign/overview/stats-overview.component.html

@@ -1,6 +1,4 @@
-<div class="slide-chart-container" style="height: 150px;">
+<div class="slide-chart-container" style="height: 100px;padding-top: 20px; margin-top: 10px;">
-  <h2 style="margin-bottom: 20px">{{title}}</h2>
-
   <div class="btn btn-default" [style.background]="isActiveSlide(0)"
        (click)="goToSlide(0)" *ngIf="id != 'all'">Gesamtpunktzahl
   </div>

static/src/app/statistic/campaign/overview/stats-overview.component.ts

@@ -50,7 +50,7 @@ export class StatisticOverviewComponent implements OnInit {
           if (this.campaignService.campaigns) {
             this.initWars(this.campaignService.campaigns);
           } else {
-            this.campaignService.getAllCampaigns().subscribe(campaigns => {
+            this.campaignService.getAllCampaignsWithWars().subscribe(campaigns => {
               this.initWars(campaigns);
             });
           }

static/src/app/statistic/stats.component.css

@@ -0,0 +1,21 @@
+.side-bar {
+  width: 20%;
+  float: left;
+}
+
+.collapsed {
+  width: 70px;
+}
+
+.button-container {
+  position: relative;
+  z-index: 100;
+}
+
+.button-container > button {
+  position: fixed;
+  top: calc(100vh - 35px);
+  left: -10px;
+  background: white;
+  border: 1px solid #dadada;
+}

static/src/app/statistic/stats.component.html

@@ -1 +1,26 @@
+<campaign-navigation
+  [campaigns]="campaigns"
+  [selectedCampaignId]="selectedCampaign._id"
+  (campaignSelect)="switchCampaign($event)">
+</campaign-navigation>
+
+<div *ngIf="selectedCampaign._id !== 'all'"
+     class="side-bar"
+     [ngClass]="{collapsed: collapsed}">
+  <war-list
+    [collapsed]="collapsed"
+    [campaign]="selectedCampaign">
+  </war-list>
+  <div class="button-container">
+    <button mat-icon-button
+            class="sidebar-toggle-btn"
+            (click)="toggleCollapse()">
+      <mat-icon svgIcon="chevron-left" *ngIf="!collapsed">
+      </mat-icon>
+      <mat-icon svgIcon="chevron-right" *ngIf="collapsed">
+      </mat-icon>
+    </button>
+  </div>
+</div>
+
 <router-outlet></router-outlet>

static/src/app/statistic/stats.component.ts

@@ -1,11 +1,66 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Campaign} from '../models/model-interfaces';
+import {CampaignService} from '../services/logs/campaign.service';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'cc-stats',
   templateUrl: './stats.component.html',
   styleUrls: ['./stats.component.css']
 })
-export class StatisticComponent {
+export class StatisticComponent implements OnInit {
-  constructor() {
+
+  selectedCampaign: Campaign = {};
+
+  campaigns: Campaign[] = [];
+
+  collapsed = false;
+
+  constructor(private campaignService: CampaignService,
+              private router: Router,
+              private route: ActivatedRoute) {
   }
+
+  ngOnInit() {
+    this.campaignService.getAllCampaignsWithWars().subscribe((campaigns) => {
+      this.campaigns = campaigns;
+      this.campaignService.campaigns = campaigns;
+      this.switchCampaign(campaigns[0])
+    });
+  }
+
+  switchCampaign(campaign) {
+    this.selectedCampaign = campaign;
+    if (campaign._id === 'all' || this.router.url.includes('/overview/all')) {
+      setTimeout(_ => {
+        window.dispatchEvent(new Event('resize'));
+      });
+    }
+    this.router.navigate([{outlets: {'right': ['overview', campaign._id]}}], {relativeTo: this.route});
+  }
+
+  toggleCollapse() {
+    this.collapsed = !this.collapsed;
+    setTimeout(_ => {
+      window.dispatchEvent(new Event('resize'));
+    });
+  }
+
+
+  // TODO: REACTIVATE
+  // deleteCampaign(campaign) {
+  //   if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) {
+  //     this.campaignService.deleteCampaign(campaign._id)
+  //         .subscribe((res) => {
+  //           if (this.selectedWarId === campaign._id) {
+  //             this.selectOverview('all');
+  //           }
+  //           this.campaigns.splice(this.campaigns.indexOf(campaign), 1);
+  //         });
+  //   }
+  // }
+  //
+  // editCampaign(selectCampaign) {
+  //   this.router.navigate([{outlets: {'right': ['campaign', selectCampaign._id]}}], {relativeTo: this.route});
+  // }
 }

static/src/app/statistic/stats.module.ts

@@ -7,13 +7,13 @@ import {NgxChartsModule} from '@swimlane/ngx-charts';
 import {CampaignService} from '../services/logs/campaign.service';
 import {PlayerService} from '../services/logs/player.service';
 import {LogsService} from '../services/logs/logs.service';
-import {MatButtonModule, MatButtonToggleModule, MatExpansionModule, MatTableModule, MatSortModule} from '@angular/material';
+import {MatButtonToggleModule, MatSortModule, MatTableModule} from '@angular/material';
 
 
 @NgModule({
   declarations: statsRoutingComponents,
-  imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, MatButtonModule, MatExpansionModule,
+  imports: [CommonModule, SharedModule, NgxChartsModule, MatButtonToggleModule, MatTableModule, MatSortModule,
-    MatButtonToggleModule, MatTableModule, MatSortModule],
+    statsRouterModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

static/src/app/statistic/stats.routing.ts

@@ -16,19 +16,10 @@ import {LoginGuardMT} from '../login';
 import {CampaignNavigationComponent} from './campaign/campaign-navigation/campaign-navigation.component';
 
 
-export const statsRoutes: Routes = [{
+export const statsRoutes: Routes = [
-  path: '', component: StatisticComponent,
-  children: [
   {
     path: '',
-      component: WarListComponent
+    component: StatisticComponent,
-    }
-  ]
-},
-  {
-    path: 'top',
-    component: CampaignNavigationComponent,
-    outlet: 'top'
   },
   {
     path: 'overview/:id',

static/src/app/statistic/war/scoreboard/scoreboard.component.css

@@ -36,6 +36,7 @@ table.mat-table img {
 .mat-column-name {
   width: 200px;
 }
+
 .mat-column-fraction {
   width: 90px;
 }

static/src/app/statistic/war/scoreboard/scoreboard.component.ts

@@ -3,7 +3,7 @@ import {War} from '../../../models/model-interfaces';
 import {Fraction} from '../../../utils/fraction.enum';
 import {PlayerUtils} from '../../../utils/player-utils';
 import {saveAs} from 'file-saver/FileSaver';
-import {MatSort, Sort} from '@angular/material';
+import {MatSort} from '@angular/material';
 import {SortUtils} from '../../../utils/sort-utils';
 
 @Component({

static/src/app/statistic/war/war-header/war-header.component.css

@@ -1,6 +1,7 @@
 .war-header-container {
   width: 920px;
-  min-height: 168px;
+  min-height: 165px;
+  padding-top: 12px;
   margin: auto;
 }
 

static/src/app/statistic/war/war-header/war-header.component.html

@@ -1,6 +1,5 @@
 <div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
   <div class="war-header-container">
-    <h3>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h3>
     <div class="pull-left head-field" style="width: 250px">
       <h4>Endpunktestand:</h4>
       <span [style.color]="fraction.COLOR_BLUFOR" style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>

static/src/app/statistic/war/war-list/war-item.component.css

@@ -0,0 +1,46 @@
+.war-item {
+  cursor: pointer;
+  border-right: 1px solid #dadada;
+}
+
+.war-item-box {
+  padding-top: 15px;
+}
+
+.war-title {
+  font-size: 16px;
+  color: #333333;
+}
+
+.war-detail {
+  font-size: 12px;
+  text-indent: 20px;
+  color: #666666;
+}
+
+.select-indicator-battle {
+  display: none;
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  left: calc(100% - 14px);
+  background: -moz-linear-gradient(45deg, white 50%, transparent 50%);
+  background: -webkit-linear-gradient(45deg, white 50%, transparent 50%);
+  background: linear-gradient(45deg, white 50%, transparent 50%);
+  cursor: default;
+  border-left: 1px solid #dadada;
+  border-bottom: 1px solid #dadada;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.selected div.select-indicator-battle {
+  display: block !important;
+}
+
+.collapsed {
+  white-space: nowrap;
+}

static/src/app/statistic/war/war-list/war-item.component.html

@@ -1,12 +1,17 @@
-<div class="fade-in list-entry" [ngClass]="{selected : selected}" (click)="select()">
+<div class='war-item' [ngClass]="{selected : selected}" (click)="select()">
-
+  <div class="war-item-box"
-  <div class="row">
+       [matTooltip]="collapsed ? war.title : ''"
-    <div [ngClass]="[loginService.hasPermission(3) ? 'col-xs-10' : 'col-xs-11']">
+       matTooltipPosition="right">
-      <span>
+    <div style="position:relative; z-index:10;">
-        <a>{{war.title}}</a>
+      <div class="select-indicator-battle"></div>
+    </div>
+    <span class="war-title"
+          [ngClass]="{collapsed: collapsed}">
+        ◦ {{war.title}}
       </span>
-      <br>
+    <div class="war-detail"
-      <small>vom {{war.date | date: 'dd.MM.yyyy'}}</small>
+         [ngClass]="{collapsed: collapsed}">vom {{war.date | date: 'dd.MM.yyyy'}}
+    </div>
   </div>
 
   <div *ngIf="loginService.hasPermission(3)"
@@ -25,4 +30,3 @@
     </button>
   </div>
 </div>
-</div>

static/src/app/statistic/war/war-list/war-item.component.ts

@@ -5,11 +5,13 @@ import {LoginService} from '../../../services/app-user-service/login-service';
 @Component({
   selector: 'cc-war-item',
   templateUrl: './war-item.component.html',
-  styleUrls: ['./war-item.component.css', '../../../style/list-entry.css'],
+  styleUrls: ['./war-item.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class WarItemComponent implements OnInit {
 
+  @Input() collapsed: boolean;
+
   @Input() selected: boolean;
 
   @Input() war: War;

static/src/app/statistic/war/war-list/war-list.component.css

@@ -1,71 +1,63 @@
-.select-list {
+.list-header {
-  min-height: calc(100vh - 50px);
+  border-bottom: 1px solid #dadada;
+  border-right: 1px solid #dadada;
+  padding: 25px;
+  font-size: 16px;
+  text-transform: uppercase;
+  color: #333333;
+  cursor: pointer;
+}
+
+.mat-icon {
+  color: #666666;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+.select-indicator-container {
+  display: none;
+  position: relative;
+  z-index: 10;
+}
+
+.select-indicator {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  left: calc(100% + 11px);
+  background: -moz-linear-gradient(45deg, white 50%, transparent 50%);
+  background: -webkit-linear-gradient(45deg, white 50%, transparent 50%);
+  background: linear-gradient(45deg, white 50%, transparent 50%);
+  cursor: default;
+  border-left: 1px solid #dadada;
+  border-bottom: 1px solid #dadada;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.battle-list {
+  max-height: calc(100vh - 353px);
+  padding-left: 5px;
+  margin-left: 10%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  direction: rtl;
+}
+
+.battle-list * {
+  direction: ltr;
+}
+
+.selected > div.select-indicator-container {
+  display: block !important;
 }
 
 .war-list-header {
   margin: auto;
-}
+  border-right: 1px solid #dadada;
-
-span > a {
-  font-weight: 600 !important;
-}
-
-mat-expansion-panel {
-  border: 1px solid #7d7d7d;
-}
-
-mat-panel-title {
-  font-size: 18px;
-  color: #ffffff;
-}
-
-mat-expansion-panel-header {
-  height: auto;
-  padding: 30px 15px;
-  background-color: #4e4e4e;
-}
-
-mat-expansion-panel-header.mat-expansion-panel-header:hover {
-  background: #222222 !important;
-}
-
-mat-expansion-panel-header.mat-expansion-panel-header:focus {
-  background-color: #4e4e4e;
-}
-
-.select-list > div:last-child {
-  margin: 20px 0;
-}
-
-.top-list-entry {
-  display: flex;
-  margin: 0 0 6px 0;
-}
-
-.top-list-entry > div {
-  width: 50%;
-  float: left;
-}
-
-.war-interaction-panel {
-  display: contents;
-}
-
-.war-interaction-panel > span {
-  color: rgba(255, 255, 255, 0.64);
-  padding: 0 3px;
-}
-
-:host /deep/ .mat-expansion-indicator::after {
-  color: rgba(255, 255, 255, 0.64);
-}
-
-.select-list > mat-accordion:first-child .mat-expansion-panel {
-  border-radius: 6px 6px 0 0;
-}
-
-.select-list > mat-accordion:first-child .mat-expansion-panel-header {
-  border-radius: 4px 4px 0 0;
 }
 
 .stats-add-btn {
@@ -75,3 +67,30 @@ mat-expansion-panel-header.mat-expansion-panel-header:focus {
   margin: 0 10px 10px 10px;
   width: 95%;
 }
+
+.fill-vertical-border {
+  width: 20%;
+  position: fixed;
+  border-right: 1px solid #dadada;
+  height: 100vh;
+}
+
+/* Table Scrollbar BEGIN */
+
+.battle-list::-webkit-scrollbar {
+  width: 12px;
+}
+
+.battle-list::-webkit-scrollbar-track {
+  border-left: 1px solid #f1f1f1;
+}
+
+.battle-list::-webkit-scrollbar-thumb {
+  background: rgb(234, 234, 234);
+}
+
+/* Table Scrollbar END */
+
+.collapsed {
+  width: 70px;
+}

static/src/app/statistic/war/war-list/war-list.component.html

@@ -1,4 +1,3 @@
-<div class="select-list">
 <div class="input-group war-list-header" *ngIf="loginService.hasPermission(3)">
   <button mat-stroked-button class="stats-add-btn" (click)="selectNewWar()">
     Schlacht hinzufügen
@@ -8,67 +7,49 @@
   </button>
 </div>
 
-  <mat-accordion *ngFor="let campaign of campaigns; let isFirstRow=first">
+
-    <mat-expansion-panel [expanded]="isFirstRow">
+<div class="list-header"
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          {{campaign.title}}
-        </mat-panel-title>
-        <mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
-          <button mat-icon-button
-                  class="add-btn"
-                  matTooltip="Bearbeiten"
-                  (click)="editCampaign(campaign); $event.stopPropagation()">
-            <mat-icon svgIcon="edit"></mat-icon>
-          </button>
-          <button mat-icon-button
-                  class="add-btn"
-                  matTooltip="Löschen"
-                  (click)="deleteCampaign(campaign); $event.stopPropagation()">
-            <mat-icon svgIcon="delete"></mat-icon>
-          </button>
-        </mat-panel-description>
-      </mat-expansion-panel-header>
-      <div class="top-list-entry">
-        <div class="fade-in list-entry"
      [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
-          <div>
+  <div class="select-indicator-container">
-            <span>
+    <div class="select-indicator"></div>
-              <a>Übersicht</a>
-            </span>
   </div>
+  <mat-icon [matTooltip]="collapsed ? 'Übersicht' : ''"
+            matTooltipPosition="right"
+            svgIcon="stats-chart"></mat-icon>
+  <span *ngIf="!collapsed">Übersicht</span>
 </div>
-        <div class="fade-in list-entry"
+
+<div class="list-header"
      [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
-          <div>
+  <div class="select-indicator-container">
-            <span>
+    <div class="select-indicator"></div>
-              <a>Highscore</a>
-            </span>
   </div>
+  <mat-icon [matTooltip]="collapsed ? 'Highscore' : ''"
+            matTooltipPosition="right"
+            svgIcon="highscore"></mat-icon>
+  <span *ngIf="!collapsed">Highscore</span>
 </div>
+
+<div class="list-header" style="cursor: default; border-bottom: 1px solid #f1f1f1;">
+  <mat-icon [matTooltip]="collapsed ? 'Schlachten' : ''"
+            matTooltipPosition="right"
+            svgIcon="battle"></mat-icon>
+  <span *ngIf="!collapsed">Schlachten</span>
 </div>
+
+<div class="battle-list">
   <div *ngFor="let war of campaign.wars">
     <cc-war-item
       [war]="war"
       (warEdit)="editWar($event)"
       (warDelete)="deleteWar(war)"
       (warSelected)="selectWar($event)"
+      [collapsed]="collapsed"
       [selected]="war._id == selectedWarId">
     </cc-war-item>
   </div>
-    </mat-expansion-panel>
-  </mat-accordion>
-
-  <div class="fade-in list-entry"
-       style="background: white"
-       [ngClass]="{selected : selectedWarId == 'all'}" (click)="selectOverview('all')">
-    <div class="row">
-      <div class="col-xs-9">
-      <span>
-        <a>Gesamtübersicht</a>
-      </span>
-      </div>
-    </div>
 </div>
 
+<div class="fill-vertical-border"
+     [ngClass]="{collapsed: collapsed}">
 </div>

static/src/app/statistic/war/war-list/war-list.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Campaign, War} from '../../../models/model-interfaces';
 import {WarService} from '../../../services/logs/war.service';
@@ -9,14 +9,16 @@ import {RouteConfig} from '../../../app.config';
 @Component({
   selector: 'war-list',
   templateUrl: './war-list.component.html',
-  styleUrls: ['./war-list.component.css', '../../../style/list-entry.css', '../../../style/select-list.css']
+  styleUrls: ['./war-list.component.css']
 })
-export class WarListComponent implements OnInit {
+export class WarListComponent implements OnInit, OnChanges {
+
+  @Input() campaign: Campaign;
+
+  @Input() collapsed: boolean;
 
   selectedWarId: string | number;
 
-  campaigns: Campaign[] = [];
-
   public readonly highscore = 'HIGHSCORE';
 
   constructor(private warService: WarService,
@@ -26,22 +28,24 @@ export class WarListComponent implements OnInit {
               private route: ActivatedRoute) {
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.campaign) {
+      this.selectedWarId = this.campaign._id;
+    }
+  }
+
   ngOnInit() {
-    this.campaignService.getAllCampaigns().subscribe((items) => {
+    const url = this.router.url;
     const subPathWar = 'war/';
     const subPathOverview = 'overview/';
-      this.campaignService.campaigns = items;
-      this.campaigns = items;
 
-      const url = this.router.url;
     if (url.endsWith(RouteConfig.statsPath)) {
-        this.selectOverview(this.campaigns[0]._id);
+      this.selectOverview(this.campaign._id);
     } else if (url.indexOf(subPathWar) !== -1) {
       this.selectedWarId = url.substring(url.lastIndexOf(subPathWar) + subPathWar.length, url.lastIndexOf(')'));
     } else if (url.indexOf(subPathOverview) !== -1) {
       this.selectedWarId = url.substring(url.lastIndexOf(subPathOverview) + subPathOverview.length, url.lastIndexOf(')'));
     }
-    });
   }
 
   selectNewCampaign() {
@@ -59,6 +63,9 @@ export class WarListComponent implements OnInit {
   selectOverview(campaignId) {
     if (this.selectedWarId !== campaignId) {
       this.selectedWarId = campaignId;
+      setTimeout(_ => {
+        window.dispatchEvent(new Event('resize'));
+      });
       this.router.navigate([{outlets: {'right': ['overview', campaignId]}}], {relativeTo: this.route});
     }
   }
@@ -87,26 +94,8 @@ export class WarListComponent implements OnInit {
             if (this.selectedWarId === war._id) {
               this.selectOverview('all');
             }
-            this.campaigns.forEach(campaign => {
+            this.campaign.wars.splice(this.campaign.wars.indexOf(war), 1);
-              campaign.wars.splice(campaign.wars.indexOf(war), 1);
-            });
           });
     }
   }
-
-  deleteCampaign(campaign) {
-    if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) {
-      this.campaignService.deleteCampaign(campaign._id)
-          .subscribe((res) => {
-            if (this.selectedWarId === campaign._id) {
-              this.selectOverview('all');
-            }
-            this.campaigns.splice(this.campaigns.indexOf(campaign), 1);
-          });
-    }
-  }
-
-  editCampaign(selectCampaign) {
-    this.router.navigate([{outlets: {'right': ['campaign', selectCampaign._id]}}], {relativeTo: this.route});
-  }
 }

static/src/app/style/entry-form.css

@@ -1,7 +1,6 @@
 .overview {
   overflow: hidden !important;
-  padding-top: 80px !important;
+  width: 30vw;
-  width: 20%;
   min-width: 380px;
 }
 

static/src/app/style/overview.css

@@ -4,6 +4,7 @@
   overflow-x: hidden;
   border-left: thin solid lightgrey;
   padding: 20px 0 0 50px;
+  top: 50px;
   height: 100vh;
   bottom: 10px;
 }

static/src/app/users/award-user/award-user.component.css

@@ -25,7 +25,7 @@
 }
 
 h3 {
-  margin: 80px 0 20px -20px;
+  margin-left: -20px;
 }
 
 label {

static/src/app/users/users.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

static/src/app/users/users.component.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'cc-users',
-  templateUrl: 'users.component.html',
-  styleUrls: ['users.component.css']
-})
-export class UsersComponent {
-  constructor() {
-  }
-}

static/src/app/users/users.routing.ts

@@ -1,19 +1,15 @@
 import {RouterModule, Routes} from '@angular/router';
-import {UsersComponent} from './users.component';
 import {EditUserComponent} from './edit-user/edit-user.component';
 import {UserListComponent} from './user-list/user-list.component';
 import {AwardUserComponent} from './award-user/award-user.component';
 import {ModuleWithProviders} from '@angular/core';
 import {UserItemComponent} from './user-list/user-item.component';
 
-export const usersRoutes: Routes = [{
+export const usersRoutes: Routes = [
-  path: '', component: UsersComponent,
-  children: [
   {
     path: '',
-      component: UserListComponent
+    component: UserListComponent,
-    }
+    outlet: 'left'
-  ]
   },
   {
     path: 'new',
@@ -34,5 +30,4 @@ export const usersRoutes: Routes = [{
 
 export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes);
 
-export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent,
+export const usersRoutingComponents = [UserItemComponent, UserListComponent, EditUserComponent, AwardUserComponent];
-  AwardUserComponent];

static/src/assets/icon/stats/award.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 77 100" style="enable-background:new 0 0 77 100;" xml:space="preserve">
+<g>
+	<path d="M74.4,0H2.8C1.3,0,0,1.2,0,2.7v75c0,1,0.6,1.9,1.5,2.4l35.8,19.6c0.4,0.2,0.9,0.3,1.3,0.3c0.4,0,0.9-0.1,1.3-0.3l35.8-19.6
+		c0.9-0.5,1.3-1.4,1.3-2.4v-75C77,1.2,75.9,0,74.4,0z M71.6,76.1L38.5,94.2L5.4,76.1V5.4h66.3V76.1z"/>
+	<polygon points="60.9,70.3 60.9,57.7 38.5,69.5 16.1,57.7 16.1,70.3 38.5,82.5 	"/>
+	<polygon points="60.9,51.6 60.9,39 38.5,50.7 16.1,39 16.1,51.6 38.5,63.8 	"/>
+	<polygon points="29.8,38.9 38.8,32.4 47.8,38.9 44.3,28.4 53.3,21.9 42.2,21.9 38.8,11.3 35.4,21.9 24.2,21.9 33.2,28.4 	"/>
+</g>
+</svg>

static/src/assets/icon/stats/battle.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<g>
+	<path d="M31.5,20.5c6.6-5.6,12.3-12.3,16.8-19.9c0.1-0.2,0.1-0.4-0.1-0.5c-0.1-0.1-0.3-0.1-0.5,0c-1.6,1.2-4,3-6.5,4.2
+		c-3.2,1.6-6.6,2.3-8.3,2.5c-0.7,0.1-1.4,0.5-1.8,1.2c-0.9,1.3-2.5,3.9-4.6,6.7c1,1.3,2,2.6,3.2,3.8C30.3,19.2,30.9,19.8,31.5,20.5
+		L31.5,20.5z"/>
+	<path d="M18.8,23.9c-2.8,3.1-4.8,5.2-6,6.4l-0.5-0.5c-0.6-0.7-1.7-0.7-2.3,0c-0.6,0.7-0.6,1.7,0,2.4l0.2,0.2
+		c-0.6-0.1-1.2,0.1-1.6,0.6c-0.5,0.5-0.7,1.3-0.5,2c-0.7-0.2-1.4,0-1.9,0.5c-0.5,0.5-0.7,1.3-0.5,2c-0.7-0.2-1.4,0-1.9,0.5
+		c-0.5,0.5-0.7,1.2-0.6,1.8l-0.3-0.3c-0.6-0.7-1.7-0.7-2.3,0c-0.6,0.7-0.6,1.7,0,2.4L7.3,49c0.3,0.3,0.6,0.4,1,0.5l3.8,0.4
+		c0.1,0,0.1,0,0.2,0c0.8,0,1.5-0.6,1.6-1.5c0.1-0.9-0.5-1.8-1.4-1.9l-3.2-0.4l-2.3-2.4c0.1,0,0.2,0,0.4,0c0.5,0,1-0.2,1.4-0.6
+		c0.5-0.5,0.7-1.3,0.5-2c0.2,0,0.3,0.1,0.5,0.1c0.5,0,1-0.2,1.4-0.6c0.5-0.5,0.7-1.3,0.5-2c0.2,0,0.3,0.1,0.5,0.1
+		c0.5,0,1-0.2,1.4-0.6c0.4-0.5,0.6-1.1,0.6-1.7l0.5,0.5l0.4,3.3c0.1,0.9,0.8,1.5,1.6,1.5c0.1,0,0.1,0,0.2,0c0.9-0.1,1.5-0.9,1.4-1.9
+		L17.9,36c0-0.4-0.2-0.7-0.5-1l-1-1l6.7-6.9C21.6,26.1,20.2,25,18.8,23.9L18.8,23.9z"/>
+	<path d="M49.5,39.6c-0.6-0.7-1.7-0.7-2.3,0l-0.3,0.3c0.1-0.7-0.1-1.3-0.6-1.8c-0.5-0.5-1.3-0.7-1.9-0.5c0.2-0.7,0-1.5-0.5-2
+		c-0.5-0.5-1.3-0.7-1.9-0.5c0.2-0.7,0-1.5-0.5-2c-0.2-0.2-0.4-0.3-0.6-0.4c-0.3-0.1-0.7-0.2-1-0.2l0.2-0.2c0.6-0.7,0.6-1.7,0-2.4
+		c-0.6-0.7-1.7-0.7-2.3,0l-0.5,0.5c-1.6-1.6-4.7-4.9-9.3-10c-4.2-4.7-7.7-10.1-9.1-12.2c-0.4-0.6-1.1-1.1-1.8-1.2
+		c-1.7-0.2-5.1-0.9-8.3-2.5C6.2,3,3.8,1.2,2.2,0C2.2,0,2.1,0,2,0C1.9,0,1.8,0,1.8,0.1C1.6,0.2,1.6,0.4,1.7,0.6
+		c5.9,10,13.9,18.5,23.4,24.8l0.4,0.3l8,8.3l-1,1c-0.3,0.3-0.4,0.6-0.5,1l0,0.1l-0.4,3.8c-0.1,0.9,0.5,1.8,1.4,1.9
+		c0.1,0,0.1,0,0.2,0c0.8,0,1.5-0.6,1.6-1.5l0.2-2l0.8-0.8c0.1,0.2,0.2,0.5,0.4,0.7c0.4,0.4,0.9,0.6,1.4,0.6c0.2,0,0.3,0,0.5-0.1
+		c-0.2,0.7,0,1.5,0.5,2c0.4,0.4,0.9,0.6,1.4,0.6c0.2,0,0.3,0,0.5-0.1c-0.2,0.7,0,1.5,0.5,2c0.4,0.4,0.9,0.6,1.4,0.6
+		c0.1,0,0.2,0,0.4,0l-2.3,2.4l-3.2,0.4c-0.9,0.1-1.5,0.9-1.4,1.9c0.1,0.9,0.8,1.5,1.6,1.5c0.1,0,0.1,0,0.2,0l3.8-0.4
+		c0.4,0,0.7-0.2,1-0.5l6.9-7.1C50.2,41.3,50.2,40.2,49.5,39.6L49.5,39.6z"/>
+</g>
+</svg>

static/src/assets/icon/stats/flagTouch.svg

@@ -0,0 +1,196 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 83.8 100" style="enable-background:new 0 0 83.8 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;}
+	.st2{display:inline;fill:#010002;}
+	.st3{stroke:#FFFFFF;stroke-width:9;stroke-miterlimit:10;}
+	.st4{display:inline;fill:#222222;}
+	.st5{fill:#FFFFFF;}
+	.st6{display:inline;fill:#FCFCFC;}
+</style>
+<g id="Capa_1" class="st0">
+	<polygon class="st1" points="187.9,27.1 145.9,27.1 -161.1,27.1 -161.1,65.1 145.9,65.1 187.9,65.1 255.9,65.1 255.9,27.1 	"/>
+	<polygon class="st1" points="27.6,-89.4 27.6,-47.4 27.6,259.6 65.6,259.6 65.6,-47.4 65.6,-89.4 65.6,-157.4 27.6,-157.4 	"/>
+	<path class="st2" d="M46.6-162.4c-115.2,0-208.5,93.3-208.5,208.5s93.3,208.5,208.5,208.5s208.5-93.3,208.5-208.5
+		S161.7-162.4,46.6-162.4z M46.6,216.1c-93.9,0-170-76.1-170-170s76.1-170,170-170s170,76.1,170,170S140.4,216.1,46.6,216.1z"/>
+	<rect x="9.7" y="-193.9" class="st2" width="73.7" height="60.3"/>
+	<rect x="9.7" y="234.6" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="-204" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -213.2508 -121.1083)" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="224.4" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 215.2142 307.3567)" class="st2" width="73.7" height="60.3"/>
+</g>
+<g id="Capa_3" class="st0">
+	<rect x="310.9" y="-192.9" style="display:inline;fill:none;" width="82.5" height="96.1"/>
+	<text transform="matrix(1 0 0 1.7 310.882 -169.3731)" class="st1" style="font-family:'CharlieBrownM54'; font-size:36px;">F</text>
+	<rect x="427.9" y="-157.4" style="display:inline;fill:none;" width="82.5" height="96.1"/>
+	<text transform="matrix(1 0 0 1 427.882 -121.3575)" class="st1" style="font-family:'Copy0865'; font-size:36px;">F</text>
+	<g class="st1">
+		<g>
+			<path d="M81.7,122.4H57.9V8.4c0-9.3,2.2-16.7,6.5-22.3c4.2-5.5,9.6-8.2,16-8.2h68.6v32.7H81.7v16.8h59.7v31H81.7V122.4z"/>
+		</g>
+		<g>
+			<path d="M-18.4,122.4h-23.9V8.4c0-9.3,2.2-16.7,6.5-22.3c4.2-5.5,9.6-8.2,16-8.2h68.6v32.7h-67.2v16.8h59.7v31h-59.7V122.4z"/>
+		</g>
+	</g>
+	<polygon class="st1" points="-85.4,27.1 -95.5,27.1 -169.1,27.1 -169.1,65.1 -95.5,65.1 -85.4,65.1 -69.1,65.1 -69.1,27.1 	"/>
+	<polygon class="st1" points="247.6,27.1 237.5,27.1 163.9,27.1 163.9,65.1 237.5,65.1 247.6,65.1 263.9,65.1 263.9,27.1 	"/>
+	<polygon class="st1" points="26.9,166.4 26.9,176.5 26.9,250.1 64.9,250.1 64.9,176.5 64.9,166.4 64.9,150.1 26.9,150.1 	"/>
+	<polygon class="st1" points="26.9,-141.6 26.9,-131.6 26.9,-57.9 64.9,-57.9 64.9,-131.6 64.9,-141.6 64.9,-157.9 26.9,-157.9 	"/>
+	<path class="st2" d="M46.6-162.4c-115.2,0-208.5,93.3-208.5,208.5s93.3,208.5,208.5,208.5s208.5-93.3,208.5-208.5
+		S161.7-162.4,46.6-162.4z M46.6,216.1c-93.9,0-170-76.1-170-170s76.1-170,170-170s170,76.1,170,170S140.4,216.1,46.6,216.1z"/>
+	<rect x="9.7" y="-193.9" class="st2" width="73.7" height="60.3"/>
+	<rect x="9.7" y="234.6" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="-204" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -213.2508 -121.1083)" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="224.4" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 215.2142 307.3567)" class="st2" width="73.7" height="60.3"/>
+</g>
+<g id="Capa_2" class="st0">
+	<g class="st1">
+		<g>
+			<path class="st3" d="M252.9,55.9c-1.2,8.4-1.2,16.8-2.5,25.2c-5.2,32.8-17.4,62.6-37.7,88.9c-29.5,38.3-67.8,63-114.9,73.8
+				c-19.9,4.5-40,5.4-60.4,3.7c-24.8-2.1-48.3-8.5-70.6-19.3c-14.8-7.2-28.4-16.4-41-27.1c-17-14.5-31.1-31.3-42.3-50.6
+				c-11.7-20-19.7-41.4-23.8-64.1c-1.9-10.3,0.9-13.9,11.2-15.9c8.3-1.6,16.5-3.6,25-3.8c6.8-0.2,9.8,2.1,11.2,8.9
+				c2.9,13.9,6.6,27.5,13.1,40.1c23,44.9,59.2,72.9,108.9,81.8c44.5,8,84.7-3.1,119.9-31.5c29.3-23.6,47.1-54.4,53.3-91.3
+				c7.1-42.4-3.2-81.1-29.1-115.3c-23.9-31.5-55.9-50.3-94.7-56.7c-40.3-6.6-77.3,2.4-110.8,26.2c-9,6.4-16.7,14.1-25.5,22.8
+				c7.5-1.2,13.7-2.2,19.9-3.3c8.3-1.5,16.6-3.1,24.9-4.5c8.3-1.4,12.7,1.4,14.5,9.6c1.8,8.1,3.4,16.2,4.6,24.4
+				C7.2-14.5,3.2-9.7-3.5-8.6C-31.8-3.9-60,1.2-88.2,6.3c-9.9,1.8-19.9,3.5-29.8,5.5c-7.9,1.6-14.7-0.2-16.6-11.3
+				c-6.3-36.9-13-73.7-19.6-110.6c0-4,0-8,0-12c2.3-3.3,5.3-5.3,9.3-6c7.8-1.4,15.6-3,23.5-4.2c8.6-1.3,13,2,14.7,10.7
+				c1,5.4,1.9,10.7,2.9,16.1c1.7,9.6,3.5,19.2,4.9,27.3c2.2-1.7,4.9-3.4,7.3-5.5c2.4-2.1,4.5-4.4,6.7-6.7c21.9-22.7,48.3-38,78-48
+				c13.2-4.4,26.9-6.9,40.7-8.7c13.7,0,27.3,0,41,0c16.8,2.1,33.2,5.6,49.2,11.5c23.8,8.8,45.1,21.8,63.9,38.7
+				c14.2,12.9,26.3,27.6,36.3,44.1c13.3,22,21.9,45.6,26.1,71c1.4,8.5,1.4,17.2,2.6,25.7C252.9,47.9,252.9,51.9,252.9,55.9z"/>
+		</g>
+	</g>
+</g>
+<g id="Capa_5">
+	<g>
+		<g>
+			<path d="M13.1,51.8c-3-11.5-6.3-22.9-9.4-34.4c-0.5-2.1-1.9-3.4-3.2-4.8c-1.2-1.2-0.4-5.9,0.8-9.9c1.7-0.1,6.5,7.4,6.1,8.7
+				c-0.6,2.1-0.4,3.9,0.2,6c0.7-2.8,0.7-3.9,2-5.6C15.5,4,23.2,0.3,32.9,0C41-0.2,37,1.5,45,2.7c8.3,1.2,16.6,0.2,24.8-2.4
+				c1.3-0.4,1.8,0.2,2.2,1.4c2.3,8.2,4.5,18.4,6.8,26.6c1.5,5.5,3,7.6,4.5,13.1c0.9,3.1,0.8,3.4-2.4,4.2c-4.9,1.2-9.9,1.3-15,0.9
+				c-10.2-0.8-8.3-3.7-18.6-3.7c-6.3,0-32.8,2.8-25.7,24.3c2.7,9.7,6.3,22.7,8.9,32.4c0.3,1-3.6,0.7-4.2-1.2
+				c-3.1-11.1-7.1-25.6-10.1-36.7c-0.1-0.3-0.2-0.5-0.4-1"/>
+		</g>
+	</g>
+</g>
+<g id="Capa_6" class="st0">
+	<path class="st2" d="M94.4,83.1l11.3-21.2h20.1v-6.5h-22.1c-1.2,0-2.3,0.7-2.9,1.7l-8.6,16.3l-9.8-28.5c-0.5-1.3-1.6-2.2-3-2.2
+		c-1.4,0-2.6,0.7-3.1,2l-8,18.9L58.1,2.7c-0.3-1.5-1.8-2.7-3.2-2.7c-1.8,0-3,1.1-3.2,2.6l-9.4,74.2l-8.5-44.2
+		c-0.3-1.4-1.4-2.4-2.8-2.6c-1.4-0.2-2.8,0.6-3.4,1.8L16.3,55.4H0v6.5h18.4c1.2,0,2.4-0.7,3-1.9l7.9-16.4l10.3,53.7
+		c0.3,1.5,1.7,2.7,3.2,2.7h0.1c1.6,0,2.9-1.2,3.1-2.8l9.4-74l8.5,52.3c0.3,1.4,1.4,2.5,2.8,2.6c1.5,0.2,2.8-0.6,3.4-2l8.9-21
+		l9.4,27.5c0.4,1.2,1.6,2.1,2.8,2.2C92.6,84.9,93.8,84.2,94.4,83.1z"/>
+</g>
+<g id="Capa_4" class="st0">
+	
+		<image style="display:inline;overflow:visible;" width="1022" height="139" xlink:href="F2382C46.jpg"  transform="matrix(1 0 0 1 -794.1179 -358.8575)">
+	</image>
+	<rect x="-463.8" y="-295.8" class="st4" width="104.7" height="37"/>
+	<rect x="-470.1" y="-107.8" class="st4" width="44" height="37"/>
+	<g class="st1">
+		<polygon class="st5" points="-443.7,-89.3 -446.4,-89.3 -466.5,-89.3 -466.5,-86.9 -446.4,-86.9 -443.7,-86.9 -439.2,-86.9 
+			-439.2,-89.3 		"/>
+		<polygon class="st5" points="-454.1,-97.3 -454.1,-94.5 -454.1,-74.4 -451.6,-74.4 -451.6,-94.5 -451.6,-97.3 -451.6,-101.7 
+			-454.1,-101.7 		"/>
+		<path class="st5" d="M-452.9-102.4c-7.5,0-13.6,6.1-13.6,13.6s6.1,13.6,13.6,13.6c7.5,0,13.6-6.1,13.6-13.6
+			S-445.4-102.4-452.9-102.4z M-452.9-77.6c-6.1,0-11.1-5-11.1-11.1s5-11.1,11.1-11.1c6.1,0,11.1,5,11.1,11.1
+			S-446.8-77.6-452.9-77.6z"/>
+		<rect x="-454.7" y="-104.1" class="st5" width="3.6" height="3.9"/>
+		<rect x="-454.7" y="-76" class="st5" width="3.6" height="3.9"/>
+		
+			<rect x="-468.7" y="-90.1" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -378.8331 -555.0355)" class="st5" width="3.6" height="3.9"/>
+		
+			<rect x="-440.7" y="-90.1" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -350.777 -526.9794)" class="st5" width="3.6" height="3.9"/>
+	</g>
+	<g class="st1">
+		<polygon class="st5" points="-445,-278.8 -447.2,-278.8 -463.6,-278.8 -463.6,-276.7 -447.2,-276.7 -445,-276.7 -441.4,-276.7 
+			-441.4,-278.8 		"/>
+		<polygon class="st5" points="-453.5,-284.7 -453.5,-282.5 -453.5,-266.1 -451.5,-266.1 -451.5,-282.5 -451.5,-284.7 
+			-451.5,-288.3 -453.5,-288.3 		"/>
+		<path class="st5" d="M-452.5-288.9c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1c6.1,0,11.1-5,11.1-11.1S-446.4-288.9-452.5-288.9z
+			 M-452.5-268.7c-5,0-9.1-4.1-9.1-9.1c0-5,4.1-9.1,9.1-9.1c5,0,9.1,4.1,9.1,9.1C-443.5-272.8-447.5-268.7-452.5-268.7z"/>
+		<rect x="-454.5" y="-290.3" class="st5" width="3.9" height="3.2"/>
+		<rect x="-454.5" y="-267.5" class="st5" width="3.9" height="3.2"/>
+		
+			<rect x="-465.9" y="-279.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -186.1642 -741.693)" class="st5" width="3.9" height="3.2"/>
+		
+			<rect x="-443.1" y="-279.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -163.3761 -718.9049)" class="st5" width="3.9" height="3.2"/>
+	</g>
+	<rect x="-163.3" y="-295.8" class="st4" width="262.2" height="37"/>
+	<path class="st6" d="M-140.3-269.9l2.5-4.7h4.5v-1.5h-4.9c-0.3,0-0.5,0.1-0.6,0.4l-1.9,3.6l-2.2-6.3c-0.1-0.3-0.4-0.5-0.7-0.5
+		c-0.3,0-0.6,0.2-0.7,0.4l-1.8,4.2l-2.3-13.6c-0.1-0.3-0.4-0.6-0.7-0.6c-0.4,0-0.7,0.2-0.7,0.6l-2.1,16.5l-1.9-9.8
+		c-0.1-0.3-0.3-0.5-0.6-0.6c-0.3,0-0.6,0.1-0.8,0.4l-2.5,5.2h-3.6v1.5h4.1c0.3,0,0.5-0.2,0.7-0.4l1.8-3.7l2.3,12
+		c0.1,0.3,0.4,0.6,0.7,0.6h0c0.4,0,0.6-0.3,0.7-0.6l2.1-16.5l1.9,11.7c0.1,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.1,0.8-0.4l2-4.7l2.1,6.1
+		c0.1,0.3,0.3,0.5,0.6,0.5C-140.7-269.5-140.4-269.7-140.3-269.9z"/>
+	<g class="st1">
+		<g>
+			<path class="st5" d="M-91.4-368.9c-0.6-1.9-2-6.9-2.6-8.8c-1.8-5.9-3.7-11.7-5.5-17.6c-0.1-0.3,0-0.5,0.1-0.7
+				c0.4-0.5,0.7,0,1.1-0.5c0.2-0.3,0.4-0.4,0.7-0.6c1.4-1,3-1.5,4.7-1.5c0.6,0,1,0.2,1.2,0.7c0.1,0.2,0.6,0.6,1,0.7
+				c1.5,0.1,2.9-0.1,4.2-0.8c1.2-0.6,2.5-0.6,3.7-1.4c0.8-0.5,1.7-1.3,2.6-1.3c0.6,0,1.1,0,1.7,0.1c0.2,0,0.4,0.1,0.5,0.4
+				c1.7,4.6,3.2,8.3,4.9,12.9c0.2,0.5,0.2,0.2-0.4,0.1c-2.5-0.4-4.8,0.3-6.9,1.7c-1,0.7-1.6,1.3-2.7,1.8c-0.4,0.2-0.7,0.3-1.1,0.4
+				c-1.2,0.2-2.2-0.4-2.5-1.6c-0.1-0.3-0.6-0.5-0.9-0.6c-0.9-0.2-1.7,0-2.6,0.2c-1,0.3-2,0.7-2.9,1.1c-0.3,0.1-1.4,0.9-1.3,1.2
+				c1.1,3.3,3.1,9.8,4.2,13.1c0,0.1-0.1,0.1-0.1,0.2C-90.3-369.3-91.4-368.7-91.4-368.9z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st5" d="M-46.1-374.3c-0.6-2-1.8-5.4-2.5-7.4c-2-6.2-3.9-12.4-5.9-18.7c-0.1-0.3-0.1-0.5,0.1-0.7
+				c0.4-0.5,0.8,0,1.1-0.6c0.2-0.3,0.5-0.5,0.7-0.7c1.5-1.1,3.1-1.6,4.9-1.6c0.6,0,2.6,0.2,2.8,0.8c0.1,0.2,0.7,0.7,1.1,0.7
+				c1.6,0.1,2.6,0,4-0.7c1.5-0.7,1.3-0.6,2.2-1.7c0.8-0.6,1.8-1.4,2.7-1.4c0.6,0,1.2,0,1.8,0.1c0.3,0,0.4,0.1,0.5,0.4
+				c1.8,4.9,2.9,7.2,4.7,12.1c0.2,0.6,0.2,0.2-0.4,0.1c-2.7-0.5-4.8-0.3-7,1.2c-1.1,0.7-2.6,1.4-3.8,1.9c-0.4,0.2-0.8,0.3-1.2,0.4
+				c-1.2,0.2-3.6-0.5-3.9-1.7c-0.1-0.3-1.2,0-2.1,0.3c-1.1,0.3-2.5,0.8-3.5,1.2c-0.1,0.3,0.8,2.5,0.9,2.8c1.2,3.5,2.8,8.5,3.9,12
+				c0,0.1-0.1,0.1-0.1,0.2C-44.8-374.8-46-374.2-46.1-374.3z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st5" d="M-59.5-194.1c0.3-2.2,0.3-3.2,0.6-5.5c1-6.9,2-13.8,2.9-20.7c0-0.3,0.2-0.5,0.5-0.7c0.6-0.3,0.6,1.8,1.2,1.5
+				c0.3-0.2,0.7-0.2,1-0.3c1.9-0.4,3.7-0.1,5.5,0.7c0.6,0.3,2.4,1.4,2.3,2c0,0.2,0.7,1.1,1,1.4c1.5,1.2,2.2,1.1,3.9,1
+				c1.8,0,1.5,0,2.9-0.6c1.1-0.2,2.3-0.5,3.3-0.1c0.6,0.2,1.1,0.5,1.7,0.9c0.2,0.2,0.3,0.3,0.3,0.6c-0.6,5.6-0.3,6.8-0.9,12.3
+				c-0.1,0.6,0.1,0.3-0.4-0.1c-2.4-1.7-3.9-1.4-6.7-1.1c-1.4,0.2-3.2,0.1-4.5,0.1c-0.4,0-0.9-0.1-1.3-0.2c-1.3-0.3-3.4-1.7-4.3-3.1
+				c0.1-0.4-1.3-0.1-2.2-0.3c-1.2-0.2-2.2-0.7-3.4-0.7c-0.2,0.2-0.2,1.3-0.3,1.6c-0.5,4-0.7,7.1-1.2,11.1
+				C-57.7-194-59.5-193.9-59.5-194.1z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st5" d="M-94.9-276.9c-0.7-2.8-1.5-5.5-2.3-8.2c-0.1-0.5-0.4-0.8-0.8-1.2c-0.3-0.3-0.1-1.4,0.2-2.4
+				c0.4,0,1.6,1.8,1.5,2.1c-0.1,0.5-0.1,0.9,0,1.4c0.2-0.7,0.2-0.9,0.5-1.3c1.4-1.9,3.3-2.8,5.6-2.8c1.9,0,1,0.4,2.9,0.6
+				c2,0.3,4,0.6,5.9-0.1c0.3-0.1,0.4,0,0.5,0.3c0.5,2,1.1,3.9,1.6,5.9c0.4,1.3,0.7,2.6,1.1,3.9c0.2,0.8,0.2,0.8-0.6,1
+				c-1.2,0.3-2.4,0.3-3.6,0.2c-2.4-0.2-2-0.9-4.5-0.9c-1.5,0-7.9-0.1-6.2,5c0.6,2.3,1.5,5.5,2.1,7.8c0.1,0.2-0.9,0.2-1-0.3
+				c-0.8-2.7-1.7-6.1-2.4-8.8c0-0.1-0.1-0.1-0.1-0.2"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<g>
+				<path class="st5" d="M-396.5-272.6h-1.4v-6.5c0-0.5,0.1-1,0.4-1.3c0.2-0.3,0.5-0.5,0.9-0.5h3.9v1.9h-3.8v1h3.4v1.8h-3.4V-272.6z
+					"/>
+			</g>
+			<g>
+				<path class="st5" d="M-402.2-272.6h-1.4v-6.5c0-0.5,0.1-1,0.4-1.3c0.2-0.3,0.5-0.5,0.9-0.5h3.9v1.9h-3.8v1h3.4v1.8h-3.4V-272.6z
+					"/>
+			</g>
+		</g>
+		<polygon class="st5" points="-406,-278.1 -406.6,-278.1 -410.8,-278.1 -410.8,-275.9 -406.6,-275.9 -406,-275.9 -405.1,-275.9 
+			-405.1,-278.1 		"/>
+		<polygon class="st5" points="-387,-278.1 -387.5,-278.1 -391.8,-278.1 -391.8,-275.9 -387.5,-275.9 -387,-275.9 -386,-275.9 
+			-386,-278.1 		"/>
+		<polygon class="st5" points="-399.6,-270.1 -399.6,-269.5 -399.6,-265.3 -397.4,-265.3 -397.4,-269.5 -397.4,-270.1 -397.4,-271 
+			-399.6,-271 		"/>
+		<polygon class="st5" points="-399.6,-287.8 -399.6,-287.2 -399.6,-283 -397.4,-283 -397.4,-287.2 -397.4,-287.8 -397.4,-288.7 
+			-399.6,-288.7 		"/>
+		<path class="st5" d="M-398.5-288.9c-6.6,0-11.9,5.3-11.9,11.9s5.3,11.9,11.9,11.9s11.9-5.3,11.9-11.9S-391.9-288.9-398.5-288.9z
+			 M-398.5-267.3c-5.4,0-9.7-4.4-9.7-9.7c0-5.4,4.4-9.7,9.7-9.7c5.4,0,9.7,4.4,9.7,9.7C-388.7-271.6-393.1-267.3-398.5-267.3z"/>
+		<rect x="-400.6" y="-290.7" class="st5" width="4.2" height="3.5"/>
+		<rect x="-400.6" y="-266.2" class="st5" width="4.2" height="3.5"/>
+		
+			<rect x="-412.8" y="-278.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -133.7235 -687.7208)" class="st5" width="4.2" height="3.5"/>
+		
+			<rect x="-388.3" y="-278.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -109.1754 -663.1727)" class="st5" width="4.2" height="3.5"/>
+	</g>
+</g>
+</svg>

static/src/assets/icon/stats/friendlyFire.svg

@@ -0,0 +1,198 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;}
+	.st2{display:inline;fill:#010002;}
+	.st3{fill:#010002;}
+	.st4{stroke:#FFFFFF;stroke-width:9;stroke-miterlimit:10;}
+	.st5{display:inline;fill:#222222;}
+	.st6{fill:#FFFFFF;}
+	.st7{display:inline;fill:#FCFCFC;}
+</style>
+<g id="Capa_1" class="st0">
+	<polygon class="st1" points="187.6,27.1 145.6,27.1 -161.4,27.1 -161.4,65.1 145.6,65.1 187.6,65.1 255.6,65.1 255.6,27.1 	"/>
+	<polygon class="st1" points="27.3,-89.4 27.3,-47.4 27.3,259.6 65.3,259.6 65.3,-47.4 65.3,-89.4 65.3,-157.4 27.3,-157.4 	"/>
+	<path class="st2" d="M46.3-162.4c-115.2,0-208.5,93.3-208.5,208.5s93.3,208.5,208.5,208.5s208.5-93.3,208.5-208.5
+		S161.4-162.4,46.3-162.4z M46.3,216.1c-93.9,0-170-76.1-170-170s76.1-170,170-170s170,76.1,170,170S140.2,216.1,46.3,216.1z"/>
+	<rect x="9.4" y="-193.9" class="st2" width="73.7" height="60.3"/>
+	<rect x="9.4" y="234.6" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="-204.3" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -213.5344 -121.3919)" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="224.1" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 214.9306 307.0731)" class="st2" width="73.7" height="60.3"/>
+</g>
+<g id="Capa_3">
+	<rect x="468.8" y="-211.8" style="fill:none;" width="82.5" height="96.1"/>
+	<text transform="matrix(1 0 0 1.7 468.8484 -188.2972)" style="font-family:'CharlieBrownM54'; font-size:36px;">F</text>
+	<rect x="427.6" y="-157.4" style="fill:none;" width="82.5" height="96.1"/>
+	<text transform="matrix(1 0 0 1 427.5984 -121.3575)" style="font-family:'Copy0865'; font-size:36px;">F</text>
+	<g>
+		<g>
+			<g>
+				<path d="M56.9,65.2H52V41.9c0-1.9,0.4-3.4,1.3-4.6c0.9-1.1,2-1.7,3.3-1.7h14v6.7H56.9v3.4h12.2v6.4H56.9V65.2z"/>
+			</g>
+			<g>
+				<path d="M36.4,65.2h-4.9V41.9c0-1.9,0.4-3.4,1.3-4.6c0.9-1.1,2-1.7,3.3-1.7h14v6.7H36.4v3.4h12.2v6.4H36.4V65.2z"/>
+			</g>
+		</g>
+		<polygon points="22.7,45.7 20.6,45.7 5.5,45.7 5.5,53.5 20.6,53.5 22.7,53.5 26,53.5 26,45.7 		"/>
+		<polygon points="90.8,45.7 88.7,45.7 73.7,45.7 73.7,53.5 88.7,53.5 90.8,53.5 94.1,53.5 94.1,45.7 		"/>
+		<polygon points="45.6,74.2 45.6,76.3 45.6,91.4 53.4,91.4 53.4,76.3 53.4,74.2 53.4,70.9 45.6,70.9 		"/>
+		<polygon points="45.6,11.2 45.6,13.3 45.6,28.3 53.4,28.3 53.4,13.3 53.4,11.2 53.4,7.9 45.6,7.9 		"/>
+		<path class="st3" d="M49.7,6.9C26.1,6.9,7,26,7,49.6s19.1,42.7,42.7,42.7s42.7-19.1,42.7-42.7S73.2,6.9,49.7,6.9z M49.7,84.4
+			c-19.2,0-34.8-15.6-34.8-34.8s15.6-34.8,34.8-34.8s34.8,15.6,34.8,34.8S68.9,84.4,49.7,84.4z"/>
+		<rect x="42.1" y="0.5" class="st3" width="15.1" height="12.3"/>
+		<rect x="42.1" y="88.2" class="st3" width="15.1" height="12.3"/>
+		
+			<rect x="-1.6" y="43.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -43.6743 55.5412)" class="st3" width="15.1" height="12.3"/>
+		
+			<rect x="86.1" y="43.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 43.9975 143.2129)" class="st3" width="15.1" height="12.3"/>
+	</g>
+</g>
+<g id="Capa_2" class="st0">
+	<g class="st1">
+		<g>
+			<path class="st4" d="M252.6,55.9c-1.2,8.4-1.2,16.8-2.5,25.2c-5.2,32.8-17.4,62.6-37.7,88.9c-29.5,38.3-67.8,63-114.9,73.8
+				c-19.9,4.5-40,5.4-60.4,3.7c-24.8-2.1-48.3-8.5-70.6-19.3c-14.8-7.2-28.4-16.4-41-27.1c-17-14.5-31.1-31.3-42.3-50.6
+				c-11.7-20-19.7-41.4-23.8-64.1c-1.9-10.3,0.9-13.9,11.2-15.9c8.3-1.6,16.5-3.6,25-3.8c6.8-0.2,9.8,2.1,11.2,8.9
+				c2.9,13.9,6.6,27.5,13.1,40.1c23,44.9,59.2,72.9,108.9,81.8c44.5,8,84.7-3.1,119.9-31.5c29.3-23.6,47.1-54.4,53.3-91.3
+				c7.1-42.4-3.2-81.1-29.1-115.3C149-72.3,116.9-91.1,78.2-97.5c-40.3-6.6-77.3,2.4-110.8,26.2c-9,6.4-16.7,14.1-25.5,22.8
+				c7.5-1.2,13.7-2.2,19.9-3.3c8.3-1.5,16.6-3.1,24.9-4.5c8.3-1.4,12.7,1.4,14.5,9.6C3-38.6,4.6-30.4,5.8-22.2
+				C6.9-14.5,2.9-9.7-3.8-8.6C-32-3.9-60.2,1.2-88.4,6.3c-9.9,1.8-19.9,3.5-29.8,5.5c-7.9,1.6-14.7-0.2-16.6-11.3
+				c-6.3-36.9-13-73.7-19.6-110.6c0-4,0-8,0-12c2.3-3.3,5.3-5.3,9.3-6c7.8-1.4,15.6-3,23.5-4.2c8.6-1.3,13,2,14.7,10.7
+				c1,5.4,1.9,10.7,2.9,16.1c1.7,9.6,3.5,19.2,4.9,27.3c2.2-1.7,4.9-3.4,7.3-5.5c2.4-2.1,4.5-4.4,6.7-6.7c21.9-22.7,48.3-38,78-48
+				c13.2-4.4,26.9-6.9,40.7-8.7c13.7,0,27.3,0,41,0c16.8,2.1,33.2,5.6,49.2,11.5c23.8,8.8,45.1,21.8,63.9,38.7
+				c14.2,12.9,26.3,27.6,36.3,44.1c13.3,22,21.9,45.6,26.1,71c1.4,8.5,1.4,17.2,2.6,25.7C252.6,47.9,252.6,51.9,252.6,55.9z"/>
+		</g>
+	</g>
+</g>
+<g id="Capa_5" class="st0">
+	<g class="st1">
+		<g>
+			<path d="M12.8,51.8c-3-11.5-6.3-22.9-9.4-34.4c-0.5-2.1-1.9-3.4-3.2-4.8c-1.2-1.2-0.4-5.9,0.8-9.9c1.7-0.1,6.5,7.4,6.1,8.7
+				c-0.6,2.1-0.4,3.9,0.2,6c0.7-2.8,0.7-3.9,2-5.6C15.2,4,22.9,0.3,32.6,0c8.1-0.2,4.1,1.5,12.1,2.7C53,3.9,61.2,2.9,69.5,0.2
+				c1.3-0.4,1.8,0.2,2.2,1.4c2.3,8.2,4.5,18.4,6.8,26.6c1.5,5.5,3,7.6,4.5,13.1c0.9,3.1,0.8,3.4-2.4,4.2c-4.9,1.2-9.9,1.3-15,0.9
+				c-10.2-0.8-8.3-3.7-18.6-3.7c-6.3,0-32.8,2.8-25.7,24.3c2.7,9.7,6.3,22.7,8.9,32.4c0.3,1-3.6,0.7-4.2-1.2
+				c-3.1-11.1-7.1-25.6-10.1-36.7c-0.1-0.3-0.2-0.5-0.4-1"/>
+		</g>
+	</g>
+</g>
+<g id="Capa_6" class="st0">
+	<path class="st2" d="M94.1,83.1l11.3-21.2h20.1v-6.5h-22.1c-1.2,0-2.3,0.7-2.9,1.7l-8.6,16.3l-9.8-28.5c-0.5-1.3-1.6-2.2-3-2.2
+		c-1.4,0-2.6,0.7-3.1,2l-8,18.9L57.9,2.7c-0.3-1.5-1.8-2.7-3.2-2.7c-1.8,0-3,1.1-3.2,2.6L42,76.8l-8.5-44.2
+		c-0.3-1.4-1.4-2.4-2.8-2.6c-1.4-0.2-2.8,0.6-3.4,1.8L16,55.4H-0.3v6.5h18.4c1.2,0,2.4-0.7,3-1.9l7.9-16.4l10.3,53.7
+		c0.3,1.5,1.7,2.7,3.2,2.7h0.1c1.6,0,2.9-1.2,3.1-2.8l9.4-74l8.5,52.3c0.3,1.4,1.4,2.5,2.8,2.6c1.5,0.2,2.8-0.6,3.4-2l8.9-21
+		l9.4,27.5c0.4,1.2,1.6,2.1,2.8,2.2C92.3,84.9,93.5,84.2,94.1,83.1z"/>
+</g>
+<g id="Capa_4" class="st0">
+	
+		<image style="display:inline;overflow:visible;" width="1022" height="139" xlink:href="A0EB67C7.jpg"  transform="matrix(1 0 0 1 -794.4016 -358.8575)">
+	</image>
+	<rect x="-464.1" y="-295.8" class="st5" width="104.7" height="37"/>
+	<rect x="-470.4" y="-107.8" class="st5" width="44" height="37"/>
+	<g class="st1">
+		<polygon class="st6" points="-444,-89.3 -446.7,-89.3 -466.8,-89.3 -466.8,-86.9 -446.7,-86.9 -444,-86.9 -439.5,-86.9 
+			-439.5,-89.3 		"/>
+		<polygon class="st6" points="-454.4,-97.3 -454.4,-94.5 -454.4,-74.4 -451.9,-74.4 -451.9,-94.5 -451.9,-97.3 -451.9,-101.7 
+			-454.4,-101.7 		"/>
+		<path class="st6" d="M-453.2-102.4c-7.5,0-13.6,6.1-13.6,13.6s6.1,13.6,13.6,13.6s13.6-6.1,13.6-13.6S-445.7-102.4-453.2-102.4z
+			 M-453.2-77.6c-6.1,0-11.1-5-11.1-11.1s5-11.1,11.1-11.1s11.1,5,11.1,11.1S-447-77.6-453.2-77.6z"/>
+		<rect x="-455" y="-104.1" class="st6" width="3.6" height="3.9"/>
+		<rect x="-455" y="-76" class="st6" width="3.6" height="3.9"/>
+		
+			<rect x="-469" y="-90.1" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -379.1167 -555.3192)" class="st6" width="3.6" height="3.9"/>
+		
+			<rect x="-441" y="-90.1" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -351.0606 -527.2631)" class="st6" width="3.6" height="3.9"/>
+	</g>
+	<g class="st1">
+		<polygon class="st6" points="-445.3,-278.8 -447.5,-278.8 -463.9,-278.8 -463.9,-276.7 -447.5,-276.7 -445.3,-276.7 
+			-441.7,-276.7 -441.7,-278.8 		"/>
+		<polygon class="st6" points="-453.8,-284.7 -453.8,-282.5 -453.8,-266.1 -451.8,-266.1 -451.8,-282.5 -451.8,-284.7 
+			-451.8,-288.3 -453.8,-288.3 		"/>
+		<path class="st6" d="M-452.8-288.9c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1s11.1-5,11.1-11.1S-446.7-288.9-452.8-288.9z
+			 M-452.8-268.7c-5,0-9.1-4.1-9.1-9.1c0-5,4.1-9.1,9.1-9.1c5,0,9.1,4.1,9.1,9.1C-443.8-272.8-447.8-268.7-452.8-268.7z"/>
+		<rect x="-454.8" y="-290.3" class="st6" width="3.9" height="3.2"/>
+		<rect x="-454.8" y="-267.5" class="st6" width="3.9" height="3.2"/>
+		
+			<rect x="-466.2" y="-279.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -186.4478 -741.9766)" class="st6" width="3.9" height="3.2"/>
+		
+			<rect x="-443.4" y="-279.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -163.6597 -719.1885)" class="st6" width="3.9" height="3.2"/>
+	</g>
+	<rect x="-163.6" y="-295.8" class="st5" width="262.2" height="37"/>
+	<path class="st7" d="M-140.5-269.9l2.5-4.7h4.5v-1.5h-4.9c-0.3,0-0.5,0.1-0.6,0.4l-1.9,3.6l-2.2-6.3c-0.1-0.3-0.4-0.5-0.7-0.5
+		c-0.3,0-0.6,0.2-0.7,0.4l-1.8,4.2l-2.3-13.6c-0.1-0.3-0.4-0.6-0.7-0.6c-0.4,0-0.7,0.2-0.7,0.6l-2.1,16.5l-1.9-9.8
+		c-0.1-0.3-0.3-0.5-0.6-0.6c-0.3,0-0.6,0.1-0.8,0.4l-2.5,5.2h-3.6v1.5h4.1c0.3,0,0.5-0.2,0.7-0.4l1.8-3.7l2.3,12
+		c0.1,0.3,0.4,0.6,0.7,0.6h0c0.4,0,0.6-0.3,0.7-0.6l2.1-16.5l1.9,11.7c0.1,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.1,0.8-0.4l2-4.7l2.1,6.1
+		c0.1,0.3,0.3,0.5,0.6,0.5C-141-269.5-140.7-269.7-140.5-269.9z"/>
+	<g class="st1">
+		<g>
+			<path class="st6" d="M-91.7-368.9c-0.6-1.9-2-6.9-2.6-8.8c-1.8-5.9-3.7-11.7-5.5-17.6c-0.1-0.3,0-0.5,0.1-0.7
+				c0.4-0.5,0.7,0,1.1-0.5c0.2-0.3,0.4-0.4,0.7-0.6c1.4-1,3-1.5,4.7-1.5c0.6,0,1,0.2,1.2,0.7c0.1,0.2,0.6,0.6,1,0.7
+				c1.5,0.1,2.9-0.1,4.2-0.8c1.2-0.6,2.5-0.6,3.7-1.4c0.8-0.5,1.7-1.3,2.6-1.3c0.6,0,1.1,0,1.7,0.1c0.2,0,0.4,0.1,0.5,0.4
+				c1.7,4.6,3.2,8.3,4.9,12.9c0.2,0.5,0.2,0.2-0.4,0.1c-2.5-0.4-4.8,0.3-6.9,1.7c-1,0.7-1.6,1.3-2.7,1.8c-0.4,0.2-0.7,0.3-1.1,0.4
+				c-1.2,0.2-2.2-0.4-2.5-1.6c-0.1-0.3-0.6-0.5-0.9-0.6c-0.9-0.2-1.7,0-2.6,0.2c-1,0.3-2,0.7-2.9,1.1c-0.3,0.1-1.4,0.9-1.3,1.2
+				c1.1,3.3,3.1,9.8,4.2,13.1c0,0.1-0.1,0.1-0.1,0.2C-90.5-369.3-91.7-368.7-91.7-368.9z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st6" d="M-46.4-374.3c-0.6-2-1.8-5.4-2.5-7.4c-2-6.2-3.9-12.4-5.9-18.7c-0.1-0.3-0.1-0.5,0.1-0.7
+				c0.4-0.5,0.8,0,1.1-0.6c0.2-0.3,0.5-0.5,0.7-0.7c1.5-1.1,3.1-1.6,4.9-1.6c0.6,0,2.6,0.2,2.8,0.8c0.1,0.2,0.7,0.7,1.1,0.7
+				c1.6,0.1,2.6,0,4-0.7c1.5-0.7,1.3-0.6,2.2-1.7c0.8-0.6,1.8-1.4,2.7-1.4c0.6,0,1.2,0,1.8,0.1c0.3,0,0.4,0.1,0.5,0.4
+				c1.8,4.9,2.9,7.2,4.7,12.1c0.2,0.6,0.2,0.2-0.4,0.1c-2.7-0.5-4.8-0.3-7,1.2c-1.1,0.7-2.6,1.4-3.8,1.9c-0.4,0.2-0.8,0.3-1.2,0.4
+				c-1.2,0.2-3.6-0.5-3.9-1.7c-0.1-0.3-1.2,0-2.1,0.3c-1.1,0.3-2.5,0.8-3.5,1.2c-0.1,0.3,0.8,2.5,0.9,2.8c1.2,3.5,2.8,8.5,3.9,12
+				c0,0.1-0.1,0.1-0.1,0.2C-45.1-374.8-46.3-374.2-46.4-374.3z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st6" d="M-59.8-194.1c0.3-2.2,0.3-3.2,0.6-5.5c1-6.9,2-13.8,2.9-20.7c0-0.3,0.2-0.5,0.5-0.7c0.6-0.3,0.6,1.8,1.2,1.5
+				c0.3-0.2,0.7-0.2,1-0.3c1.9-0.4,3.7-0.1,5.5,0.7c0.6,0.3,2.4,1.4,2.3,2c0,0.2,0.7,1.1,1,1.4c1.5,1.2,2.2,1.1,3.9,1
+				c1.8,0,1.5,0,2.9-0.6c1.1-0.2,2.3-0.5,3.3-0.1c0.6,0.2,1.1,0.5,1.7,0.9c0.2,0.2,0.3,0.3,0.3,0.6c-0.6,5.6-0.3,6.8-0.9,12.3
+				c-0.1,0.6,0.1,0.3-0.4-0.1c-2.4-1.7-3.9-1.4-6.7-1.1c-1.4,0.2-3.2,0.1-4.5,0.1c-0.4,0-0.9-0.1-1.3-0.2c-1.3-0.3-3.4-1.7-4.3-3.1
+				c0.1-0.4-1.3-0.1-2.2-0.3c-1.2-0.2-2.2-0.7-3.4-0.7c-0.2,0.2-0.2,1.3-0.3,1.6c-0.5,4-0.7,7.1-1.2,11.1
+				C-57.9-194-59.8-193.9-59.8-194.1z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st6" d="M-95.2-276.9c-0.7-2.8-1.5-5.5-2.3-8.2c-0.1-0.5-0.4-0.8-0.8-1.2c-0.3-0.3-0.1-1.4,0.2-2.4
+				c0.4,0,1.6,1.8,1.5,2.1c-0.1,0.5-0.1,0.9,0,1.4c0.2-0.7,0.2-0.9,0.5-1.3c1.4-1.9,3.3-2.8,5.6-2.8c1.9,0,1,0.4,2.9,0.6
+				c2,0.3,4,0.6,5.9-0.1c0.3-0.1,0.4,0,0.5,0.3c0.5,2,1.1,3.9,1.6,5.9c0.4,1.3,0.7,2.6,1.1,3.9c0.2,0.8,0.2,0.8-0.6,1
+				c-1.2,0.3-2.4,0.3-3.6,0.2c-2.4-0.2-2-0.9-4.5-0.9c-1.5,0-7.9-0.1-6.2,5c0.6,2.3,1.5,5.5,2.1,7.8c0.1,0.2-0.9,0.2-1-0.3
+				c-0.8-2.7-1.7-6.1-2.4-8.8c0-0.1-0.1-0.1-0.1-0.2"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<g>
+				<path class="st6" d="M-396.7-272.6h-1.4v-6.5c0-0.5,0.1-1,0.4-1.3c0.2-0.3,0.5-0.5,0.9-0.5h3.9v1.9h-3.8v1h3.4v1.8h-3.4V-272.6z
+					"/>
+			</g>
+			<g>
+				<path class="st6" d="M-402.5-272.6h-1.4v-6.5c0-0.5,0.1-1,0.4-1.3c0.2-0.3,0.5-0.5,0.9-0.5h3.9v1.9h-3.8v1h3.4v1.8h-3.4V-272.6z
+					"/>
+			</g>
+		</g>
+		<polygon class="st6" points="-406.3,-278.1 -406.9,-278.1 -411.1,-278.1 -411.1,-275.9 -406.9,-275.9 -406.3,-275.9 
+			-405.4,-275.9 -405.4,-278.1 		"/>
+		<polygon class="st6" points="-387.2,-278.1 -387.8,-278.1 -392,-278.1 -392,-275.9 -387.8,-275.9 -387.2,-275.9 -386.3,-275.9 
+			-386.3,-278.1 		"/>
+		<polygon class="st6" points="-399.9,-270.1 -399.9,-269.5 -399.9,-265.3 -397.7,-265.3 -397.7,-269.5 -397.7,-270.1 -397.7,-271 
+			-399.9,-271 		"/>
+		<polygon class="st6" points="-399.9,-287.8 -399.9,-287.2 -399.9,-283 -397.7,-283 -397.7,-287.2 -397.7,-287.8 -397.7,-288.7 
+			-399.9,-288.7 		"/>
+		<path class="st6" d="M-398.8-288.9c-6.6,0-11.9,5.3-11.9,11.9s5.3,11.9,11.9,11.9s11.9-5.3,11.9-11.9S-392.2-288.9-398.8-288.9z
+			 M-398.8-267.3c-5.4,0-9.7-4.4-9.7-9.7c0-5.4,4.4-9.7,9.7-9.7s9.7,4.4,9.7,9.7C-389-271.6-393.4-267.3-398.8-267.3z"/>
+		<rect x="-400.9" y="-290.7" class="st6" width="4.2" height="3.5"/>
+		<rect x="-400.9" y="-266.2" class="st6" width="4.2" height="3.5"/>
+		
+			<rect x="-413.1" y="-278.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -134.0071 -688.0044)" class="st6" width="4.2" height="3.5"/>
+		
+			<rect x="-388.6" y="-278.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -109.459 -663.4564)" class="st6" width="4.2" height="3.5"/>
+	</g>
+</g>
+</svg>

static/src/assets/icon/stats/highscore.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 75.1" style="enable-background:new 0 0 100 75.1;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M95.6,30.4c-0.4-0.7-1.1-1.1-1.9-1.1H75v4.2h22.1L95.6,30.4z"/>
+			<path d="M66.4,1.2c-0.4-0.7-1.1-1.1-1.9-1.1H35.4c-0.8,0-1.5,0.4-1.9,1.1l-1.5,3H68L66.4,1.2z"/>
+			<path d="M99.9,39.2c0-0.1-0.1-0.3-0.1-0.4c-0.3-0.7-1-1.2-1.9-1.2H70.8V10.5c0-0.2-0.1-0.3-0.1-0.5c0-0.1-0.1-0.3-0.1-0.4
+				c-0.3-0.7-1-1.2-1.9-1.2H31.3c-0.8,0-1.5,0.5-1.9,1.2c-0.1,0.1-0.1,0.3-0.1,0.4c0,0.2-0.1,0.3-0.1,0.5v22.9H2.1
+				c-0.8,0-1.5,0.5-1.9,1.2c-0.1,0.1-0.1,0.3-0.1,0.4c0,0.2-0.1,0.3-0.1,0.5V73c0,1.1,0.9,2.1,2.1,2.1h95.8c1.1,0,2.1-0.9,2.1-2.1
+				V39.7C100,39.5,99.9,39.3,99.9,39.2z M20.8,58.4L20.8,58.4L20.8,58.4c1.1,0,2.1,0.9,2.1,2.1s-0.9,2.1-2.1,2.1h-8.3
+				c-0.8,0-1.6-0.5-1.9-1.3c-0.3-0.8-0.1-1.7,0.4-2.3l5.4-5.4c1.5-1.5,2.3-3.5,2.3-5.6c0-1.1-0.9-2.1-2.1-2.1s-2.1,0.9-2.1,2.1
+				c0,1.1-0.9,2.1-2.1,2.1s-2.1-0.9-2.1-2.1c0-3.4,2.8-6.2,6.2-6.2s6.2,2.8,6.2,6.2c0,3.2-1.3,6.3-3.6,8.6l-1.8,1.8H20.8z
+				 M54.2,43.8L54.2,43.8c0,1.1-0.9,2.1-2.1,2.1S50,45,50,43.8V28l-0.6,0.6c-0.8,0.8-2.1,0.8-2.9,0c-0.8-0.8-0.8-2.1,0-2.9l4.2-4.2
+				c0.6-0.6,1.5-0.8,2.3-0.5c0.8,0.3,1.3,1.1,1.3,1.9L54.2,43.8L54.2,43.8z M89.6,60.5c0,3.4-2.8,6.2-6.2,6.2
+				c-3.4,0-6.2-2.8-6.2-6.2c0-1.1,0.9-2.1,2.1-2.1c1.1,0,2.1,0.9,2.1,2.1c0,1.1,0.9,2.1,2.1,2.1c1.2,0,2.1-0.9,2.1-2.1
+				s-0.9-2.1-2.1-2.1c-1.1,0-2.1-0.9-2.1-2.1s0.9-2.1,2.1-2.1c1.2,0,2.1-0.9,2.1-2.1s-0.9-2.1-2.1-2.1c-1.1,0-2.1,0.9-2.1,2.1
+				c0,1.1-0.9,2.1-2.1,2.1c-1.2,0-2.1-0.9-2.1-2.1c0-3.4,2.8-6.2,6.2-6.2c3.4,0,6.2,2.8,6.2,6.2c0,1.6-0.6,3.1-1.6,4.2
+				C89,57.4,89.6,58.9,89.6,60.5z"/>
+			<path d="M25,25.1H6.3c-0.8,0-1.5,0.4-1.9,1.1l-1.5,3H25V25.1z"/>
+		</g>
+	</g>
+</g>
+</svg>

static/src/assets/icon/stats/kill.svg

@@ -0,0 +1,200 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#010002;}
+	.st1{display:none;}
+	.st2{display:inline;}
+	.st3{stroke:#FFFFFF;stroke-width:9;stroke-miterlimit:10;}
+	.st4{display:inline;fill:#010002;}
+	.st5{display:inline;fill:#222222;}
+	.st6{fill:#FFFFFF;}
+	.st7{display:inline;fill:#FCFCFC;}
+</style>
+<g id="Capa_1">
+	<g>
+		<polygon points="79.4,45.2 70.8,45.2 8,45.2 8,53 70.8,53 79.4,53 93.3,53 93.3,45.2 		"/>
+		<polygon points="46.6,21.4 46.6,30 46.6,92.8 54.3,92.8 54.3,30 54.3,21.4 54.3,7.5 46.6,7.5 		"/>
+		<path class="st0" d="M50.5,6.4C26.9,6.4,7.8,25.5,7.8,49.1s19.1,42.7,42.7,42.7s42.7-19.1,42.7-42.7S74,6.4,50.5,6.4z M50.5,83.9
+			c-19.2,0-34.8-15.6-34.8-34.8s15.6-34.8,34.8-34.8s34.8,15.6,34.8,34.8S69.7,83.9,50.5,83.9z"/>
+		<rect x="42.9" class="st0" width="15.1" height="12.3"/>
+		<rect x="42.9" y="87.7" class="st0" width="15.1" height="12.3"/>
+		
+			<rect x="-0.8" y="42.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -42.3714 55.8092)" class="st0" width="15.1" height="12.3"/>
+		
+			<rect x="86.8" y="42.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 45.3004 143.4809)" class="st0" width="15.1" height="12.3"/>
+	</g>
+</g>
+<g id="Capa_3" class="st1">
+	<rect x="468.8" y="-211.8" style="display:inline;fill:none;" width="82.5" height="96.1"/>
+	<text transform="matrix(1 0 0 1.7 468.8484 -188.2972)" class="st2" style="font-family:'CharlieBrownM54'; font-size:36px;">F</text>
+	<rect x="427.6" y="-157.4" style="display:inline;fill:none;" width="82.5" height="96.1"/>
+	<text transform="matrix(1 0 0 1 427.5984 -121.3575)" class="st2" style="font-family:'Copy0865'; font-size:36px;">F</text>
+	<g class="st2">
+		<g>
+			<g>
+				<path d="M56.9,65.2H52V41.9c0-1.9,0.4-3.4,1.3-4.6c0.9-1.1,2-1.7,3.3-1.7h14v6.7H56.9v3.4h12.2v6.4H56.9V65.2z"/>
+			</g>
+			<g>
+				<path d="M36.4,65.2h-4.9V41.9c0-1.9,0.4-3.4,1.3-4.6c0.9-1.1,2-1.7,3.3-1.7h14v6.7H36.4v3.4h12.2v6.4H36.4V65.2z"/>
+			</g>
+		</g>
+		<polygon points="22.7,45.7 20.6,45.7 5.5,45.7 5.5,53.5 20.6,53.5 22.7,53.5 26,53.5 26,45.7 		"/>
+		<polygon points="90.8,45.7 88.7,45.7 73.7,45.7 73.7,53.5 88.7,53.5 90.8,53.5 94.1,53.5 94.1,45.7 		"/>
+		<polygon points="45.6,74.2 45.6,76.3 45.6,91.4 53.4,91.4 53.4,76.3 53.4,74.2 53.4,70.9 45.6,70.9 		"/>
+		<polygon points="45.6,11.2 45.6,13.3 45.6,28.3 53.4,28.3 53.4,13.3 53.4,11.2 53.4,7.9 45.6,7.9 		"/>
+		<path class="st0" d="M49.7,6.9C26.1,6.9,7,26,7,49.6s19.1,42.7,42.7,42.7s42.7-19.1,42.7-42.7S73.2,6.9,49.7,6.9z M49.7,84.4
+			c-19.2,0-34.8-15.6-34.8-34.8s15.6-34.8,34.8-34.8s34.8,15.6,34.8,34.8S68.9,84.4,49.7,84.4z"/>
+		<rect x="42.1" y="0.5" class="st0" width="15.1" height="12.3"/>
+		<rect x="42.1" y="88.2" class="st0" width="15.1" height="12.3"/>
+		
+			<rect x="-1.6" y="43.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -43.6743 55.5412)" class="st0" width="15.1" height="12.3"/>
+		
+			<rect x="86.1" y="43.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 43.9975 143.2129)" class="st0" width="15.1" height="12.3"/>
+	</g>
+</g>
+<g id="Capa_2" class="st1">
+	<g class="st2">
+		<g>
+			<path class="st3" d="M252.6,55.9c-1.2,8.4-1.2,16.8-2.5,25.2c-5.2,32.8-17.4,62.6-37.7,88.9c-29.5,38.3-67.8,63-114.9,73.8
+				c-19.9,4.5-40,5.4-60.4,3.7c-24.8-2.1-48.3-8.5-70.6-19.3c-14.8-7.2-28.4-16.4-41-27.1c-17-14.5-31.1-31.3-42.3-50.6
+				c-11.7-20-19.7-41.4-23.8-64.1c-1.9-10.3,0.9-13.9,11.2-15.9c8.3-1.6,16.5-3.6,25-3.8c6.8-0.2,9.8,2.1,11.2,8.9
+				c2.9,13.9,6.6,27.5,13.1,40.1c23,44.9,59.2,72.9,108.9,81.8c44.5,8,84.7-3.1,119.9-31.5c29.3-23.6,47.1-54.4,53.3-91.3
+				c7.1-42.4-3.2-81.1-29.1-115.3C149-72.3,116.9-91.1,78.2-97.5c-40.3-6.6-77.3,2.4-110.8,26.2c-9,6.4-16.7,14.1-25.5,22.8
+				c7.5-1.2,13.7-2.2,19.9-3.3c8.3-1.5,16.6-3.1,24.9-4.5c8.3-1.4,12.7,1.4,14.5,9.6C3-38.6,4.6-30.4,5.8-22.2
+				C6.9-14.5,2.9-9.7-3.8-8.6C-32-3.9-60.2,1.2-88.4,6.3c-9.9,1.8-19.9,3.5-29.8,5.5c-7.9,1.6-14.7-0.2-16.6-11.3
+				c-6.3-36.9-13-73.7-19.6-110.6c0-4,0-8,0-12c2.3-3.3,5.3-5.3,9.3-6c7.8-1.4,15.6-3,23.5-4.2c8.6-1.3,13,2,14.7,10.7
+				c1,5.4,1.9,10.7,2.9,16.1c1.7,9.6,3.5,19.2,4.9,27.3c2.2-1.7,4.9-3.4,7.3-5.5c2.4-2.1,4.5-4.4,6.7-6.7c21.9-22.7,48.3-38,78-48
+				c13.2-4.4,26.9-6.9,40.7-8.7c13.7,0,27.3,0,41,0c16.8,2.1,33.2,5.6,49.2,11.5c23.8,8.8,45.1,21.8,63.9,38.7
+				c14.2,12.9,26.3,27.6,36.3,44.1c13.3,22,21.9,45.6,26.1,71c1.4,8.5,1.4,17.2,2.6,25.7C252.6,47.9,252.6,51.9,252.6,55.9z"/>
+		</g>
+	</g>
+</g>
+<g id="Capa_5" class="st1">
+	<g class="st2">
+		<g>
+			<path d="M12.8,51.8c-3-11.5-6.3-22.9-9.4-34.4c-0.5-2.1-1.9-3.4-3.2-4.8c-1.2-1.2-0.4-5.9,0.8-9.9c1.7-0.1,6.5,7.4,6.1,8.7
+				c-0.6,2.1-0.4,3.9,0.2,6c0.7-2.8,0.7-3.9,2-5.6C15.2,4,22.9,0.3,32.6,0c8.1-0.2,4.1,1.5,12.1,2.7C53,3.9,61.2,2.9,69.5,0.2
+				c1.3-0.4,1.8,0.2,2.2,1.4c2.3,8.2,4.5,18.4,6.8,26.6c1.5,5.5,3,7.6,4.5,13.1c0.9,3.1,0.8,3.4-2.4,4.2c-4.9,1.2-9.9,1.3-15,0.9
+				c-10.2-0.8-8.3-3.7-18.6-3.7c-6.3,0-32.8,2.8-25.7,24.3c2.7,9.7,6.3,22.7,8.9,32.4c0.3,1-3.6,0.7-4.2-1.2
+				c-3.1-11.1-7.1-25.6-10.1-36.7c-0.1-0.3-0.2-0.5-0.4-1"/>
+		</g>
+	</g>
+</g>
+<g id="Capa_6" class="st1">
+	<path class="st4" d="M94.1,83.1l11.3-21.2h20.1v-6.5h-22.1c-1.2,0-2.3,0.7-2.9,1.7l-8.6,16.3l-9.8-28.5c-0.5-1.3-1.6-2.2-3-2.2
+		c-1.4,0-2.6,0.7-3.1,2l-8,18.9L57.9,2.7c-0.3-1.5-1.8-2.7-3.2-2.7c-1.8,0-3,1.1-3.2,2.6L42,76.8l-8.5-44.2
+		c-0.3-1.4-1.4-2.4-2.8-2.6c-1.4-0.2-2.8,0.6-3.4,1.8L16,55.4H-0.3v6.5h18.4c1.2,0,2.4-0.7,3-1.9l7.9-16.4l10.3,53.7
+		c0.3,1.5,1.7,2.7,3.2,2.7h0.1c1.6,0,2.9-1.2,3.1-2.8l9.4-74l8.5,52.3c0.3,1.4,1.4,2.5,2.8,2.6c1.5,0.2,2.8-0.6,3.4-2l8.9-21
+		l9.4,27.5c0.4,1.2,1.6,2.1,2.8,2.2C92.3,84.9,93.5,84.2,94.1,83.1z"/>
+</g>
+<g id="Capa_4" class="st1">
+	
+		<image style="display:inline;overflow:visible;" width="1022" height="139" xlink:href="3CE116CE.jpg"  transform="matrix(1 0 0 1 -794.4016 -358.8575)">
+	</image>
+	<rect x="-464.1" y="-295.8" class="st5" width="104.7" height="37"/>
+	<rect x="-470.4" y="-107.8" class="st5" width="44" height="37"/>
+	<g class="st2">
+		<polygon class="st6" points="-444,-89.3 -446.7,-89.3 -466.8,-89.3 -466.8,-86.9 -446.7,-86.9 -444,-86.9 -439.5,-86.9 
+			-439.5,-89.3 		"/>
+		<polygon class="st6" points="-454.4,-97.3 -454.4,-94.5 -454.4,-74.4 -451.9,-74.4 -451.9,-94.5 -451.9,-97.3 -451.9,-101.7 
+			-454.4,-101.7 		"/>
+		<path class="st6" d="M-453.2-102.4c-7.5,0-13.6,6.1-13.6,13.6s6.1,13.6,13.6,13.6s13.6-6.1,13.6-13.6S-445.7-102.4-453.2-102.4z
+			 M-453.2-77.6c-6.1,0-11.1-5-11.1-11.1s5-11.1,11.1-11.1s11.1,5,11.1,11.1S-447-77.6-453.2-77.6z"/>
+		<rect x="-455" y="-104.1" class="st6" width="3.6" height="3.9"/>
+		<rect x="-455" y="-76" class="st6" width="3.6" height="3.9"/>
+		
+			<rect x="-469" y="-90.1" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -379.1167 -555.3192)" class="st6" width="3.6" height="3.9"/>
+		
+			<rect x="-441" y="-90.1" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -351.0606 -527.2631)" class="st6" width="3.6" height="3.9"/>
+	</g>
+	<g class="st2">
+		<polygon class="st6" points="-445.3,-278.8 -447.5,-278.8 -463.9,-278.8 -463.9,-276.7 -447.5,-276.7 -445.3,-276.7 
+			-441.7,-276.7 -441.7,-278.8 		"/>
+		<polygon class="st6" points="-453.8,-284.7 -453.8,-282.5 -453.8,-266.1 -451.8,-266.1 -451.8,-282.5 -451.8,-284.7 
+			-451.8,-288.3 -453.8,-288.3 		"/>
+		<path class="st6" d="M-452.8-288.9c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1s11.1-5,11.1-11.1S-446.7-288.9-452.8-288.9z
+			 M-452.8-268.7c-5,0-9.1-4.1-9.1-9.1c0-5,4.1-9.1,9.1-9.1c5,0,9.1,4.1,9.1,9.1C-443.8-272.8-447.8-268.7-452.8-268.7z"/>
+		<rect x="-454.8" y="-290.3" class="st6" width="3.9" height="3.2"/>
+		<rect x="-454.8" y="-267.5" class="st6" width="3.9" height="3.2"/>
+		
+			<rect x="-466.2" y="-279.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -186.4478 -741.9766)" class="st6" width="3.9" height="3.2"/>
+		
+			<rect x="-443.4" y="-279.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -163.6597 -719.1885)" class="st6" width="3.9" height="3.2"/>
+	</g>
+	<rect x="-163.6" y="-295.8" class="st5" width="262.2" height="37"/>
+	<path class="st7" d="M-140.5-269.9l2.5-4.7h4.5v-1.5h-4.9c-0.3,0-0.5,0.1-0.6,0.4l-1.9,3.6l-2.2-6.3c-0.1-0.3-0.4-0.5-0.7-0.5
+		c-0.3,0-0.6,0.2-0.7,0.4l-1.8,4.2l-2.3-13.6c-0.1-0.3-0.4-0.6-0.7-0.6c-0.4,0-0.7,0.2-0.7,0.6l-2.1,16.5l-1.9-9.8
+		c-0.1-0.3-0.3-0.5-0.6-0.6c-0.3,0-0.6,0.1-0.8,0.4l-2.5,5.2h-3.6v1.5h4.1c0.3,0,0.5-0.2,0.7-0.4l1.8-3.7l2.3,12
+		c0.1,0.3,0.4,0.6,0.7,0.6h0c0.4,0,0.6-0.3,0.7-0.6l2.1-16.5l1.9,11.7c0.1,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.1,0.8-0.4l2-4.7l2.1,6.1
+		c0.1,0.3,0.3,0.5,0.6,0.5C-141-269.5-140.7-269.7-140.5-269.9z"/>
+	<g class="st2">
+		<g>
+			<path class="st6" d="M-91.7-368.9c-0.6-1.9-2-6.9-2.6-8.8c-1.8-5.9-3.7-11.7-5.5-17.6c-0.1-0.3,0-0.5,0.1-0.7
+				c0.4-0.5,0.7,0,1.1-0.5c0.2-0.3,0.4-0.4,0.7-0.6c1.4-1,3-1.5,4.7-1.5c0.6,0,1,0.2,1.2,0.7c0.1,0.2,0.6,0.6,1,0.7
+				c1.5,0.1,2.9-0.1,4.2-0.8c1.2-0.6,2.5-0.6,3.7-1.4c0.8-0.5,1.7-1.3,2.6-1.3c0.6,0,1.1,0,1.7,0.1c0.2,0,0.4,0.1,0.5,0.4
+				c1.7,4.6,3.2,8.3,4.9,12.9c0.2,0.5,0.2,0.2-0.4,0.1c-2.5-0.4-4.8,0.3-6.9,1.7c-1,0.7-1.6,1.3-2.7,1.8c-0.4,0.2-0.7,0.3-1.1,0.4
+				c-1.2,0.2-2.2-0.4-2.5-1.6c-0.1-0.3-0.6-0.5-0.9-0.6c-0.9-0.2-1.7,0-2.6,0.2c-1,0.3-2,0.7-2.9,1.1c-0.3,0.1-1.4,0.9-1.3,1.2
+				c1.1,3.3,3.1,9.8,4.2,13.1c0,0.1-0.1,0.1-0.1,0.2C-90.5-369.3-91.7-368.7-91.7-368.9z"/>
+		</g>
+	</g>
+	<g class="st2">
+		<g>
+			<path class="st6" d="M-46.4-374.3c-0.6-2-1.8-5.4-2.5-7.4c-2-6.2-3.9-12.4-5.9-18.7c-0.1-0.3-0.1-0.5,0.1-0.7
+				c0.4-0.5,0.8,0,1.1-0.6c0.2-0.3,0.5-0.5,0.7-0.7c1.5-1.1,3.1-1.6,4.9-1.6c0.6,0,2.6,0.2,2.8,0.8c0.1,0.2,0.7,0.7,1.1,0.7
+				c1.6,0.1,2.6,0,4-0.7c1.5-0.7,1.3-0.6,2.2-1.7c0.8-0.6,1.8-1.4,2.7-1.4c0.6,0,1.2,0,1.8,0.1c0.3,0,0.4,0.1,0.5,0.4
+				c1.8,4.9,2.9,7.2,4.7,12.1c0.2,0.6,0.2,0.2-0.4,0.1c-2.7-0.5-4.8-0.3-7,1.2c-1.1,0.7-2.6,1.4-3.8,1.9c-0.4,0.2-0.8,0.3-1.2,0.4
+				c-1.2,0.2-3.6-0.5-3.9-1.7c-0.1-0.3-1.2,0-2.1,0.3c-1.1,0.3-2.5,0.8-3.5,1.2c-0.1,0.3,0.8,2.5,0.9,2.8c1.2,3.5,2.8,8.5,3.9,12
+				c0,0.1-0.1,0.1-0.1,0.2C-45.1-374.8-46.3-374.2-46.4-374.3z"/>
+		</g>
+	</g>
+	<g class="st2">
+		<g>
+			<path class="st6" d="M-59.8-194.1c0.3-2.2,0.3-3.2,0.6-5.5c1-6.9,2-13.8,2.9-20.7c0-0.3,0.2-0.5,0.5-0.7c0.6-0.3,0.6,1.8,1.2,1.5
+				c0.3-0.2,0.7-0.2,1-0.3c1.9-0.4,3.7-0.1,5.5,0.7c0.6,0.3,2.4,1.4,2.3,2c0,0.2,0.7,1.1,1,1.4c1.5,1.2,2.2,1.1,3.9,1
+				c1.8,0,1.5,0,2.9-0.6c1.1-0.2,2.3-0.5,3.3-0.1c0.6,0.2,1.1,0.5,1.7,0.9c0.2,0.2,0.3,0.3,0.3,0.6c-0.6,5.6-0.3,6.8-0.9,12.3
+				c-0.1,0.6,0.1,0.3-0.4-0.1c-2.4-1.7-3.9-1.4-6.7-1.1c-1.4,0.2-3.2,0.1-4.5,0.1c-0.4,0-0.9-0.1-1.3-0.2c-1.3-0.3-3.4-1.7-4.3-3.1
+				c0.1-0.4-1.3-0.1-2.2-0.3c-1.2-0.2-2.2-0.7-3.4-0.7c-0.2,0.2-0.2,1.3-0.3,1.6c-0.5,4-0.7,7.1-1.2,11.1
+				C-57.9-194-59.8-193.9-59.8-194.1z"/>
+		</g>
+	</g>
+	<g class="st2">
+		<g>
+			<path class="st6" d="M-95.2-276.9c-0.7-2.8-1.5-5.5-2.3-8.2c-0.1-0.5-0.4-0.8-0.8-1.2c-0.3-0.3-0.1-1.4,0.2-2.4
+				c0.4,0,1.6,1.8,1.5,2.1c-0.1,0.5-0.1,0.9,0,1.4c0.2-0.7,0.2-0.9,0.5-1.3c1.4-1.9,3.3-2.8,5.6-2.8c1.9,0,1,0.4,2.9,0.6
+				c2,0.3,4,0.6,5.9-0.1c0.3-0.1,0.4,0,0.5,0.3c0.5,2,1.1,3.9,1.6,5.9c0.4,1.3,0.7,2.6,1.1,3.9c0.2,0.8,0.2,0.8-0.6,1
+				c-1.2,0.3-2.4,0.3-3.6,0.2c-2.4-0.2-2-0.9-4.5-0.9c-1.5,0-7.9-0.1-6.2,5c0.6,2.3,1.5,5.5,2.1,7.8c0.1,0.2-0.9,0.2-1-0.3
+				c-0.8-2.7-1.7-6.1-2.4-8.8c0-0.1-0.1-0.1-0.1-0.2"/>
+		</g>
+	</g>
+	<g class="st2">
+		<g>
+			<g>
+				<path class="st6" d="M-396.7-272.6h-1.4v-6.5c0-0.5,0.1-1,0.4-1.3c0.2-0.3,0.5-0.5,0.9-0.5h3.9v1.9h-3.8v1h3.4v1.8h-3.4V-272.6z
+					"/>
+			</g>
+			<g>
+				<path class="st6" d="M-402.5-272.6h-1.4v-6.5c0-0.5,0.1-1,0.4-1.3c0.2-0.3,0.5-0.5,0.9-0.5h3.9v1.9h-3.8v1h3.4v1.8h-3.4V-272.6z
+					"/>
+			</g>
+		</g>
+		<polygon class="st6" points="-406.3,-278.1 -406.9,-278.1 -411.1,-278.1 -411.1,-275.9 -406.9,-275.9 -406.3,-275.9 
+			-405.4,-275.9 -405.4,-278.1 		"/>
+		<polygon class="st6" points="-387.2,-278.1 -387.8,-278.1 -392,-278.1 -392,-275.9 -387.8,-275.9 -387.2,-275.9 -386.3,-275.9 
+			-386.3,-278.1 		"/>
+		<polygon class="st6" points="-399.9,-270.1 -399.9,-269.5 -399.9,-265.3 -397.7,-265.3 -397.7,-269.5 -397.7,-270.1 -397.7,-271 
+			-399.9,-271 		"/>
+		<polygon class="st6" points="-399.9,-287.8 -399.9,-287.2 -399.9,-283 -397.7,-283 -397.7,-287.2 -397.7,-287.8 -397.7,-288.7 
+			-399.9,-288.7 		"/>
+		<path class="st6" d="M-398.8-288.9c-6.6,0-11.9,5.3-11.9,11.9s5.3,11.9,11.9,11.9s11.9-5.3,11.9-11.9S-392.2-288.9-398.8-288.9z
+			 M-398.8-267.3c-5.4,0-9.7-4.4-9.7-9.7c0-5.4,4.4-9.7,9.7-9.7s9.7,4.4,9.7,9.7C-389-271.6-393.4-267.3-398.8-267.3z"/>
+		<rect x="-400.9" y="-290.7" class="st6" width="4.2" height="3.5"/>
+		<rect x="-400.9" y="-266.2" class="st6" width="4.2" height="3.5"/>
+		
+			<rect x="-413.1" y="-278.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -134.0071 -688.0044)" class="st6" width="4.2" height="3.5"/>
+		
+			<rect x="-388.6" y="-278.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -109.459 -663.4564)" class="st6" width="4.2" height="3.5"/>
+	</g>
+</g>
+</svg>

static/src/assets/icon/stats/respawn.svg

@@ -0,0 +1,193 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;}
+	.st2{display:inline;fill:#010002;}
+	.st3{display:inline;fill:#222222;}
+	.st4{fill:#FFFFFF;}
+	.st5{display:inline;fill:#FCFCFC;}
+</style>
+<g id="Capa_1" class="st0">
+	<polygon class="st1" points="190.1,27.1 148.1,27.1 -158.9,27.1 -158.9,65.1 148.1,65.1 190.1,65.1 258.1,65.1 258.1,27.1 	"/>
+	<polygon class="st1" points="29.8,-89.4 29.8,-47.4 29.8,259.6 67.8,259.6 67.8,-47.4 67.8,-89.4 67.8,-157.4 29.8,-157.4 	"/>
+	<path class="st2" d="M48.8-162.4c-115.2,0-208.5,93.3-208.5,208.5s93.3,208.5,208.5,208.5s208.5-93.3,208.5-208.5
+		S164-162.4,48.8-162.4z M48.8,216.1c-93.9,0-170-76.1-170-170s76.1-170,170-170s170,76.1,170,170S142.7,216.1,48.8,216.1z"/>
+	<rect x="12" y="-193.9" class="st2" width="73.7" height="60.3"/>
+	<rect x="12" y="234.6" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="-201.8" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -210.9903 -118.8479)" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="226.7" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 217.4746 309.6171)" class="st2" width="73.7" height="60.3"/>
+</g>
+<g id="Capa_3" class="st0">
+	<rect x="313.1" y="-192.9" style="display:inline;fill:none;" width="82.5" height="96.1"/>
+	<text transform="matrix(1 0 0 1.7 313.1425 -169.3731)" class="st1" style="font-family:'CharlieBrownM54'; font-size:36px;">F</text>
+	<rect x="430.1" y="-157.4" style="display:inline;fill:none;" width="82.5" height="96.1"/>
+	<text transform="matrix(1 0 0 1 430.1425 -121.3575)" class="st1" style="font-family:'Copy0865'; font-size:36px;">F</text>
+	<g class="st1">
+		<g>
+			<path d="M84,122.4H60.1V8.4c0-9.3,2.2-16.7,6.5-22.3c4.2-5.5,9.6-8.2,16-8.2h68.6v32.7H84v16.8h59.7v31H84V122.4z"/>
+		</g>
+		<g>
+			<path d="M-16.1,122.4H-40V8.4c0-9.3,2.2-16.7,6.5-22.3c4.2-5.5,9.6-8.2,16-8.2h68.6v32.7h-67.2v16.8h59.7v31h-59.7V122.4z"/>
+		</g>
+	</g>
+	<polygon class="st1" points="-83.2,27.1 -93.2,27.1 -166.9,27.1 -166.9,65.1 -93.2,65.1 -83.2,65.1 -66.9,65.1 -66.9,27.1 	"/>
+	<polygon class="st1" points="249.9,27.1 239.8,27.1 166.2,27.1 166.2,65.1 239.8,65.1 249.9,65.1 266.2,65.1 266.2,27.1 	"/>
+	<polygon class="st1" points="29.2,166.4 29.2,176.5 29.2,250.1 67.2,250.1 67.2,176.5 67.2,166.4 67.2,150.1 29.2,150.1 	"/>
+	<polygon class="st1" points="29.2,-141.6 29.2,-131.6 29.2,-57.9 67.2,-57.9 67.2,-131.6 67.2,-141.6 67.2,-157.9 29.2,-157.9 	"/>
+	<path class="st2" d="M48.8-162.4c-115.2,0-208.5,93.3-208.5,208.5s93.3,208.5,208.5,208.5s208.5-93.3,208.5-208.5
+		S164-162.4,48.8-162.4z M48.8,216.1c-93.9,0-170-76.1-170-170s76.1-170,170-170s170,76.1,170,170S142.7,216.1,48.8,216.1z"/>
+	<rect x="12" y="-193.9" class="st2" width="73.7" height="60.3"/>
+	<rect x="12" y="234.6" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="-201.8" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -210.9903 -118.8479)" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="226.7" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 217.4746 309.6171)" class="st2" width="73.7" height="60.3"/>
+</g>
+<g id="Capa_2">
+	<path d="M9.9,75.8c2.8,4.9,6.3,9.2,10.4,12.8c3.3,2.9,6.6,5.1,10.1,6.9c5.5,2.7,11.3,4.4,17.3,4.9c5.4,0.5,10.2,0.2,14.8-0.9
+		c11.5-2.7,21-9,28.2-18.7c4.8-6.5,8-14,9.2-22.5c0.2-1.1,0.2-2.2,0.3-3.3c0.1-1,0.1-2.1,0.3-3.1v-2.9c-0.1-1-0.2-2-0.3-3
+		c-0.1-1.2-0.2-2.4-0.4-3.5c-1-6.4-3.2-12.5-6.4-18c-2.4-4.2-5.4-7.9-8.9-11.2C80.1,8.9,74.8,5.6,69,3.4C65.4,2,61.4,1.1,57,0.5
+		H46.8c-3,0.4-6.5,1-9.9,2.2c-7.7,2.7-14,6.6-19.1,12.1l-0.3,0.3c-0.5,0.5-0.9,1-1.5,1.5c-0.5,0.4-1,0.8-1.4,1.1
+		c-0.2,0.1-0.3,0.3-0.5,0.4l-1.5,1.1L11,10.3C11,9.9,10.9,9.5,10.8,9c-0.2-0.9-0.3-1.9-0.5-2.9C10,4.5,9.4,4.1,7.9,4.4
+		C6.7,4.5,5.5,4.8,4.3,5C3.5,5.2,2.8,5.3,2,5.4C1.5,5.5,1,5.8,0.6,6.2v2.6C1.1,11.4,1.5,14,2,16.7c1.2,6.8,2.4,13.8,3.5,20.7
+		c0.1,0.9,0.4,1.5,0.9,1.8c0.4,0.3,1.1,0.4,2,0.2c2.2-0.5,4.5-0.9,6.7-1.3l0.8-0.1c1.7-0.3,3.4-0.6,5-0.9c5.3-1,10.8-2,16.3-2.9
+		c1.2-0.2,1.6-0.9,1.5-2.2C38.4,30,38,28,37.5,25.6c-0.3-1.5-0.8-1.9-2.3-1.6c-1.2,0.2-2.3,0.4-3.5,0.6c-0.9,0.2-1.9,0.4-2.8,0.5
+		c-1.1,0.2-2.1,0.4-3.3,0.6c-0.5,0.1-1.1,0.2-1.7,0.3l-3.5,0.6l2.5-2.6c2.1-2.2,4.1-4.3,6.5-6c8.7-6.4,18.4-8.7,28.7-7
+		c10.1,1.7,18.4,6.8,24.5,15.1c6.8,9.2,9.3,19.6,7.5,30.7c-1.6,9.9-6.2,18.1-13.8,24.3c-9.2,7.7-19.7,10.5-31,8.4
+		C32.7,87.3,23.2,80,17.2,67.9c-1.5-2.9-2.5-6.2-3.4-10.7c-0.2-1.1-0.5-1.4-1.5-1.4c-0.1,0-0.1,0-0.2,0c-1.7,0-3.4,0.4-5.1,0.8
+		c-0.3,0.1-0.6,0.1-1,0.2c-2,0.4-2.3,0.8-1.9,2.8C5.1,65.3,7.1,70.7,9.9,75.8z"/>
+</g>
+<g id="Capa_5" class="st0">
+	<g class="st1">
+		<g>
+			<path d="M-10.8-25.2c-8.3-31.5-17.4-62.8-25.7-94.3c-1.5-5.7-5.1-9.4-8.7-13.3c-3.2-3.4-1-16.2,2.1-27.1
+				c4.7-0.2,17.9,20.2,16.7,24c-1.7,5.6-1.1,10.8,0.5,16.4c2-7.8,1.9-10.6,5.5-15.4c16-21.4,37.4-31.7,64-32.4
+				c22.2-0.5,11.4,4.1,33.1,7.3c22.7,3.3,45.4,0.7,68-6.7c3.7-1.2,5,0.5,5.9,3.7c6.2,22.5,12.5,50.6,18.7,73
+				c4.2,15,8.2,20.9,12.5,35.9c2.4,8.6,2.3,9.5-6.6,11.6c-13.5,3.3-27.3,3.5-41.2,2.5C106-42,111.1-50,82.9-50.1
+				c-17.2-0.1-90.1,7.7-70.7,66.7c7.3,26.6,17.2,62.4,24.5,89c0.7,2.7-9.9,2-11.5-3.4C16.7,71.7,5.8,32-2.6,1.4
+				c-0.2-0.8-0.6-1.5-1.2-2.7"/>
+		</g>
+	</g>
+</g>
+<g id="Capa_6" class="st0">
+	<path class="st2" d="M161.2,154.7L201,79.8h71V56.7h-78c-4.2,0-8.2,2.4-10.1,6l-30.5,57.6L118.9,19.6c-1.6-4.6-5.7-7.7-10.5-7.8
+		c-4.8-0.2-9.2,2.6-11.1,7.1L69.1,85.7l-35.9-215c-0.9-5.3-6.2-9.7-11.4-9.4c-6.2,0.2-10.7,3.8-11.4,9.2l-33.2,262L-52.7-23.7
+		c-1-4.9-5-8.6-9.9-9.3c-4.8-0.7-9.7,2-11.9,6.5l-39.8,83.1H-172v23.1h64.8c4.4,0,8.5-2.6,10.5-6.6l27.8-57.9l36.4,189.6
+		c1.1,5.5,5.8,9.4,11.4,9.4h0.5c5.6-0.2,10.2-4.4,11-10L23.7-57l30,184.8c0.9,5,4.9,8.8,10,9.3c5.2,0.5,10-2.3,11.9-6.9l31.3-74.3
+		L140,153c1.6,4.3,5.5,7.4,10.1,7.9C154.8,161.1,159.1,158.7,161.2,154.7z"/>
+</g>
+<g id="Capa_4" class="st0">
+	
+		<image style="display:inline;overflow:visible;" width="1022" height="139" xlink:href="517432F1.jpg"  transform="matrix(1 0 0 1 -791.8575 -358.8575)">
+	</image>
+	<rect x="-461.5" y="-295.8" class="st3" width="104.7" height="37"/>
+	<rect x="-467.9" y="-107.8" class="st3" width="44" height="37"/>
+	<g class="st1">
+		<polygon class="st4" points="-441.4,-89.3 -444.2,-89.3 -464.3,-89.3 -464.3,-86.9 -444.2,-86.9 -441.4,-86.9 -437,-86.9 
+			-437,-89.3 		"/>
+		<polygon class="st4" points="-451.9,-97.3 -451.9,-94.5 -451.9,-74.4 -449.4,-74.4 -449.4,-94.5 -449.4,-97.3 -449.4,-101.7 
+			-451.9,-101.7 		"/>
+		<path class="st4" d="M-450.6-102.4c-7.5,0-13.6,6.1-13.6,13.6s6.1,13.6,13.6,13.6c7.5,0,13.6-6.1,13.6-13.6
+			S-443.1-102.4-450.6-102.4z M-450.6-77.6c-6.1,0-11.1-5-11.1-11.1s5-11.1,11.1-11.1c6.1,0,11.1,5,11.1,11.1
+			S-444.5-77.6-450.6-77.6z"/>
+		<rect x="-452.4" y="-104.1" class="st4" width="3.6" height="3.9"/>
+		<rect x="-452.4" y="-76" class="st4" width="3.6" height="3.9"/>
+		
+			<rect x="-466.5" y="-90.1" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -376.5727 -552.7751)" class="st4" width="3.6" height="3.9"/>
+		
+			<rect x="-438.4" y="-90.1" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -348.5165 -524.719)" class="st4" width="3.6" height="3.9"/>
+	</g>
+	<g class="st1">
+		<polygon class="st4" points="-442.7,-278.8 -445,-278.8 -461.3,-278.8 -461.3,-276.7 -445,-276.7 -442.7,-276.7 -439.1,-276.7 
+			-439.1,-278.8 		"/>
+		<polygon class="st4" points="-451.3,-284.7 -451.3,-282.5 -451.3,-266.1 -449.3,-266.1 -449.3,-282.5 -449.3,-284.7 
+			-449.3,-288.3 -451.3,-288.3 		"/>
+		<path class="st4" d="M-450.3-288.9c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1s11.1-5,11.1-11.1S-444.1-288.9-450.3-288.9z
+			 M-450.3-268.7c-5,0-9.1-4.1-9.1-9.1c0-5,4.1-9.1,9.1-9.1c5,0,9.1,4.1,9.1,9.1C-441.2-272.8-445.3-268.7-450.3-268.7z"/>
+		<rect x="-452.2" y="-290.3" class="st4" width="3.9" height="3.2"/>
+		<rect x="-452.2" y="-267.5" class="st4" width="3.9" height="3.2"/>
+		
+			<rect x="-463.6" y="-279.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -183.9038 -739.4326)" class="st4" width="3.9" height="3.2"/>
+		
+			<rect x="-440.8" y="-279.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -161.1157 -716.6445)" class="st4" width="3.9" height="3.2"/>
+	</g>
+	<rect x="-161" y="-295.8" class="st3" width="262.2" height="37"/>
+	<path class="st5" d="M-138-269.9l2.5-4.7h4.5v-1.5h-4.9c-0.3,0-0.5,0.1-0.6,0.4l-1.9,3.6l-2.2-6.3c-0.1-0.3-0.4-0.5-0.7-0.5
+		c-0.3,0-0.6,0.2-0.7,0.4l-1.8,4.2l-2.3-13.6c-0.1-0.3-0.4-0.6-0.7-0.6c-0.4,0-0.7,0.2-0.7,0.6l-2.1,16.5l-1.9-9.8
+		c-0.1-0.3-0.3-0.5-0.6-0.6c-0.3,0-0.6,0.1-0.8,0.4l-2.5,5.2h-3.6v1.5h4.1c0.3,0,0.5-0.2,0.7-0.4l1.8-3.7l2.3,12
+		c0.1,0.3,0.4,0.6,0.7,0.6h0c0.4,0,0.6-0.3,0.7-0.6l2.1-16.5l1.9,11.7c0.1,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.1,0.8-0.4l2-4.7l2.1,6.1
+		c0.1,0.3,0.3,0.5,0.6,0.5C-138.4-269.5-138.1-269.7-138-269.9z"/>
+	<g class="st1">
+		<g>
+			<path class="st4" d="M-89.2-368.9c-0.6-1.9-2-6.9-2.6-8.8c-1.8-5.9-3.7-11.7-5.5-17.6c-0.1-0.3,0-0.5,0.1-0.7
+				c0.4-0.5,0.7,0,1.1-0.5c0.2-0.3,0.4-0.4,0.7-0.6c1.4-1,3-1.5,4.7-1.5c0.6,0,1,0.2,1.2,0.7c0.1,0.2,0.6,0.6,1,0.7
+				c1.5,0.1,2.9-0.1,4.2-0.8c1.2-0.6,2.5-0.6,3.7-1.4c0.8-0.5,1.7-1.3,2.6-1.3c0.6,0,1.1,0,1.7,0.1c0.2,0,0.4,0.1,0.5,0.4
+				c1.7,4.6,3.2,8.3,4.9,12.9c0.2,0.5,0.2,0.2-0.4,0.1c-2.5-0.4-4.8,0.3-6.9,1.7c-1,0.7-1.6,1.3-2.7,1.8c-0.4,0.2-0.7,0.3-1.1,0.4
+				c-1.2,0.2-2.2-0.4-2.5-1.6c-0.1-0.3-0.6-0.5-0.9-0.6c-0.9-0.2-1.7,0-2.6,0.2c-1,0.3-2,0.7-2.9,1.1c-0.3,0.1-1.4,0.9-1.3,1.2
+				c1.1,3.3,3.1,9.8,4.2,13.1c0,0.1-0.1,0.1-0.1,0.2C-88-369.3-89.1-368.7-89.2-368.9z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st4" d="M-43.8-374.3c-0.6-2-1.8-5.4-2.5-7.4c-2-6.2-3.9-12.4-5.9-18.7c-0.1-0.3-0.1-0.5,0.1-0.7
+				c0.4-0.5,0.8,0,1.1-0.6c0.2-0.3,0.5-0.5,0.7-0.7c1.5-1.1,3.1-1.6,4.9-1.6c0.6,0,2.6,0.2,2.8,0.8c0.1,0.2,0.7,0.7,1.1,0.7
+				c1.6,0.1,2.6,0,4-0.7c1.5-0.7,1.3-0.6,2.2-1.7c0.8-0.6,1.8-1.4,2.7-1.4c0.6,0,1.2,0,1.8,0.1c0.3,0,0.4,0.1,0.5,0.4
+				c1.8,4.9,2.9,7.2,4.7,12.1c0.2,0.6,0.2,0.2-0.4,0.1c-2.7-0.5-4.8-0.3-7,1.2c-1.1,0.7-2.6,1.4-3.8,1.9c-0.4,0.2-0.8,0.3-1.2,0.4
+				c-1.2,0.2-3.6-0.5-3.9-1.7c-0.1-0.3-1.2,0-2.1,0.3c-1.1,0.3-2.5,0.8-3.5,1.2c-0.1,0.3,0.8,2.5,0.9,2.8c1.2,3.5,2.8,8.5,3.9,12
+				c0,0.1-0.1,0.1-0.1,0.2C-42.6-374.8-43.8-374.2-43.8-374.3z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st4" d="M-57.2-194.1c0.3-2.2,0.3-3.2,0.6-5.5c1-6.9,2-13.8,2.9-20.7c0-0.3,0.2-0.5,0.5-0.7c0.6-0.3,0.6,1.8,1.2,1.5
+				c0.3-0.2,0.7-0.2,1-0.3c1.9-0.4,3.7-0.1,5.5,0.7c0.6,0.3,2.4,1.4,2.3,2c0,0.2,0.7,1.1,1,1.4c1.5,1.2,2.2,1.1,3.9,1
+				c1.8,0,1.5,0,2.9-0.6c1.1-0.2,2.3-0.5,3.3-0.1c0.6,0.2,1.1,0.5,1.7,0.9c0.2,0.2,0.3,0.3,0.3,0.6c-0.6,5.6-0.3,6.8-0.9,12.3
+				c-0.1,0.6,0.1,0.3-0.4-0.1c-2.4-1.7-3.9-1.4-6.7-1.1c-1.4,0.2-3.2,0.1-4.5,0.1c-0.4,0-0.9-0.1-1.3-0.2c-1.3-0.3-3.4-1.7-4.3-3.1
+				c0.1-0.4-1.3-0.1-2.2-0.3c-1.2-0.2-2.2-0.7-3.4-0.7c-0.2,0.2-0.2,1.3-0.3,1.6c-0.5,4-0.7,7.1-1.2,11.1
+				C-55.4-194-57.2-193.9-57.2-194.1z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st4" d="M-92.6-276.9c-0.7-2.8-1.5-5.5-2.3-8.2c-0.1-0.5-0.4-0.8-0.8-1.2c-0.3-0.3-0.1-1.4,0.2-2.4
+				c0.4,0,1.6,1.8,1.5,2.1c-0.1,0.5-0.1,0.9,0,1.4c0.2-0.7,0.2-0.9,0.5-1.3c1.4-1.9,3.3-2.8,5.6-2.8c1.9,0,1,0.4,2.9,0.6
+				c2,0.3,4,0.6,5.9-0.1c0.3-0.1,0.4,0,0.5,0.3c0.5,2,1.1,3.9,1.6,5.9c0.4,1.3,0.7,2.6,1.1,3.9c0.2,0.8,0.2,0.8-0.6,1
+				c-1.2,0.3-2.4,0.3-3.6,0.2c-2.4-0.2-2-0.9-4.5-0.9c-1.5,0-7.9-0.1-6.2,5c0.6,2.3,1.5,5.5,2.1,7.8c0.1,0.2-0.9,0.2-1-0.3
+				c-0.8-2.7-1.7-6.1-2.4-8.8c0-0.1-0.1-0.1-0.1-0.2"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<g>
+				<path class="st4" d="M-394.2-272.6h-1.4v-6.5c0-0.5,0.1-1,0.4-1.3c0.2-0.3,0.5-0.5,0.9-0.5h3.9v1.9h-3.8v1h3.4v1.8h-3.4V-272.6z
+					"/>
+			</g>
+			<g>
+				<path class="st4" d="M-399.9-272.6h-1.4v-6.5c0-0.5,0.1-1,0.4-1.3c0.2-0.3,0.5-0.5,0.9-0.5h3.9v1.9h-3.8v1h3.4v1.8h-3.4V-272.6z
+					"/>
+			</g>
+		</g>
+		<polygon class="st4" points="-403.8,-278.1 -404.4,-278.1 -408.6,-278.1 -408.6,-275.9 -404.4,-275.9 -403.8,-275.9 
+			-402.8,-275.9 -402.8,-278.1 		"/>
+		<polygon class="st4" points="-384.7,-278.1 -385.3,-278.1 -389.5,-278.1 -389.5,-275.9 -385.3,-275.9 -384.7,-275.9 
+			-383.8,-275.9 -383.8,-278.1 		"/>
+		<polygon class="st4" points="-397.3,-270.1 -397.3,-269.5 -397.3,-265.3 -395.2,-265.3 -395.2,-269.5 -395.2,-270.1 -395.2,-271 
+			-397.3,-271 		"/>
+		<polygon class="st4" points="-397.3,-287.8 -397.3,-287.2 -397.3,-283 -395.2,-283 -395.2,-287.2 -395.2,-287.8 -395.2,-288.7 
+			-397.3,-288.7 		"/>
+		<path class="st4" d="M-396.2-288.9c-6.6,0-11.9,5.3-11.9,11.9s5.3,11.9,11.9,11.9s11.9-5.3,11.9-11.9S-389.6-288.9-396.2-288.9z
+			 M-396.2-267.3c-5.4,0-9.7-4.4-9.7-9.7c0-5.4,4.4-9.7,9.7-9.7s9.7,4.4,9.7,9.7C-386.5-271.6-390.8-267.3-396.2-267.3z"/>
+		<rect x="-398.3" y="-290.7" class="st4" width="4.2" height="3.5"/>
+		<rect x="-398.3" y="-266.2" class="st4" width="4.2" height="3.5"/>
+		
+			<rect x="-410.6" y="-278.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -131.4631 -685.4603)" class="st4" width="4.2" height="3.5"/>
+		
+			<rect x="-386" y="-278.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -106.915 -660.9123)" class="st4" width="4.2" height="3.5"/>
+	</g>
+</g>
+</svg>

static/src/assets/icon/stats/revive.svg

@@ -0,0 +1,198 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 125.8 100" style="enable-background:new 0 0 125.8 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;}
+	.st2{display:inline;fill:#010002;}
+	.st3{stroke:#FFFFFF;stroke-width:9;stroke-miterlimit:10;}
+	.st4{fill:#010002;}
+	.st5{display:inline;fill:#222222;}
+	.st6{fill:#FFFFFF;}
+	.st7{display:inline;fill:#FCFCFC;}
+</style>
+<g id="Capa_1" class="st0">
+	<polygon class="st1" points="187.9,27.1 145.9,27.1 -161.1,27.1 -161.1,65.1 145.9,65.1 187.9,65.1 255.9,65.1 255.9,27.1 	"/>
+	<polygon class="st1" points="27.6,-89.4 27.6,-47.4 27.6,259.6 65.6,259.6 65.6,-47.4 65.6,-89.4 65.6,-157.4 27.6,-157.4 	"/>
+	<path class="st2" d="M46.6-162.4c-115.2,0-208.5,93.3-208.5,208.5s93.3,208.5,208.5,208.5s208.5-93.3,208.5-208.5
+		S161.7-162.4,46.6-162.4z M46.6,216.1c-93.9,0-170-76.1-170-170s76.1-170,170-170s170,76.1,170,170S140.4,216.1,46.6,216.1z"/>
+	<rect x="9.7" y="-193.9" class="st2" width="73.7" height="60.3"/>
+	<rect x="9.7" y="234.6" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="-204" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -213.2508 -121.1083)" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="224.4" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 215.2142 307.3567)" class="st2" width="73.7" height="60.3"/>
+</g>
+<g id="Capa_3" class="st0">
+	<rect x="310.9" y="-192.9" style="display:inline;fill:none;" width="82.5" height="96.1"/>
+	<text transform="matrix(1 0 0 1.7 310.882 -169.3731)" class="st1" style="font-family:'CharlieBrownM54'; font-size:36px;">F</text>
+	<rect x="427.9" y="-157.4" style="display:inline;fill:none;" width="82.5" height="96.1"/>
+	<text transform="matrix(1 0 0 1 427.882 -121.3575)" class="st1" style="font-family:'Copy0865'; font-size:36px;">F</text>
+	<g class="st1">
+		<g>
+			<path d="M81.7,122.4H57.9V8.4c0-9.3,2.2-16.7,6.5-22.3c4.2-5.5,9.6-8.2,16-8.2h68.6v32.7H81.7v16.8h59.7v31H81.7V122.4z"/>
+		</g>
+		<g>
+			<path d="M-18.4,122.4h-23.9V8.4c0-9.3,2.2-16.7,6.5-22.3c4.2-5.5,9.6-8.2,16-8.2h68.6v32.7h-67.2v16.8h59.7v31h-59.7V122.4z"/>
+		</g>
+	</g>
+	<polygon class="st1" points="-85.4,27.1 -95.5,27.1 -169.1,27.1 -169.1,65.1 -95.5,65.1 -85.4,65.1 -69.1,65.1 -69.1,27.1 	"/>
+	<polygon class="st1" points="247.6,27.1 237.5,27.1 163.9,27.1 163.9,65.1 237.5,65.1 247.6,65.1 263.9,65.1 263.9,27.1 	"/>
+	<polygon class="st1" points="26.9,166.4 26.9,176.5 26.9,250.1 64.9,250.1 64.9,176.5 64.9,166.4 64.9,150.1 26.9,150.1 	"/>
+	<polygon class="st1" points="26.9,-141.6 26.9,-131.6 26.9,-57.9 64.9,-57.9 64.9,-131.6 64.9,-141.6 64.9,-157.9 26.9,-157.9 	"/>
+	<path class="st2" d="M46.6-162.4c-115.2,0-208.5,93.3-208.5,208.5s93.3,208.5,208.5,208.5s208.5-93.3,208.5-208.5
+		S161.7-162.4,46.6-162.4z M46.6,216.1c-93.9,0-170-76.1-170-170s76.1-170,170-170s170,76.1,170,170S140.4,216.1,46.6,216.1z"/>
+	<rect x="9.7" y="-193.9" class="st2" width="73.7" height="60.3"/>
+	<rect x="9.7" y="234.6" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="-204" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -213.2508 -121.1083)" class="st2" width="73.7" height="60.3"/>
+	
+		<rect x="224.4" y="15.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 215.2142 307.3567)" class="st2" width="73.7" height="60.3"/>
+</g>
+<g id="Capa_2" class="st0">
+	<g class="st1">
+		<g>
+			<path class="st3" d="M252.9,55.9c-1.2,8.4-1.2,16.8-2.5,25.2c-5.2,32.8-17.4,62.6-37.7,88.9c-29.5,38.3-67.8,63-114.9,73.8
+				c-19.9,4.5-40,5.4-60.4,3.7c-24.8-2.1-48.3-8.5-70.6-19.3c-14.8-7.2-28.4-16.4-41-27.1c-17-14.5-31.1-31.3-42.3-50.6
+				c-11.7-20-19.7-41.4-23.8-64.1c-1.9-10.3,0.9-13.9,11.2-15.9c8.3-1.6,16.5-3.6,25-3.8c6.8-0.2,9.8,2.1,11.2,8.9
+				c2.9,13.9,6.6,27.5,13.1,40.1c23,44.9,59.2,72.9,108.9,81.8c44.5,8,84.7-3.1,119.9-31.5c29.3-23.6,47.1-54.4,53.3-91.3
+				c7.1-42.4-3.2-81.1-29.1-115.3c-23.9-31.5-55.9-50.3-94.7-56.7c-40.3-6.6-77.3,2.4-110.8,26.2c-9,6.4-16.7,14.1-25.5,22.8
+				c7.5-1.2,13.7-2.2,19.9-3.3c8.3-1.5,16.6-3.1,24.9-4.5c8.3-1.4,12.7,1.4,14.5,9.6c1.8,8.1,3.4,16.2,4.6,24.4
+				C7.2-14.5,3.2-9.7-3.5-8.6C-31.8-3.9-60,1.2-88.2,6.3c-9.9,1.8-19.9,3.5-29.8,5.5c-7.9,1.6-14.7-0.2-16.6-11.3
+				c-6.3-36.9-13-73.7-19.6-110.6c0-4,0-8,0-12c2.3-3.3,5.3-5.3,9.3-6c7.8-1.4,15.6-3,23.5-4.2c8.6-1.3,13,2,14.7,10.7
+				c1,5.4,1.9,10.7,2.9,16.1c1.7,9.6,3.5,19.2,4.9,27.3c2.2-1.7,4.9-3.4,7.3-5.5c2.4-2.1,4.5-4.4,6.7-6.7c21.9-22.7,48.3-38,78-48
+				c13.2-4.4,26.9-6.9,40.7-8.7c13.7,0,27.3,0,41,0c16.8,2.1,33.2,5.6,49.2,11.5c23.8,8.8,45.1,21.8,63.9,38.7
+				c14.2,12.9,26.3,27.6,36.3,44.1c13.3,22,21.9,45.6,26.1,71c1.4,8.5,1.4,17.2,2.6,25.7C252.9,47.9,252.9,51.9,252.9,55.9z"/>
+		</g>
+	</g>
+</g>
+<g id="Capa_5" class="st0">
+	<g class="st1">
+		<g>
+			<path d="M-13.1-25.2c-8.3-31.5-17.4-62.8-25.7-94.3c-1.5-5.7-5.1-9.4-8.7-13.3c-3.2-3.4-1-16.2,2.1-27.1
+				c4.7-0.2,17.9,20.2,16.7,24c-1.7,5.6-1.1,10.8,0.5,16.4c2-7.8,1.9-10.6,5.5-15.4c16-21.4,37.4-31.7,64-32.4
+				c22.2-0.5,11.4,4.1,33.1,7.3c22.7,3.3,45.4,0.7,68-6.7c3.7-1.2,5,0.5,5.9,3.7c6.2,22.5,12.5,50.6,18.7,73
+				c4.2,15,8.2,20.9,12.5,35.9c2.4,8.6,2.3,9.5-6.6,11.6c-13.5,3.3-27.3,3.5-41.2,2.5c-28-2.1-22.8-10.1-51.1-10.2
+				C63.4-50.2-9.5-42.4,10,16.6c7.3,26.6,17.2,62.4,24.5,89c0.7,2.7-9.9,2-11.5-3.4C14.4,71.7,3.6,32-4.8,1.4C-5,0.6-5.5-0.1-6-1.4"
+				/>
+		</g>
+	</g>
+</g>
+<g id="Capa_6">
+	<path class="st4" d="M94.4,83.1l11.3-21.2h20.1v-6.5h-22.1c-1.2,0-2.3,0.7-2.9,1.7l-8.6,16.3l-9.8-28.5c-0.5-1.3-1.6-2.2-3-2.2
+		c-1.4,0-2.6,0.7-3.1,2l-8,18.9L58.1,2.7c-0.3-1.5-1.8-2.7-3.2-2.7c-1.8,0-3,1.1-3.2,2.6l-9.4,74.2l-8.5-44.2
+		c-0.3-1.4-1.4-2.4-2.8-2.6c-1.4-0.2-2.8,0.6-3.4,1.8L16.3,55.4H0v6.5h18.4c1.2,0,2.4-0.7,3-1.9l7.9-16.4l10.3,53.7
+		c0.3,1.5,1.7,2.7,3.2,2.7h0.1c1.6,0,2.9-1.2,3.1-2.8l9.4-74l8.5,52.3c0.3,1.4,1.4,2.5,2.8,2.6c1.5,0.2,2.8-0.6,3.4-2l8.9-21
+		l9.4,27.5c0.4,1.2,1.6,2.1,2.8,2.2C92.6,84.9,93.8,84.2,94.4,83.1z"/>
+</g>
+<g id="Capa_4" class="st0">
+	
+		<image style="display:inline;overflow:visible;" width="1022" height="139" xlink:href="D019D3CC.jpg"  transform="matrix(1 0 0 1 -794.1179 -358.8575)">
+	</image>
+	<rect x="-463.8" y="-295.8" class="st5" width="104.7" height="37"/>
+	<rect x="-470.1" y="-107.8" class="st5" width="44" height="37"/>
+	<g class="st1">
+		<polygon class="st6" points="-443.7,-89.3 -446.4,-89.3 -466.5,-89.3 -466.5,-86.9 -446.4,-86.9 -443.7,-86.9 -439.2,-86.9 
+			-439.2,-89.3 		"/>
+		<polygon class="st6" points="-454.1,-97.3 -454.1,-94.5 -454.1,-74.4 -451.6,-74.4 -451.6,-94.5 -451.6,-97.3 -451.6,-101.7 
+			-454.1,-101.7 		"/>
+		<path class="st6" d="M-452.9-102.4c-7.5,0-13.6,6.1-13.6,13.6s6.1,13.6,13.6,13.6c7.5,0,13.6-6.1,13.6-13.6
+			S-445.4-102.4-452.9-102.4z M-452.9-77.6c-6.1,0-11.1-5-11.1-11.1s5-11.1,11.1-11.1c6.1,0,11.1,5,11.1,11.1
+			S-446.8-77.6-452.9-77.6z"/>
+		<rect x="-454.7" y="-104.1" class="st6" width="3.6" height="3.9"/>
+		<rect x="-454.7" y="-76" class="st6" width="3.6" height="3.9"/>
+		
+			<rect x="-468.7" y="-90.1" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -378.8331 -555.0355)" class="st6" width="3.6" height="3.9"/>
+		
+			<rect x="-440.7" y="-90.1" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -350.777 -526.9794)" class="st6" width="3.6" height="3.9"/>
+	</g>
+	<g class="st1">
+		<polygon class="st6" points="-445,-278.8 -447.2,-278.8 -463.6,-278.8 -463.6,-276.7 -447.2,-276.7 -445,-276.7 -441.4,-276.7 
+			-441.4,-278.8 		"/>
+		<polygon class="st6" points="-453.5,-284.7 -453.5,-282.5 -453.5,-266.1 -451.5,-266.1 -451.5,-282.5 -451.5,-284.7 
+			-451.5,-288.3 -453.5,-288.3 		"/>
+		<path class="st6" d="M-452.5-288.9c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1c6.1,0,11.1-5,11.1-11.1S-446.4-288.9-452.5-288.9z
+			 M-452.5-268.7c-5,0-9.1-4.1-9.1-9.1c0-5,4.1-9.1,9.1-9.1c5,0,9.1,4.1,9.1,9.1C-443.5-272.8-447.5-268.7-452.5-268.7z"/>
+		<rect x="-454.5" y="-290.3" class="st6" width="3.9" height="3.2"/>
+		<rect x="-454.5" y="-267.5" class="st6" width="3.9" height="3.2"/>
+		
+			<rect x="-465.9" y="-279.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -186.1642 -741.693)" class="st6" width="3.9" height="3.2"/>
+		
+			<rect x="-443.1" y="-279.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -163.3761 -718.9049)" class="st6" width="3.9" height="3.2"/>
+	</g>
+	<rect x="-163.3" y="-295.8" class="st5" width="262.2" height="37"/>
+	<path class="st7" d="M-140.3-269.9l2.5-4.7h4.5v-1.5h-4.9c-0.3,0-0.5,0.1-0.6,0.4l-1.9,3.6l-2.2-6.3c-0.1-0.3-0.4-0.5-0.7-0.5
+		c-0.3,0-0.6,0.2-0.7,0.4l-1.8,4.2l-2.3-13.6c-0.1-0.3-0.4-0.6-0.7-0.6c-0.4,0-0.7,0.2-0.7,0.6l-2.1,16.5l-1.9-9.8
+		c-0.1-0.3-0.3-0.5-0.6-0.6c-0.3,0-0.6,0.1-0.8,0.4l-2.5,5.2h-3.6v1.5h4.1c0.3,0,0.5-0.2,0.7-0.4l1.8-3.7l2.3,12
+		c0.1,0.3,0.4,0.6,0.7,0.6h0c0.4,0,0.6-0.3,0.7-0.6l2.1-16.5l1.9,11.7c0.1,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.1,0.8-0.4l2-4.7l2.1,6.1
+		c0.1,0.3,0.3,0.5,0.6,0.5C-140.7-269.5-140.4-269.7-140.3-269.9z"/>
+	<g class="st1">
+		<g>
+			<path class="st6" d="M-91.4-368.9c-0.6-1.9-2-6.9-2.6-8.8c-1.8-5.9-3.7-11.7-5.5-17.6c-0.1-0.3,0-0.5,0.1-0.7
+				c0.4-0.5,0.7,0,1.1-0.5c0.2-0.3,0.4-0.4,0.7-0.6c1.4-1,3-1.5,4.7-1.5c0.6,0,1,0.2,1.2,0.7c0.1,0.2,0.6,0.6,1,0.7
+				c1.5,0.1,2.9-0.1,4.2-0.8c1.2-0.6,2.5-0.6,3.7-1.4c0.8-0.5,1.7-1.3,2.6-1.3c0.6,0,1.1,0,1.7,0.1c0.2,0,0.4,0.1,0.5,0.4
+				c1.7,4.6,3.2,8.3,4.9,12.9c0.2,0.5,0.2,0.2-0.4,0.1c-2.5-0.4-4.8,0.3-6.9,1.7c-1,0.7-1.6,1.3-2.7,1.8c-0.4,0.2-0.7,0.3-1.1,0.4
+				c-1.2,0.2-2.2-0.4-2.5-1.6c-0.1-0.3-0.6-0.5-0.9-0.6c-0.9-0.2-1.7,0-2.6,0.2c-1,0.3-2,0.7-2.9,1.1c-0.3,0.1-1.4,0.9-1.3,1.2
+				c1.1,3.3,3.1,9.8,4.2,13.1c0,0.1-0.1,0.1-0.1,0.2C-90.3-369.3-91.4-368.7-91.4-368.9z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st6" d="M-46.1-374.3c-0.6-2-1.8-5.4-2.5-7.4c-2-6.2-3.9-12.4-5.9-18.7c-0.1-0.3-0.1-0.5,0.1-0.7
+				c0.4-0.5,0.8,0,1.1-0.6c0.2-0.3,0.5-0.5,0.7-0.7c1.5-1.1,3.1-1.6,4.9-1.6c0.6,0,2.6,0.2,2.8,0.8c0.1,0.2,0.7,0.7,1.1,0.7
+				c1.6,0.1,2.6,0,4-0.7c1.5-0.7,1.3-0.6,2.2-1.7c0.8-0.6,1.8-1.4,2.7-1.4c0.6,0,1.2,0,1.8,0.1c0.3,0,0.4,0.1,0.5,0.4
+				c1.8,4.9,2.9,7.2,4.7,12.1c0.2,0.6,0.2,0.2-0.4,0.1c-2.7-0.5-4.8-0.3-7,1.2c-1.1,0.7-2.6,1.4-3.8,1.9c-0.4,0.2-0.8,0.3-1.2,0.4
+				c-1.2,0.2-3.6-0.5-3.9-1.7c-0.1-0.3-1.2,0-2.1,0.3c-1.1,0.3-2.5,0.8-3.5,1.2c-0.1,0.3,0.8,2.5,0.9,2.8c1.2,3.5,2.8,8.5,3.9,12
+				c0,0.1-0.1,0.1-0.1,0.2C-44.8-374.8-46-374.2-46.1-374.3z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st6" d="M-59.5-194.1c0.3-2.2,0.3-3.2,0.6-5.5c1-6.9,2-13.8,2.9-20.7c0-0.3,0.2-0.5,0.5-0.7c0.6-0.3,0.6,1.8,1.2,1.5
+				c0.3-0.2,0.7-0.2,1-0.3c1.9-0.4,3.7-0.1,5.5,0.7c0.6,0.3,2.4,1.4,2.3,2c0,0.2,0.7,1.1,1,1.4c1.5,1.2,2.2,1.1,3.9,1
+				c1.8,0,1.5,0,2.9-0.6c1.1-0.2,2.3-0.5,3.3-0.1c0.6,0.2,1.1,0.5,1.7,0.9c0.2,0.2,0.3,0.3,0.3,0.6c-0.6,5.6-0.3,6.8-0.9,12.3
+				c-0.1,0.6,0.1,0.3-0.4-0.1c-2.4-1.7-3.9-1.4-6.7-1.1c-1.4,0.2-3.2,0.1-4.5,0.1c-0.4,0-0.9-0.1-1.3-0.2c-1.3-0.3-3.4-1.7-4.3-3.1
+				c0.1-0.4-1.3-0.1-2.2-0.3c-1.2-0.2-2.2-0.7-3.4-0.7c-0.2,0.2-0.2,1.3-0.3,1.6c-0.5,4-0.7,7.1-1.2,11.1
+				C-57.7-194-59.5-193.9-59.5-194.1z"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<path class="st6" d="M-94.9-276.9c-0.7-2.8-1.5-5.5-2.3-8.2c-0.1-0.5-0.4-0.8-0.8-1.2c-0.3-0.3-0.1-1.4,0.2-2.4
+				c0.4,0,1.6,1.8,1.5,2.1c-0.1,0.5-0.1,0.9,0,1.4c0.2-0.7,0.2-0.9,0.5-1.3c1.4-1.9,3.3-2.8,5.6-2.8c1.9,0,1,0.4,2.9,0.6
+				c2,0.3,4,0.6,5.9-0.1c0.3-0.1,0.4,0,0.5,0.3c0.5,2,1.1,3.9,1.6,5.9c0.4,1.3,0.7,2.6,1.1,3.9c0.2,0.8,0.2,0.8-0.6,1
+				c-1.2,0.3-2.4,0.3-3.6,0.2c-2.4-0.2-2-0.9-4.5-0.9c-1.5,0-7.9-0.1-6.2,5c0.6,2.3,1.5,5.5,2.1,7.8c0.1,0.2-0.9,0.2-1-0.3
+				c-0.8-2.7-1.7-6.1-2.4-8.8c0-0.1-0.1-0.1-0.1-0.2"/>
+		</g>
+	</g>
+	<g class="st1">
+		<g>
+			<g>
+				<path class="st6" d="M-396.5-272.6h-1.4v-6.5c0-0.5,0.1-1,0.4-1.3c0.2-0.3,0.5-0.5,0.9-0.5h3.9v1.9h-3.8v1h3.4v1.8h-3.4V-272.6z
+					"/>
+			</g>
+			<g>
+				<path class="st6" d="M-402.2-272.6h-1.4v-6.5c0-0.5,0.1-1,0.4-1.3c0.2-0.3,0.5-0.5,0.9-0.5h3.9v1.9h-3.8v1h3.4v1.8h-3.4V-272.6z
+					"/>
+			</g>
+		</g>
+		<polygon class="st6" points="-406,-278.1 -406.6,-278.1 -410.8,-278.1 -410.8,-275.9 -406.6,-275.9 -406,-275.9 -405.1,-275.9 
+			-405.1,-278.1 		"/>
+		<polygon class="st6" points="-387,-278.1 -387.5,-278.1 -391.8,-278.1 -391.8,-275.9 -387.5,-275.9 -387,-275.9 -386,-275.9 
+			-386,-278.1 		"/>
+		<polygon class="st6" points="-399.6,-270.1 -399.6,-269.5 -399.6,-265.3 -397.4,-265.3 -397.4,-269.5 -397.4,-270.1 -397.4,-271 
+			-399.6,-271 		"/>
+		<polygon class="st6" points="-399.6,-287.8 -399.6,-287.2 -399.6,-283 -397.4,-283 -397.4,-287.2 -397.4,-287.8 -397.4,-288.7 
+			-399.6,-288.7 		"/>
+		<path class="st6" d="M-398.5-288.9c-6.6,0-11.9,5.3-11.9,11.9s5.3,11.9,11.9,11.9s11.9-5.3,11.9-11.9S-391.9-288.9-398.5-288.9z
+			 M-398.5-267.3c-5.4,0-9.7-4.4-9.7-9.7c0-5.4,4.4-9.7,9.7-9.7c5.4,0,9.7,4.4,9.7,9.7C-388.7-271.6-393.1-267.3-398.5-267.3z"/>
+		<rect x="-400.6" y="-290.7" class="st6" width="4.2" height="3.5"/>
+		<rect x="-400.6" y="-266.2" class="st6" width="4.2" height="3.5"/>
+		
+			<rect x="-412.8" y="-278.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -133.7235 -687.7208)" class="st6" width="4.2" height="3.5"/>
+		
+			<rect x="-388.3" y="-278.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -109.1754 -663.1727)" class="st6" width="4.2" height="3.5"/>
+	</g>
+</g>
+</svg>

static/src/assets/icon/stats/statsChart.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<g>
+	<path d="M19.1,83.5h16.4c1.3,0,2.3-1,2.3-2.2V44c0-1.2-1-2.2-2.3-2.2H19.1c-1.3,0-2.3,1-2.3,2.2v37.2
+		C16.8,82.5,17.8,83.5,19.1,83.5z"/>
+	<path d="M46.6,83.5h16.4c1.3,0,2.3-1,2.3-2.2v-79c0-1.2-1-2.2-2.3-2.2H46.6c-1.3,0-2.3,1-2.3,2.2v79C44.3,82.5,45.4,83.5,46.6,83.5
+		z"/>
+	<path d="M74.2,83.5h16.4c1.3,0,2.3-1,2.3-2.2V28.1c0-1.2-1-2.2-2.3-2.2H74.2c-1.3,0-2.3,1-2.3,2.2v53.2
+		C71.9,82.5,72.9,83.5,74.2,83.5z"/>
+	<polygon points="8.5,91.5 8.5,0 0,0 0,91.5 -0.3,91.5 -0.3,100 0,100 8.5,100 100,100 100,91.5 	"/>
+</g>
+</svg>

static/src/styles.css

@@ -40,17 +40,11 @@ form {
 }
 
 #left {
-  display: none;
+  max-width: 20%;
-  width: 20%;
+  min-width: 345px;
-  min-width: 350px;
+  margin: 0;
-  max-width: 450px;
+  position: static;
   float: left;
-  background: #f9f9f9;
-  box-shadow: 2px 1px 5px grey;
-}
-
-#left:not(:empty) {
-  display:block!important;
 }
 
 #right {