fix: minor misc ui and data

src/app/app.component.html

@@ -1,11 +1,10 @@
-<nav>
-  <ul ngbNav [activeId]="route.fragment | async" class="nav-tabs">
-    <li ngbNavItem="/edit"><a ngbNavLink routerLink="/edit" routerLinkActive="active"><i class="bi bi-pencil-square"></i>{{ data.getPlayers().length }}</a></li>
-    <li ngbNavItem="/basic"><a ngbNavLink routerLink="/basic" routerLinkActive="active"><i class="bi bi-shuffle"></i></a></li>
-    <li ngbNavItem="/rotations"><a ngbNavLink routerLink="/rotations" routerLinkActive="active"><i class="bi bi-arrow-repeat"></i></a></li>
-  </ul>
-</nav>
-<p></p>
 <main class="main">
     <router-outlet></router-outlet>
 </main>
+<nav>
+  <ul ngbNav [activeId]="route.fragment | async" class="nav-tabs custom-navbar bg-body-secondary">
+    <li ngbNavItem="/edit" class="custom-navitem"><a ngbNavLink routerLink="/edit" routerLinkActive="active"><i class="bi bi-pencil-square"></i>{{ data.getPlayers().length }}</a></li>
+    <li ngbNavItem="/basic" class="custom-navitem"><a ngbNavLink routerLink="/basic" routerLinkActive="active"><i class="bi bi-shuffle"></i></a></li>
+    <li ngbNavItem="/rotations" class="custom-navitem"><a ngbNavLink routerLink="/rotations" routerLinkActive="active"><i class="bi bi-arrow-repeat"></i></a></li>
+  </ul>
+</nav>

src/app/app.component.less

@@ -16,3 +16,23 @@ tr{
     word-break: break-all;
     white-space: normal;
 }
+.main{
+    margin-bottom: 5rem;
+    padding: 1rem;
+    overflow-y: auto;
+}
+.custom-navbar{
+    height: 3rem;
+    width: 100vw;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    justify-content: space-around; /* Distribute items evenly */
+    z-index: 1000;
+}
+.custom-navitem{
+    text-align: center; /* Center the content of each item */
+    flex: 1;
+}
+.nav-link.active{
+}

src/app/data.service.ts

@@ -8,11 +8,13 @@ export class DataService {
   private players: Player[] = [];
 
   setPlayers(players: Player[]){
-    this.players = players;
+    for (let player of players){
+      this.addPlayer(player);
+    }
   }
   
   addPlayer(player: Player): boolean{
-    if (Player.isNew(player, this.players)){
+    if (player.name.trim() && Player.isNew(player, this.players)){
       this.players.push(player);
       return true
     }