match page (initial) i18n
This commit is contained in:
Jose Conde
@ -28,9 +28,11 @@ const socketService: any = inject('socket')
|
||||
const gameService: GameService = inject<GameService>('game') as GameService
|
||||
const logger: LoggingService = inject<LoggingService>('logger') as LoggingService
|
||||
|
||||
const { sessionState, isSessionStarted, playerState, amIHost } = storeToRefs(gameStore)
|
||||
const { sessionState, isSessionStarted, playerState, amIHost, readyForStart } =
|
||||
storeToRefs(gameStore)
|
||||
const { user } = storeToRefs(auth)
|
||||
const { gameOptions } = storeToRefs(gameOptionsStore)
|
||||
const { updateSessionState, updatePlayerState, updateGameState } = gameStore
|
||||
|
||||
// function setPlayerReady() {
|
||||
// logger.debug('Starting game')
|
||||
@ -57,11 +59,60 @@ async function createMatch() {
|
||||
logger.debug('Creating match')
|
||||
await socketService.connect()
|
||||
gameOptions.value = { background: background.value }
|
||||
const id = await gameService.createMatchSession(sessionName.value, seed.value)
|
||||
const sessionOptions = {
|
||||
pointsToWin: pointsToWin.value,
|
||||
}
|
||||
const id = await gameService.createMatchSession(sessionName.value, seed.value, sessionOptions)
|
||||
logger.debug('Match created successfully')
|
||||
router.push({ name: 'match', params: { id } })
|
||||
// router.push({ name: 'match', params: { id } })
|
||||
}
|
||||
|
||||
async function setPlayerReady() {
|
||||
logger.debug('Starting game')
|
||||
if (!sessionState.value) {
|
||||
logger.error('No session found')
|
||||
return
|
||||
}
|
||||
if (!playerState.value) {
|
||||
logger.error('No player found')
|
||||
return
|
||||
}
|
||||
await socketService.sendMessage('client:set-player-ready', {
|
||||
userId: playerState.value.id,
|
||||
sessionId: sessionState.value.id,
|
||||
})
|
||||
}
|
||||
|
||||
async function startMatch() {
|
||||
const sessionId = sessionState?.value?.id
|
||||
const playerId = playerState?.value?.id
|
||||
if (sessionId) {
|
||||
await socketService.sendMessageWithAck('client:start-session', {
|
||||
sessionId: sessionId,
|
||||
playerId: playerId,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function cancelMatch() {
|
||||
logger.debug('Cancelling match')
|
||||
if (sessionState?.value?.id) {
|
||||
await gameService.cancelMatchSession(sessionState?.value?.id)
|
||||
updateSessionState(undefined)
|
||||
updatePlayerState(undefined)
|
||||
updateGameState(undefined)
|
||||
|
||||
logger.debug('Match cancelled successfully')
|
||||
router.push({ name: 'home' })
|
||||
}
|
||||
}
|
||||
|
||||
eventBus.subscribe('server:match-starting', (data) => {
|
||||
const session = data.sessionState as MatchSessionDto
|
||||
updateSessionState(session)
|
||||
router.push({ name: 'game', params: { id: session.id } })
|
||||
})
|
||||
|
||||
async function joinMatch(id: string) {
|
||||
if (id) {
|
||||
await socketService.connect()
|
||||
@ -80,7 +131,7 @@ async function deleteMatch(id: string) {
|
||||
async function loadData() {
|
||||
const listResponse = await gameService.listMatchSessions()
|
||||
matchSessions.value = listResponse.data
|
||||
sessionName.value = `Test #${listResponse.pagination.total + 1}`
|
||||
sessionName.value = `Test #${Date.now()}`
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@ -99,41 +150,47 @@ function copy(sessionSeed: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="block home">
|
||||
<div class="container home">
|
||||
<section class="section">
|
||||
<h1 class="title is-2">Welcome to the {{ user.username }}'s Home Page</h1>
|
||||
<div class="block">
|
||||
<h1 class="title is-2">
|
||||
{{ $t('welcome-to-the-user-username-s-home-page', [user.username]) }}
|
||||
</h1>
|
||||
<div class="block" v-if="!isSessionStarted">
|
||||
<div class="field">
|
||||
<label class="label">Name</label>
|
||||
<label class="label">{{ $t('name') }}</label>
|
||||
<div class="control">
|
||||
<input type="text" class="input" v-model="sessionName" placeholder="Session Name" />
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
v-model="sessionName"
|
||||
placeholder="$t('session-name-placeholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Seed</label>
|
||||
<label class="label">{{ $t('seed') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
style="margin-bottom: 0"
|
||||
v-model="seed"
|
||||
placeholder="Type the session seed here!"
|
||||
placeholder="$t('seed-placeholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label for="background" class="label">Background color</label>
|
||||
<label for="background" class="label">{{ $t('background-color') }}</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select v-model="background" name="background">
|
||||
<option value="green">Green Fabric</option>
|
||||
<option value="gray">Gray Fabric</option>
|
||||
<option value="blue">Blue Fabric</option>
|
||||
<option value="yellow">Yellow Fabric</option>
|
||||
<option value="red">Red Fabric</option>
|
||||
<option value="green">{{ $t('green-fabric') }}</option>
|
||||
<option value="gray">{{ $t('gray-fabric') }}</option>
|
||||
<option value="blue">{{ $t('blue-fabric') }}</option>
|
||||
<option value="yellow">{{ $t('yellow-fabric') }}</option>
|
||||
<option value="red">{{ $t('red-fabric') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,14 +199,14 @@ function copy(sessionSeed: string) {
|
||||
<div class="control">
|
||||
<label for="teamed" class="checkbox">
|
||||
<input v-model="teamed" name="teamed" type="checkbox" />
|
||||
Crossed game ({{ teamed }})
|
||||
{{ $t('crossed-game-teamed', [teamed]) }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label for="pointsToWin" class="label">Points to win</label>
|
||||
<label for="pointsToWin" class="label">{{ $t('points-to-win') }}</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select v-model="pointsToWin" name="pointsToWin">
|
||||
@ -164,37 +221,58 @@ function copy(sessionSeed: string) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="button is-primary" @click.once="createMatch">
|
||||
{{ $t('create-match-session') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block" v-if="!isSessionStarted"></div>
|
||||
<div class="buttons" v-if="isSessionStarted">
|
||||
<button class="button" @click="setPlayerReady">
|
||||
<span v-if="!readyForStart">{{ $t('ready') }}</span
|
||||
><span v-else>{{ $t('unready') }}</span>
|
||||
</button>
|
||||
<button class="button" @click="startMatch" v-if="amIHost && readyForStart">
|
||||
<span>{{ $t('start') }}</span>
|
||||
</button>
|
||||
|
||||
<button class="button is-primary" @click.once="createMatch">Create Match Session</button>
|
||||
<button class="button" @click="cancelMatch">
|
||||
<span>{{ $t('cancel') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section available-sessions">
|
||||
<h2 class="title is-4">Available Sessions</h2>
|
||||
<h2 class="title is-4">{{ $t('available-sessions') }}</h2>
|
||||
<div class="block">
|
||||
<div v-if="matchSessions.length === 0">
|
||||
<p>No sessions available</p>
|
||||
<p>{{ $t('no-sessions-available') }}</p>
|
||||
</div>
|
||||
<div v-else class="grid is-col-min-12">
|
||||
<div class="cell" v-for="session in matchSessions" :key="session.id">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-6">{{ session.name }}</p>
|
||||
<p>ID: {{ session._id }}</p>
|
||||
<p>Players: {{ session.players.length }}</p>
|
||||
<p>{{ $t('id-session-_id', [session._id]) }}</p>
|
||||
<p>{{ $t('players-session-players-length', [session.players.length]) }}</p>
|
||||
<p>
|
||||
Seed: {{ session.seed }}
|
||||
<button class="button is-small" @click="() => copy(session.seed)">Copy</button>
|
||||
{{ $t('seed-session-seed', [session.seed]) }}
|
||||
<button class="button is-small" @click="() => copy(session.seed)">
|
||||
{{ $t('copy') }}
|
||||
</button>
|
||||
</p>
|
||||
<p>Status: {{ session.status }}</p>
|
||||
<p>{{ $t('status-session-status', [session.status]) }}</p>
|
||||
<div class="buttons is-centered mt-4"></div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<p class="card-footer-item">
|
||||
<a href="#" @click.once.prevent="() => joinMatch(session._id)"> Join </a>
|
||||
<a href="#" @click.once.prevent="() => joinMatch(session._id)">
|
||||
{{ $t('join') }}
|
||||
</a>
|
||||
</p>
|
||||
<p class="card-footer-item">
|
||||
<a href="#" @click.once.prevent="() => deleteMatch(session._id)"> Delete </a>
|
||||
<a href="#" @click.once.prevent="() => deleteMatch(session._id)">
|
||||
{{ $t('delete') }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,10 +2,12 @@
|
||||
import { AuthenticationService } from '@/services/AuthenticationService'
|
||||
import { inject, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const router = useRouter()
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const { t } = useI18n()
|
||||
|
||||
const authService = inject<AuthenticationService>('auth')
|
||||
|
||||
@ -14,7 +16,7 @@ async function login() {
|
||||
await authService?.login(username.value, password.value)
|
||||
router.push({ name: 'home' })
|
||||
} catch (error) {
|
||||
alert('Invalid username or password')
|
||||
alert(t('invalid-username-or-password'))
|
||||
}
|
||||
// if (username.value === 'admin' && password.value === 'password') {
|
||||
// localStorage.setItem('token', 'true')
|
||||
@ -27,24 +29,34 @@ async function login() {
|
||||
|
||||
<template>
|
||||
<div class="login">
|
||||
<h1>Login</h1>
|
||||
<h1 class="title">{{ $t('login') }}</h1>
|
||||
<form class="form" @submit.prevent="login">
|
||||
<div class="field">
|
||||
<label class="label">Username</label>
|
||||
<label class="label">{{ $t('username') }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="username" placeholder="Username" />
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="username"
|
||||
:placeholder="t('username-placeholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Username</label>
|
||||
<label class="label">{{ $t('password') }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="password" v-model="password" placeholder="Password" />
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
v-model="password"
|
||||
:placeholder="t('password-placeholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-primary" type="submit">Login</button>
|
||||
<button class="button is-primary" type="submit">{{ $t('login-button') }}</button>
|
||||
</div>
|
||||
<!-- <div class="control">
|
||||
<button class="button">Cancel</button>
|
||||
|
||||
@ -2,88 +2,28 @@
|
||||
import type { MatchSessionDto } from '@/common/interfaces'
|
||||
import type { GameService } from '@/services/GameService'
|
||||
import type { LoggingService } from '@/services/LoggingService'
|
||||
import { useEventBusStore } from '@/stores/eventBus'
|
||||
import { useGameStore } from '@/stores/game'
|
||||
import { useGameOptionsStore } from '@/stores/gameOptions'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { inject, onBeforeMount, ref } from 'vue'
|
||||
import { inject, onBeforeMount, ref, toRaw } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const gameStore = useGameStore()
|
||||
const eventBus = useEventBusStore()
|
||||
const gameOptionsStore = useGameOptionsStore()
|
||||
const socketService: any = inject('socket')
|
||||
const gameService: GameService = inject<GameService>('game') as GameService
|
||||
const logger: LoggingService = inject<LoggingService>('logger') as LoggingService
|
||||
|
||||
let sessionId: string
|
||||
let matchSession = ref<MatchSessionDto | undefined>(undefined)
|
||||
|
||||
const { readyForStart, sessionState, isSessionStarted, playerState, amIHost } =
|
||||
storeToRefs(gameStore)
|
||||
const { updateSessionState, updatePlayerState, updateGameState } = gameStore
|
||||
const { gameOptions } = storeToRefs(gameOptionsStore)
|
||||
|
||||
async function setPlayerReady() {
|
||||
logger.debug('Starting game')
|
||||
if (!sessionState.value) {
|
||||
logger.error('No session found')
|
||||
return
|
||||
}
|
||||
if (!playerState.value) {
|
||||
logger.error('No player found')
|
||||
return
|
||||
}
|
||||
await socketService.sendMessage('client:set-player-ready', {
|
||||
userId: playerState.value.id,
|
||||
sessionId: sessionState.value.id,
|
||||
})
|
||||
}
|
||||
|
||||
async function startMatch() {
|
||||
const sessionId = sessionState?.value?.id
|
||||
const playerId = playerState?.value?.id
|
||||
if (sessionId) {
|
||||
await socketService.sendMessageWithAck('client:start-session', {
|
||||
sessionId: sessionId,
|
||||
playerId: playerId,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function cancelMatch() {
|
||||
logger.debug('Cancelling match')
|
||||
await gameService.cancelMatchSession(sessionId)
|
||||
updateSessionState(undefined)
|
||||
updatePlayerState(undefined)
|
||||
updateGameState(undefined)
|
||||
|
||||
logger.debug('Match cancelled successfully')
|
||||
router.push({ name: 'home' })
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
await gameService.getMatchSession(sessionId)
|
||||
matchSession.value = (await gameService.getMatchSession(sessionId)) as MatchSessionDto
|
||||
console.log('matchSession.value :>> ', toRaw(matchSession.value))
|
||||
}
|
||||
|
||||
eventBus.subscribe('window-before-unload', async () => {
|
||||
logger.debug('Window before unload')
|
||||
await cancelMatch()
|
||||
})
|
||||
|
||||
eventBus.subscribe('server:match-starting', (data) => {
|
||||
const session = data.sessionState as MatchSessionDto
|
||||
updateSessionState(session)
|
||||
logger.debug('Match starting')
|
||||
router.push({ name: 'game' })
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
sessionId = route.params.id as string
|
||||
console.log('sessionId :>> ', sessionId)
|
||||
loadData()
|
||||
if (sessionId) {
|
||||
setInterval(loadData, 5000)
|
||||
// setInterval(loadData, 5000)
|
||||
} else {
|
||||
router.push({ name: 'home' })
|
||||
}
|
||||
@ -91,27 +31,50 @@ onBeforeMount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="title is-2">Match Page {{ isSessionStarted }}</h1>
|
||||
<div class="block" v-if="matchSession">
|
||||
<p>Session ID: {{ matchSession._id }}</p>
|
||||
<p>Session Name: {{ matchSession.name }}</p>
|
||||
<p>Session started: {{ isSessionStarted }}</p>
|
||||
<p>Host: {{ amIHost }}</p>
|
||||
<p>{{ sessionState || 'No session' }}</p>
|
||||
<div class="container">
|
||||
<h1 class="title is-1">{{ $t('match-page') }}</h1>
|
||||
<h2 class="title is-3">{{ matchSession?.name }}</h2>
|
||||
<div class="block mt-6">
|
||||
<p class="mb-4">
|
||||
<span class="title is-5">{{ $t('winner') }}</span>
|
||||
<span class="is-size-5 ml-4">{{ matchSession?.matchWinner?.name }}</span>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<span class="title is-5">{{ $t('points-to-win') }}</span>
|
||||
<span class="is-size-5 ml-4">{{ matchSession?.pointsToWin }}</span>
|
||||
</p>
|
||||
<h3 class="title is-5">{{ $t('final-scoreboard') }}</h3>
|
||||
<div v-bind:key="$index" v-for="(score, $index) in matchSession?.scoreboard">
|
||||
<p class="">
|
||||
<span class="title is-5">{{ score.name }}</span>
|
||||
<span class="is-size-5 ml-4">{{ score.score }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<p v-if="!amIHost && !readyForStart">Waiting for host to start session</p>
|
||||
<button class="button" @click="setPlayerReady" v-if="isSessionStarted">
|
||||
<span v-if="!readyForStart">Ready</span><span v-else>Unready</span>
|
||||
</button>
|
||||
<button class="button" @click="startMatch" v-if="amIHost && readyForStart">
|
||||
<span>Start</span>
|
||||
</button>
|
||||
|
||||
<button class="button" @click="cancelMatch" v-if="isSessionStarted">
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
<div class="grid">
|
||||
<div
|
||||
class="cell"
|
||||
v-bind:key="$index"
|
||||
v-for="(summary, $index) in matchSession?.gameSummaries"
|
||||
>
|
||||
<div class="block mt-6">
|
||||
<h3 class="title is-5">{{ $t('round-index-1', [$index + 1]) }}</h3>
|
||||
<p class="mb-4">
|
||||
<span class="title is-5">{{ $t('winner') }}</span>
|
||||
<span class="is-size-5 ml-4">{{ summary.winner?.name }}</span>
|
||||
</p>
|
||||
<h4 class="title is-6">{{ $t('scoreboard') }}</h4>
|
||||
<div v-bind:key="$index" v-for="(gameScore, $index) in summary.score">
|
||||
<p class="">
|
||||
<span class="title is-5">{{ gameScore.name }}</span>
|
||||
<span class="is-size-5 ml-4">{{ gameScore.score }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<!-- <div>{{ matchSession }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user