chore: code reorganized

src/common/constants.ts

@@ -0,0 +1,7 @@
+export const defaultContainerOptions = {
+  width: 100,
+  height: 100,
+  x: 0,
+  y: 0,
+  visible: true
+}

src/common/helpers.ts

@@ -1,5 +1,6 @@
 import { Graphics, Container } from 'pixi.js'
-import type { TileDto } from './interfaces'
+import type { ContainerOptions, TileDto } from './interfaces'
+import { defaultContainerOptions } from './constants'
 
 export function getColorBackground(container: Container, colorName: string, alpha: number = 0.5) {
   const graphics = new Graphics()
@@ -12,24 +13,6 @@ export function getColorBackground(container: Container, colorName: string, alph
   return graphics
 }
 
-interface ContainerOptions {
-  width?: number
-  height?: number
-  x?: number
-  y?: number
-  color?: number
-  visible?: boolean
-  parent?: Container
-}
-
-const defaultContainerOptions = {
-  width: 100,
-  height: 100,
-  x: 0,
-  y: 0,
-  visible: true
-}
-
 export function createContainer(options: ContainerOptions) {
   const opts = { ...defaultContainerOptions, ...options }
   const container = new Container()

src/common/interfaces.ts

@@ -1,3 +1,5 @@
+import type { Container } from 'pixi.js'
+
 export interface PlayerDto {
   id: string
   name: string
@@ -63,3 +65,13 @@ export interface Movement {
   x?: number
   y?: number
 }
+
+export interface ContainerOptions {
+  width?: number
+  height?: number
+  x?: number
+  y?: number
+  color?: number
+  visible?: boolean
+  parent?: Container
+}

src/components/GameComponent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { GameSessionState, GameState, PlayerState } from '@/utilities/interfaces'
+import type { GameSessionState, GameState, PlayerState } from '@/common/interfaces'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { Game } from '@/utilities/Game'
+import { Game } from '@/game/Game'
 import { useGameStore } from '@/stores/game'
 
 const emit = defineEmits(['move'])

src/game/Board.ts

@@ -1,10 +1,19 @@
-import { Application, Container, EventEmitter, Graphics, Text, Ticker } from 'pixi.js'
-import { Scale, type ScaleFunction } from './scale'
-import type { GameState, Movement, TileDto } from './interfaces'
-import { Tile } from './Tile'
-import { DIRECTIONS, createContainer, isTilePair, isTileVertical } from './helpers'
-import { createText } from './fonts'
-import { Dot } from './Dot'
+import {
+  Application,
+  Assets,
+  Container,
+  EventEmitter,
+  Graphics,
+  Sprite,
+  Text,
+  Ticker
+} from 'pixi.js'
+import { Scale, type ScaleFunction } from '@/game/utilities/scale'
+import type { GameState, Movement, TileDto } from '@/common/interfaces'
+import { Tile } from '@/game/Tile'
+import { DIRECTIONS, createContainer, isTilePair } from '@/common/helpers'
+import { createText } from '@/game/utilities/fonts'
+import { Dot } from '@/game/Dot'
 
 export class Board extends EventEmitter {
   private _scale: number = 1
@@ -53,10 +62,15 @@ export class Board extends EventEmitter {
       parent: app.stage
     })
 
+    const background = new Sprite(Assets.get('bg-1'))
+    background.width = this.width
+    background.height = this.height
+    this.container.addChild(background)
+
     this.initialContainer = createContainer({
       width: this.width,
       height: this.height,
-      color: 0x1e2f23,
+      // color: 0x1e2f23,
       visible: false,
       parent: this.container
     })
@@ -64,7 +78,7 @@ export class Board extends EventEmitter {
     this.tilesContainer = createContainer({
       width: this.width,
       height: this.height,
-      color: 0x1e2f23,
+      // color: 0x1e2f23,
       parent: this.container
     })
 
@@ -147,7 +161,7 @@ export class Board extends EventEmitter {
     if (lastMove === null) {
       return
     }
-
+    console.log('lastMove :>> ', lastMove)
     if (
       lastMove !== null &&
       lastMove.tile !== undefined &&

src/game/Dot.ts

@@ -1,4 +1,4 @@
-import { Graphics, Texture, Ticker } from 'pixi.js'
+import { Texture, Ticker } from 'pixi.js'
 import { SpriteBase } from './SpriteBase'
 
 export class Dot extends SpriteBase {

src/game/Game.ts

@@ -1,9 +1,9 @@
 import { Application, Assets } from 'pixi.js'
-import { Board } from './Board'
-import Hand from './Hand'
-import { assets } from '@/utilities/assets'
-import type { Movement, TileDto } from './interfaces'
-import type { Tile } from './Tile'
+import { Board } from '@/game/Board'
+import { assets } from '@/game/utilities/assets'
+import { Tile } from '@/game/Tile'
+import { Hand } from '@/game/Hand'
+import type { Movement, TileDto } from '@/common/interfaces'
 
 export class Game {
   public board!: Board

src/game/Hand.ts

@@ -8,11 +8,11 @@ import {
   Texture,
   Ticker
 } from 'pixi.js'
-import { Tile } from './Tile'
-import type { PlayerState, TileDto } from './interfaces'
+import { Tile } from '@/game/Tile'
+import type { PlayerState, TileDto } from '@/common/interfaces'
 import { GlowFilter } from 'pixi-filters'
 
-export default class Hand extends EventEmitter {
+export class Hand extends EventEmitter {
   tiles: Tile[] = []
   container: Container = new Container()
   buttonPassContainer: Container = new Container()
@@ -168,7 +168,7 @@ export default class Hand extends EventEmitter {
   }
 
   private createTiles(playerState: PlayerState) {
-    return playerState.hand.map((tile, i) => {
+    return playerState.hand.map((tile) => {
       const newTile: Tile = new Tile(tile.id, this.ticker, tile.pips, this.scale)
       newTile.alpha = 0.7
       newTile.anchor = 0.5

src/game/Tile.ts

@@ -1,5 +1,5 @@
 import { Texture, Ticker } from 'pixi.js'
-import { SpriteBase } from './SpriteBase'
+import { SpriteBase } from '@/game/SpriteBase'
 
 export class Tile extends SpriteBase {
   selected: boolean = false

src/game/utilities/assets.ts

@@ -28,6 +28,8 @@ 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'
 
 export const assets = [
   { alias: 'tile-back', src: tileBack },
@@ -59,5 +61,7 @@ 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: 'dot', src: dot },
+  { alias: 'bg-wood-1', src: bgWood_1 },
+  { alias: 'bg-1', src: bg_1 }
 ]

src/game/utilities/mocks.ts

@@ -1,7 +1,7 @@
-import { Tile } from './Tile'
-import type { GameState, Movement } from './interfaces'
-import type { Game } from './Game'
-import { wait } from './helpers'
+import { Tile } from '../Tile'
+import type { GameState, Movement } from '../../common/interfaces'
+import type { Game } from '../Game'
+import { wait } from '../../common/helpers'
 
 export const playerState = {
   id: '6fddcf4f-eaa9-4c87-a599-2af944477091',

src/managers/SocketIoEventManager.ts

@@ -1,6 +1,6 @@
 import { useGameStore } from '@/stores/game'
-import { wait } from '@/utilities/helpers'
-import type { GameSessionState } from '@/utilities/interfaces'
+import { wait } from '@/common/helpers'
+import type { GameSessionState } from '@/common/interfaces'
 import { storeToRefs } from 'pinia'
 
 export class SocketIoEventManager {

src/services/SocketIoClientService.ts

@@ -1,4 +1,4 @@
-import type { GameSessionState, GameState, PlayerState } from '@/utilities/interfaces'
+import type { GameSessionState, GameState, PlayerState } from '@/common/interfaces'
 import { io, Socket } from 'socket.io-client'
 import { SocketIoEventManager } from '@/managers/SocketIoEventManager'
 
@@ -56,6 +56,11 @@ export class SocketIoClientService {
     this.socket.on('chooseTile', async (data: any, callback: any) => {
       callback(await this.gameEventManager.handleCanSelectTileEvent())
     })
+
+    this.socket.on('ping', () => {
+      console.log('Ping received from server')
+      this.socket.emit('pong') // Send pong response
+    })
   }
 
   sendMessage(event: string, data: any): void {

src/stores/game.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { GameSessionState, GameState, Movement, PlayerState } from '@/utilities/interfaces'
+import type { GameSessionState, GameState, Movement, PlayerState } from '@/common/interfaces'
 
 export const useGameStore = defineStore('game', () => {
   const sessionState = ref<GameSessionState | undefined>(undefined)

src/views/GameView.vue

@@ -70,10 +70,12 @@ async function startSession() {
 
 async function joinSession() {
   if (sessionId.value) {
-    await socketService.sendMessageWithAck('joinSession', {
+    const response = await socketService.sendMessageWithAck('joinSession', {
       user: 'pepe',
       sessionId: sessionId.value
     })
+    // sessionId.value = response.sessionId
+    playerId.value = response.playerId
   }
 }
 
@@ -141,7 +143,7 @@ function copySeed() {
             <input class="input" style="margin-bottom: 0" v-model="seed" placeholder="Seed" />
           </div>
         </div>
-        <div class="grid" v-if="!sessionId">
+        <div class="grid">
           <div class="cell">
             <button class="button" style="width: 200px" @click="joinSession">Join Session</button>
           </div>