progress

src/game/Board.ts

@@ -8,6 +8,7 @@ import { LoggingService } from '@/services/LoggingService'
 import { GlowFilter } from 'pixi-filters'
 import { ORIENTATION_ANGLES } from '@/common/constants'
 import type { OtherHand } from './OtherHand'
+import { sound } from '@pixi/sound'
 
 export class Board extends EventEmitter {
   private _scale: number = 1
@@ -46,63 +47,61 @@ export class Board extends EventEmitter {
   constructor(app: Application) {
     super()
     this.ticker = app.ticker
-    this.height = app.canvas.height - 130
+    this.height = app.canvas.height - 130 - 130
     this.width = app.canvas.width
     this.scaleX = Scale([0, this.width], [0, this.width])
     this.scaleY = Scale([0, this.height], [0, this.height])
     this.calculateScale()
 
     this.container = createContainer({
+      y: 130,
       width: this.width,
       height: this.height,
-      parent: app.stage
+      parent: app.stage,
     })
 
-    const background = new Sprite(Assets.get('bg-green'))
-    // background.width = this.width
-    // background.height = this.height
-    this.container.addChild(background)
+    // this.container.y = 130
 
     this.initialContainer = createContainer({
       width: this.width,
       height: this.height,
       // color: 0x1e2f23,
       visible: false,
-      parent: this.container
+      parent: this.container,
     })
 
     this.tilesContainer = createContainer({
       width: this.width,
       height: this.height,
       // color: 0x1e2f23,
-      parent: this.container
+      parent: this.container,
     })
 
     this.interactionContainer = createContainer({
       width: this.width,
       height: this.height,
       parent: this.container,
-      visible: false
+      visible: false,
     })
 
     createCrosshair(this.tilesContainer, 0xff0000, {
       width: this.width,
       height: this.height,
       x: this.scaleX(0),
-      y: this.scaleY(0)
+      y: this.scaleY(0),
     })
 
     createCrosshair(this.interactionContainer, 0xffff00, {
       width: this.width,
       height: this.height,
       x: this.scaleX(0),
-      y: this.scaleY(0)
+      y: this.scaleY(0),
     })
 
     this.textContainer = createContainer({
       width: this.width,
       height: this.height,
-      parent: this.container
+      parent: this.container,
     })
 
     this.showText('Starting game...')
@@ -134,7 +133,13 @@ export class Board extends EventEmitter {
 
   showText(text: string) {
     this.textContainer.removeChildren()
-    this.textContainer.addChild(createText(text, this.scaleX(0), 100))
+    this.textContainer.addChild(
+      createText({
+        text,
+        x: this.scaleX(0),
+        y: -10,
+      }),
+    )
   }
 
   async setPlayerTurn(player: PlayerDto) {
@@ -169,7 +174,6 @@ export class Board extends EventEmitter {
   }
 
   async addTile(tile: Tile, move: Movement) {
-    console.log('adding tile', tile.pips)
     let orientation = ''
     let x: number =
       move.type === 'left'
@@ -234,11 +238,18 @@ export class Board extends EventEmitter {
     tile.addTo(this.tilesContainer)
     tile.reScale(this.scale)
     this.tiles.push(tile)
-
+    const moveSound = this.getRandomClickSound()
     await this.animateTile(tile, x, y, orientation, move)
+    sound.play(moveSound)
     this.emit('game:tile-animation-ended', tile.toPlain())
   }
 
+  getRandomClickSound() {
+    const sounds = ['snd-move-1', 'snd-move-2', 'snd-move-3', 'snd-move-4']
+    const index = Math.floor(Math.random() * sounds.length)
+    return sounds[index]
+  }
+
   async animateTile(tile: Tile, x: number, y: number, orientation: string, move: Movement) {
     const targetX = this.scaleX(x)
     const targetY = this.scaleY(y)
@@ -246,13 +257,13 @@ export class Board extends EventEmitter {
       x: targetX,
       y: targetY,
       rotation: ORIENTATION_ANGLES[orientation],
-      duration: 20
+      duration: 20,
     }
     const tempAlpha = tile.alpha
     tile.alpha = 0
     const clonedTile = tile.clone()
     clonedTile.addTo(this.tilesContainer)
-    const pos = this.getAnimationInitialPoosition(move)
+    const pos = this.getAnimationInitialPosition(move)
     clonedTile.setPosition(this.scaleX(pos.x), this.scaleY(pos.y))
     await clonedTile.animateTo(animation)
     clonedTile.removeFromParent()
@@ -261,7 +272,7 @@ export class Board extends EventEmitter {
     tile.alpha = tempAlpha
   }
 
-  getAnimationInitialPoosition(move: Movement): { x: number; y: number } {
+  getAnimationInitialPosition(move: Movement): { x: number; y: number } {
     const otherHand = this.otherPlayerHands.find((h) => h.player?.id === move.playerId)
     if (otherHand === undefined) {
       return { x: 0, y: this.scaleY.inverse(this.height + 50) }
@@ -271,9 +282,9 @@ export class Board extends EventEmitter {
       case 'left':
         return { x: this.scaleX.inverse(100), y: this.scaleY.inverse(100) }
       case 'right':
-        return { x: 0, y: this.scaleY.inverse(100) }
-      case 'top':
         return { x: this.scaleX.inverse(this.width - 100), y: this.scaleY.inverse(20) }
+      case 'top':
+        return { x: 0, y: this.scaleY.inverse(100) }
     }
   }
 
@@ -365,7 +376,7 @@ export class Board extends EventEmitter {
   nextTileValidPoints(
     tile: TileDto,
     side: string,
-    validMoves: boolean[]
+    validMoves: boolean[],
   ): ([number, number] | undefined)[] {
     const isLeft = side === 'left'
     const end = isLeft ? this.leftTile : this.rightTile
@@ -450,8 +461,8 @@ export class Board extends EventEmitter {
         outerStrength: 1,
         innerStrength: 0,
         color: 0xffffff,
-        quality: 0.5
-      })
+        quality: 0.5,
+      }),
     ])
     dot.setOrientation(direction ?? 'north')
     // const dot = new Dot(this.ticker, this.scale)

src/game/Game.ts

@@ -1,13 +1,30 @@
-import { Application, Assets } from 'pixi.js'
+import { Application, Assets, Container, Sprite } from 'pixi.js'
 import { Board } from '@/game/Board'
 import { assets } from '@/game/utilities/assets'
 import { Tile } from '@/game/Tile'
 import { Hand } from '@/game/Hand'
-import type { GameDto, Movement, PlayerDto, TileDto } from '@/common/interfaces'
+import type {
+  GameDto,
+  GameSummary,
+  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
+  handScale: number
+  width: number
+  height: number
+  background: string
+}
 
 export class Game {
   public board!: Board
@@ -16,17 +33,20 @@ export class Game {
   private selectedTile: TileDto | undefined
   private currentMove: Movement | undefined
   private otherHands: OtherHand[] = []
+  private backgroundLayer: Container = new Container()
+  private gameSummaryView!: GameSummayView
 
   constructor(
-    private options: { boardScale: number; handScale: number; width: number; height: number } = {
+    private options: GameOptions = {
       boardScale: 1,
       handScale: 1,
       width: 1200,
-      height: 800
+      height: 800,
+      background: 'bg-green',
     },
     private socketService: SocketIoClientService,
     private playerId: string,
-    private sessionId: string
+    private sessionId: string,
   ) {}
 
   async setup(): Promise<HTMLCanvasElement> {
@@ -39,14 +59,16 @@ export class Game {
   }
 
   async start(players: PlayerDto[] = []) {
+    this.iniialStuff(this.app)
     this.board = new Board(this.app)
     this.hand = new Hand(this.app)
     this.otherHands = [
       new OtherHand(this.app, 'left'),
       new OtherHand(this.app, 'top'),
-      new OtherHand(this.app, 'right')
+      new OtherHand(this.app, 'right'),
     ]
     this.initOtherHands(players)
+    this.gameSummaryView = new GameSummayView(this.app)
     this.hand.scale = this.options.handScale
     this.board.scale = this.options.boardScale
     this.setBoardEvents()
@@ -55,10 +77,18 @@ export class Game {
     wait(3000)
     this.socketService.sendMessage('client:set-client-ready', {
       sessionId: this.sessionId,
-      userId: this.playerId
+      userId: this.playerId,
     })
   }
 
+  iniialStuff(app: Application) {
+    app.stage.addChild(this.backgroundLayer)
+    const background = new Sprite(Assets.get(`bg-${this.options.background}`))
+    background.width = this.app.canvas.width
+    background.height = this.app.canvas.height
+    this.backgroundLayer.addChild(background)
+  }
+
   initOtherHands(players: PlayerDto[]) {
     const myIndex = players.findIndex((player) => player.id === this.playerId)
     const copy = [...players]
@@ -107,25 +137,36 @@ export class Game {
       const move: Movement = {
         id: '',
         type: 'pass',
-        playerId: this.playerId
+        playerId: this.playerId,
       }
       this.socketService.sendMessage('client:player-move', {
         sessionId: this.sessionId,
-        move: move
+        move: move,
       })
       await this.board.updateBoard(move, undefined)
     })
 
-    this.hand.on('nextClick', () => {
+    this.gameSummaryView.on('nextClick', (data) => {
+      this.updateScoreboard(data.sessionState)
       this.socketService.sendMessage('client:set-client-ready-for-next-game', {
         userId: this.playerId,
-        sessionId: this.sessionId
+        sessionId: this.sessionId,
       })
     })
 
     this.hand.on('hand-initialized', () => {})
   }
 
+  private updateScoreboard(sessionState: MatchSessionDto) {
+    const scoreboard = sessionState.scoreboard
+    this.otherHands.forEach((hand) => {
+      const player: PlayerDto | undefined = hand.player
+      const name: string = player?.name || ''
+      const score = scoreboard.find((d) => d.name === name)?.score || 0
+      hand.setScore(score)
+    })
+  }
+
   highlightMoves(tile: TileDto) {
     this.selectedTile = tile
     if (tile !== undefined) {
@@ -168,7 +209,7 @@ export class Game {
         tile: this.selectedTile,
         type: 'left',
         playerId: this.playerId,
-        ...data
+        ...data,
       }
       this.currentMove = move
       const tile = this.hand.tileMoved(this.selectedTile)
@@ -181,7 +222,7 @@ export class Game {
         tile: this.selectedTile,
         type: 'right',
         playerId: this.playerId,
-        ...data
+        ...data,
       }
       this.currentMove = move
       const tile = this.hand.tileMoved(this.selectedTile)
@@ -192,12 +233,12 @@ export class Game {
       if (tile !== null && tile !== undefined && tile.playerId === this.playerId) {
         this.socketService.sendMessage('client:player-move', {
           sessionId: this.sessionId,
-          move: this.currentMove
+          move: this.currentMove,
         })
       } else {
         this.socketService.sendMessage('client:animation-ended', {
           sessionId: this.sessionId,
-          userId: this.playerId
+          userId: this.playerId,
         })
       }
     })
@@ -206,11 +247,13 @@ export class Game {
   gameFinished(data: any) {
     this.hand.gameFinished()
     this.board.gameFinished(data)
+    this.gameSummaryView.setGameSummary(data, 'round')
   }
 
   matchFinished(data: any) {
     // this.hand.matchFinished()
     this.board.matchFinished(data)
+    this.gameSummaryView.setGameSummary(data, 'match')
   }
 
   serverPlayerMove(data: any, playerId: string) {

src/game/GameSummayView.ts

@@ -0,0 +1,168 @@
+import { createButton, createContainer } from '@/common/helpers'
+import type { GameSummary, MatchSessionDto } from '@/common/interfaces'
+import { EventEmitter, type Application, type Container } from 'pixi.js'
+import { createText, whiteStyle, yellowStyle } from './utilities/fonts'
+
+export class GameSummayView extends EventEmitter {
+  public width: number
+  public height: number
+  container!: Container
+  layer!: Container
+  gameSummary!: GameSummary
+  matchState!: MatchSessionDto
+  type: 'round' | 'match' = 'round'
+
+  constructor(app: Application) {
+    super()
+    this.width = 500
+    this.height = 400
+    this.container = createContainer({
+      width: this.width,
+      height: this.height,
+      x: app.canvas.width / 2 - this.width / 2,
+      y: app.canvas.height / 2 - this.height / 2,
+      parent: app.stage,
+      alpha: 0.7,
+      color: 0x121212,
+    })
+    this.layer = createContainer({
+      width: this.width,
+      height: this.height,
+      parent: this.container,
+    })
+    console.log('GameSummaryView created!')
+
+    this.container.visible = false
+  }
+
+  setGameSummary(data: any, type: 'round' | 'match') {
+    this.type = type
+    this.matchState = data.sessionState
+    this.gameSummary = data.lastGame
+    this.render()
+    this.container.visible = true
+  }
+
+  renderTitle(y: number = 20, title: string): number {
+    const text = createText({
+      text: title,
+      x: this.width / 2,
+      y,
+      style: yellowStyle(24),
+    })
+    this.layer.addChild(text)
+    return y + 24
+  }
+
+  renderWinner(y: number): number {
+    let line = y + 12
+    this.layer.addChild(
+      createText({
+        text: `Winner: ${this.gameSummary.winner.name}`,
+        x: this.width / 2,
+        y: line,
+        style: whiteStyle(20),
+      }),
+    )
+
+    if (this.gameSummary.isBlocked) {
+      line += 30
+      this.container.addChild(
+        createText({
+          text: '(Blocked)',
+          x: this.width / 2,
+          y: line,
+          style: whiteStyle(),
+        }),
+      )
+    }
+
+    line += 30
+    this.layer.addChild(
+      createText({
+        text: `Points this round: ${this.gameSummary.winner.score}`,
+        x: this.width / 2,
+        y: line,
+        style: whiteStyle(20),
+      }),
+    )
+    return line + 16
+  }
+
+  renderScores(y: number): number {
+    const scores = this.matchState.scoreboard
+    // this.type === 'round'
+    //   ? this.gameSummary.score
+    //   : this.matchState.scoreboard.map((d) => ({ name: d[0], score: d[1] }))
+    let line = y + 30
+    scores.forEach((score: any) => {
+      line = line + 30
+      this.layer.addChild(
+        createText({
+          text: `${score.name}:`,
+          x: 130,
+          y: line,
+          style: whiteStyle(18),
+          align: 'left',
+        }),
+      )
+      this.layer.addChild(
+        createText({
+          text: `${score.score}`,
+          x: 330,
+          y: line,
+          style: whiteStyle(18),
+          align: 'right',
+        }),
+      )
+    })
+    return line
+  }
+
+  renderButtons() {
+    if (this.type === 'round') {
+      this.layer.addChild(
+        createButton({
+          text: 'Next',
+          dimension: {
+            x: this.width / 2 - 25,
+            y: this.height - 50,
+            width: 60,
+            height: 25,
+          },
+          action: () => {
+            this.emit('nextClick', { sessionState: this.matchState })
+            this.container.visible = false
+          },
+          parent: this.layer,
+        }),
+      )
+    } else {
+      this.layer.addChild(
+        createButton({
+          text: 'Finish',
+          dimension: {
+            x: this.width / 2 - 25,
+            y: this.height - 50,
+            width: 60,
+            height: 25,
+          },
+          action: () => {
+            this.emit('finishClick', this.gameSummary)
+            this.container.visible = false
+          },
+          parent: this.layer,
+        }),
+      )
+    }
+  }
+
+  render() {
+    const title: string = this.type === 'round' ? 'Round Summary' : 'Match Finished!'
+    this.layer.removeChildren()
+    let y = this.renderTitle(30, title.toUpperCase())
+    y = this.renderWinner(y)
+    this.renderScores(y)
+    this.renderButtons()
+  }
+}

src/game/Hand.ts

@@ -11,7 +11,6 @@ export class Hand extends EventEmitter {
   tiles: Tile[] = []
   container: Container = new Container()
   buttonPass: Container = new Container()
-  buttonNext: Container = new Container()
   height: number
   width: number
   ticker: Ticker
@@ -27,6 +26,7 @@ export class Hand extends EventEmitter {
   availableTiles: Tile[] = []
   tilesLayer!: Container
   interactionsLayer!: Container
+  score: number = 0
 
   constructor(app: Application) {
     super()
@@ -49,14 +49,14 @@ export class Hand extends EventEmitter {
       height: this.height,
       x: 0,
       y: 0,
-      parent: this.container
+      parent: this.container,
     })
     this.interactionsLayer = createContainer({
       width: this.width,
       height: this.height,
       x: 0,
       y: 0,
-      parent: this.container
+      parent: this.container,
     })
   }
 
@@ -65,16 +65,6 @@ export class Hand extends EventEmitter {
     this.tiles = []
 
     this.initialized = false
-    this.buttonNext = createButton(
-      'NEXT',
-      { x: this.width / 2 - 25, y: this.height / 2, width: 50, height: 20 },
-      () => {
-        this.tilesLayer.removeChildren()
-        this.interactionsLayer.removeChild(this.buttonNext)
-        this.emit('nextClick')
-      },
-      this.interactionsLayer
-    )
   }
 
   get canMove() {
@@ -98,7 +88,7 @@ export class Hand extends EventEmitter {
     this.availableTiles.forEach((tile) => {
       tile.animateTo({
         x: tile.x,
-        y: tile.y - 10
+        y: tile.y - 10,
       })
       tile.interactive = true
     })
@@ -108,7 +98,7 @@ export class Hand extends EventEmitter {
     this.availableTiles.forEach((tile) => {
       tile.animateTo({
         x: tile.x,
-        y: tile.y + 10
+        y: tile.y + 10,
       })
       tile.setPosition(tile.x, tile.y + 10)
       tile.interactive = false
@@ -128,7 +118,7 @@ export class Hand extends EventEmitter {
   initialize(playerState: PlayerDto) {
     this.tiles = this.createTiles(playerState)
     this.initialized = this.tiles.length > 0
-    this.renderTiles()
+    this.render()
     this.emit('hand-updated', this.tiles)
   }
 
@@ -187,31 +177,32 @@ export class Hand extends EventEmitter {
   private createPassButton() {
     const lastTile = this.tiles[this.tiles.length - 1]
     const x = lastTile ? lastTile.x + lastTile.width : this.scaleX(0)
-    this.buttonPass = createButton(
-      'PASS',
-      { x, y: this.height / 2, width: 50, height: 20 },
-      () => {
+    this.buttonPass = createButton({
+      text: 'PASS',
+      dimension: { x, y: this.height / 2, width: 50, height: 20 },
+      action: () => {
         this.interactionsLayer.removeChild(this.buttonPass)
         this.emit('game:button-pass-click')
       },
-      this.interactionsLayer
-    )
+      parent: this.interactionsLayer,
+    })
   }
 
   update(playerState: PlayerDto) {
+    this.tilesLayer.removeChildren()
     if (!this.initialized) {
       this.initialize(playerState)
       return
     }
     const missing: Tile | undefined = this.tiles.find(
-      (tile: Tile) => !playerState.hand.find((t) => t.id === tile.id)
+      (tile: Tile) => !playerState.hand.find((t) => t.id === tile.id),
     )
     if (missing) {
       this.tilesLayer.removeChild(missing.getSprite())
       this.tiles = this.tiles.filter((tile) => tile.id !== missing.id)
       this.emit('hand-updated', this.tiles)
     }
-    this.renderTiles()
+    this.render()
   }
 
   private createTiles(playerState: PlayerDto) {
@@ -230,8 +221,8 @@ export class Hand extends EventEmitter {
             outerStrength: 2,
             innerStrength: 1,
             color: 0xffffff,
-            quality: 0.5
-          })
+            quality: 0.5,
+          }),
         ])
       })
       newTile.on('pointerout', () => {
@@ -251,4 +242,13 @@ export class Hand extends EventEmitter {
       tile.setPosition(deltaX + tile.width / 2 + i * (tile.width + 5), tile.height / 2 + 20)
     })
   }
+
+  renderScore() {
+    //this.scoreLayer.removeChildren()
+  }
+
+  render() {
+    this.renderTiles()
+    this.renderScore()
+  }
 }

src/game/OtherHand.ts

@@ -4,7 +4,7 @@ import { Scale, type ScaleFunction } from './utilities/scale'
 import { Tile } from './Tile'
 import type { Movement, PlayerDto, TileDto } from '@/common/interfaces'
 import { createContainer } from '@/common/helpers'
-import { createText, playerNameText } from './utilities/fonts'
+import { createText, playerNameText, scoreText } from './utilities/fonts'
 
 export class OtherHand {
   tilesInitialNumber: number = 7
@@ -22,10 +22,12 @@ export class OtherHand {
   logger: LoggingService = new LoggingService()
   tilesLayer!: Container
   interactionsLayer!: Container
+  scoreLayer: Container = new Container()
+  score: number = 0
 
   constructor(
     private app: Application,
-    public position: 'left' | 'right' | 'top' = 'left'
+    public position: 'left' | 'right' | 'top' = 'left',
   ) {
     this.height = 100
     this.width = 300
@@ -37,11 +39,23 @@ export class OtherHand {
     this.container.y = y
     this.calculateScale()
     this.initLayers()
+    this.render()
   }
 
   setPlayer(player: PlayerDto) {
     this.player = player
-    this.container.addChild(createText(`${player.name}`, this.width / 2, 12, playerNameText))
+    this.container.addChild(
+      createText({
+        text: `${player.name}`,
+        x: this.width / 2,
+        y: 12,
+        style: playerNameText,
+      }),
+    )
+  }
+
+  setScore(score: number) {
+    this.score = score
   }
 
   setHand(tiles: TileDto[]) {
@@ -54,7 +68,19 @@ export class OtherHand {
     this.render()
   }
 
-  private render() {
+  private renderScore() {
+    this.scoreLayer.removeChildren()
+    const text = createText({
+      text: `${this.score}`,
+      x: this.width - 5,
+      y: 50,
+      style: scoreText,
+    })
+    text.anchor.set(1, 0.5)
+    this.scoreLayer.addChild(text)
+  }
+
+  private renderTiles() {
     this.tilesLayer.removeChildren()
     const x = -9
     this.hand.forEach((tile, index) => {
@@ -63,6 +89,11 @@ export class OtherHand {
     })
   }
 
+  private render() {
+    this.renderTiles()
+    this.renderScore()
+  }
+
   private addBg() {
     const bg = new Sprite(Texture.WHITE)
     bg.alpha = 0.08
@@ -96,17 +127,17 @@ export class OtherHand {
       height: this.height,
       x: 0,
       y: 0,
-      parent: this.container
+      parent: this.container,
     })
     this.interactionsLayer = createContainer({
       width: this.width,
       height: this.height,
       x: 0,
       y: 0,
-      parent: this.container
+      parent: this.container,
     })
-    this.container.addChild(this.tilesLayer)
-    this.container.addChild(this.interactionsLayer)
+    // this.container.addChild(this.tilesLayer)
+    this.container.addChild(this.scoreLayer)
   }
 
   private calculateScale() {

src/game/utilities/assets.ts

@@ -27,10 +27,16 @@ import tile6_3 from '@/assets/images/tiles/6-3.png'
 import tile6_4 from '@/assets/images/tiles/6-4.png'
 import tile6_5 from '@/assets/images/tiles/6-5.png'
 import tile6_6 from '@/assets/images/tiles/6-6.png'
-import dot from '@/assets/images/circle.png'
 import bgWood_1 from '@/assets/images/backgrounds/wood-1.jpg'
 import bg_1 from '@/assets/images/backgrounds/bg-1.png'
 import bg_green from '@/assets/images/backgrounds/bg-green.png'
+import bg_red from '@/assets/images/backgrounds/bg-red.png'
+import bg_yellow from '@/assets/images/backgrounds/bg-yellow.png'
+import snd_move_1 from '@/assets/sounds/move-1.mp3'
+import snd_move_2 from '@/assets/sounds/move-2.mp3'
+import snd_move_3 from '@/assets/sounds/move-3.mp3'
+import snd_move_4 from '@/assets/sounds/move-4.mp3'
+import snd_intro from '@/assets/sounds/intro.mp3'
 
 export const assets = [
   { alias: 'tile-back', src: tileBack },
@@ -62,8 +68,14 @@ export const assets = [
   { alias: 'tile-6_4', src: tile6_4 },
   { alias: 'tile-6_5', src: tile6_5 },
   { alias: 'tile-6_6', src: tile6_6 },
-  { alias: 'dot', src: dot },
   { alias: 'bg-wood-1', src: bgWood_1 },
-  { alias: 'bg-1', src: bg_1 },
-  { alias: 'bg-green', src: bg_green }
+  { alias: 'bg-gray', src: bg_1 },
+  { alias: 'bg-green', src: bg_green },
+  { alias: 'bg-red', src: bg_red },
+  { alias: 'bg-yellow', src: bg_yellow },
+  { alias: 'snd-move-1', src: snd_move_1 },
+  { alias: 'snd-move-2', src: snd_move_2 },
+  { alias: 'snd-move-3', src: snd_move_3 },
+  { alias: 'snd-move-4', src: snd_move_4 },
+  { alias: 'snd-intro', src: snd_intro },
 ]

src/game/utilities/fonts.ts

@@ -1,19 +1,27 @@
-import { Text, TextStyle } from 'pixi.js'
+import {
+  Container,
+  Text,
+  TextStyle,
+  type TextStyleAlign,
+  type TextStyleFontStyle,
+  type TextStyleFontWeight,
+  type TextStyleOptions,
+} from 'pixi.js'
 
 export const dropShadowStyle = {
   alpha: 0.5,
   angle: 0.3,
   blur: 5,
-  distance: 4
+  distance: 4,
 }
 
 export const mainText = new TextStyle({
   dropShadow: dropShadowStyle,
-  fill: '#b71a1a',
+  fill: '#aaaaaa',
   fontFamily: 'Arial, Helvetica, sans-serif',
   fontWeight: 'bold',
   letterSpacing: 1,
-  stroke: '#658f56'
+  stroke: '#565656',
 })
 
 export const playerNameText = new TextStyle({
@@ -23,12 +31,104 @@ export const playerNameText = new TextStyle({
   letterSpacing: 1,
   stroke: '#565656',
   fontSize: 15,
-  fontWeight: 'bold'
+  fontWeight: 'bold',
 })
 
-export function createText(str: string, x: number, y: number, style: TextStyle = mainText) {
+export const summaryTitle = new TextStyle({
+  dropShadow: dropShadowStyle,
+  fill: '#a2a2a2',
+  fontFamily: 'Arial, Helvetica, sans-serif',
+  letterSpacing: 1,
+  stroke: '#565656',
+  fontSize: 15,
+  fontWeight: 'bold',
+})
+
+export const scoreText = new TextStyle({
+  dropShadow: dropShadowStyle,
+  fill: '#aaaaaa',
+  fontFamily: 'Arial, Helvetica, sans-serif',
+  letterSpacing: 1,
+  stroke: '#565656',
+  fontSize: 32,
+  fontWeight: 'bold',
+})
+
+function getStyle(styleOptions: TextStyleOptions = {}) {
+  const {
+    fill = 0xa2a2a2,
+    stroke = 0x565656,
+    fontSize = 15,
+    fontFamily = 'Arial, Helvetica, sans-serif',
+    fontWeight = 'normal',
+    fontStyle = 'normal',
+    dropShadow,
+    letterSpacing = 1,
+  } = styleOptions
+  const style = new TextStyle({
+    fill,
+    fontFamily,
+    letterSpacing,
+    stroke,
+    fontSize,
+    fontStyle,
+    fontWeight: fontWeight as any,
+    dropShadow: dropShadow ? dropShadowStyle : undefined,
+  })
+  return style
+}
+
+export const whiteStyle = (
+  fontSize: number = 15,
+  fontWeight: TextStyleFontWeight = 'normal',
+  dropShadow: boolean = true,
+) =>
+  getStyle({
+    fontSize,
+    fontWeight,
+    dropShadow,
+  })
+
+export const yellowStyle = (
+  fontSize: number = 15,
+  fontWeight: TextStyleFontWeight = 'normal',
+  dropShadow: boolean = true,
+) =>
+  getStyle({
+    fill: 0xffff00,
+    fontSize,
+    fontWeight,
+    dropShadow,
+  })
+
+interface TextOptions {
+  text: string
+  x: number
+  y: number
+  style?: TextStyle
+  container?: Container
+  align?: 'left' | 'center' | 'right'
+  fontStyle?: TextStyleFontStyle
+}
+
+export function createText(textOptions: TextOptions) {
+  const defaultOptions = { style: whiteStyle(), align: 'center' }
+  const { text: str, x, y, style, container, align } = { ...defaultOptions, ...textOptions }
   const text = new Text({ text: str, style })
-  text.anchor.set(0.5, 0.5)
+
+  switch (align) {
+    case 'center':
+      text.anchor.set(0.5, 0.5)
+      break
+    case 'left':
+      text.anchor.set(0, 0.5)
+      break
+    case 'right':
+      text.anchor.set(1, 0.5)
+      break
+  }
+
+  if (container) container.addChild(text)
   text.x = x
   text.y = y
   return text