feat: UI updates (#20)

* wip: UI updates

* feat: do not render apple on edge (#6)

* feat: controller size update

* feat: larger tv

* feat: adjusted colors

* feat: bigger and higlighted controller movement

* feat: bigger font (#9)

* feat: instructions modal (#13)

* feat: background (#10)

* fix: game crash state (#12)

* feat: add Google IO branding (#17)

* feat: display static until camera is loaded (#18)

* fix: address code review comments

.gitignore

@@ -42,4 +42,4 @@ testem.log
 Thumbs.db
 
 # Firebase
-./firebase
+.firebase/

angular.json

@@ -45,8 +45,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "6kb",
+                  "maximumError": "12kb"
                 }
               ],
               "outputHashing": "all"

package.json

@@ -17,12 +17,11 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^15.2.0",
-    "@angular/cdk": "^15.2.2",
+    "@angular/cdk": "^15.2.0",
     "@angular/common": "^15.2.0",
     "@angular/compiler": "^15.2.0",
     "@angular/core": "^15.2.0",
     "@angular/forms": "^15.2.0",
-    "@angular/material": "^15.2.2",
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",

src/app/app.component.ts

@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { WebcamComponent } from './webcam/webcam.component';
 
 @Component({
   selector: 'snake-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  imports: [WebcamComponent, RouterOutlet],
+  imports: [RouterOutlet],
   standalone: true,
 })
 export class AppComponent {

src/app/controller/arrows/arrows.component.html

@@ -0,0 +1,7 @@
+<div class="arrow-buttons arrow-buttons--direction-down">
+  <div class="arrow-buttons__button arrow-buttons__button--top"></div>
+  <div class="arrow-buttons__button arrow-buttons__button--bottom"></div>
+  <div class="arrow-buttons__button arrow-buttons__button--left"></div>
+  <div class="arrow-buttons__button arrow-buttons__button--right"></div>
+  <div class="arrow-buttons__button arrow-buttons__button--center"></div>
+</div>

src/app/controller/arrows/arrows.component.scss

@@ -0,0 +1,198 @@
+@import 'variables';
+@import 'functions';
+
+@mixin triangle($direction, $color: $red--350, $strokeColor: $red--350) {
+  $encodedColor: encodecolor($color);
+  $encodedStrokeColor: encodecolor($strokeColor);
+
+  $points: '0,50 25,0 50,50';
+
+  @if $direction == up {
+    $points: '0,50 25,0 50,50';
+  } @else if $direction == down {
+    $points: '0,0 25,50 50,0';
+  } @else if $direction == left {
+    $points: '50,0 0,25 50,50';
+  } @else if $direction == right {
+    $points: '0,0 50,25 0,50';
+  } @else {
+    @error "Invalid direction for triangle mixin: #{$direction}. Use 'up', 'down', 'left', or 'right'.";
+  }
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpolygon stroke='#{$encodedStrokeColor}' stroke-width='1px' points='#{$points}' fill='#{$encodedColor}'/%3E%3C/svg%3E");
+}
+
+@mixin arrowBoxShadow($direction) {
+  @if $direction == up {
+    box-shadow: rgba(50, 50, 93, 0.15) 0px -6px 12px -2px,
+      rgba(0, 0, 0, 0.3) 0px -3px 7px -3px;
+  } @else if $direction == down {
+    box-shadow: rgba(50, 50, 93, 0.15) 0px 6px 12px -2px,
+      rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+  } @else if $direction == left {
+    box-shadow: rgba(50, 50, 93, 0.15) -6px 0px 12px -2px,
+      rgba(0, 0, 0, 0.3) -3px 0px 7px -3px;
+  } @else if $direction == right {
+    box-shadow: rgba(50, 50, 93, 0.15) 6px 0px 12px -2px,
+      rgba(0, 0, 0, 0.3) 3px 0px 7px -3px;
+  } @else {
+    @error "Invalid direction for boxShadow mixin: #{$direction}. Use 'up', 'down', 'left', or 'right'.";
+  }
+}
+
+$border-raised: 0.4vw solid $red--250;
+$border-raised--l: 0.6vw solid $red--250;
+
+.arrow-buttons {
+  position: absolute;
+  z-index: 2;
+  width: 12vw;
+  height: 12vw;
+  top: 50%;
+  left: 6%;
+  margin-top: -6vw;
+  position: relative;
+  &__button {
+    width: 4vw;
+    height: 4vw;
+    background: $red--150;
+    position: absolute;
+    box-sizing: border-box;
+    transition: box-shadow 0.5s ease-out, border 0.5s ease-out,
+      background 0.5s ease-out;
+    box-sizing: border-box;
+    border: 0px solid transparent;
+    background-size: 30%;
+    background-repeat: no-repeat;
+    background-position: center;
+    &--top {
+      @include triangle(up);
+      top: 0;
+      left: 4vw;
+      border-top-right-radius: 15%;
+      border-top-left-radius: 15%;
+    }
+    &--bottom {
+      @include triangle(down);
+      bottom: 1px;
+      left: 4vw;
+      border-bottom-left-radius: 15%;
+      border-bottom-right-radius: 15%;
+    }
+    &--left {
+      @include triangle(left);
+      top: 4vw;
+      left: 0;
+      border-bottom-left-radius: 15%;
+      border-top-left-radius: 15%;
+    }
+    &--right {
+      @include triangle(right);
+      top: 4vw;
+      right: 1px;
+      border-bottom-right-radius: 15%;
+      border-top-right-radius: 15%;
+    }
+
+    &--center {
+      top: 4vw;
+      left: 4vw;
+    }
+  }
+}
+
+:host {
+  &.direction--down {
+    .arrow-buttons__button {
+      &--bottom {
+        border-bottom: 1px solid $red--250;
+        border-right: 1px solid $red--250;
+        border-left: 1px solid $red--250;
+        @include triangle(down, $orange);
+      }
+      &--top {
+        border-top: $border-raised;
+        border-left: 1px solid $red--250;
+        @include arrowBoxShadow(up);
+      }
+      &--left {
+        border-left: 1px solid $red--250;
+        border-top: $border-raised;
+      }
+      &--right {
+        border-right: 1px solid $red--250;
+        border-top: $border-raised;
+      }
+    }
+  }
+  &.direction--up {
+    .arrow-buttons__button {
+      &--bottom {
+        border-bottom: $border-raised--l;
+        border-right: 1px solid $red--250;
+        border-left: 1px solid $red--250;
+        @include arrowBoxShadow(down);
+      }
+      &--top {
+        border-top: 1px solid $red--250;
+        border-left: 1px solid $red--250;
+        @include triangle(up, $orange);
+      }
+      &--left {
+        border-left: 1px solid $red--250;
+        border-bottom: $border-raised;
+      }
+      &--right {
+        border-right: 1px solid $red--250;
+        border-bottom: $border-raised;
+      }
+    }
+  }
+  &.direction--right {
+    .arrow-buttons__button {
+      &--bottom {
+        border-bottom: 1px solid $red--250;
+        border-right: 1px solid $red--250;
+        border-left: $border-raised;
+      }
+      &--top {
+        border-top: $border-raised;
+        border-left: $border-raised;
+      }
+      &--left {
+        border-left: $border-raised;
+        border-bottom: 1px solid $red--250;
+        @include arrowBoxShadow(left);
+      }
+      &--right {
+        border-right: 1px solid $red--250;
+        border-bottom: 1px solid $red--250;
+        @include triangle(right, $orange);
+      }
+    }
+  }
+  &.direction--left {
+    .arrow-buttons__button {
+      &--bottom {
+        border-bottom: 1px solid $red--250;
+        border-right: $border-raised;
+        border-left: 1px solid $red--250;
+      }
+      &--top {
+        border-top: $border-raised;
+        border-left: 1px solid $red--250;
+        border-right: $border-raised;
+      }
+      &--left {
+        border-left: 1px solid $red--250;
+        border-bottom: 2px solid $red--250;
+        @include triangle(left, $orange);
+      }
+      &--right {
+        border-right: $border-raised;
+        border-bottom: 1px solid $red--250;
+        @include arrowBoxShadow(right);
+      }
+    }
+  }
+}

src/app/controller/arrows/arrows.component.ts

@@ -0,0 +1,37 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Direction } from '../../game/game.model';
+
+@Component({
+  selector: 'snake-arrows',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './arrows.component.html',
+  styleUrls: ['./arrows.component.scss'],
+})
+export class ArrowsComponent {
+  private directionClassInternal: 'up' | 'down' | 'left' | 'right' = 'right';
+
+  @HostBinding('class')
+  public get directionClass(): string {
+    return `direction--${this.directionClassInternal}`;
+  }
+
+  @Input()
+  public set direction(direction: Direction) {
+    switch (direction) {
+      case Direction.Up:
+        this.directionClassInternal = 'up';
+        break;
+      case Direction.Down:
+        this.directionClassInternal = 'down';
+        break;
+      case Direction.Left:
+        this.directionClassInternal = 'left';
+        break;
+      case Direction.Right:
+        this.directionClassInternal = 'right';
+        break;
+    }
+  }
+}

src/app/controller/control-buttons/control-buttons.component.html

@@ -0,0 +1,18 @@
+<ng-container
+  *ngIf="gameRunning$ | async; then pauseButton; else startButton"
+></ng-container>
+
+<ng-template #pauseButton>
+  <button (click)="pauseGame()" title="Pause game!">start / stop</button>
+</ng-template>
+<ng-template #startButton>
+  <button (click)="startGame()" title="Start game!">start / stop</button>
+</ng-template>
+
+<button
+  (click)="resetGame()"
+  title="Reset game!"
+  [disabled]="gameRunning$ | async"
+>
+  reset
+</button>