Add some changes:

- GitHub button - Fix bug with stopwatch - Refactor logic of labels in new class - Add some comments
pr0mming · Jun 18, 2024 · 8de96f0 · 8de96f0
1 parent 0881089
commit 8de96f0
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 111 deletions.
diff --git a/index.html b/index.html
@@ -20,6 +20,18 @@
   <body>
     <main>
       <div id="hanoi-container"></div>
+
+      <div id="game-controls">
+        <a
+          class="github-button"
+          href="https://github.com/pr0mming/TowerHanoi"
+          data-color-scheme="no-preference: light_high_contrast; light: light; dark: light;"
+          data-size="large"
+          data-show-count="true"
+          aria-label="Star pr0mming/TowerHanoi on GitHub"
+          >Star</a
+        >
+      </div>
     </main>
 
     <script type="module" src="/src/main.ts"></script>

diff --git a/public/styles/global.css b/public/styles/global.css
@@ -23,3 +23,7 @@ main {
   justify-content: center;
   align-items: center;
 }
+
+#game-controls {
+  margin: 0 auto;
+}
diff --git a/src/game/controls/label/Label.ts b/src/game/controls/label/Label.ts
@@ -0,0 +1,17 @@
+import { GameObjects, Scene } from 'phaser';
+
+interface ILabelProps {
+  scene: Scene;
+  x: number;
+  y: number;
+  text: string;
+  nameKey: string;
+}
+
+export class Label extends GameObjects.Text {
+  constructor({ scene, x, y, text, nameKey }: ILabelProps) {
+    super(scene, x, y, text, {});
+
+    this.name = nameKey;
+  }
+}
diff --git a/src/game/controls/label/LabelGroup.ts b/src/game/controls/label/LabelGroup.ts
@@ -0,0 +1,91 @@
+import { GameObjects, Scene } from 'phaser';
+
+// Interfaces
+import { IGameInitialData } from '@src/game/common/interfaces/IGameInitialData';
+
+// Controls
+import { Label } from '@src/game/controls/label/Label';
+
+interface ILabelGroupProps {
+  scene: Scene;
+  gameData: IGameInitialData;
+}
+
+export class LabelGroup extends GameObjects.Group {
+  private _gameData: IGameInitialData;
+
+  constructor({ scene, gameData }: ILabelGroupProps) {
+    super(scene);
+
+    this._gameData = gameData;
+
+    this.classType = Label;
+
+    this._setUp();
+  }
+
+  private _setUp() {
+    const style = {
+      font: '15px BitBold',
+      fill: 'white',
+      stroke: 'black',
+      strokeThickness: 2.5,
+    };
+
+    const attempsLabel = new Label({
+      scene: this.scene,
+      x: 50,
+      y: 22,
+      text: `MOVEMENTS: ${this._gameData.attemps}`,
+      nameKey: 'ATTEMPS',
+    }).setStyle(style);
+
+    this.add(attempsLabel, true);
+
+    const timeLabel = new Label({
+      scene: this.scene,
+      x: 230,
+      y: 22,
+      text: 'TIME: 00:00:00',
+      nameKey: 'TIME',
+    }).setStyle(style);
+
+    this.add(timeLabel, true);
+  }
+
+  showEndGameLabel(text: string) {
+    const stWin = new Label({
+      scene: this.scene,
+      x: this.scene.cameras.main.centerX,
+      y: 120,
+      text: text,
+      nameKey: 'END_TEXT',
+    })
+      .setFontFamily('"BitBold", "Tahoma"')
+      .setFontSize(20)
+      .setColor('white')
+      .setStroke('black', 2.5)
+      .setAlpha(0)
+      .setOrigin(0.5);
+
+    this.add(stWin, true);
+
+    this.scene.tweens.add({
+      targets: stWin,
+      props: {
+        alpha: 1,
+      },
+      ease: 'Sine.easeInOut',
+      yoyo: true,
+      repeat: -1,
+    });
+  }
+
+  setTextByKey(keyName: string, value: string) {
+    const _label = this.getMatching('name', keyName)[0];
+
+    if (_label) {
+      (_label as GameObjects.Text).setText(value);
+    }
+  }
+}
diff --git a/src/game/objects/disk/Disk.ts b/src/game/objects/disk/Disk.ts
@@ -12,9 +12,12 @@ interface IDiskProps {
   tint: number;
   diskType: number;
   towerOwner: number;
-  onDragLeave: (disk: Disk) => void;
+  onDragEnd: (disk: Disk) => void;
 }
 
+/**
+ * This method represents a disk to put over a tower
+ */
 export class Disk extends Physics.Arcade.Image {
   private readonly _diskType: number;
   private _towerOwner: number;
@@ -30,7 +33,7 @@ export class Disk extends Physics.Arcade.Image {
     tint,
     diskType,
     towerOwner,
-    onDragLeave,
+    onDragEnd,
   }: IDiskProps) {
     super(scene, x, y, textureKey);
 
@@ -41,16 +44,21 @@ export class Disk extends Physics.Arcade.Image {
 
     this._currentPosition = { x, y };
 
-    this.setTint(tint);
+    this.setTint(tint); // Little hack to have different colors of disks (because there is limited colors)
     this.setScale(scaleX, 0.6);
     this.setBodySize(this.width - 60, this.height);
 
-    this._setUpEvents(onDragLeave);
+    this._setUpEvents(onDragEnd);
   }
 
-  private _setUpEvents(onDragLeave: (disk: Disk) => void) {
+  /**
+   * This method prepares the events to allow use the pointer to move a disk
+   * @param onDragEnd callback of drag end event
+   */
+  private _setUpEvents(onDragEnd: (disk: Disk) => void) {
     this.enableInteraction();
 
+    // Update sprite position using the pointer
     this.on(
       Phaser.Input.Events.DRAG,
       (_: unknown, dragX: number, dragY: number) => {
@@ -59,11 +67,15 @@ export class Disk extends Physics.Arcade.Image {
       }
     );
 
+    // Is necessary a callback to process large logic of collisions
     this.on(Phaser.Input.Events.DRAG_END, () => {
-      onDragLeave(this);
+      onDragEnd(this);
     });
   }
 
+  /**
+   * This method enable the interaction for the sprite
+   */
   enableInteraction() {
     this.setInteractive({
       useHandCursor: true,

diff --git a/src/game/objects/disk/DiskGroup.ts b/src/game/objects/disk/DiskGroup.ts
@@ -7,7 +7,7 @@ interface IDiskGroupProps {
   scene: Scene;
   world: Physics.Arcade.World;
   diskNumber: number;
-  onDragLeave: (disk: Disk) => void;
+  onDragEnd: (disk: Disk) => void;
 }
 
 export class DiskGroup extends Physics.Arcade.Group {
@@ -19,7 +19,7 @@ export class DiskGroup extends Physics.Arcade.Group {
 
   private readonly _DISK_TEXTURES: string[];
 
-  constructor({ scene, world, diskNumber, onDragLeave }: IDiskGroupProps) {
+  constructor({ scene, world, diskNumber, onDragEnd }: IDiskGroupProps) {
     super(world, scene);
 
     this.classType = Disk;
@@ -39,10 +39,10 @@ export class DiskGroup extends Physics.Arcade.Group {
       'pieceBrown',
     ];
 
-    this._setUp(onDragLeave);
+    this._setUp(onDragEnd);
   }
 
-  private _setUp(onDragLeave: (disk: Disk) => void) {
+  private _setUp(onDragEnd: (disk: Disk) => void) {
     for (
       let i = 0,
         scaleX = this._INITIAL_DISK_X_AXIS_SCALE,
@@ -61,7 +61,7 @@ export class DiskGroup extends Physics.Arcade.Group {
         tint,
         diskType: i,
         towerOwner: 0,
-        onDragLeave,
+        onDragEnd,
       });
 
       this.add(newDisk, true);

diff --git a/src/game/objects/tower/Tower.ts b/src/game/objects/tower/Tower.ts
@@ -8,6 +8,9 @@ interface ITowerProps {
   disks: number[];
 }
 
+/**
+ * This class represents a tower of the game
+ */
 export class Tower extends Physics.Arcade.Image {
   private readonly _towerType: number;
 
@@ -22,6 +25,8 @@ export class Tower extends Physics.Arcade.Image {
     this._disks = pieces;
 
     this.setScale(0.6, 0.6);
+
+    // Adjust the physics body to detect better the collisions
     this.setBodySize(this.width - 60, this.height - 20);
   }
 

diff --git a/src/game/objects/tower/TowerGroup.ts b/src/game/objects/tower/TowerGroup.ts
@@ -10,11 +10,14 @@ interface ITowerGroupProps {
   towersNumber: number;
 }
 
+/**
+ * This method represents the array of the towers
+ */
 export class TowerGroup extends Physics.Arcade.Group {
   private readonly _INITIAL_X_AXIS_POSIION: number;
   private readonly _INITIAL_Y_AXIS_POSIION: number;
 
-  private readonly _INTERVAL_X_AXIS_OFFSET: number;
+  private readonly _INTERVAL_X_AXIS_OFFSET: number; // Used to increment horizontally
   private readonly _TOWERS_NUMBER: number;
 
   constructor({ scene, world, diskNumber, towersNumber }: ITowerGroupProps) {
@@ -32,6 +35,7 @@ export class TowerGroup extends Physics.Arcade.Group {
   }
 
   private _setUp(diskNumber: number) {
+    // Loop to place each tower
     for (
       let i = 0, x = this._INITIAL_X_AXIS_POSIION;
       i < this._TOWERS_NUMBER;
@@ -42,7 +46,7 @@ export class TowerGroup extends Physics.Arcade.Group {
         x,
         y: this._INITIAL_Y_AXIS_POSIION,
         towerType: i,
-        disks: i === 0 ? Array.from(Array(diskNumber).keys()) : [],
+        disks: i === 0 ? Array.from(Array(diskNumber).keys()) : [], // The first tower has always all the disks
       });
 
       this.add(newTower, true);