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

0.1.4

Browse Source
This commit is contained in:
Jose Conde
2024-07-17 22:52:07 +02:00
parent 4e75c3af77
commit 54bd7f3840
18 changed files with 242 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/views/HomeView.vue
View File

@ -15,7 +15,7 @@ let background = ref<string>('green')
let teamed = ref<boolean>(false)
let pointsToWin = ref<number>(100)
let seed = ref<string>('')
let sessionName = ref('Test Value')
let sessionName = ref(`Test #${Date.now()}`)
let matchSessions = ref<MatchSessionDto[]>([])
let dataInterval: any
@ -130,7 +130,6 @@ async function deleteMatch(id: string) {
async function loadData() {
const listResponse = await gameService.listMatchSessions()
matchSessions.value = listResponse.data
sessionName.value = `Test #${Date.now()}`
}
onMounted(() => {
@ -156,7 +155,7 @@ function copy(sessionSeed: string) {
</h1>
<div class="block" v-if="!isSessionStarted">
<div class="field">
<label class="label">{{ $t('name') }}</label>
<label class="label">{{ $t('session-name') }}</label>
<div class="control">
<input
type="text"
@ -174,7 +173,7 @@ function copy(sessionSeed: string) {
class="input"
style="margin-bottom: 0"
v-model="seed"
placeholder="$t('seed-placeholder')"
:placeholder="$t('seed-placeholder')"
/>
</div>
</div>
@ -226,53 +225,64 @@ function copy(sessionSeed: string) {
</button>
</div>
</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>
<div class="block" v-if="isSessionStarted">
<h2 class="title is-4">{{ sessionState?.name }}</h2>
<h6 class="title is-size-5">Players</h6>
<div v-for="player in sessionState?.players" :key="player.id">
<p>{{ player.name }}</p>
<p>{{ player.ready ? 'Ready' : 'Not ready' }}</p>
</div>
<div class="buttons mt-6">
<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" @click="cancelMatch">
<span>{{ $t('cancel') }}</span>
</button>
<button class="button" @click="cancelMatch">
<span>{{ $t('cancel') }}</span>
</button>
</div>
</div>
</section>
<section class="section available-sessions">
<section class="section available-sessions" v-if="!isSessionStarted">
<h2 class="title is-4">{{ $t('available-sessions') }}</h2>
<div class="block">
<div v-if="matchSessions.length === 0">
<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>{{ $t('id-session-_id', [session._id]) }}</p>
<p>{{ $t('players-session-players-length', [session.players.length]) }}</p>
<p>
{{ $t('seed-session-seed', [session.seed]) }}
<button class="button is-small" @click="() => copy(session.seed)">
{{ $t('copy') }}
</button>
</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)">
{{ $t('join') }}
</a>
</p>
<p class="card-footer-item">
<a href="#" @click.once.prevent="() => deleteMatch(session._id)">
{{ $t('delete') }}
</a>
</p>
<div v-else class="fixed-grid has-3-cols">
<div class="grid">
<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>{{ $t('id-session-_id', [session._id]) }}</p>
<p>{{ $t('players-session-players-length', [session.players.length]) }}</p>
<p>
{{ $t('seed-session-seed', [session.seed]) }}
<button class="button is-small is-ghost" @click="() => copy(session.seed)">
{{ $t('copy') }}
</button>
</p>
<p>{{ $t('status-session-status', [session.status]) }}</p>
<div class="buttons is-centered mt-6">
<button
class="button is-primary"
@click.once.prevent="() => joinMatch(session._id)"
>
<span>{{ $t('join') }}</span>
</button>
<button
class="button is-text"
@click.once.prevent="() => deleteMatch(session._id)"
>
<span>{{ $t('delete') }}</span>
</button>
</div>
</div>
</div>
</div>
</div>

5
src/views/MatchView.vue
View File

@ -73,6 +73,11 @@ onBeforeMount(() => {
</div>
</div>
</div>
<div class="buttons">
<button class="button is-primary" @click="router.push({ name: 'home' })">
{{ $t('back') }}
</button>
</div>
<div class="section">
<!-- <div>{{ matchSession }}</div> -->
</div>