Player positioning calculation + DS

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

@@ -18,9 +18,8 @@
             
             <ul class="field-setting">
                 <li *ngFor="let player of matchData.home.players"
-                [ngStyle]="{ 'top.px': player.position.y, 'left.px': player.position.x }">
+                [ngStyle]="{ 'top.%': getPosition(player.position.y), 'left.%': getPosition(player.position.x) }">
                     <img [src]="player.image">
-                    <h5> #{{ player.jersey }} {{ player.name }} </h5>
                 </li>
             </ul>
 

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

@@ -96,18 +96,16 @@ ion-content {
     list-style: none;
     padding: 0;
     margin: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
     width: 100%;
     height: 100%;
+    overflow: auto;
     
     li {
         position: absolute;
         
         img {
-            width: 30px;
-            height: 30px;
+            width: 50px;
+            height: 50px;
         }
 
         h5 {

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

@@ -53,17 +53,21 @@ export class MatchDetailsPage implements OnInit {
         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,
-        //         }
-        //     });
-        // }
+        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((45) * (Math.cos(theta[i]))),
+                    y: Math.round((40) * (Math.sin(theta[i]))),
+                }
+            });
+        }
+    }
+
+    getPosition(position) {
+        return ((90 / 2) - parseInt(position));
     }
 
     back() {

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

@@ -3,7 +3,11 @@ $blue-grey: #949599;
 
 ion-content {
     --background: transparent;
-    background-color: $dark-blue;    
+    background-color: $dark-blue;
+}
+
+.content-container {
+    margin-top: 65px;
 }
 
 .action-buttons {