chore: code reorganized
This commit is contained in:
parent
39ee278c27
commit
c40dcd74db
BIN
src/assets/images/backgrounds/bg-1.png
Normal file
BIN
src/assets/images/backgrounds/bg-1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.9 MiB |
BIN
src/assets/images/backgrounds/wood-1.jpg
Normal file
BIN
src/assets/images/backgrounds/wood-1.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.9 MiB |
7
src/common/constants.ts
Normal file
7
src/common/constants.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export const defaultContainerOptions = {
|
||||
width: 100,
|
||||
height: 100,
|
||||
x: 0,
|
||||
y: 0,
|
||||
visible: true
|
||||
}
|
@ -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()
|
@ -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
|
||||
}
|
@ -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'])
|
||||
|
@ -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 &&
|
@ -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 {
|
@ -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
|
@ -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
|
@ -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
|
@ -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 }
|
||||
]
|
@ -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',
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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)
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user