Converted player stats to import player details component

src/app/components/player-details/player-details.component.html

@@ -0,0 +1,87 @@
+<div class="container">
+    <section class="player-primary-data">
+    
+        <section class="details">
+            <div class="teams-holder">
+                <figure>
+                    <img src="assets/home-team/KXIP.svg" alt="">
+                </figure>
+                <figure>
+                    <img src="assets/home-team/india.png" alt="">
+                </figure>
+            </div>
+    
+            <h2 class="name"> KL Rahul </h2>
+            
+            <div class="role"> <ion-icon name="shirt-outline"></ion-icon> Batsman, <br> Wicket Keeper </div>
+        </section>
+    
+        <figure class="player-image">
+            <img src="assets/home-team/player.png" alt="">
+        </figure>
+    
+    </section>
+    
+    <ul class="statistics">
+        <li>
+            <label> Age </label>
+            <h5> 26 </h5>
+        </li>
+    
+        <li>
+            <label> Games </label>
+            <h5> 64 </h5>
+        </li>
+    
+        <li>
+            <label> Centuries </label>
+            <h5> 18 </h5>
+        </li>
+    </ul>
+    
+    <section class="news">
+        <header>
+           <span></span> <h4> Now discussing </h4>
+        </header>
+    
+        <ul>
+            <li>
+                <label> 30 <span> Jan </span> </label>
+                <p>
+                    KL Rahul wins the player of the season 2018 confirms BCCI
+                </p>
+                <button class="share-button"> <ion-icon name="share-social-outline"></ion-icon> </button>
+            </li>
+    
+            <li>
+                <label> 22 <span> Oct </span> </label>
+                <p>
+                    KL Rahul planning to head back to RCB
+                </p>
+                <button class="share-button"> <ion-icon name="share-social-outline"></ion-icon> </button>
+            </li>
+        </ul>        
+    </section>
+    
+    <section class="about">
+        <header> ABOUT </header>
+        <ul>
+            <li>
+                <label> Full name </label>
+                <p> KL Rahul </p>
+            </li>
+            <li>
+                <label> Age </label>
+                <p> 26 </p>
+            </li>
+            <li>
+                <label> Native </label>
+                <p> Mangaluru </p>
+            </li>
+            <li>
+                <label> Avg. Run rate </label>
+                <p> 43.64 </p>
+            </li>
+        </ul>
+    </section>
+</div>

src/app/components/player-details/player-details.component.scss

@@ -0,0 +1,314 @@
+$dark-blue: #161e2d;
+$blue-grey: #949599;
+
+.container {
+    background-color: $dark-blue;
+    padding-top: 40px;
+}
+
+.player-primary-data {
+    display: flex;
+    width: 95%;
+    padding-left: 5%;
+    position: relative;
+    
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-image: url('../../../assets/home-team/KXIP-lion-white.svg');
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        opacity: 0.1;
+    }
+    
+    .details {
+        width: 50%;
+        position: relative;
+    }
+    
+    .teams-holder {
+        position: relative;
+        z-index: 0;
+        display: flex;
+        justify-content: flex-start;
+
+        figure {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            position: relative;
+            z-index: 1;
+            margin: 0;
+            display: block;
+            overflow: hidden;
+            box-shadow: 0px 0px 5px $dark-blue;
+
+            &:nth-child(2) {
+                z-index: 0;
+                transform: translateX(-10px);
+            }
+            
+            img {
+                width: 100%;
+                height: 100%;
+                display: block;
+                transform: scale(1.5);
+            }
+        }
+    }
+
+    .name {
+        font-size: 2rem;
+        font-weight: 700;
+        letter-spacing: 1px;
+        color: white;
+    }
+
+    .role {
+        position: absolute;
+        bottom: 60px;
+        left: 0;
+        color: $blue-grey;
+        font-size: 1rem;
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+        line-height: 1.5;
+
+        ion-icon {
+            margin-right: 10px;
+            font-size: 2rem;
+            vertical-align: middle;
+            color: var(--brand-red);
+        }
+    }
+
+    .player-image {
+        width: 50%;
+        display: block;
+        height: 40vh;
+
+        img {
+            display: block;
+            object-fit: contain;
+            width: 100%;
+            height: 100%;
+            object-position: bottom;
+        }
+    }
+}
+
+.statistics {
+    display: flex;
+    width: 100%;
+    padding: 0 5%;
+    list-style: none;
+    margin: 0 auto -30px auto;
+    justify-content: space-between;
+    transform: translateY(-50px);
+    z-index: 1;
+    position: relative;
+    background-color: rgba($dark-blue, 0.8);
+    box-shadow: 0px -10px 10px rgba($dark-blue, 0.8);
+
+    li {
+        width: 27vw;
+        height: 27vw;
+        background-color: rgba($dark-blue, 0.8);
+        border: 1px solid rgba($blue-grey, 0.3);
+        display: flex;
+        border-radius: 10px;
+        color: white;
+        align-items: flex-end;
+        justify-content: space-between;
+        padding: 10px;
+        overflow: hidden;
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            background-color: rgba($blue-grey, 0.1);
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    label {
+        font-weight: 500;
+        font-size: 0.8rem;
+        align-self: flex-start;
+        width: 50%;
+        overflow: visible;
+        white-space: nowrap;
+        position: relative;
+    }
+
+    h5 {
+        width: 50%;
+        white-space: nowrap;
+        overflow: visible;
+        margin: 0;
+        font-weight: 700;
+        font-size: 1.8rem;
+        align-self: flex-end;
+        text-align: right;
+        position: relative;
+    }
+}
+
+.news {
+    width: 90%;
+    margin: 0 auto 20px auto;
+
+    header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        h4 {
+            color: #148dfc;
+            font-size: 0.8rem;
+            font-weight: 500;
+            letter-spacing: 0.5px;
+        }
+
+        span {
+            margin-right: 10px;
+            border: 7px solid #148dfc;
+            border-radius: 50%;
+            height: 25px;
+            width: 25px;
+            background-color: $dark-blue;
+        }
+    }
+
+    ul {
+        list-style: none;
+        padding: 0;
+        background-color: lighten($dark-blue, 5%);
+        box-shadow: 0px 0px 10px darken($dark-blue, 3%);
+        border-radius: 10px;
+        overflow: hidden;
+
+        li {
+            width: 90%;
+            margin: 0 auto;
+            padding: 15px 0px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid rgba($blue-grey, 0.2);
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        label {
+            width: 40px;
+            text-align: center;
+            color: white;
+            font-size: 0.8rem;
+            display: block;
+            line-height: 1.3;
+
+            span {
+                color: $blue-grey;
+                font-size: 0.8rem;
+                display: block;
+            }
+        }
+
+        p {
+            width: calc(100% - 100px);
+            font-size: 0.8rem;
+            color: white;
+            font-weight: 500;
+            line-height: 1.5;
+            margin: 0;
+        }
+
+        .share-button {
+            width: 30px;
+            height: 30px;
+            border: 1px solid $blue-grey;
+            background-color: rgba($blue-grey, 0.1);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 10px;
+
+            ion-icon {
+                color: $blue-grey;
+                font-size: 15px;
+            }
+        }
+    }
+}
+
+.about {
+    background-color: lighten($dark-blue, 5%);
+    box-shadow: 0px 0px 10px darken($dark-blue, 3%);
+    border-radius: 10px;
+    overflow: hidden;
+    width: 90%;
+    margin: 0 auto 40px auto;
+    padding: 0px 0px 5px 0px;
+
+    header {
+        font-size: 1rem;
+        font-weight: 500;
+        color: white;
+        padding: 15px 5%;
+        border-bottom: 1px solid rgba($blue-grey, 0.2);
+        margin: 0;
+    }
+
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0 auto;
+        width: 90%;
+    }
+
+    li {
+        padding: 10px 5px;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid rgba($blue-grey, 0.2);
+        text-align: left;
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    label {
+        color: $blue-grey;
+        font-size: 0.7rem;
+        display: block;
+        line-height: 1.3;
+        width: 100px;
+    }
+
+    p {
+        width: calc(100% - 100px);
+        font-size: 0.9rem;
+        color: white;
+        font-weight: 500;
+        line-height: 1.5;
+        margin: 0;
+        opacity: 0.8;
+    }
+}

src/app/components/player-details/player-details.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PlayerDetailsComponent } from './player-details.component';
+
+describe('PlayerDetailsComponent', () => {
+  let component: PlayerDetailsComponent;
+  let fixture: ComponentFixture<PlayerDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlayerDetailsComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PlayerDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/player-details/player-details.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-player-details',
+  templateUrl: './player-details.component.html',
+  styleUrls: ['./player-details.component.scss'],
+})
+export class PlayerDetailsComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {}
+
+}

src/app/live/live.page.html

@@ -34,17 +34,17 @@
 
         <ul class="statistical-pages">
             <li>
-                <label> Fixtures </label>
+                <label> Scorecard </label>
                 <button> + </button>
             </li>
 
             <li>
-                <label> Results </label>
+                <label> Statistical Analysis </label>
                 <button> + </button>
             </li>
 
             <li>
-                <label> Tours </label>
+                <label> Matches </label>
                 <button> + </button>
             </li>
         </ul>

src/app/match-details/match-details.module.ts

@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { MatchDetailsPageRoutingModule } from './match-details-routing.module';
 
 import { MatchDetailsPage } from './match-details.page';
+import { PlayerDetailsComponent } from '../components/player-details/player-details.component';
 
 @NgModule({
   imports: [
@@ -15,6 +16,6 @@ import { MatchDetailsPage } from './match-details.page';
     IonicModule,
     MatchDetailsPageRoutingModule
   ],
-  declarations: [MatchDetailsPage]
+  declarations: [MatchDetailsPage, PlayerDetailsComponent]
 })
 export class MatchDetailsPageModule {}

src/app/match-details/match-details.page.html

@@ -1,7 +1,7 @@
 <ion-content>
 
     <section class="action-buttons">
-        <div class="nav">
+        <div class="nav" (click)="back()">
             <button> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
         </div>
         <div class="action">
@@ -11,6 +11,25 @@
 
     <div class="content-container">
         
-    </div>
+        <div class="field-container">
+            <figure class="field-image">
+                <img src="assets/home-team/ground.svg">
+            </figure>
+            
+            <ul class="field-setting">
+                <li *ngFor="let player of matchData.home.players"
+                [ngStyle]="{ 'top.px': player.position.y, 'left.px': player.position.x }">
+                    <img [src]="player.image">
+                    <h5> #{{ player.jersey }} {{ player.name }} </h5>
+                </li>
+            </ul>
+
+        </div>
+
+        <section class="player-details" *ngIf="isPlayerSelected">
+            <app-player-details></app-player-details>
+        </section>
+
+    </div>    
 
 </ion-content>

src/app/match-details/match-details.page.scss

@@ -61,4 +61,68 @@ ion-content {
         }
     }
 
+}
+
+.field-container {
+    position: sticky;
+    position: -webkit-sticky;
+    left: 0;
+    margin-top: 65px;
+    top: 65px;
+    height: calc(100vh - 65px);
+    z-index: 0;
+}
+
+.field-image {    
+    display: block;
+    width: 100%;
+    height: 100%;  
+    z-index: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+    }
+}
+
+.field-setting {
+    position: relative;
+    z-index: 1;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    
+    li {
+        position: absolute;
+        
+        img {
+            width: 30px;
+            height: 30px;
+        }
+
+        h5 {
+            font-weight: 500;
+            letter-spacing: 0.5px;
+            color: $dark-blue;
+            font-size: 14px;
+        }
+    }
+}
+
+.player-details {
+    position: relative;
+    z-index: 1;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0px 0px 5px $dark-blue;
 }

src/app/match-details/match-details.page.ts

@@ -1,9 +1,15 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
 
 
 type IPlayer = {
     name: string,
     image: string,
+    jersey: string,
+    position: {
+        x: number,
+        y: number
+    }
 };
 
 type ITeam = {
@@ -12,11 +18,6 @@ type ITeam = {
     players: Array<IPlayer>
 };
 
-type IStadium = {
-    name: string,
-    topView: string,
-    sideView: string,
-};
 
 @Component({
     selector: 'app-match-details',
@@ -24,10 +25,49 @@ type IStadium = {
     styleUrls: ['./match-details.page.scss'],
 })
 export class MatchDetailsPage implements OnInit {
+    isPlayerSelected: string = '';
 
-    constructor() { }
+    matchData: {
+        home: ITeam,
+        away: ITeam,
+    };
+
+    constructor(
+        private location: Location
+    ) { }
 
     ngOnInit() {
+        this.matchData = {
+            home : {
+                name: 'KXIP',
+                image: 'assets/home-team/KXIP.svg',
+                players: []
+            },
+            away: {
+                name: 'MI',
+                image: 'assets/logos/mi.svg',
+                players: []
+            }
+        };
+
+        var theta = [0, Math.PI / 6, Math.PI / 4, Math.PI / 3, Math.PI / 2, 2 * (Math.PI / 3), 3 * (Math.PI / 4), 5 * (Math.PI / 6), Math.PI, 7 * (Math.PI / 6), 5 * (Math.PI / 4), 4 * (Math.PI / 3), 3 * (Math.PI / 2), 5 * (Math.PI / 3), 7 * (Math.PI / 4), 11 * (Math.PI / 6)];
+
+
+        // for (let i = 1; i < 12; i += 1) {
+        //     this.matchData.home.players.push({
+        //         name: 'Player ' + i.toString(),
+        //         image: 'assets/home-team/roster/' + i.toString() + '.png',
+        //         jersey: i.toString(),
+        //         position: {
+        //             x: Math.round(radius * (Math.cos(theta[i]))),
+        //             y: i*10,
+        //         }
+        //     });
+        // }
+    }
+
+    back() {
+        this.location.back();
     }
 
 }

src/app/player-stats/player-stats.module.ts

@@ -8,6 +8,8 @@ import { PlayerStatsPageRoutingModule } from './player-stats-routing.module';
 
 import { PlayerStatsPage } from './player-stats.page';
 
+import { PlayerDetailsComponent } from '../components/player-details/player-details.component';
+
 @NgModule({
   imports: [
     CommonModule,
@@ -15,6 +17,6 @@ import { PlayerStatsPage } from './player-stats.page';
     IonicModule,
     PlayerStatsPageRoutingModule
   ],
-  declarations: [PlayerStatsPage]
+  declarations: [PlayerStatsPage, PlayerDetailsComponent]
 })
 export class PlayerStatsPageModule {}

src/app/player-stats/player-stats.page.html

@@ -2,100 +2,16 @@
 
     <section class="action-buttons">
         <div class="nav">
-            <button> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
+            <button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
         </div>
         <div class="action">
             <button> <ion-icon name="share-social-outline"></ion-icon> </button>
             <button> <ion-icon name="bookmark-outline"></ion-icon> </button>
         </div>
-    </section>
-    
+    </section> 
+
     <div class="content-container">
-        <section class="player-primary-data">
-    
-            <section class="details">
-                <div class="teams-holder">
-                    <figure>
-                        <img src="assets/home-team/KXIP.svg" alt="">
-                    </figure>
-                    <figure>
-                        <img src="assets/home-team/india.png" alt="">
-                    </figure>
-                </div>
-        
-                <h2 class="name"> KL Rahul </h2>
-                
-                <div class="role"> <ion-icon name="shirt-outline"></ion-icon> Batsman, <br> Wicket Keeper </div>
-            </section>
-    
-            <figure class="player-image">
-                <img src="assets/home-team/player.png" alt="">
-            </figure>
-    
-        </section>
-    
-        <ul class="statistics">
-            <li>
-                <label> Age </label>
-                <h5> 26 </h5>
-            </li>
-    
-            <li>
-                <label> Games </label>
-                <h5> 64 </h5>
-            </li>
-    
-            <li>
-                <label> Centuries </label>
-                <h5> 18 </h5>
-            </li>
-        </ul>
-        
-        <section class="news">
-            <header>
-               <span></span> <h4> Now discussing </h4>
-            </header>
-    
-            <ul>
-                <li>
-                    <label> 30 <span> Jan </span> </label>
-                    <p>
-                        KL Rahul wins the player of the season 2018 confirms BCCI
-                    </p>
-                    <button class="share-button"> <ion-icon name="share-social-outline"></ion-icon> </button>
-                </li>
-    
-                <li>
-                    <label> 22 <span> Oct </span> </label>
-                    <p>
-                        KL Rahul planning to head back to RCB
-                    </p>
-                    <button class="share-button"> <ion-icon name="share-social-outline"></ion-icon> </button>
-                </li>
-            </ul>        
-        </section>
-    
-        <section class="about">
-            <header> ABOUT </header>
-            <ul>
-                <li>
-                    <label> Full name </label>
-                    <p> KL Rahul </p>
-                </li>
-                <li>
-                    <label> Age </label>
-                    <p> 26 </p>
-                </li>
-                <li>
-                    <label> Native </label>
-                    <p> Mangaluru </p>
-                </li>
-                <li>
-                    <label> Avg. Run rate </label>
-                    <p> 43.64 </p>
-                </li>
-            </ul>
-        </section>
+        <app-player-details></app-player-details>
     </div>
 
 </ion-content>

src/app/player-stats/player-stats.page.scss

@@ -62,312 +62,3 @@ ion-content {
     }
 
 }
-
-
-.player-primary-data {
-    display: flex;
-    width: 95%;
-    padding-left: 5%;
-    position: relative;
-    margin-top: 90px;
-    
-    &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background-image: url('../../assets/home-team/KXIP-lion-white.svg');
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
-        opacity: 0.1;
-    }
-    
-    .details {
-        width: 50%;
-        position: relative;
-    }
-    
-    .teams-holder {
-        position: relative;
-        z-index: 0;
-        display: flex;
-        justify-content: flex-start;
-
-        figure {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            position: relative;
-            z-index: 1;
-            margin: 0;
-            display: block;
-            overflow: hidden;
-            box-shadow: 0px 0px 5px $dark-blue;
-
-            &:nth-child(2) {
-                z-index: 0;
-                transform: translateX(-10px);
-            }
-            
-            img {
-                width: 100%;
-                height: 100%;
-                display: block;
-                transform: scale(1.5);
-            }
-        }
-    }
-
-    .name {
-        font-size: 2rem;
-        font-weight: 700;
-        letter-spacing: 1px;
-        color: white;
-    }
-
-    .role {
-        position: absolute;
-        bottom: 60px;
-        left: 0;
-        color: $blue-grey;
-        font-size: 1rem;
-        display: flex;
-        align-items: center;
-        font-weight: 500;
-        line-height: 1.5;
-
-        ion-icon {
-            margin-right: 10px;
-            font-size: 2rem;
-            vertical-align: middle;
-            color: var(--brand-red);
-        }
-    }
-
-    .player-image {
-        width: 50%;
-        display: block;
-        height: 40vh;
-
-        img {
-            display: block;
-            object-fit: contain;
-            width: 100%;
-            height: 100%;
-            object-position: bottom;
-        }
-    }
-}
-
-.statistics {
-    display: flex;
-    width: 100%;
-    padding: 0 5%;
-    list-style: none;
-    margin: 0 auto -30px auto;
-    justify-content: space-between;
-    transform: translateY(-50px);
-    z-index: 1;
-    position: relative;
-    background-color: rgba($dark-blue, 0.8);
-    box-shadow: 0px -10px 10px rgba($dark-blue, 0.8);
-
-    li {
-        width: 27vw;
-        height: 27vw;
-        background-color: rgba($dark-blue, 0.8);
-        border: 1px solid rgba($blue-grey, 0.3);
-        display: flex;
-        border-radius: 10px;
-        color: white;
-        align-items: flex-end;
-        justify-content: space-between;
-        padding: 10px;
-        overflow: hidden;
-        position: relative;
-
-        &::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            background-color: rgba($blue-grey, 0.1);
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    label {
-        font-weight: 500;
-        font-size: 0.8rem;
-        align-self: flex-start;
-        width: 50%;
-        overflow: visible;
-        white-space: nowrap;
-        position: relative;
-    }
-
-    h5 {
-        width: 50%;
-        white-space: nowrap;
-        overflow: visible;
-        margin: 0;
-        font-weight: 700;
-        font-size: 1.8rem;
-        align-self: flex-end;
-        text-align: right;
-        position: relative;
-    }
-}
-
-.news {
-    width: 90%;
-    margin: 0 auto 20px auto;
-
-    header {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-
-        h4 {
-            color: #148dfc;
-            font-size: 0.8rem;
-            font-weight: 500;
-            letter-spacing: 0.5px;
-        }
-
-        span {
-            margin-right: 10px;
-            border: 7px solid #148dfc;
-            border-radius: 50%;
-            height: 25px;
-            width: 25px;
-            background-color: $dark-blue;
-        }
-    }
-
-    ul {
-        list-style: none;
-        padding: 0;
-        background-color: lighten($dark-blue, 5%);
-        box-shadow: 0px 0px 10px darken($dark-blue, 3%);
-        border-radius: 10px;
-        overflow: hidden;
-
-        li {
-            width: 90%;
-            margin: 0 auto;
-            padding: 15px 0px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            border-bottom: 1px solid rgba($blue-grey, 0.2);
-
-            &:last-child {
-                border-bottom: none;
-            }
-        }
-
-        label {
-            width: 40px;
-            text-align: center;
-            color: white;
-            font-size: 0.8rem;
-            display: block;
-            line-height: 1.3;
-
-            span {
-                color: $blue-grey;
-                font-size: 0.8rem;
-                display: block;
-            }
-        }
-
-        p {
-            width: calc(100% - 100px);
-            font-size: 0.8rem;
-            color: white;
-            font-weight: 500;
-            line-height: 1.5;
-            margin: 0;
-        }
-
-        .share-button {
-            width: 30px;
-            height: 30px;
-            border: 1px solid $blue-grey;
-            background-color: rgba($blue-grey, 0.1);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-left: 10px;
-
-            ion-icon {
-                color: $blue-grey;
-                font-size: 15px;
-            }
-        }
-    }
-}
-
-.about {
-    background-color: lighten($dark-blue, 5%);
-    box-shadow: 0px 0px 10px darken($dark-blue, 3%);
-    border-radius: 10px;
-    overflow: hidden;
-    width: 90%;
-    margin: 0 auto 40px auto;
-    padding: 0px 0px 5px 0px;
-
-    header {
-        font-size: 1rem;
-        font-weight: 500;
-        color: white;
-        padding: 15px 5%;
-        border-bottom: 1px solid rgba($blue-grey, 0.2);
-        margin: 0;
-    }
-
-    ul {
-        list-style: none;
-        padding: 0;
-        margin: 0 auto;
-        width: 90%;
-    }
-
-    li {
-        padding: 10px 5px;
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid rgba($blue-grey, 0.2);
-        text-align: left;
-
-        &:last-child {
-            border-bottom: none;
-        }
-    }
-
-    label {
-        color: $blue-grey;
-        font-size: 0.7rem;
-        display: block;
-        line-height: 1.3;
-        width: 100px;
-    }
-
-    p {
-        width: calc(100% - 100px);
-        font-size: 0.9rem;
-        color: white;
-        font-weight: 500;
-        line-height: 1.5;
-        margin: 0;
-        opacity: 0.8;
-    }
-}

src/app/player-stats/player-stats.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
 
 @Component({
     selector: 'app-player-stats',
@@ -7,9 +8,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PlayerStatsPage implements OnInit {
 
-    constructor() { }
+    constructor(
+        private location: Location
+    ) { }
 
     ngOnInit() {
     }
 
+    back() {
+        this.location.back();
+    }
+
 }