feat: add game disabled state (#489)

* disabled most things

* feat: improve it a lot

* chore: derp

.circleci/config.yml

@@ -402,6 +402,7 @@ jobs:
             # - SERVER_IMAGE_TAG
             
             npm run docker:e2e:start-environment-build-server
+            
       - run: 
           name: Retag and push tested client image
           command: |

apps/client/src/app/shared/modules/add-game/add-game.module.ts

@@ -5,7 +5,7 @@ import {DialogDataComponent} from './components/dialog-data/dialog-data.componen
 import {DialogOverviewComponent} from './components/dialog-overview/dialog-overview.component';
 import {CustomTranslateModule} from '../translate/custom-translate.module';
 import {ButtonModule} from '../button/button.module';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {GameResultComponent} from './components/dialog-data/game-result/game-result.component';
 import {FormModule} from '../form/form.module';
 import {GridModule} from '../grid/grid.module';
@@ -42,7 +42,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
     GridModule,
     TransitionModule,
     MatChipsModule,
-    MatFormFieldModule
+    MatFormFieldModule,
+    ReactiveFormsModule
   ],
 })
 export class AddGameModule { }

apps/client/src/app/shared/modules/add-game/components/dialog-data/dialog-data.component.html

@@ -7,6 +7,7 @@
                 [usersWhite]="users"
                 [winnerOptions]="winnerOptions"
                 [winnersDeselected]="winnersDeselected"
+                [blackDeselected]="blackDeselected"
                 [disabledWinnerOptions]="determineDisabledWinnerOptions()"
                 [blackDisabled]="!data.white"
                 [winnersDisabled]="areAllWinnerOptionsDisabled()"

apps/client/src/app/shared/modules/add-game/components/dialog-data/dialog-data.component.ts

@@ -22,7 +22,8 @@ export class DialogDataComponent extends AsyncBaseComponent implements OnInit, O
 
   public winnerOptions: string[] = [];
 
-  public winnersDeselected;
+  public winnersDeselected: boolean;
+  public blackDeselected: boolean;
 
   public draw: string;
 
@@ -65,9 +66,15 @@ export class DialogDataComponent extends AsyncBaseComponent implements OnInit, O
   private updateGame(event: {name: string, value: string}): void {
     // Needed to have a pointer change for the input
     this.winnersDeselected = undefined;
-
+    this.blackDeselected = undefined;
+
     this.data[event.name] = event.value;
 
+    if (event.name === 'white' && event.value === undefined) {
+      this.data.black = undefined;
+      this.blackDeselected = false;
+    }
+
     if (event.value === undefined) {
       this.data.winner = undefined;
       this.winnersDeselected = false;

apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component-theme.scss

@@ -2,10 +2,29 @@
 
 @mixin game-result-component-theme($theme) {
     $disabled-color: map-get($theme, form-field-underline-disabled);
+    $label-color: map-get($theme, label-color);
 
     .form-field-with-disabled-underline {
       .mat-form-field-underline {
           background-color: $disabled-color;
       }
+
+      mat-label {
+        color: $disabled-color;
+      }
     }
+
+    .custom-input-field {
+      .mat-form-field-label {
+          color: $label-color !important;
+        }
+
+      .mat-form-field-ripple {
+        opacity: 0 !important;
+      }
+
+      .mat-standard-chip:focus::after {
+        opacity: 0 !important;
+      }
+  }
 }

apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component.html

@@ -2,16 +2,17 @@ <h2 appTranslate="pages.home.games.pop-up.title" mat-dialog-title></h2>
 <div mat-dialog-content>
   <form #form="ngForm">
     <div>
-      <mat-form-field color="accent">
+      <mat-form-field class="custom-input-field" color="accent" (click)="clicked()">
         <mat-label [appTranslate]="'pages.home.games.labels.white'"></mat-label>
         <mat-chip-list id='white-user' 
         selectable
-        (change)="onListChange($event, 'white')" 
+        (change)="onListChange($event, 'white')"
         name="white">
           <mat-chip *ngFor="let user of usersWhite"
             #matChip="matChip"
             [id]="'white-' + user.name"
             [disabled]="user.name === data.black"
+            [disableRipple]="true"
             (click)="fieldUpdated(matChip);"
             color="accent"
             [value]="user.name">
@@ -21,14 +22,16 @@ <h2 appTranslate="pages.home.games.pop-up.title" mat-dialog-title></h2>
       </mat-form-field>
     </div>
     <div [class.form-field-with-disabled-underline]="blackDisabled">
-      <mat-form-field color="accent">
+      <mat-form-field class="custom-input-field" color="accent">
         <mat-label [appTranslate]="'pages.home.games.labels.black'"></mat-label>
         <mat-chip-list id='black-user' selectable
         (change)="onListChange($event, 'black')" name="black">
           <mat-chip *ngFor="let user of usersBlack"
             #matChip="matChip"
             [id]="'black-' + user.name"
+            [selected]="blackDeselected"
             [disabled]="!data.white || user.name === data.white"
+            [disableRipple]="true"
             (click)="fieldUpdated(matChip);"
             color="accent"
             [value]="user.name">
@@ -38,14 +41,15 @@ <h2 appTranslate="pages.home.games.pop-up.title" mat-dialog-title></h2>
      </mat-form-field>
     </div>
     <div [class.form-field-with-disabled-underline]="winnersDisabled">
-      <mat-form-field color="accent">
+      <mat-form-field class="custom-input-field" color="accent">
         <mat-label [appTranslate]="'pages.home.games.labels.winner'"></mat-label>
         <mat-chip-list id='winner-user' (change)="onListChange($event, 'winner')" name="winner">
           <mat-chip *ngFor="let option of winnerOptions; let i = index"
             #matChip="matChip"
             [id]="'winner-' + option"
             [selected]="winnersDeselected"
             [disabled]="disabledWinnerOptions[i]"
+            [disableRipple]="true"
             (click)="fieldUpdated(matChip);"
             color="accent"
             [value]="option">

apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component.ts

@@ -47,6 +47,9 @@ export class GameResultComponent {
   @Input()
   public winnersDeselected: boolean;
 
+  @Input()
+  public blackDeselected: boolean;
+
   @Input()
   public winnersDisabled: boolean;
 
@@ -64,7 +67,7 @@ export class GameResultComponent {
   public GridSizes = GridSizes;
   public Icons = Icons;
   public timer = timer;
-
+  
   public cancel(): void {
     this.cancelEvent.emit();
   }
@@ -81,4 +84,9 @@ export class GameResultComponent {
       value: event.value
     });
   }
+
+  public clicked(): void {
+    setTimeout(() => {
+      document.getElementById('formField123').blur();
+    }, 200);  }
 }

apps/client/src/themes/black-theme.scss

@@ -15,7 +15,8 @@ $custom-variables: (
   action-bar-border-background: mat-color($anms-black-primary),
   button-icon-active-color: white,
   button-icon-inactive-color: gray,
-  form-field-underline-disabled: #616161
+  form-field-underline-disabled: #616161,
+  label-color: rgba(255, 255, 255, 0.7)
 );
 
 $anms-black-theme: map_merge($anms-black-theme, $custom-variables);

apps/client/src/themes/light-theme.scss

@@ -15,7 +15,8 @@ $custom-variables: (
   action-bar-border-background: white,
   button-icon-active-color: black,
   button-icon-inactive-color: gray,
-  form-field-underline-disabled: #e0e0e0
+  form-field-underline-disabled: #e0e0e0,
+  label-color: rgba(0, 0, 0, 0.54)
   );
 
 $anms-light-theme: map_merge($anms-light-theme, $custom-variables);