adding tauri

src/game/Game.ts

@@ -1,9 +1,16 @@
-import { Application, Assets, Container, EventEmitter, Sprite } from 'pixi.js'
+import { Application, Assets, Container, EventEmitter, TilingSprite } 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, MatchSessionDto, Movement, PlayerDto, TileDto } from '@/common/interfaces'
+import type {
+  GameDto,
+  MatchSessionDto,
+  MatchSessionOptions,
+  Movement,
+  PlayerDto,
+  TileDto,
+} from '@/common/interfaces'
 import type { SocketIoClientService } from '@/services/SocketIoClientService'
 import { wait } from '@/common/helpers'
 import { Actions } from 'pixi-actions'
@@ -31,23 +38,24 @@ export class Game extends EventEmitter {
   private players: PlayerDto[] = []
 
   constructor(
-    private options: GameOptions = {
-      boardScale: 1,
-      handScale: 1,
-      width: 1200,
-      height: 800,
-      background: 'bg-green',
-    },
+    private options: MatchSessionOptions,
     private socketService: SocketIoClientService,
     private playerId: string,
     private sessionId: string,
   ) {
     super()
+    this.options.screen = {
+      width: 1280,
+      height: 720,
+      handScale: 1,
+      boardScale: 0.7,
+      ...this.options.screen,
+    }
   }
 
   async setup(): Promise<HTMLCanvasElement> {
-    const width = this.options.width || 1200
-    const height = this.options.height || 800
+    const width = this.options.screen?.width || 1280
+    const height = this.options.screen?.height || 720
 
     await this.app.init({ width, height })
     this.app.ticker.add((tick) => Actions.tick(tick.deltaTime / 60))
@@ -65,9 +73,9 @@ export class Game extends EventEmitter {
     ]
     this.initPlayers(players)
     this.players = players
-    this.gameSummaryView = new GameSummayView(this.app)
-    this.hand.scale = this.options.handScale
-    this.board.scale = this.options.boardScale
+    this.gameSummaryView = new GameSummayView(this.app, this.options)
+    this.hand.scale = this.options.screen?.handScale || 1
+    this.board.scale = this.options.screen?.boardScale || 0.7
     this.setBoardEvents()
     this.setHandEvents()
     this.initEventBus()
@@ -80,7 +88,7 @@ export class Game extends EventEmitter {
 
   iniialStuff(app: Application) {
     app.stage.addChild(this.backgroundLayer)
-    const background = new Sprite(Assets.get(`bg-${this.options.background}`))
+    const background = new TilingSprite(Assets.get(`bg-${this.options.background}`))
 
     this.backgroundLayer.addChild(background)
   }

src/game/GameSummayView.ts

@@ -1,5 +1,5 @@
 import { createButton, createContainer } from '@/common/helpers'
-import type { GameSummary, MatchSessionDto } from '@/common/interfaces'
+import type { GameSummary, MatchSessionDto, MatchSessionOptions } from '@/common/interfaces'
 import { EventEmitter, type Application, type Container } from 'pixi.js'
 import { createText, whiteStyle, yellowStyle } from './utilities/fonts'
 
@@ -12,7 +12,10 @@ export class GameSummayView extends EventEmitter {
   matchState!: MatchSessionDto
   type: 'round' | 'match' = 'round'
 
-  constructor(app: Application) {
+  constructor(
+    app: Application,
+    private options: MatchSessionOptions,
+  ) {
     super()
     this.width = 500
     this.height = 400

src/game/utilities/assets.ts

@@ -28,10 +28,11 @@ 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 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 bg_blue from '@/assets/images/backgrounds/bg-blue.png'
+import bg_gray from '@/assets/images/backgrounds/bg-1.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'
@@ -69,10 +70,11 @@ export const assets = [
   { alias: 'tile-6_5', src: tile6_5 },
   { alias: 'tile-6_6', src: tile6_6 },
   { alias: 'bg-wood-1', src: bgWood_1 },
-  { 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: 'bg-blue', src: bg_blue },
+  { alias: 'bg-gray', src: bg_gray },
   { alias: 'snd-move-1', src: snd_move_1 },
   { alias: 'snd-move-2', src: snd_move_2 },
   { alias: 'snd-move-3', src: snd_move_3 },