adding 18n and player turn highlitgh

src/game/Board.ts

@@ -9,6 +9,7 @@ import { GlowFilter } from 'pixi-filters'
 import { ORIENTATION_ANGLES } from '@/common/constants'
 import type { OtherHand } from './OtherHand'
 import { sound } from '@pixi/sound'
+import { t } from '@/i18n'
 
 export class Board extends EventEmitter {
   private _scale: number = 1
@@ -104,7 +105,7 @@ export class Board extends EventEmitter {
       parent: this.container,
     })
 
-    this.showText('Starting game...')
+    this.showText(t('starting_game'))
   }
 
   private calculateScale() {
@@ -137,7 +138,7 @@ export class Board extends EventEmitter {
       createText({
         text,
         x: this.scaleX(0),
-        y: -10,
+        y: this.height - 24,
       }),
     )
   }

src/game/Game.ts

@@ -3,20 +3,12 @@ import { Board } from '@/game/Board'
 import { assets } from '@/game/utilities/assets'
 import { Tile } from '@/game/Tile'
 import { Hand } from '@/game/Hand'
-import type {
-  GameDto,
-  GameSummary,
-  MatchSessionDto,
-  Movement,
-  PlayerDto,
-  TileDto,
-} from '@/common/interfaces'
+import type { GameDto, MatchSessionDto, Movement, PlayerDto, TileDto } from '@/common/interfaces'
 import type { SocketIoClientService } from '@/services/SocketIoClientService'
 import { wait } from '@/common/helpers'
 import { Actions } from 'pixi-actions'
 import { OtherHand } from './OtherHand'
 import { GameSummayView } from './GameSummayView'
-import { summaryMock } from '@/common/summarymock'
 
 interface GameOptions {
   boardScale: number
@@ -106,7 +98,6 @@ export class Game {
 
   updateOtherHands(gameState: GameDto) {
     const players = gameState.players
-
     players.forEach((player) => {
       const hand = this.otherHands.find((hand) => hand.player?.id === player.id)
       if (hand) {
@@ -115,6 +106,17 @@ export class Game {
     })
   }
 
+  highLightPlayer(player: PlayerDto) {
+    const hand = this.otherHands.find((hand) => hand.player?.id === player.id)
+    if (hand) {
+      hand.setActive(true)
+    }
+  }
+
+  setPlayersInactive() {
+    this.otherHands.forEach((hand) => hand.setActive(false))
+  }
+
   async preload() {
     await Assets.load(assets)
   }
@@ -194,11 +196,13 @@ export class Game {
 
   async setNextPlayer(state: GameDto) {
     const currentPlayer = state?.currentPlayer!
+    this.setPlayersInactive()
     if (currentPlayer.id === this.playerId) {
       this.hand.prepareForMove(this.board.count === 0, this.board.freeEnds)
       this.board.setPlayerTurn(currentPlayer)
     } else {
       this.board.setServerPlayerTurn(currentPlayer)
+      this.highLightPlayer(currentPlayer)
     }
   }
 

src/game/OtherHand.ts

@@ -1,5 +1,5 @@
 import { LoggingService } from '@/services/LoggingService'
-import { Application, Container, Sprite, Texture } from 'pixi.js'
+import { Application, Container, Graphics, Sprite, Texture } from 'pixi.js'
 import { Scale, type ScaleFunction } from './utilities/scale'
 import { Tile } from './Tile'
 import type { Movement, PlayerDto, TileDto } from '@/common/interfaces'
@@ -24,6 +24,7 @@ export class OtherHand {
   interactionsLayer!: Container
   scoreLayer: Container = new Container()
   score: number = 0
+  active: boolean = false
 
   constructor(
     private app: Application,
@@ -54,6 +55,11 @@ export class OtherHand {
     )
   }
 
+  setActive(active: boolean) {
+    this.active = active
+    this.render()
+  }
+
   setScore(score: number) {
     this.score = score
   }
@@ -89,9 +95,18 @@ export class OtherHand {
     })
   }
 
+  private renderActive() {
+    this.interactionsLayer.removeChildren()
+    if (this.active) {
+      const rectangle = new Graphics().roundRect(0, 0, this.width, this.height, 5).stroke(0xffff00)
+      this.interactionsLayer.addChild(rectangle)
+    }
+  }
+
   private render() {
     this.renderTiles()
     this.renderScore()
+    this.renderActive()
   }
 
   private addBg() {
@@ -107,14 +122,14 @@ export class OtherHand {
     let y = 0
 
     if (this.position === 'left') {
-      x = 0
+      x = 16
       y = 30
     } else if (this.position === 'right') {
-      x = this.app.canvas.width - this.width
+      x = this.app.canvas.width - this.width - 16
       y = 30
     } else {
       x = (this.app.canvas.width - this.width) / 2
-      y = 0
+      y = 8
     }
     return { x, y }
   }