diff --git a/package-lock.json b/package-lock.json index 38f4034..f2e7359 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "socket.io-client": "^4.7.5", "vue": "^3.4.29", "vue-clipboard3": "^2.0.0", + "vue-i18n": "^9.13.1", "vue-router": "^4.3.3" }, "devDependencies": { @@ -558,6 +559,47 @@ "deprecated": "Use @eslint/object-schema instead", "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": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -4998,6 +5040,25 @@ "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": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz", diff --git a/package.json b/package.json index bcaa4d8..97df943 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "socket.io-client": "^4.7.5", "vue": "^3.4.29", "vue-clipboard3": "^2.0.0", + "vue-i18n": "^9.13.1", "vue-router": "^4.3.3" }, "devDependencies": { diff --git a/src/common/interfaces.ts b/src/common/interfaces.ts index 8b6f9cf..ddbb441 100644 --- a/src/common/interfaces.ts +++ b/src/common/interfaces.ts @@ -106,6 +106,7 @@ export interface GameOptions { height?: number background?: string teamed?: boolean + pointsToWin?: number } export interface GameSummary { gameId: string diff --git a/src/game/Board.ts b/src/game/Board.ts index 49eaa11..9c6f6e2 100644 --- a/src/game/Board.ts +++ b/src/game/Board.ts @@ -9,6 +9,7 @@ import { GlowFilter } from 'pixi-filters' import { ORIENTATION_ANGLES } from '@/common/constants' import type { OtherHand } from './OtherHand' import { sound } from '@pixi/sound' +import { t } from '@/i18n' export class Board extends EventEmitter { private _scale: number = 1 @@ -104,7 +105,7 @@ export class Board extends EventEmitter { parent: this.container, }) - this.showText('Starting game...') + this.showText(t('starting_game')) } private calculateScale() { @@ -137,7 +138,7 @@ export class Board extends EventEmitter { createText({ text, x: this.scaleX(0), - y: -10, + y: this.height - 24, }), ) } diff --git a/src/game/Game.ts b/src/game/Game.ts index 69cb753..a860ecf 100644 --- a/src/game/Game.ts +++ b/src/game/Game.ts @@ -3,20 +3,12 @@ import { Board } from '@/game/Board' import { assets } from '@/game/utilities/assets' import { Tile } from '@/game/Tile' import { Hand } from '@/game/Hand' -import type { - GameDto, - GameSummary, - MatchSessionDto, - Movement, - PlayerDto, - TileDto, -} from '@/common/interfaces' +import type { GameDto, MatchSessionDto, Movement, PlayerDto, TileDto } from '@/common/interfaces' import type { SocketIoClientService } from '@/services/SocketIoClientService' import { wait } from '@/common/helpers' import { Actions } from 'pixi-actions' import { OtherHand } from './OtherHand' import { GameSummayView } from './GameSummayView' -import { summaryMock } from '@/common/summarymock' interface GameOptions { boardScale: number @@ -106,7 +98,6 @@ export class Game { updateOtherHands(gameState: GameDto) { const players = gameState.players - players.forEach((player) => { const hand = this.otherHands.find((hand) => hand.player?.id === player.id) 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() { await Assets.load(assets) } @@ -194,11 +196,13 @@ export class Game { async setNextPlayer(state: GameDto) { const currentPlayer = state?.currentPlayer! + this.setPlayersInactive() if (currentPlayer.id === this.playerId) { this.hand.prepareForMove(this.board.count === 0, this.board.freeEnds) this.board.setPlayerTurn(currentPlayer) } else { this.board.setServerPlayerTurn(currentPlayer) + this.highLightPlayer(currentPlayer) } } diff --git a/src/game/OtherHand.ts b/src/game/OtherHand.ts index b06b8d0..bde95f1 100644 --- a/src/game/OtherHand.ts +++ b/src/game/OtherHand.ts @@ -1,5 +1,5 @@ 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 { Tile } from './Tile' import type { Movement, PlayerDto, TileDto } from '@/common/interfaces' @@ -24,6 +24,7 @@ export class OtherHand { interactionsLayer!: Container scoreLayer: Container = new Container() score: number = 0 + active: boolean = false constructor( private app: Application, @@ -54,6 +55,11 @@ export class OtherHand { ) } + setActive(active: boolean) { + this.active = active + this.render() + } + setScore(score: number) { 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() { this.renderTiles() this.renderScore() + this.renderActive() } private addBg() { @@ -107,14 +122,14 @@ export class OtherHand { let y = 0 if (this.position === 'left') { - x = 0 + x = 16 y = 30 } else if (this.position === 'right') { - x = this.app.canvas.width - this.width + x = this.app.canvas.width - this.width - 16 y = 30 } else { x = (this.app.canvas.width - this.width) / 2 - y = 0 + y = 8 } return { x, y } } diff --git a/src/i18n/en.ts b/src/i18n/en.ts new file mode 100644 index 0000000..38c0fb3 --- /dev/null +++ b/src/i18n/en.ts @@ -0,0 +1,3 @@ +export const en = { + starting_game: 'Starting game...', +} diff --git a/src/i18n/es.ts b/src/i18n/es.ts new file mode 100644 index 0000000..985c4e5 --- /dev/null +++ b/src/i18n/es.ts @@ -0,0 +1,3 @@ +export const es = { + starting_game: 'Iniciando la partida...', +} diff --git a/src/i18n/index.ts b/src/i18n/index.ts new file mode 100644 index 0000000..0b3aac0 --- /dev/null +++ b/src/i18n/index.ts @@ -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 } diff --git a/src/main.ts b/src/main.ts index 7f2f964..dfd5099 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,6 +7,7 @@ import '../node_modules/bulma/css/bulma.css' import App from './App.vue' import router from './router' +import i18n from '@/i18n' import { SocketIoClientService } from '@/services/SocketIoClientService' import { LoggingService } from '@/services/LoggingService' @@ -16,6 +17,7 @@ import { GameService } from './services/GameService' const app = createApp(App) app.use(createPinia()) +app.use(i18n) app.use(router) app.provide('socket', new SocketIoClientService('http://localhost:3000')) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 9b7d7dc..000664e 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -13,6 +13,7 @@ import { useGameOptionsStore } from '@/stores/gameOptions' let background = ref('green') let teamed = ref(false) +let pointsToWin = ref(100) let seed = ref('') let sessionName = ref('Test Value') let matchSessions = ref([]) @@ -146,7 +147,22 @@ function copy(sessionSeed: string) { -
+
+
+ +
+
+ +
+
+
+