arhuako/domino-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

match page (initial) i18n

Browse Source
This commit is contained in:
Jose Conde
2024-07-16 19:22:06 +02:00
parent c3ba84a815
commit 8f2c492278
24 changed files with 482 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/game/Board.ts
View File

@ -1,8 +1,8 @@
import { Application, Assets, Container, EventEmitter, Sprite, Text, Ticker } from 'pixi.js'
import { Application, Container, EventEmitter, Text, Ticker } from 'pixi.js'
import { Scale, type ScaleFunction } from '@/game/utilities/scale'
import type { AnimationOptions, Movement, PlayerDto, TileDto } from '@/common/interfaces'
import { Tile } from '@/game/Tile'
import { DIRECTIONS, createContainer, createCrosshair, isTilePair } from '@/common/helpers'
import { DIRECTIONS, createContainer, isTilePair } from '@/common/helpers'
import { createText } from '@/game/utilities/fonts'
import { LoggingService } from '@/services/LoggingService'
import { GlowFilter } from 'pixi-filters'
@ -85,19 +85,12 @@ export class Board extends EventEmitter {
visible: false,
})
createCrosshair(this.tilesContainer, 0xff0000, {
width: this.width,
height: this.height,
x: this.scaleX(0),
y: this.scaleY(0),
})
createCrosshair(this.interactionContainer, 0xffff00, {
width: this.width,
height: this.height,
x: this.scaleX(0),
y: this.scaleY(0),
})
// createCrosshair(this.tilesContainer, 0xff0000, {
// width: this.width,
// height: this.height,
// x: this.scaleX(0),
// y: this.scaleY(0),
// })
this.textContainer = createContainer({
width: this.width,
@ -105,7 +98,7 @@ export class Board extends EventEmitter {
parent: this.container,
})
this.showText(t('starting_game'))
this.showText(t('game.starting_game'))
}
private calculateScale() {
@ -144,11 +137,11 @@ export class Board extends EventEmitter {
}
async setPlayerTurn(player: PlayerDto) {
this.showText('Your turn!')
this.showText(t('game.your-turn'))
}
async setServerPlayerTurn(currentPlayer: PlayerDto) {
this.showText(`${currentPlayer.name}'s turn!\n Please wait...`)
this.showText(t('game.player-turn', [currentPlayer.name]))
}
async playerMove(move: any, playerId: string) {
@ -599,8 +592,7 @@ export class Board extends EventEmitter {
return [canPlayNorth, canPlayEast, canPlaySouth, canPlayWest]
}
gameFinished(data: any) {
const { lastGame, gameState } = data
clean() {
this.tiles = []
this.boneyard = []
this.movements = []
@ -614,10 +606,13 @@ export class Board extends EventEmitter {
this.firstTile = undefined
this.tilesContainer.removeChildren()
this.interactionContainer.removeChildren()
this.showText(`Game finished \n Winner ${lastGame?.winner?.name ?? 'No winner'}`)
}
matchFinished(data: any) {
// this.showText(`Game finished \n Winner ${lastGame?.winner?.name ?? 'No winner'}`)
gameFinished() {
this.showText(t('game.round-finished'))
}
matchFinished() {
this.showText(t('game.match-finished'))
}
}

8
src/game/Config.ts Normal file
View File

@ -0,0 +1,8 @@
import type { Config } from '@/common/interfaces'
const config: Config = {
waitMillisToShowSummary: 1000,
activeHandStrokeColor: 0xb39c4d,
}
export default config

50
src/game/Game.ts
View File

@ -1,4 +1,4 @@
import { Application, Assets, Container, Sprite } from 'pixi.js'
import { Application, Assets, Container, EventEmitter, Sprite } from 'pixi.js'
import { Board } from '@/game/Board'
import { assets } from '@/game/utilities/assets'
import { Tile } from '@/game/Tile'
@ -9,6 +9,7 @@ import { wait } from '@/common/helpers'
import { Actions } from 'pixi-actions'
import { OtherHand } from './OtherHand'
import { GameSummayView } from './GameSummayView'
import Config from './Config'
interface GameOptions {
boardScale: number
@ -18,7 +19,7 @@ interface GameOptions {
background: string
}
export class Game {
export class Game extends EventEmitter {
public board!: Board
public hand!: Hand
private app: Application = new Application()
@ -27,6 +28,7 @@ export class Game {
private otherHands: OtherHand[] = []
private backgroundLayer: Container = new Container()
private gameSummaryView!: GameSummayView
private players: PlayerDto[] = []
constructor(
private options: GameOptions = {
@ -39,7 +41,9 @@ export class Game {
private socketService: SocketIoClientService,
private playerId: string,
private sessionId: string,
) {}
) {
super()
}
async setup(): Promise<HTMLCanvasElement> {
const width = this.options.width || 1200
@ -59,7 +63,8 @@ export class Game {
new OtherHand(this.app, 'top'),
new OtherHand(this.app, 'right'),
]
this.initOtherHands(players)
this.initPlayers(players)
this.players = players
this.gameSummaryView = new GameSummayView(this.app)
this.hand.scale = this.options.handScale
this.board.scale = this.options.boardScale
@ -81,23 +86,23 @@ export class Game {
this.backgroundLayer.addChild(background)
}
initOtherHands(players: PlayerDto[]) {
initPlayers(players: PlayerDto[]) {
const myIndex = players.findIndex((player) => player.id === this.playerId)
const copy = [...players]
const cut = copy.splice(myIndex)
cut.shift()
const player = cut.shift()
const final = cut.concat(copy)
for (let i = 0; i < final.length; i++) {
const hand = this.otherHands[i]
hand.setPlayer(final[i])
}
this.hand.setPlayer(player)
this.board.otherPlayerHands = this.otherHands
}
updateOtherHands(gameState: GameDto) {
const players = gameState.players
updateOtherHands(players: PlayerDto[]) {
players.forEach((player) => {
const hand = this.otherHands.find((hand) => hand.player?.id === player.id)
if (hand) {
@ -115,6 +120,7 @@ export class Game {
setPlayersInactive() {
this.otherHands.forEach((hand) => hand.setActive(false))
this.hand.setActive(false)
}
async preload() {
@ -148,7 +154,12 @@ export class Game {
await this.board.updateBoard(move, undefined)
})
this.gameSummaryView.on('finishClick', (data) => {
this.emit('game:finish-click', data)
})
this.gameSummaryView.on('nextClick', (data) => {
this.board.clean()
this.updateScoreboard(data.sessionState)
this.socketService.sendMessage('client:set-client-ready-for-next-game', {
userId: this.playerId,
@ -161,11 +172,13 @@ export class Game {
private updateScoreboard(sessionState: MatchSessionDto) {
const scoreboard = sessionState.scoreboard
this.otherHands.forEach((hand) => {
const player: PlayerDto | undefined = hand.player
const myScore = scoreboard.find((d) => d.id === this.playerId)?.score || 0
this.hand.setScore(myScore)
this.otherHands.forEach((otherHand) => {
const player: PlayerDto | undefined = otherHand.player
const name: string = player?.name || ''
const score = scoreboard.find((d) => d.name === name)?.score || 0
hand.setScore(score)
otherHand.setScore(score)
})
}
@ -198,6 +211,7 @@ export class Game {
const currentPlayer = state?.currentPlayer!
this.setPlayersInactive()
if (currentPlayer.id === this.playerId) {
this.hand.setActive(true)
this.hand.prepareForMove(this.board.count === 0, this.board.freeEnds)
this.board.setPlayerTurn(currentPlayer)
} else {
@ -248,15 +262,19 @@ export class Game {
})
}
gameFinished(data: any) {
async gameFinished(data: any) {
await wait(Config.waitMillisToShowSummary)
this.updateOtherHands(data.lastGame.players)
this.hand.gameFinished()
this.board.gameFinished(data)
this.board.gameFinished()
this.setPlayersInactive()
this.gameSummaryView.setGameSummary(data, 'round')
}
matchFinished(data: any) {
// this.hand.matchFinished()
this.board.matchFinished(data)
async matchFinished(data: any) {
await wait(Config.waitMillisToShowSummary)
this.updateOtherHands(data.lastGame.players)
this.board.matchFinished()
this.gameSummaryView.setGameSummary(data, 'match')
}

4
src/game/GameSummayView.ts
View File

@ -30,8 +30,6 @@ export class GameSummayView extends EventEmitter {
height: this.height,
parent: this.container,
})
console.log('GameSummaryView created!')
this.container.visible = false
}
@ -67,7 +65,7 @@ export class GameSummayView extends EventEmitter {
if (this.gameSummary.isBlocked) {
line += 30
this.container.addChild(
this.layer.addChild(
createText({
text: '(Blocked)',
x: this.width / 2,

62
src/game/Hand.ts
View File

@ -1,16 +1,19 @@
import { Application, Container, EventEmitter, Sprite, Texture, Ticker } from 'pixi.js'
import { Application, Container, EventEmitter, Graphics, Sprite, Texture, Ticker } from 'pixi.js'
import { Tile } from '@/game/Tile'
import type { PlayerDto, TileDto } from '@/common/interfaces'
import { GlowFilter } from 'pixi-filters'
import { Scale, type ScaleFunction } from './utilities/scale'
import { LoggingService } from '@/services/LoggingService'
import { createButton, createContainer } from '@/common/helpers'
import { Action, Actions } from 'pixi-actions'
import { createText, playerNameText, whiteStyle } from './utilities/fonts'
import Config from '@/game/Config'
export class Hand extends EventEmitter {
tiles: Tile[] = []
container: Container = new Container()
buttonPass: Container = new Container()
scoreLayer: Container = new Container()
activeLayer: Container = new Container()
height: number
width: number
ticker: Ticker
@ -27,18 +30,22 @@ export class Hand extends EventEmitter {
tilesLayer!: Container
interactionsLayer!: Container
score: number = 0
active: boolean = false
private player!: PlayerDto
constructor(app: Application) {
super()
app.stage.addChild(this.container)
this.ticker = app.ticker
this.height = 130 * this.scale
this.width = app.canvas.width
this.width = 800 // app.canvas.width
this.container.y = app.canvas.height - this.height
this.container.x = app.canvas.width / 2 - this.width / 2
this.container.width = this.width
this.container.height = this.height
this.calculateScale()
this.initLayers()
this.render()
}
initLayers() {
@ -58,12 +65,12 @@ export class Hand extends EventEmitter {
y: 0,
parent: this.container,
})
this.container.addChild(this.scoreLayer)
this.container.addChild(this.activeLayer)
}
gameFinished() {
this.logger.debug('gameFinished')
this.tiles = []
this.initialized = false
}
@ -205,6 +212,22 @@ export class Hand extends EventEmitter {
this.render()
}
setPlayer(player: PlayerDto | undefined) {
if (!player) return
this.player = player
this.render()
}
setScore(score: number) {
this.score = score
this.render()
}
setActive(active: boolean) {
this.active = active
this.render()
}
private createTiles(playerState: PlayerDto) {
return playerState.hand.map((tile: TileDto) => {
const newTile: Tile = new Tile(tile.id, this.ticker, tile.pips, this.scale, tile.playerId)
@ -244,11 +267,38 @@ export class Hand extends EventEmitter {
}
renderScore() {
//this.scoreLayer.removeChildren()
this.scoreLayer.removeChildren()
const name = createText({
text: this.player?.name ?? '-',
x: 100,
y: 50,
style: playerNameText,
})
const text = createText({
text: `${this.score}`,
x: 100,
// x: this.width - 5,
y: 80,
style: whiteStyle(36, 'bold'),
})
text.anchor.set(1, 0.5)
this.scoreLayer.addChild(name)
this.scoreLayer.addChild(text)
}
renderActive() {
this.activeLayer.removeChildren()
if (this.active) {
const rectangle = new Graphics()
.roundRect(0, 0, this.width, this.height - 1, 5)
.stroke(Config.activeHandStrokeColor)
this.activeLayer.addChild(rectangle)
}
}
render() {
this.renderTiles()
this.renderScore()
this.renderActive()
}
}

14
src/game/OtherHand.ts
View File

@ -4,7 +4,8 @@ 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, scoreText } from './utilities/fonts'
import { createText, playerNameText, whiteStyle } from './utilities/fonts'
import Config from '@/game/Config'
export class OtherHand {
tilesInitialNumber: number = 7
@ -62,10 +63,11 @@ export class OtherHand {
setScore(score: number) {
this.score = score
this.render()
}
setHand(tiles: TileDto[]) {
this.hand = tiles.map((tile) => new Tile(tile.id, this.app.ticker, undefined, this.scale))
this.hand = tiles.map((tile) => new Tile(tile.id, this.app.ticker, tile.pips, this.scale))
this.render()
}
@ -80,7 +82,7 @@ export class OtherHand {
text: `${this.score}`,
x: this.width - 5,
y: 50,
style: scoreText,
style: whiteStyle(36, 'bold'),
})
text.anchor.set(1, 0.5)
this.scoreLayer.addChild(text)
@ -90,7 +92,7 @@ export class OtherHand {
this.tilesLayer.removeChildren()
const x = -9
this.hand.forEach((tile, index) => {
tile.setPosition(this.scaleX(x + index * 2), this.height / 2)
tile.setPosition(this.scaleX(x + index * 2), this.height / 2 + 10)
this.tilesLayer.addChild(tile.getSprite())
})
}
@ -98,7 +100,9 @@ export class OtherHand {
private renderActive() {
this.interactionsLayer.removeChildren()
if (this.active) {
const rectangle = new Graphics().roundRect(0, 0, this.width, this.height, 5).stroke(0xffff00)
const rectangle = new Graphics()
.roundRect(0, 0, this.width, this.height, 5)
.stroke(Config.activeHandStrokeColor)
this.interactionsLayer.addChild(rectangle)
}
}