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

progress

Browse Source
This commit is contained in:
Jose Conde
2024-07-16 02:14:50 +02:00
parent 3755f2857a
commit 5392dce264
31 changed files with 883 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/GameView.vue
View File

@@ -40,20 +40,16 @@ function copySeed() {
<template>
<div class="block">
<section class="block info">
<p>
Running: {{ sessionState?.sessionInProgress }} Seed: {{ sessionState?.seed }}
<button @click="copySeed">Copy!</button>
</p>
<p>Running: {{ sessionState?.sessionInProgress }}</p>
<p>Seed: {{ sessionState?.seed }}</p>
<p>
FreeEnds: {{ gameState?.boardFreeEnds }} - Current Player:{{
gameState?.currentPlayer?.name
}}
- Score: {{ sessionState?.scoreboard }}
</p>
<p v-if="sessionState?.id">
SessionID: {{ sessionState.id }} PlayerID: {{ playerState?.id }} - canMakeMove
{{ canMakeMove }}
</p>
<p>Score: {{ sessionState?.scoreboard }}</p>
<p v-if="sessionState?.id">SessionID: {{ sessionState.id }}</p>
<p>PlayerID: {{ playerState?.id }}</p>
</section>
<section class="block">
<div class="game-container">
@@ -107,9 +103,12 @@ function copySeed() {
justify-content: center;
}
.info {
position: absolute;
top: 0;
left: 0;
color: white;
opacity: 0.1;
position: fixed;
top: 200px;
left: 10px;
z-index: 20;
pointer-events: none;
}
</style>

130
src/views/HomeView.vue
View File

@@ -9,25 +9,27 @@ import type { MatchSessionDto } from '@/common/interfaces'
import { useEventBusStore } from '@/stores/eventBus'
import { useAuthStore } from '@/stores/auth'
import { copyToclipboard } from '@/common/helpers'
import { useGameOptionsStore } from '@/stores/gameOptions'
let background = ref<string>('green')
let teamed = ref<boolean>(false)
let seed = ref<string>('')
let sessionName = ref('Test Value')
let sessionId = ref('')
let matchSessions = ref<MatchSessionDto[]>([])
let dataInterval: any
const router = useRouter()
const gameStore = useGameStore()
const auth = useAuthStore()
const gameOptionsStore = useGameOptionsStore()
const socketService: any = inject('socket')
const gameService: GameService = inject<GameService>('game') as GameService
const logger: LoggingService = inject<LoggingService>('logger') as LoggingService
const { readyForStart, sessionState, isSessionStarted, playerState, amIHost } =
storeToRefs(gameStore)
const { updateSessionState, updatePlayerState, updateGameState } = gameStore
const { sessionState, isSessionStarted, playerState, amIHost } = storeToRefs(gameStore)
const { user } = storeToRefs(auth)
const { gameOptions } = storeToRefs(gameOptionsStore)
// function setPlayerReady() {
// logger.debug('Starting game')
@@ -53,26 +55,12 @@ eventBus.subscribe('window-before-unload', () => {
async function createMatch() {
logger.debug('Creating match')
await socketService.connect()
gameOptions.value = { background: background.value }
const id = await gameService.createMatchSession(sessionName.value, seed.value)
logger.debug('Match created successfully')
router.push({ name: 'match', params: { id } })
}
async function cancelMatch() {
logger.debug('Cancelling match')
await gameService.cancelMatchSession(sessionId.value)
await socketService.disconnect()
sessionId.value = ''
seed.value = ''
sessionName.value = ''
updateSessionState(undefined)
updatePlayerState(undefined)
updateGameState(undefined)
logger.debug('Match cancelled successfully')
loadData()
}
async function joinMatch(id: string) {
if (id) {
await socketService.connect()
@@ -90,19 +78,16 @@ async function deleteMatch(id: string) {
async function loadData() {
const listResponse = await gameService.listMatchSessions()
console.log('listResponse :>> ', listResponse)
matchSessions.value = listResponse.data
sessionName.value = `Test #${listResponse.pagination.total + 1}`
}
onMounted(() => {
logger.debug('Home view mounted')
loadData()
dataInterval = setInterval(loadData, 5000)
})
onUnmounted(() => {
logger.debug('Home view unmounted')
clearInterval(dataInterval)
})
@@ -117,32 +102,58 @@ function copy(sessionSeed: string) {
<section class="section">
<h1 class="title is-2">Welcome to the {{ user.username }}'s Home Page</h1>
<div class="block">
<p>This is a protected route.</p>
<p>{{ sessionState || 'No session' }}</p>
<p>{{ playerState || 'No player state' }}</p>
<p>Session started: {{ isSessionStarted }}</p>
<p>Host: {{ amIHost }}</p>
</div>
<div class="block" v-if="!isSessionStarted">
<div class="grid">
<div class="cell">
<input
class="input"
style="margin-bottom: 0"
v-model="sessionName"
placeholder="Session Name"
/>
</div>
<div class="cell">
<input class="input" style="margin-bottom: 0" v-model="seed" placeholder="Seed" />
<div class="field">
<label class="label">Name</label>
<div class="control">
<input type="text" class="input" v-model="sessionName" placeholder="Session Name" />
</div>
</div>
<div class="field">
<label class="label">Seed</label>
<div class="control">
<input
type="text"
class="input"
style="margin-bottom: 0"
v-model="seed"
placeholder="Type the session seed here!"
/>
</div>
</div>
<div class="grid">
<div class="cell">
<div class="field">
<label for="background" class="label">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>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<label for="teamed" class="checkbox">
<input v-model="teamed" name="teamed" type="checkbox" />
Crossed game ({{ teamed }})
</label>
</div>
</div>
</div>
<div class="cell"></div>
</div>
</div>
<button class="button" @click="createMatch" v-if="!isSessionStarted">
Create Match Session
</button>
<div class="block" v-if="!isSessionStarted"></div>
<button class="button is-primary" @click.once="createMatch">Create Match Session</button>
</section>
<section class="section available-sessions" v-if="!isSessionStarted">
<section class="section available-sessions">
<h2 class="title is-4">Available Sessions</h2>
<div class="block">
<div v-if="matchSessions.length === 0">
@@ -150,16 +161,27 @@ function copy(sessionSeed: string) {
</div>
<div v-else class="grid is-col-min-12">
<div class="cell" v-for="session in matchSessions" :key="session.id">
<p class="title is-6">{{ session.name }}</p>
<p>ID: {{ session._id }}</p>
<p>Players: {{ session.players.length }}</p>
<p>
Seed: {{ session.seed }}
<button @click="() => copy(session.seed)">Copy</button>
</p>
<p>Status: {{ session.status }}</p>
<button class="button" @click="() => joinMatch(session._id)">Join</button>
<button class="button" @click="() => deleteMatch(session._id)">Delete</button>
<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>
Seed: {{ session.seed }}
<button class="button is-small" @click="() => copy(session.seed)">Copy</button>
</p>
<p>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>
</p>
<p class="card-footer-item">
<a href="#" @click.once.prevent="() => deleteMatch(session._id)"> Delete </a>
</p>
</div>
</div>
</div>
</div>
</div>

9
src/views/MatchView.vue
View File

@@ -4,6 +4,7 @@ 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 { useRoute, useRouter } from 'vue-router'
@@ -12,6 +13,7 @@ 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
@@ -22,6 +24,7 @@ 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')
@@ -35,7 +38,7 @@ async function setPlayerReady() {
}
await socketService.sendMessage('client:set-player-ready', {
userId: playerState.value.id,
sessionId: sessionState.value.id
sessionId: sessionState.value.id,
})
}
@@ -45,7 +48,7 @@ async function startMatch() {
if (sessionId) {
await socketService.sendMessageWithAck('client:start-session', {
sessionId: sessionId,
playerId: playerId
playerId: playerId,
})
}
}
@@ -89,7 +92,7 @@ onBeforeMount(() => {
<template>
<div>
<h1 class="title is-2">Match Page</h1>
<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>