adding 18n and player turn highlitgh
This commit is contained in:
parent
5392dce264
commit
c3ba84a815
61
package-lock.json
generated
61
package-lock.json
generated
@ -20,6 +20,7 @@
|
|||||||
"socket.io-client": "^4.7.5",
|
"socket.io-client": "^4.7.5",
|
||||||
"vue": "^3.4.29",
|
"vue": "^3.4.29",
|
||||||
"vue-clipboard3": "^2.0.0",
|
"vue-clipboard3": "^2.0.0",
|
||||||
|
"vue-i18n": "^9.13.1",
|
||||||
"vue-router": "^4.3.3"
|
"vue-router": "^4.3.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -558,6 +559,47 @@
|
|||||||
"deprecated": "Use @eslint/object-schema instead",
|
"deprecated": "Use @eslint/object-schema instead",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@intlify/core-base": {
|
||||||
|
"version": "9.13.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.13.1.tgz",
|
||||||
|
"integrity": "sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==",
|
||||||
|
"dependencies": {
|
||||||
|
"@intlify/message-compiler": "9.13.1",
|
||||||
|
"@intlify/shared": "9.13.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 16"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/kazupon"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@intlify/message-compiler": {
|
||||||
|
"version": "9.13.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.13.1.tgz",
|
||||||
|
"integrity": "sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==",
|
||||||
|
"dependencies": {
|
||||||
|
"@intlify/shared": "9.13.1",
|
||||||
|
"source-map-js": "^1.0.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 16"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/kazupon"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@intlify/shared": {
|
||||||
|
"version": "9.13.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.13.1.tgz",
|
||||||
|
"integrity": "sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 16"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/kazupon"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@isaacs/cliui": {
|
"node_modules/@isaacs/cliui": {
|
||||||
"version": "8.0.2",
|
"version": "8.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
|
||||||
@ -4998,6 +5040,25 @@
|
|||||||
"eslint": ">=6.0.0"
|
"eslint": ">=6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/vue-i18n": {
|
||||||
|
"version": "9.13.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.13.1.tgz",
|
||||||
|
"integrity": "sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@intlify/core-base": "9.13.1",
|
||||||
|
"@intlify/shared": "9.13.1",
|
||||||
|
"@vue/devtools-api": "^6.5.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 16"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/kazupon"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vue-router": {
|
"node_modules/vue-router": {
|
||||||
"version": "4.4.0",
|
"version": "4.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
|
||||||
|
@ -26,6 +26,7 @@
|
|||||||
"socket.io-client": "^4.7.5",
|
"socket.io-client": "^4.7.5",
|
||||||
"vue": "^3.4.29",
|
"vue": "^3.4.29",
|
||||||
"vue-clipboard3": "^2.0.0",
|
"vue-clipboard3": "^2.0.0",
|
||||||
|
"vue-i18n": "^9.13.1",
|
||||||
"vue-router": "^4.3.3"
|
"vue-router": "^4.3.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -106,6 +106,7 @@ export interface GameOptions {
|
|||||||
height?: number
|
height?: number
|
||||||
background?: string
|
background?: string
|
||||||
teamed?: boolean
|
teamed?: boolean
|
||||||
|
pointsToWin?: number
|
||||||
}
|
}
|
||||||
export interface GameSummary {
|
export interface GameSummary {
|
||||||
gameId: string
|
gameId: string
|
||||||
|
@ -9,6 +9,7 @@ import { GlowFilter } from 'pixi-filters'
|
|||||||
import { ORIENTATION_ANGLES } from '@/common/constants'
|
import { ORIENTATION_ANGLES } from '@/common/constants'
|
||||||
import type { OtherHand } from './OtherHand'
|
import type { OtherHand } from './OtherHand'
|
||||||
import { sound } from '@pixi/sound'
|
import { sound } from '@pixi/sound'
|
||||||
|
import { t } from '@/i18n'
|
||||||
|
|
||||||
export class Board extends EventEmitter {
|
export class Board extends EventEmitter {
|
||||||
private _scale: number = 1
|
private _scale: number = 1
|
||||||
@ -104,7 +105,7 @@ export class Board extends EventEmitter {
|
|||||||
parent: this.container,
|
parent: this.container,
|
||||||
})
|
})
|
||||||
|
|
||||||
this.showText('Starting game...')
|
this.showText(t('starting_game'))
|
||||||
}
|
}
|
||||||
|
|
||||||
private calculateScale() {
|
private calculateScale() {
|
||||||
@ -137,7 +138,7 @@ export class Board extends EventEmitter {
|
|||||||
createText({
|
createText({
|
||||||
text,
|
text,
|
||||||
x: this.scaleX(0),
|
x: this.scaleX(0),
|
||||||
y: -10,
|
y: this.height - 24,
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -3,20 +3,12 @@ import { Board } from '@/game/Board'
|
|||||||
import { assets } from '@/game/utilities/assets'
|
import { assets } from '@/game/utilities/assets'
|
||||||
import { Tile } from '@/game/Tile'
|
import { Tile } from '@/game/Tile'
|
||||||
import { Hand } from '@/game/Hand'
|
import { Hand } from '@/game/Hand'
|
||||||
import type {
|
import type { GameDto, MatchSessionDto, Movement, PlayerDto, TileDto } from '@/common/interfaces'
|
||||||
GameDto,
|
|
||||||
GameSummary,
|
|
||||||
MatchSessionDto,
|
|
||||||
Movement,
|
|
||||||
PlayerDto,
|
|
||||||
TileDto,
|
|
||||||
} from '@/common/interfaces'
|
|
||||||
import type { SocketIoClientService } from '@/services/SocketIoClientService'
|
import type { SocketIoClientService } from '@/services/SocketIoClientService'
|
||||||
import { wait } from '@/common/helpers'
|
import { wait } from '@/common/helpers'
|
||||||
import { Actions } from 'pixi-actions'
|
import { Actions } from 'pixi-actions'
|
||||||
import { OtherHand } from './OtherHand'
|
import { OtherHand } from './OtherHand'
|
||||||
import { GameSummayView } from './GameSummayView'
|
import { GameSummayView } from './GameSummayView'
|
||||||
import { summaryMock } from '@/common/summarymock'
|
|
||||||
|
|
||||||
interface GameOptions {
|
interface GameOptions {
|
||||||
boardScale: number
|
boardScale: number
|
||||||
@ -106,7 +98,6 @@ export class Game {
|
|||||||
|
|
||||||
updateOtherHands(gameState: GameDto) {
|
updateOtherHands(gameState: GameDto) {
|
||||||
const players = gameState.players
|
const players = gameState.players
|
||||||
|
|
||||||
players.forEach((player) => {
|
players.forEach((player) => {
|
||||||
const hand = this.otherHands.find((hand) => hand.player?.id === player.id)
|
const hand = this.otherHands.find((hand) => hand.player?.id === player.id)
|
||||||
if (hand) {
|
if (hand) {
|
||||||
@ -115,6 +106,17 @@ export class Game {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
highLightPlayer(player: PlayerDto) {
|
||||||
|
const hand = this.otherHands.find((hand) => hand.player?.id === player.id)
|
||||||
|
if (hand) {
|
||||||
|
hand.setActive(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setPlayersInactive() {
|
||||||
|
this.otherHands.forEach((hand) => hand.setActive(false))
|
||||||
|
}
|
||||||
|
|
||||||
async preload() {
|
async preload() {
|
||||||
await Assets.load(assets)
|
await Assets.load(assets)
|
||||||
}
|
}
|
||||||
@ -194,11 +196,13 @@ export class Game {
|
|||||||
|
|
||||||
async setNextPlayer(state: GameDto) {
|
async setNextPlayer(state: GameDto) {
|
||||||
const currentPlayer = state?.currentPlayer!
|
const currentPlayer = state?.currentPlayer!
|
||||||
|
this.setPlayersInactive()
|
||||||
if (currentPlayer.id === this.playerId) {
|
if (currentPlayer.id === this.playerId) {
|
||||||
this.hand.prepareForMove(this.board.count === 0, this.board.freeEnds)
|
this.hand.prepareForMove(this.board.count === 0, this.board.freeEnds)
|
||||||
this.board.setPlayerTurn(currentPlayer)
|
this.board.setPlayerTurn(currentPlayer)
|
||||||
} else {
|
} else {
|
||||||
this.board.setServerPlayerTurn(currentPlayer)
|
this.board.setServerPlayerTurn(currentPlayer)
|
||||||
|
this.highLightPlayer(currentPlayer)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { LoggingService } from '@/services/LoggingService'
|
import { LoggingService } from '@/services/LoggingService'
|
||||||
import { Application, Container, Sprite, Texture } from 'pixi.js'
|
import { Application, Container, Graphics, Sprite, Texture } from 'pixi.js'
|
||||||
import { Scale, type ScaleFunction } from './utilities/scale'
|
import { Scale, type ScaleFunction } from './utilities/scale'
|
||||||
import { Tile } from './Tile'
|
import { Tile } from './Tile'
|
||||||
import type { Movement, PlayerDto, TileDto } from '@/common/interfaces'
|
import type { Movement, PlayerDto, TileDto } from '@/common/interfaces'
|
||||||
@ -24,6 +24,7 @@ export class OtherHand {
|
|||||||
interactionsLayer!: Container
|
interactionsLayer!: Container
|
||||||
scoreLayer: Container = new Container()
|
scoreLayer: Container = new Container()
|
||||||
score: number = 0
|
score: number = 0
|
||||||
|
active: boolean = false
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private app: Application,
|
private app: Application,
|
||||||
@ -54,6 +55,11 @@ export class OtherHand {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setActive(active: boolean) {
|
||||||
|
this.active = active
|
||||||
|
this.render()
|
||||||
|
}
|
||||||
|
|
||||||
setScore(score: number) {
|
setScore(score: number) {
|
||||||
this.score = score
|
this.score = score
|
||||||
}
|
}
|
||||||
@ -89,9 +95,18 @@ 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)
|
||||||
|
this.interactionsLayer.addChild(rectangle)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private render() {
|
private render() {
|
||||||
this.renderTiles()
|
this.renderTiles()
|
||||||
this.renderScore()
|
this.renderScore()
|
||||||
|
this.renderActive()
|
||||||
}
|
}
|
||||||
|
|
||||||
private addBg() {
|
private addBg() {
|
||||||
@ -107,14 +122,14 @@ export class OtherHand {
|
|||||||
let y = 0
|
let y = 0
|
||||||
|
|
||||||
if (this.position === 'left') {
|
if (this.position === 'left') {
|
||||||
x = 0
|
x = 16
|
||||||
y = 30
|
y = 30
|
||||||
} else if (this.position === 'right') {
|
} else if (this.position === 'right') {
|
||||||
x = this.app.canvas.width - this.width
|
x = this.app.canvas.width - this.width - 16
|
||||||
y = 30
|
y = 30
|
||||||
} else {
|
} else {
|
||||||
x = (this.app.canvas.width - this.width) / 2
|
x = (this.app.canvas.width - this.width) / 2
|
||||||
y = 0
|
y = 8
|
||||||
}
|
}
|
||||||
return { x, y }
|
return { x, y }
|
||||||
}
|
}
|
||||||
|
3
src/i18n/en.ts
Normal file
3
src/i18n/en.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export const en = {
|
||||||
|
starting_game: 'Starting game...',
|
||||||
|
}
|
3
src/i18n/es.ts
Normal file
3
src/i18n/es.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export const es = {
|
||||||
|
starting_game: 'Iniciando la partida...',
|
||||||
|
}
|
18
src/i18n/index.ts
Normal file
18
src/i18n/index.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { createI18n } from 'vue-i18n'
|
||||||
|
import { en } from './en'
|
||||||
|
import { es } from './es'
|
||||||
|
|
||||||
|
const i18n = createI18n({
|
||||||
|
locale: 'es',
|
||||||
|
messages: {
|
||||||
|
en,
|
||||||
|
es,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const translate = (key: string) => {
|
||||||
|
return i18n.global.t(key)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default i18n
|
||||||
|
export { translate, translate as t }
|
@ -7,6 +7,7 @@ import '../node_modules/bulma/css/bulma.css'
|
|||||||
|
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
import i18n from '@/i18n'
|
||||||
|
|
||||||
import { SocketIoClientService } from '@/services/SocketIoClientService'
|
import { SocketIoClientService } from '@/services/SocketIoClientService'
|
||||||
import { LoggingService } from '@/services/LoggingService'
|
import { LoggingService } from '@/services/LoggingService'
|
||||||
@ -16,6 +17,7 @@ import { GameService } from './services/GameService'
|
|||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
app.use(createPinia())
|
app.use(createPinia())
|
||||||
|
app.use(i18n)
|
||||||
app.use(router)
|
app.use(router)
|
||||||
|
|
||||||
app.provide('socket', new SocketIoClientService('http://localhost:3000'))
|
app.provide('socket', new SocketIoClientService('http://localhost:3000'))
|
||||||
|
@ -13,6 +13,7 @@ import { useGameOptionsStore } from '@/stores/gameOptions'
|
|||||||
|
|
||||||
let background = ref<string>('green')
|
let background = ref<string>('green')
|
||||||
let teamed = ref<boolean>(false)
|
let teamed = ref<boolean>(false)
|
||||||
|
let pointsToWin = ref<number>(100)
|
||||||
let seed = ref<string>('')
|
let seed = ref<string>('')
|
||||||
let sessionName = ref('Test Value')
|
let sessionName = ref('Test Value')
|
||||||
let matchSessions = ref<MatchSessionDto[]>([])
|
let matchSessions = ref<MatchSessionDto[]>([])
|
||||||
@ -146,7 +147,22 @@ function copy(sessionSeed: string) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cell"></div>
|
<div class="cell">
|
||||||
|
<div class="field">
|
||||||
|
<label for="pointsToWin" class="label">Points to win</label>
|
||||||
|
<div class="control">
|
||||||
|
<div class="select">
|
||||||
|
<select v-model="pointsToWin" name="pointsToWin">
|
||||||
|
<option value="50">50</option>
|
||||||
|
<option value="80">80</option>
|
||||||
|
<option value="100">100</option>
|
||||||
|
<option value="150">150</option>
|
||||||
|
<option value="200">200</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="block" v-if="!isSessionStarted"></div>
|
<div class="block" v-if="!isSessionStarted"></div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user