feat: use finger paint everywhere

hodossy · Oct 13, 2020 · 0ec2bb8 · 0ec2bb8
1 parent fb379f6
commit 0ec2bb8
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 5 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -33,7 +33,7 @@ <h2>
       >{{ timer }}</span
     >
     <ng-template #instructions>
-      <span class="mat-display-1"
+      <span class="mat-headline"
         >Tap to add or <br />
         remove players</span
       >

diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss
@@ -6,6 +6,11 @@ section {
   display: flex;
   flex-direction: column;
   align-items: baseline;
+  font-size: 20px;
+
+  &>* {
+    margin-bottom: 8px;
+  }
 }
 
 .mat-caption {

diff --git a/src/app/settings/settings.service.ts b/src/app/settings/settings.service.ts
@@ -36,7 +36,7 @@ export class SettingsService {
   order: boolean;
   chooseColor: boolean;
   colors: Array<ColorChoice>;
-  countdown: number;
+  private _countdown: number;
 
   constructor(
     @Inject(DEFAULT_SETTINGS) _default: Settings
@@ -46,4 +46,16 @@ export class SettingsService {
     this.countdown = _default.countdown;
     this.colors = _default.colors;
   }
+
+  get countdown() {
+    return this._countdown;
+  }
+
+  set countdown(val: number) {
+    if (val && val > 3) {
+      this._countdown = val;
+    } else {
+      this._countdown = 3;
+    }
+  }
 }
diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/index.html b/src/index.html
@@ -7,12 +7,12 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="manifest" href="manifest.webmanifest">
   <meta name="theme-color" content="#e91e63">
 </head>
-<body class="app-background">
+<body class="app-background mat-typography">
   <app-root></app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>

diff --git a/src/styles.scss b/src/styles.scss
@@ -7,7 +7,7 @@
 // Define a custom typography config that overrides the font-family as well as the
 // `headlines` and `body-1` levels.
 $whostarts-typography: mat-typography-config(
-  $font-family:   'Roboto, "Helvetica Neue", sans-serif',
+  $font-family:   '"Finger Paint", cursive',
   $display-4:     mat-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
   $display-3:     mat-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
   $display-2:     mat-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
@@ -59,3 +59,7 @@ body {
   background-color: #2c3e50;
   color: #ecf0f1;
 }
+
+.mat-typography h2 {
+  margin: 16px 0;
+}