feat: remove players

angular.json

@@ -35,6 +35,7 @@
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/bootstrap-icons/font/bootstrap-icons.min.css",
               "src/styles.less"
             ],
             "scripts": [],

package-lock.json

@@ -23,6 +23,7 @@
         "@ng-bootstrap/ng-bootstrap": "^18.0.0",
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.3",
+        "bootstrap-icons": "^1.13.1",
         "express": "^4.18.2",
         "rxjs": "~7.8.0",
         "sonarqube-scanner": "^4.3.0",
@@ -6249,6 +6250,22 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+      "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -27,6 +27,7 @@
     "@ng-bootstrap/ng-bootstrap": "^18.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.13.1",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "sonarqube-scanner": "^4.3.0",

src/app/data.service.ts

@@ -18,6 +18,12 @@ export class DataService {
     }
     return false
   }
+  removePlayer(player: Player){
+    const index = this.players.indexOf(player);
+    if (index !== -1) {
+      this.players.splice(index, 1);
+    }
+  }
   getPlayers(): Player[] {
     let clone =Object.assign([],this.players);
     return clone

src/app/screen-edit/screen-edit.component.html

@@ -18,8 +18,11 @@
 <div class="container mt-4">
   <ul class="list-group mb-3">
       @for (player of data.getPlayers(); track $index) {
-        <li class="list-group-item">
+        <li class="list-group-item d-flex justify-content-between">
             <a (click)="openPlayerModal(player)" style="display: block; cursor: pointer;">{{ player.name }}</a>
+            <button (click)="removeItem(player)" class="btn btn-secondary btn-sm p-0" style="width: 24px; height: 24px" >
+              <i class="bi bi-x"></i>
+            </button>
         </li>
       }
   </ul>

src/app/screen-edit/screen-edit.component.ts

@@ -44,6 +44,9 @@ export class ScreenEditComponent {
       }
     }
   }
+  removeItem(player: Player){
+    this.data.removePlayer(player);
+  }
 
   openPlayerModal(player: Player){
     const modalRef = this.modalService.open(ModalRotationsComponent);