0.1.12

src/game/Board.ts

@@ -162,6 +162,7 @@ export class Board extends EventEmitter {
       this.nextTile = tile
       lastMove.tile = tile.toPlain()
       this.movements.push(lastMove)
+      console.log('this.movements :>> ', this.movements)
       await this.addTile(tile, lastMove)
       this.setFreeEnd(lastMove)
     }

src/game/Game.ts

@@ -17,14 +17,8 @@ import { Actions } from 'pixi-actions'
 import { OtherHand } from './OtherHand'
 import { GameSummayView } from './GameSummayView'
 import Config from './Config'
-
-interface GameOptions {
-  boardScale: number
-  handScale: number
-  width: number
-  height: number
-  background: string
-}
+import { createText, grayStyle } from './utilities/fonts'
+import { t } from '@/i18n'
 
 export class Game extends EventEmitter {
   public board!: Board
@@ -91,6 +85,25 @@ export class Game extends EventEmitter {
     const background = new TilingSprite(Assets.get(`bg-${this.options.background}`))
 
     this.backgroundLayer.addChild(background)
+
+    const actor = this.options.teamed ? t('team') : t('player')
+    const type =
+      this.options.winType === 'points'
+        ? t('n-points', this.options.winTarget)
+        : t('n-rounds', this.options.winTarget)
+    const helptext = t('first-actor-to-win-this-options-wintarget-this-options-wintype', [
+      actor.toLowerCase(),
+      type.toLowerCase(),
+    ])
+
+    this.backgroundLayer.addChild(
+      createText({
+        text: `${helptext}`,
+        x: this.app.canvas.width / 2,
+        y: 120,
+        style: grayStyle(14, 'lighter', false),
+      }),
+    )
   }
 
   initPlayers(players: PlayerDto[]) {

src/game/GameSummayView.ts

@@ -2,6 +2,7 @@ import { createButton, createContainer } from '@/common/helpers'
 import type { GameSummary, MatchSessionDto, MatchSessionOptions } from '@/common/interfaces'
 import { EventEmitter, type Application, type Container } from 'pixi.js'
 import { createText, whiteStyle, yellowStyle } from './utilities/fonts'
+import { t } from '@/i18n'
 
 export class GameSummayView extends EventEmitter {
   public width: number
@@ -59,7 +60,7 @@ export class GameSummayView extends EventEmitter {
     let line = y + 12
     this.layer.addChild(
       createText({
-        text: `Winner: ${this.gameSummary.winner.name}`,
+        text: t('winner-name', [this.gameSummary.winner.name]),
         x: this.width / 2,
         y: line,
         style: whiteStyle(20),
@@ -70,7 +71,7 @@ export class GameSummayView extends EventEmitter {
       line += 30
       this.layer.addChild(
         createText({
-          text: '(Blocked)',
+          text: `(${t('blocked')})`,
           x: this.width / 2,
           y: line,
           style: whiteStyle(),
@@ -78,15 +79,29 @@ export class GameSummayView extends EventEmitter {
       )
     }
 
-    line += 30
-    this.layer.addChild(
-      createText({
-        text: `Points this round: ${this.gameSummary.winner.score}`,
-        x: this.width / 2,
-        y: line,
-        style: whiteStyle(20),
-      }),
-    )
+    if (this.options.winType === 'points') {
+      line += 30
+      this.layer.addChild(
+        createText({
+          text: `Points this round: ${this.gameSummary.winner.score}`,
+          // text: `Points this round: ${this.gameSummary.winner.score}, needed to win: ${this.options.winTarget}`,
+          x: this.width / 2,
+          y: line,
+          style: whiteStyle(20),
+        }),
+      )
+    }
+    // } else if (this.options.winType === 'rounds') {
+    //   line += 30
+    //   this.layer.addChild(
+    //     createText({
+    //       text: `Rounds needed to win: ${this.options.winTarget}`,
+    //       x: this.width / 2,
+    //       y: line,
+    //       style: whiteStyle(20),
+    //     }),
+    //   )
+    // }
     return line + 16
   }
 
@@ -159,7 +174,7 @@ export class GameSummayView extends EventEmitter {
   }
 
   render() {
-    const title: string = this.type === 'round' ? 'Round Summary' : 'Match Finished!'
+    const title: string = this.type === 'round' ? t('round-summary') : t('match-finished')
     this.layer.removeChildren()
     let y = this.renderTitle(30, title.toUpperCase())
     y = this.renderWinner(y)

src/game/utilities/fonts.ts

@@ -57,19 +57,19 @@ export const scoreText = new TextStyle({
 function getStyle(styleOptions: TextStyleOptions = {}) {
   const {
     fill = 0xa2a2a2,
-    stroke = 0x565656,
     fontSize = 15,
     fontFamily = 'Arial, Helvetica, sans-serif',
     fontWeight = 'normal',
     fontStyle = 'normal',
     dropShadow,
     letterSpacing = 1,
+    stroke,
   } = styleOptions
   const style = new TextStyle({
     fill,
     fontFamily,
     letterSpacing,
-    stroke,
+    stroke: stroke ? stroke : undefined,
     fontSize,
     fontStyle,
     fontWeight: fontWeight as any,
@@ -78,6 +78,20 @@ function getStyle(styleOptions: TextStyleOptions = {}) {
   return style
 }
 
+const styleFactory = (fill: number) => {
+  return (
+    fontSize: number = 15,
+    fontWeight: TextStyleFontWeight = 'normal',
+    dropShadow: boolean = false,
+  ) =>
+    getStyle({
+      fill,
+      fontSize,
+      fontWeight,
+      dropShadow,
+    })
+}
+
 export const whiteStyle = (
   fontSize: number = 15,
   fontWeight: TextStyleFontWeight = 'normal',
@@ -101,6 +115,8 @@ export const yellowStyle = (
     dropShadow,
   })
 
+export const grayStyle = styleFactory(0x444444)
+
 interface TextOptions {
   text: string
   x: number