feat: background (#10)

thisdot · Mar 21, 2023 · 467bfca · 467bfca
1 parent a82c60f
commit 467bfca
Show file tree

Hide file tree

Showing 10 changed files with 6,498 additions and 70 deletions.
diff --git a/src/app/controller/controller.component.scss b/src/app/controller/controller.component.scss
@@ -51,7 +51,6 @@
   transform: translateX(-50%);
   top: 6%;
   bottom: 9%;
-  font-family: 'Sofia Sans Condensed', sans-serif;
   font-weight: 600;
   color: $red--300;
   z-index: 1;

diff --git a/src/app/game/game-board/game-board.component.html b/src/app/game/game-board/game-board.component.html
@@ -1,22 +1,24 @@
-<div class="game-board-wrapper">
-  <div
-    class="game-board"
-    [style.--grid-width]="(gridSize$ | async)?.width"
-    [style.--grid-height]="(gridSize$ | async)?.height"
-  >
+<div class="display">
+  <div class="game-board-wrapper">
     <div
-      class="game-board__tile"
-      *ngFor="let tile of tiles$ | async"
-      [ngClass]="{
-        'game-board__tile--snake': tile.hasSnakeBody,
-        'game-board__tile--snake-head': tile.hasSnakeHead,
-        'game-board__tile--snake-tail': tile.hasSnakeTail,
-        'game-board__tile--food': tile.hasFood
-      }"
-      [style.--rotation]="tile.rotation"
+      class="game-board"
+      [style.--grid-width]="(gridSize$ | async)?.width"
+      [style.--grid-height]="(gridSize$ | async)?.height"
     >
-      <div *ngIf="tile.hasSnakeHead" class="eyes"></div>
+      <div
+        class="game-board__tile"
+        *ngFor="let tile of tiles$ | async"
+        [ngClass]="{
+          'game-board__tile--snake': tile.hasSnakeBody,
+          'game-board__tile--snake-head': tile.hasSnakeHead,
+          'game-board__tile--snake-tail': tile.hasSnakeTail,
+          'game-board__tile--food': tile.hasFood
+        }"
+        [style.--rotation]="tile.rotation"
+      >
+        <div *ngIf="tile.hasSnakeHead" class="eyes"></div>
+      </div>
     </div>
   </div>
+  <div class="light"></div>
 </div>
-<div class="light"></div>
diff --git a/src/app/game/game-board/game-board.component.scss b/src/app/game/game-board/game-board.component.scss
@@ -5,40 +5,61 @@ $screen-color: #1e1134;
 $monitor-shade-color: #b4b8be;
 
 :host {
-  margin: 0 auto;
   display: block;
+  padding-bottom: 20px;
   position: relative;
-  margin-top: 20px;
-  background: rgb(180, 184, 190);
-  background: radial-gradient(
-    circle,
-    rgba(180, 184, 190, 1) 0%,
-    rgba(227, 238, 242, 1) 41%,
-    rgba(237, 238, 244, 1) 82%
-  );
+  margin: 0 auto;
   max-height: 50vh;
   max-width: 100vw;
-  padding: 15px 18px;
-  box-sizing: border-box;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 40px -7px;
   aspect-ratio: 11/7;
 
-  &::before,
   &::after {
     content: '';
     display: block;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
+    clear: both;
     position: absolute;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 51.188 114.201'%3E%3Cpath fill='#{encodecolor($monitor-shade-color)}' d='m0 114.2 51.188-42.536L0 0'/%3E%3C/svg%3E%0A")
-      left top no-repeat;
-    background-size: 25%;
-    z-index: 1;
+    bottom: 0;
+    width: 100%;
+    height: 20px;
+    box-sizing: border-box;
+    background: $gray;
+    border-top: 10px solid lighten($gray, 2%);
+    border-right: 2px solid lighten($gray, 2%);
+    border-bottom: 1px solid lighten($gray, 2%);
   }
-  &::after {
-    transform: scaleX(-1);
+
+  .display {
+    display: block;
+    position: relative;
+    margin-top: 20px;
+    background: rgb(180, 184, 190);
+    background: radial-gradient(
+      circle,
+      rgba(180, 184, 190, 1) 0%,
+      rgba(227, 238, 242, 1) 41%,
+      rgba(237, 238, 244, 1) 82%
+    );
+    padding: 15px 18px;
+    box-sizing: border-box;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 40px -7px;
+
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      left: 0;
+      position: absolute;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 51.188 114.201'%3E%3Cpath fill='#{encodecolor($monitor-shade-color)}' d='m0 114.2 51.188-42.536L0 0'/%3E%3C/svg%3E%0A")
+        left top no-repeat;
+      background-size: 25%;
+      z-index: 1;
+    }
+    &::after {
+      transform: scaleX(-1);
+    }
   }
 }
 

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -7,12 +7,3 @@
   <div class="cable__bottom"></div>
 </div>
 <snake-controller></snake-controller>
-
-<!-- <div class="game-controls">
-  <snake-control-buttons
-    [initialized]="controlsInitialized"
-  ></snake-control-buttons>
-  <p *ngIf="(gameState$ | async)?.status === 'game-over'" class="game-over">
-    Game over, you crashed!
-  </p>
-</div> -->
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
@@ -3,6 +3,33 @@
 :host {
   display: flex;
   flex-direction: column;
+
+  &::before,
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    background-size: contain;
+  }
+
+  &::after {
+    width: 25vw;
+    height: 25vw;
+    background: url('/assets/images/bookshelf.svg') right top no-repeat;
+    right: 0;
+    top: 10vw;
+    transform: scaleX(-1);
+    filter: drop-shadow(-10px 0px 20px rgba(0, 0, 0, 0.5));
+  }
+
+  &::before {
+    width: 18vw;
+    height: 15vw;
+    background: url('/assets/images/bookshelf2.svg') left top no-repeat;
+    left: 2vw;
+    top: 10vw;
+    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
+  }
 }
 
 .cable {