adding 18n and player turn highlitgh

src/common/interfaces.ts

@@ -106,6 +106,7 @@ export interface GameOptions {
   height?: number
   background?: string
   teamed?: boolean
+  pointsToWin?: number
 }
 export interface GameSummary {
   gameId: string

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 }
   }

src/i18n/en.ts

@@ -0,0 +1,3 @@
+export const en = {
+  starting_game: 'Starting game...',
+}

src/i18n/es.ts

@@ -0,0 +1,3 @@
+export const es = {
+  starting_game: 'Iniciando la partida...',
+}

src/i18n/index.ts

@@ -0,0 +1,18 @@
+import { createI18n } from 'vue-i18n'
+import { en } from './en'
+import { es } from './es'
+
+const i18n = createI18n({
+  locale: 'es',
+  messages: {
+    en,
+    es,
+  },
+})
+
+const translate = (key: string) => {
+  return i18n.global.t(key)
+}
+
+export default i18n
+export { translate, translate as t }

src/main.ts

@@ -7,6 +7,7 @@ import '../node_modules/bulma/css/bulma.css'
 
 import App from './App.vue'
 import router from './router'
+import i18n from '@/i18n'
 
 import { SocketIoClientService } from '@/services/SocketIoClientService'
 import { LoggingService } from '@/services/LoggingService'
@@ -16,6 +17,7 @@ import { GameService } from './services/GameService'
 const app = createApp(App)
 
 app.use(createPinia())
+app.use(i18n)
 app.use(router)
 
 app.provide('socket', new SocketIoClientService('http://localhost:3000'))

src/views/HomeView.vue

@@ -13,6 +13,7 @@ import { useGameOptionsStore } from '@/stores/gameOptions'
 
 let background = ref<string>('green')
 let teamed = ref<boolean>(false)
+let pointsToWin = ref<number>(100)
 let seed = ref<string>('')
 let sessionName = ref('Test Value')
 let matchSessions = ref<MatchSessionDto[]>([])
@@ -146,7 +147,22 @@ function copy(sessionSeed: string) {
               </div>
             </div>
           </div>
-          <div class="cell"></div>
+          <div class="cell">
+            <div class="field">
+              <label for="pointsToWin" class="label">Points to win</label>
+              <div class="control">
+                <div class="select">
+                  <select v-model="pointsToWin" name="pointsToWin">
+                    <option value="50">50</option>
+                    <option value="80">80</option>
+                    <option value="100">100</option>
+                    <option value="150">150</option>
+                    <option value="200">200</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div class="block" v-if="!isSessionStarted"></div>