Added some funky colors and random sounds

src/app/app.component.scss

@@ -9,6 +9,8 @@
     "content"
     "reclame";
   grid-template-rows: auto 1fr $reclameheight;
+  background-color: lightsteelblue;
+
 }
 
 app-reclamespinner {
@@ -24,6 +26,12 @@ app-topmenu {
   overflow: auto !important;
 
   grid-template-columns: 1fr 1fr;
+
+  margin: 10px;
+
+  box-shadow: 0 5px 6px 2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  background-color: floralwhite;
 }
 
 

src/app/content/poule/poule.component.html

@@ -8,8 +8,8 @@
   <!--</ng-container>-->
   <div class="toplevelheader" [ngStyle]="{'grid-column': 2, 'grid-row' : 1}">penalty</div>
   <div class="toplevelheader" [ngStyle]="{'grid-column': 3, 'grid-row' : 1}">racetijd</div>
-  <div class="toplevelheader" [ngStyle]="{'grid-column': 4, 'grid-row' : 1}">penalised</div>
-  <div class="toplevelheader" [ngStyle]="{'grid-column': 5, 'grid-row' : 1}">result</div>
+  <div class="toplevelheader" [ngStyle]="{'grid-column': 4, 'grid-row' : 1}">plus penalty</div>
+  <div class="toplevelheader" [ngStyle]="{'grid-column': 5, 'grid-row' : 1}">totaaltijd</div>
 
 
   <!--start looping over teams, make a block for each-->

src/app/content/poule/poule.component.scss

@@ -40,6 +40,7 @@
 }
 .resultcell {
   font-size: 120%;
+  font-weight: bold;
 }
 .timerank0 {
   color: #1dd21d;
@@ -49,3 +50,7 @@
   color :darkorange;
   font-weight: bold;
 }
+.total-poule {
+  margin-left: 10px;
+  margin-right: 10px;
+}

src/app/reclamespinner/reclamespinner.component.ts

@@ -36,7 +36,10 @@ export class ReclamespinnerComponent implements OnInit {
 
   playAudio() {
     const audio = new Audio();
-    audio.src = 'assets/sounds/nature2.wav';
+    // pick a random one
+    const number = Math.floor((Math.random() * 7) + 1);
+
+    audio.src = 'assets/sounds/car' + number + '.wav';
     audio.load();
     audio.play();
   }