adding 18n and player turn highlitgh

package-lock.json

@@ -20,6 +20,7 @@
         "socket.io-client": "^4.7.5",
         "vue": "^3.4.29",
         "vue-clipboard3": "^2.0.0",
+        "vue-i18n": "^9.13.1",
         "vue-router": "^4.3.3"
       },
       "devDependencies": {
@@ -558,6 +559,47 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.13.1.tgz",
+      "integrity": "sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.13.1",
+        "@intlify/shared": "9.13.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.13.1.tgz",
+      "integrity": "sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==",
+      "dependencies": {
+        "@intlify/shared": "9.13.1",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.13.1.tgz",
+      "integrity": "sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -4998,6 +5040,25 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.13.1.tgz",
+      "integrity": "sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==",
+      "dependencies": {
+        "@intlify/core-base": "9.13.1",
+        "@intlify/shared": "9.13.1",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "socket.io-client": "^4.7.5",
     "vue": "^3.4.29",
     "vue-clipboard3": "^2.0.0",
+    "vue-i18n": "^9.13.1",
     "vue-router": "^4.3.3"
   },
   "devDependencies": {

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>