feat: new reset button

hodossy · May 18, 2021 · 01a1820 · 01a1820
1 parent 3658caa
commit 01a1820
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 135 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,4 @@
+package.json
+package-lock.json
+dist
+node_modules
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,8 +22,8 @@
     "@angular/platform-browser-dynamic": "~12.0.0",
     "@angular/router": "~12.0.0",
     "@angular/service-worker": "^12.0.0",
-    "rxjs": "^6.6.3",
-    "tslib": "^2.0.0",
+    "rxjs": "^6.6.7",
+    "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -32,8 +32,8 @@
     "@angular/compiler-cli": "~12.0.0",
     "@angular/language-service": "~12.0.0",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^14.11.5",
+    "@types/jasminewd2": "^2.0.9",
+    "@types/node": "^14.14.45",
     "angular-cli-ghpages": "^0.6.2",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
@@ -42,7 +42,8 @@
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "karma-jasmine-html-reporter": "^1.6.0",
+    "prettier": "^2.3.0",
     "protractor": "~7.0.0",
     "ts-node": "~9.0.0",
     "tslint": "~6.1.0",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,14 +1,7 @@
 <header>
-  <h2>
-    Who starts?
-  </h2>
+  <h2>Who starts?</h2>
   <span class="expand"></span>
-  <button
-    mat-icon-button
-    type="button"
-    name="settings"
-    (click)="openSettings()"
-  >
+  <button mat-icon-button type="button" name="settings" (click)="openSettings()">
     <mat-icon>more_vert</mat-icon>
   </button>
 </header>
@@ -19,42 +12,40 @@ <h2>
   (touchcancel)="onTouchEnd($event)"
   (click)="onClick($event)"
 >
-  <app-player-indicator
-    *ngFor="let player of players; first as isFirst"
-    [player]="player"
-    [class.first]="!settings.chooseColor && isFirst && finished"
-  >
-    <span>{{ player.assignedOrder }}</span>
-  </app-player-indicator>
-  <div *ngIf="!finished; else results">
-    <span
-      class="timer mat-display-4"
-      *ngIf="timer | async as timer; else instructions"
-      >{{ timer }}</span
-    >
+  <div class="instructions" *ngIf="!finished">
+    <span class="timer mat-display-4" *ngIf="timer | async as timer; else instructions">{{
+      timer
+    }}</span>
     <ng-template #instructions>
       <span class="mat-headline"
         >Tap to add or <br />
         remove players</span
       >
     </ng-template>
-    <div class="center" style="text-align: left;">
+    <div class="center" style="text-align: left">
       <mat-icon>touch_app</mat-icon>
     </div>
   </div>
-  <ng-template #results>
-    <div class="center" style="filter: none; -webkit-filter: none;">
-      <button
-        mat-raised-button
-        type="button"
-        color="accent"
-        class="reset"
-        name="reset"
-        (click)="reset($event)"
-      >
-        Reset
-      </button>
-    </div>
-  </ng-template>
+  <app-player-indicator
+    *ngFor="let player of players; first as isFirst"
+    [player]="player"
+    [class.first]="!settings.chooseColor && isFirst && finished"
+  >
+    <span>{{ player.assignedOrder }}</span>
+  </app-player-indicator>
 </main>
-<footer></footer>
+<footer>
+  <button
+    *ngIf="finished"
+    mat-fab
+    class="mat-elevation-z6"
+    type="button"
+    color="accent"
+    class="reset"
+    name="reset"
+    aria-label="Resets the players and their assigned values"
+    (click)="reset($event)"
+  >
+    <mat-icon>restart_alt</mat-icon>
+  </button>
+</footer>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -41,6 +41,11 @@ main {
     }
   }
 
+  .instructions {
+    cursor: default;
+    user-select: none;
+  }
+
   .reset {
     padding: 8px 32px;
     border-radius: 8px;
@@ -62,41 +67,7 @@ main {
 }
 
 footer {
-  text-align: center;
-  padding: 0 12px 12px 12px;
-
-  & > div {
-    overflow: hidden;
-    display: flex;
-    align-content: stretch;
-  }
-
-  input[type="number"]::-webkit-outer-spin-button,
-  input[type="number"]::-webkit-inner-spin-button {
-    display: none;
-  }
-
-  input[type="number"] {
-    -moz-appearance: textfield;
-    text-align: right;
-  }
-
-  .controls {
-    display: inline-block;
-    text-align: right;
-    flex: 1 1 auto;
-    max-width: 50%;
-    margin: 0;
-    padding: 0 8px 0 0;
-
-    mat-checkbox {
-      margin: 4px;
-    }
-
-    mat-form-field {
-      width: 100%;
-      max-width: 250px;
-      margin: 4px;
-    }
-  }
+  position: fixed;
+  bottom: 60px;
+  right: 60px;
 }
diff --git a/src/app/utils.ts b/src/app/utils.ts
@@ -4,7 +4,7 @@ export interface Point {
 }
 
 export function distance(p1: Point, p2: Point): number {
-  return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2)
+  return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
 }
 
 export function shuffleArray<T>(array: Array<T>): Array<T> {
@@ -19,19 +19,19 @@ export function shuffleArray<T>(array: Array<T>): Array<T> {
 }
 
 export function luminance(r: number, g: number, b: number): number {
-    var colorArray = [r, g, b];
-    var colorFactor: number;
-    var i: number;
-    for (i = 0; i < colorArray.length; i++) {
-        colorFactor = colorArray[i] / 255;
-        if (colorFactor <= 0.03928) {
-            colorFactor = colorFactor / 12.92;
-        } else {
-            colorFactor = Math.pow(((colorFactor + 0.055) / 1.055), 2.4);
-        }
-        colorArray[i] = colorFactor;
+  var colorArray = [r, g, b];
+  var colorFactor: number;
+  var i: number;
+  for (i = 0; i < colorArray.length; i++) {
+    colorFactor = colorArray[i] / 255;
+    if (colorFactor <= 0.03928) {
+      colorFactor = colorFactor / 12.92;
+    } else {
+      colorFactor = Math.pow((colorFactor + 0.055) / 1.055, 2.4);
     }
-    return (colorArray[0] * 0.2126 + colorArray[1] * 0.7152 + colorArray[2] * 0.0722) + 0.05;
+    colorArray[i] = colorFactor;
+  }
+  return colorArray[0] * 0.2126 + colorArray[1] * 0.7152 + colorArray[2] * 0.0722 + 0.05;
 }
 
 export function colorToRGBA(col: string): Array<number> {
@@ -40,7 +40,7 @@ export function colorToRGBA(col: string): Array<number> {
   const ctx = canvas.getContext('2d');
 
   if (!ctx) {
-    throw new Error('2DRenderingContext not available');
+    return [0, 0, 0, 0];
   }
 
   ctx.clearRect(0, 0, 1, 1);
@@ -53,10 +53,10 @@ export function colorToRGBA(col: string): Array<number> {
   ctx.fillStyle = '#fff';
   ctx.fillStyle = col;
   if (computed !== ctx.fillStyle) {
-    throw new Error(`Invalid computed color: ${ctx.fillStyle}`);
+    return [0, 0, 0, 0];
   }
   ctx.fillRect(0, 0, 1, 1);
-  return [ ... ctx.getImageData(0, 0, 1, 1).data ];
+  return [...ctx.getImageData(0, 0, 1, 1).data];
 }
 
 export function contrast(rgb1: Array<number>, rgb2: Array<number>): number {