Add new background

src/app/menu/menu.component.html

@@ -3,15 +3,14 @@
     <h1>A Fake Artist</h1>
     <h2>Companion App</h2>
   </header>
-
   <div class="playerNumberContainer">
     <span class="instructions">Select number of players:</span>
     <div class="playerNumber">
-      <button mat-icon-button color="primary" (click)="numberDown()">
+      <button mat-icon-button color="basic" (click)="numberDown()">
         <mat-icon>remove</mat-icon>
       </button>
       <span>{{playerNumber}}</span>
-      <button mat-icon-button color="primary" (click)="numberUp()">
+      <button mat-icon-button color="basic" (click)="numberUp()">
         <mat-icon>add</mat-icon>
       </button>
     </div>
@@ -26,9 +25,9 @@ <h2>Companion App</h2>
     <span>{{errorMessage}}</span>
   </div>
   <div class="buttons">
-    <button mat-raised-button color="primary" (click)="playOnlineJoin()">Join</button>
-    <button mat-raised-button color="primary" (click)="playOnlineCreate()">Create</button>
+    <button mat-raised-button color="basic" (click)="playOnlineJoin()" class="button-join">Join</button>
+    <button mat-raised-button color="basic" (click)="playOnlineCreate()" class="button-create">Create</button>
     <br />
-    <button mat-raised-button color="primary" (click)="playOffline()">Play Offline</button>
+    <button mat-raised-button color="basic" (click)="playOffline()" class="button-offline">Play Offline</button>
   </div>
 </div>

src/app/menu/menu.component.scss

@@ -1,12 +1,3 @@
-.container {
-  margin: auto;
-  width: 100%;
-  max-width: 768px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-}
 header {
   h1 {
     font-size: 2rem;
@@ -26,6 +17,7 @@ header {
   max-width: 150px;
   margin-left: auto;
   margin-right: auto;
+  margin-top: 5px;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
@@ -45,3 +37,17 @@ header {
   margin-top: -5px;
   margin-bottom: 10px;
 }
+.buttons {
+  .button-join {
+    width: 97px;
+    margin-right: 3px;
+  }
+  .button-create {
+    width: 97px;
+    margin-left: 3px;
+  }
+  .button-offline {
+    width: 200px;
+    margin-top: 6px;
+  }
+}

src/app/menu/menu.component.ts

@@ -66,6 +66,9 @@ export class MenuComponent implements OnInit {
         state: { online: true, fake: roomInfo.fake, totalPlayers: roomInfo.limit, prompt: roomInfo.prompt, thisPlayer }
       });
     } catch (error) {
+      if (error.code === 'unavailable') {
+        error = 'Internet disconnected';
+      }
       this.errorMessage = error;
     }
   }

src/app/play/play.component.html

@@ -8,15 +8,15 @@ <h1>{{prompt.category}}</h1>
     </div>
   </div>
   <div class="playerNumber">
-    <button mat-icon-button color="primary" (click)="numberDown()" *ngIf="!online">
+    <button mat-icon-button color="basic" (click)="numberDown()" *ngIf="!online">
       <mat-icon>remove</mat-icon>
     </button>
     <span>{{thisPlayer}} / {{totalPlayers}}</span>
-    <button mat-icon-button color="primary" (click)="numberUp()" *ngIf="!online">
+    <button mat-icon-button color="basic" (click)="numberUp()" *ngIf="!online">
       <mat-icon>add</mat-icon>
     </button>
   </div>
   <div class="backButton">
-    <button (click)="back()" mat-raised-button color="primary">Back</button>
+    <button (click)="back()" mat-raised-button color="basic">Back</button>
   </div>
 </div>

src/app/play/play.component.scss

@@ -1,12 +1,3 @@
-.container {
-  margin: auto;
-  width: 100%;
-  max-width: 768px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-}
 .category {
   h1 {
     margin: 0;
@@ -21,9 +12,8 @@
   padding-bottom: 20px;
   width: 200px;
   margin: auto;
-  background-color: #9b27b0;
-  color: white;
-  //border: 2px solid black;
+  background-color: white;
+  color: black;
   border-radius: 4px;
   box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 }

src/ngsw-config.json

@@ -6,15 +6,16 @@
       "installMode": "prefetch",
       "resources": {
         "files": [
-          "/favicon.ico",
+          "/assets/icons/icon-72x72.png",
           "/index.html",
           "/*.css",
           "/*.js"
         ]
       }
-    }, {
+    },
+    {
       "name": "assets",
-      "installMode": "lazy",
+      "installMode": "prefetch",
       "updateMode": "prefetch",
       "resources": {
         "files": [

src/styles.scss

@@ -16,16 +16,28 @@ body {
   -ms-user-select: none;
   font-family: $font-family;
   background-image: url("assets/background.jpg");
-  background-image: -webkit-image-set(url("assets/background1x.webp") 1x,
-    url("assets/background2x.webp") 2x);
-  background-image: image-set(url("assets/background1x.webp") 1x,
-    url("assets/background2x.webp") 2x);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
+}
 
+app-menu, app-play {
+  height: 100%;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
+
+.container {
+  padding: 40px;
+  margin: auto;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+
+  background-color: #FFFFFFDD;
+  border-radius: 4px;
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}