feat: better table formatting

created wrapper for SW to exclude paths because ngsw-config only
disables caching, but the SW would still handle the request

angular.json

@@ -30,7 +30,8 @@
               {
                 "glob": "**/*",
                 "input": "public"
-              }
+              },
+              "src/sw.js"
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",

ngsw-config.json

@@ -25,14 +25,6 @@
           "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
         ]
       }
-    },
-    {
-      "name": "excluded-redirects",
-      "installMode": "lazy",
-      "updateMode": "lazy",
-      "resources": {
-        "urls": [ "/**" ]
-      }
     }
   ]
 }

src/app/app.component.html

@@ -1,8 +1,3 @@
-<style>
-  *{
-    text-align: center;
-  }
-</style>
 <main class="main">
   <div class="row justify-content-md-center">
     <h1>Please select the number of teams:</h1>
@@ -40,7 +35,7 @@
   <button type="button" (click)="onButtonGenerate(playerNames.value)" class="btn btn-primary">Generate</button>
   </form>
 
-  <table class="table table-striped">
+  <table class="table table-striped custom-table">
     <thead>
       <tr>
         <th scope="col">Size</th>
@@ -50,8 +45,8 @@
     <tbody>
       @for (team of teamsArray; track $index) {
         <tr>
-          <td>{{ team.length | number }}</td>
+          <td style="text-wrap: wrap;">{{ team.length | number }}</td>
-          <td>{{ team }}</td>
+          <td class="wrap-cell">{{ team }}</td>
         </tr>
       }
     </tbody>

src/app/app.component.less

@@ -0,0 +1,11 @@
+*{
+    text-align: center;
+}
+.custom-table {
+    //table-layout: fixed;
+    width: 100%; /* Or a specific max-width */
+}
+.wrap-cell{
+    word-break: break-word;
+    white-space: normal;
+}

src/app/app.component.ts

@@ -23,7 +23,7 @@ export class AppComponent implements OnInit {
   constructor(private activatedRoute: ActivatedRoute){}
 
   ngOnInit(): void {
-    //consiedr using Angular's ActivatedRoute here instead
+    //TODO consider using Angular's ActivatedRoute here instead
     const params = new URLSearchParams(window.location.search);
     const names = params.get('names')?.replaceAll(',', '\n');
     if (names) this.playerNamesValue = names;

src/app/app.config.ts

@@ -7,9 +7,7 @@ import { provideAnimationsAsync } from '@angular/platform-browser/animations/asy
 import { provideServiceWorker } from '@angular/service-worker';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay()), provideAnimationsAsync('noop'), provideServiceWorker('./sw.js', {
-              provideClientHydration(withEventReplay()), provideAnimationsAsync('noop'),
-              provideServiceWorker('ngsw-worker.js', {
             enabled: !isDevMode(),
             registrationStrategy: 'registerWhenStable:30000'
           })]

src/sw.js

@@ -0,0 +1,12 @@
+self.addEventListener('fetch', event => {
+    if (event && 
+        event.request && 
+        event.request.url && 
+        // check if basename includes a dot, i.e. if it is not a file
+        ! event.request.url.split(/[\\/]/).pop().includes(".")
+    ) {
+      event.stopImmediatePropagation();
+    }
+  });
+  
+  self.importScripts('./ngsw-worker.js');