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 { 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) {
|
export function getColorBackground(container: Container, colorName: string, alpha: number = 0.5) {
|
||||||
const graphics = new Graphics()
|
const graphics = new Graphics()
|
||||||
@ -12,24 +13,6 @@ export function getColorBackground(container: Container, colorName: string, alph
|
|||||||
return graphics
|
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) {
|
export function createContainer(options: ContainerOptions) {
|
||||||
const opts = { ...defaultContainerOptions, ...options }
|
const opts = { ...defaultContainerOptions, ...options }
|
||||||
const container = new Container()
|
const container = new Container()
|
@ -1,3 +1,5 @@
|
|||||||
|
import type { Container } from 'pixi.js'
|
||||||
|
|
||||||
export interface PlayerDto {
|
export interface PlayerDto {
|
||||||
id: string
|
id: string
|
||||||
name: string
|
name: string
|
||||||
@ -63,3 +65,13 @@ export interface Movement {
|
|||||||
x?: number
|
x?: number
|
||||||
y?: 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">
|
<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 { onMounted, onUnmounted, ref, watch } from 'vue'
|
||||||
import { Game } from '@/utilities/Game'
|
import { Game } from '@/game/Game'
|
||||||
import { useGameStore } from '@/stores/game'
|
import { useGameStore } from '@/stores/game'
|
||||||
|
|
||||||
const emit = defineEmits(['move'])
|
const emit = defineEmits(['move'])
|
||||||
|
@ -1,10 +1,19 @@
|
|||||||
import { Application, Container, EventEmitter, Graphics, Text, Ticker } from 'pixi.js'
|
import {
|
||||||
import { Scale, type ScaleFunction } from './scale'
|
Application,
|
||||||
import type { GameState, Movement, TileDto } from './interfaces'
|
Assets,
|
||||||
import { Tile } from './Tile'
|
Container,
|
||||||
import { DIRECTIONS, createContainer, isTilePair, isTileVertical } from './helpers'
|
EventEmitter,
|
||||||
import { createText } from './fonts'
|
Graphics,
|
||||||
import { Dot } from './Dot'
|
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 {
|
export class Board extends EventEmitter {
|
||||||
private _scale: number = 1
|
private _scale: number = 1
|
||||||
@ -53,10 +62,15 @@ export class Board extends EventEmitter {
|
|||||||
parent: app.stage
|
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({
|
this.initialContainer = createContainer({
|
||||||
width: this.width,
|
width: this.width,
|
||||||
height: this.height,
|
height: this.height,
|
||||||
color: 0x1e2f23,
|
// color: 0x1e2f23,
|
||||||
visible: false,
|
visible: false,
|
||||||
parent: this.container
|
parent: this.container
|
||||||
})
|
})
|
||||||
@ -64,7 +78,7 @@ export class Board extends EventEmitter {
|
|||||||
this.tilesContainer = createContainer({
|
this.tilesContainer = createContainer({
|
||||||
width: this.width,
|
width: this.width,
|
||||||
height: this.height,
|
height: this.height,
|
||||||
color: 0x1e2f23,
|
// color: 0x1e2f23,
|
||||||
parent: this.container
|
parent: this.container
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -147,7 +161,7 @@ export class Board extends EventEmitter {
|
|||||||
if (lastMove === null) {
|
if (lastMove === null) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
console.log('lastMove :>> ', lastMove)
|
||||||
if (
|
if (
|
||||||
lastMove !== null &&
|
lastMove !== null &&
|
||||||
lastMove.tile !== undefined &&
|
lastMove.tile !== undefined &&
|
@ -1,4 +1,4 @@
|
|||||||
import { Graphics, Texture, Ticker } from 'pixi.js'
|
import { Texture, Ticker } from 'pixi.js'
|
||||||
import { SpriteBase } from './SpriteBase'
|
import { SpriteBase } from './SpriteBase'
|
||||||
|
|
||||||
export class Dot extends SpriteBase {
|
export class Dot extends SpriteBase {
|
@ -1,9 +1,9 @@
|
|||||||
import { Application, Assets } from 'pixi.js'
|
import { Application, Assets } from 'pixi.js'
|
||||||
import { Board } from './Board'
|
import { Board } from '@/game/Board'
|
||||||
import Hand from './Hand'
|
import { assets } from '@/game/utilities/assets'
|
||||||
import { assets } from '@/utilities/assets'
|
import { Tile } from '@/game/Tile'
|
||||||
import type { Movement, TileDto } from './interfaces'
|
import { Hand } from '@/game/Hand'
|
||||||
import type { Tile } from './Tile'
|
import type { Movement, TileDto } from '@/common/interfaces'
|
||||||
|
|
||||||
export class Game {
|
export class Game {
|
||||||
public board!: Board
|
public board!: Board
|
@ -8,11 +8,11 @@ import {
|
|||||||
Texture,
|
Texture,
|
||||||
Ticker
|
Ticker
|
||||||
} from 'pixi.js'
|
} from 'pixi.js'
|
||||||
import { Tile } from './Tile'
|
import { Tile } from '@/game/Tile'
|
||||||
import type { PlayerState, TileDto } from './interfaces'
|
import type { PlayerState, TileDto } from '@/common/interfaces'
|
||||||
import { GlowFilter } from 'pixi-filters'
|
import { GlowFilter } from 'pixi-filters'
|
||||||
|
|
||||||
export default class Hand extends EventEmitter {
|
export class Hand extends EventEmitter {
|
||||||
tiles: Tile[] = []
|
tiles: Tile[] = []
|
||||||
container: Container = new Container()
|
container: Container = new Container()
|
||||||
buttonPassContainer: Container = new Container()
|
buttonPassContainer: Container = new Container()
|
||||||
@ -168,7 +168,7 @@ export default class Hand extends EventEmitter {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private createTiles(playerState: PlayerState) {
|
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)
|
const newTile: Tile = new Tile(tile.id, this.ticker, tile.pips, this.scale)
|
||||||
newTile.alpha = 0.7
|
newTile.alpha = 0.7
|
||||||
newTile.anchor = 0.5
|
newTile.anchor = 0.5
|
@ -1,5 +1,5 @@
|
|||||||
import { Texture, Ticker } from 'pixi.js'
|
import { Texture, Ticker } from 'pixi.js'
|
||||||
import { SpriteBase } from './SpriteBase'
|
import { SpriteBase } from '@/game/SpriteBase'
|
||||||
|
|
||||||
export class Tile extends SpriteBase {
|
export class Tile extends SpriteBase {
|
||||||
selected: boolean = false
|
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_5 from '@/assets/images/tiles/6-5.png'
|
||||||
import tile6_6 from '@/assets/images/tiles/6-6.png'
|
import tile6_6 from '@/assets/images/tiles/6-6.png'
|
||||||
import dot from '@/assets/images/circle.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 = [
|
export const assets = [
|
||||||
{ alias: 'tile-back', src: tileBack },
|
{ alias: 'tile-back', src: tileBack },
|
||||||
@ -59,5 +61,7 @@ export const assets = [
|
|||||||
{ alias: 'tile-6_4', src: tile6_4 },
|
{ alias: 'tile-6_4', src: tile6_4 },
|
||||||
{ alias: 'tile-6_5', src: tile6_5 },
|
{ alias: 'tile-6_5', src: tile6_5 },
|
||||||
{ alias: 'tile-6_6', src: tile6_6 },
|
{ 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 { Tile } from '../Tile'
|
||||||
import type { GameState, Movement } from './interfaces'
|
import type { GameState, Movement } from '../../common/interfaces'
|
||||||
import type { Game } from './Game'
|
import type { Game } from '../Game'
|
||||||
import { wait } from './helpers'
|
import { wait } from '../../common/helpers'
|
||||||
|
|
||||||
export const playerState = {
|
export const playerState = {
|
||||||
id: '6fddcf4f-eaa9-4c87-a599-2af944477091',
|
id: '6fddcf4f-eaa9-4c87-a599-2af944477091',
|
@ -1,6 +1,6 @@
|
|||||||
import { useGameStore } from '@/stores/game'
|
import { useGameStore } from '@/stores/game'
|
||||||
import { wait } from '@/utilities/helpers'
|
import { wait } from '@/common/helpers'
|
||||||
import type { GameSessionState } from '@/utilities/interfaces'
|
import type { GameSessionState } from '@/common/interfaces'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
|
|
||||||
export class SocketIoEventManager {
|
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 { io, Socket } from 'socket.io-client'
|
||||||
import { SocketIoEventManager } from '@/managers/SocketIoEventManager'
|
import { SocketIoEventManager } from '@/managers/SocketIoEventManager'
|
||||||
|
|
||||||
@ -56,6 +56,11 @@ export class SocketIoClientService {
|
|||||||
this.socket.on('chooseTile', async (data: any, callback: any) => {
|
this.socket.on('chooseTile', async (data: any, callback: any) => {
|
||||||
callback(await this.gameEventManager.handleCanSelectTileEvent())
|
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 {
|
sendMessage(event: string, data: any): void {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { defineStore } from 'pinia'
|
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', () => {
|
export const useGameStore = defineStore('game', () => {
|
||||||
const sessionState = ref<GameSessionState | undefined>(undefined)
|
const sessionState = ref<GameSessionState | undefined>(undefined)
|
||||||
|
@ -70,10 +70,12 @@ async function startSession() {
|
|||||||
|
|
||||||
async function joinSession() {
|
async function joinSession() {
|
||||||
if (sessionId.value) {
|
if (sessionId.value) {
|
||||||
await socketService.sendMessageWithAck('joinSession', {
|
const response = await socketService.sendMessageWithAck('joinSession', {
|
||||||
user: 'pepe',
|
user: 'pepe',
|
||||||
sessionId: sessionId.value
|
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" />
|
<input class="input" style="margin-bottom: 0" v-model="seed" placeholder="Seed" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid" v-if="!sessionId">
|
<div class="grid">
|
||||||
<div class="cell">
|
<div class="cell">
|
||||||
<button class="button" style="width: 200px" @click="joinSession">Join Session</button>
|
<button class="button" style="width: 200px" @click="joinSession">Join Session</button>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user