feat: adjust styling and enable setting board state

manuelhenke · Jan 20, 2024 · 3011b4e · 3011b4e
1 parent 90b4328
commit 3011b4e
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 16 deletions.
diff --git a/demo.html b/demo.html
@@ -22,6 +22,7 @@
   <body>
     <h1>2048</h1>
     <select name="select-game-mode" id="select-game-mode">
+      <option value="noob">Noob - 10x10</option>
       <option value="easy">Easy - 5x5</option>
       <option value="normal" selected>Normal - 4x4</option>
       <option value="hard">Hard - 3x3</option>
@@ -61,6 +62,11 @@ <h1>2048</h1>
               columns: 4,
               rows: 4,
             };
+          case 'noob':
+            return {
+              columns: 10,
+              rows: 10,
+            };
           default: // 'easy'
             return {
               columns: 5,
@@ -74,6 +80,20 @@ <h1>2048</h1>
         const game = document.querySelector('#game-2048');
         const scoreContainer = document.querySelector('#score');
 
+        game.setGameModeConfiguration({
+          columns: 4,
+          rows: 4,
+          state: {
+            positions: [
+              [131072, 65536, 32768, 16384],
+              [1024, 2048, 4096, 8192],
+              [512, 256, 128, 64],
+              [8, 8, 16, 32],
+            ],
+            score: 0,
+          },
+        });
+
         game.addEventListener('2048:game-won', (event) => {
           console.log('game-won', event);
           // eslint-disable-next-line no-alert

diff --git a/src/Game.ts b/src/Game.ts
@@ -3,7 +3,7 @@ import { html, unsafeCSS, LitElement } from 'lit';
 import { eventOptions, property, state } from 'lit/decorators.js';
 import { Engine } from '@/engine';
 import { GameWonEvent, GameLostEvent, MoveEvent, ScoreEvent } from '@/events';
-import { Direction, GameModeConfiguration } from '@/types';
+import { Direction, GameModeConfiguration, Positions } from '@/types';
 import Style from './style.scss';
 
 /**
@@ -195,8 +195,8 @@ export class Game extends LitElement {
     this.requestUpdate();
   }
 
-  private createGameBoard() {
-    this.engine.createBoard(this.columns, this.rows);
+  private createGameBoard(boardState?: { positions: Positions; score: number }) {
+    this.engine.createBoard(this.columns, this.rows, boardState);
     this.dispatchEvent(
       new ScoreEvent(this.engine.positions, {
         newScore: this.engine.score,
@@ -216,7 +216,7 @@ export class Game extends LitElement {
   setGameModeConfiguration(gameModeConfiguration: GameModeConfiguration) {
     this.columns = gameModeConfiguration.columns;
     this.rows = gameModeConfiguration.rows;
-    this.createGameBoard();
+    this.createGameBoard(gameModeConfiguration.state);
   }
 
   restartGame() {
@@ -251,7 +251,9 @@ export class Game extends LitElement {
             (row) =>
               html`
                 <div class="row">
-                  ${row.map((field) => html`<div class="field field-${field}">${field}</div>`)}
+                  ${row.map(
+                    (field) => html`<div class="field field-${field || 'empty'}">${field}</div>`
+                  )}
                 </div>
               `
           )}

diff --git a/src/engine/Board.ts b/src/engine/Board.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-continue */
-import { Direction, FieldValue } from '@/types';
+import { Direction, FieldValue, Positions } from '@/types';
 import { generate2dFields } from '@/utils';
 
 export class Board {
@@ -29,7 +29,7 @@ export class Board {
     return this.#positions;
   }
 
-  setState(positions: ReadonlyArray<ReadonlyArray<FieldValue>>, score: number) {
+  setState({ positions, score }: { positions: Positions; score: number }) {
     this.#positions = positions.map((row) => [...row]);
     this.#score = score;
   }
@@ -202,7 +202,7 @@ export class Board {
 
   copy(): Board {
     const board = new Board(this.columns, this.rows);
-    board.setState(this.#positions, this.score);
+    board.setState({ positions: this.#positions, score: this.score });
     return board;
   }
 }
diff --git a/src/engine/Engine.ts b/src/engine/Engine.ts
@@ -1,4 +1,4 @@
-import { Direction, GameModeConfiguration } from '@/types';
+import { Direction, GameModeConfiguration, Positions } from '@/types';
 import { deepCopy } from '@/utils';
 import { Board } from './Board';
 
@@ -28,13 +28,24 @@ export class Engine {
     return this.#board.score;
   }
 
-  createBoard(columns: number, rows: number) {
+  createBoard(
+    columns: number,
+    rows: number,
+    state?: {
+      positions: Positions;
+      score: number;
+    }
+  ) {
     this.gameModeConfiguration = {
       columns,
       rows,
     };
 
     this.restart();
+
+    if (state) {
+      this.#board.setState(state);
+    }
   }
 
   restart() {

diff --git a/src/style.scss b/src/style.scss
@@ -16,9 +16,9 @@
   font-weight: 700;
   display: flex;
   background-color: #bbada0;
-  border-radius: 4px;
+  border-radius: 6px;
   overflow-x: auto;
-  --spacing: 6px;
+  --spacing: 10px;
   padding: var(--spacing);
 
   &:not(.show-hover-elements) .field,
@@ -46,20 +46,27 @@
 }
 
 .field {
-  background-color: #cdc1b5;
+  background-color: #494949;
   display: inline-block;
   user-select: none;
   -webkit-tap-highlight-color: transparent; /* for removing the highlight */
   -webkit-user-select: none; /* disable selection/Copy of UIWebView */
   -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
-  height: 50px;
-  width: 50px;
-  border-radius: 4px;
+  --size: 3.625rem;
+  height: var(--size);
+  width: var(--size);
+  border-radius: 3px;
   overflow: hidden;
   display: inline-flex;
   flex-direction: column;
   place-items: center;
   place-content: center;
+  text-align: center;
+  font-size: 10px;
+
+  &-empty {
+    background-color: #cdc1b5;
+  }
 
   --light-text-color: #fdf2e7;
   --dark-text-color: #756f68;
@@ -68,55 +75,68 @@
   &-2 {
     background-color: #eee4da;
     color: var(--dark-text-color);
+    font-size: 35px;
   }
 
   &-4 {
     background-color: #ece0c8;
     color: var(--dark-text-color);
+    font-size: 35px;
   }
 
   &-8 {
     background-color: #f2b179;
+    font-size: 35px;
   }
 
   &-16 {
     background-color: #f59563;
+    font-size: 35px;
   }
 
   &-32 {
     background-color: #f57c5f;
+    font-size: 35px;
   }
 
   &-64 {
     background-color: #f65f3c;
+    font-size: 35px;
   }
 
   &-128 {
     background-color: #ecce70;
+    font-size: 25px;
   }
 
   &-256 {
     background-color: #eccb61;
+    font-size: 25px;
   }
 
   &-512 {
     background-color: #ebc74f;
+    font-size: 25px;
   }
 
   &-1024 {
     background-color: #ecc441;
+    font-size: 15px;
   }
 
   &-2048 {
     background-color: #ecc12d;
+    font-size: 15px;
   }
 
   &-4096 {
     background-color: #ef666d;
+    font-size: 15px;
   }
 
   &-8192 {
     background-color: #ec4d58;
+    font-size: 15px;
   }
 
   &-16384 {

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -11,4 +11,5 @@ export type Positions = ReadonlyArray<ReadonlyArray<FieldValue>>;
 export interface GameModeConfiguration {
   columns: number;
   rows: number;
+  state?: { positions: Positions; score: number };
 }