133 lines
3.5 KiB
Vue
133 lines
3.5 KiB
Vue
<template>
|
|
<div class="game-title-box">
|
|
<h1>#{{ game.id }} - {{ game.title }}</h1>
|
|
</div>
|
|
<div class="gm-title-box">
|
|
<h2>GameMaster: {{ game.gamemaster }}</h2>
|
|
</div>
|
|
<div class="container">
|
|
<div class="d-flex flex-row">
|
|
<div class="result-box">
|
|
<h3>Picks</h3>
|
|
<div v-for="pick in picks">
|
|
{{ pick.pickedCharacter.playerName }} as {{ pick.characterName }}
|
|
</div>
|
|
</div>
|
|
<div class="result-box">
|
|
<h3>Payout</h3>
|
|
<div>{{ game.payoutEB }} eb</div>
|
|
<div>{{ game.payoutIP }} IP</div>
|
|
<div>{{ game.payoutLoot }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="d-flex flex-row">
|
|
<div class="character-list">
|
|
<h3>{{ picks.length }} Character Picks</h3>
|
|
<v-data-table-virtual :headers="pickHeaders" :items="picks" height="500px" fixed-header>
|
|
<template v-slot:item.characterId="{ item }">
|
|
<a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterId }}</a>
|
|
</template>
|
|
<template v-slot:item.characterName="{ item }">
|
|
<a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterName }}</a>
|
|
</template>
|
|
</v-data-table-virtual>
|
|
</div>
|
|
<div class="character-list">
|
|
<h3>{{ apps.length }} Character Apps</h3>
|
|
<v-data-table-virtual :headers="appHeaders" :items="apps" height="500px" fixed-header>
|
|
<template v-slot:item.characterId="{ item }">
|
|
<a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterId }}</a>
|
|
</template>
|
|
<template v-slot:item.characterName="{ item }">
|
|
<a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterName }}</a>
|
|
</template>
|
|
</v-data-table-virtual>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.game-title-box {
|
|
margin-top: 25px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.gm-title-box {
|
|
margin-top: 5px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.result-box {
|
|
margin: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.character-list {
|
|
margin: 20px;
|
|
h3 {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { watch, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import axios from 'axios'
|
|
|
|
const route = useRoute()
|
|
|
|
const pickHeaders = [
|
|
{ title: 'ID', align: 'start', key: 'characterId' },
|
|
{ title: 'Character', align: 'start', key: 'characterName' },
|
|
{ title: 'Status', align: 'start', key: 'pickedCharacter.status' },
|
|
{ title: 'Player', align: 'start', key: 'pickedCharacter.playerName' }
|
|
]
|
|
|
|
const appHeaders = [
|
|
{ title: 'ID', align: 'start', key: 'characterId' },
|
|
{ title: 'Character', align: 'start', key: 'characterName' },
|
|
{ title: 'Status', align: 'start', key: 'appliedCharacter.status' },
|
|
{ title: 'Player', align: 'start', key: 'appliedCharacter.playerName' }
|
|
]
|
|
|
|
const gameId = ref(route.params.gameId)
|
|
const game = ref({})
|
|
const picks = ref([])
|
|
const apps = ref([])
|
|
|
|
loadGameDetails()
|
|
|
|
watch(
|
|
() => route.params.gameId,
|
|
(newId, oldId) => {
|
|
gameId.value = newId
|
|
loadGameDetails()
|
|
}
|
|
)
|
|
|
|
async function loadGameDetails() {
|
|
const response = await axios.get(`/api/game/${gameId.value}`)
|
|
console.log(response)
|
|
game.value = response.data
|
|
loadPicks()
|
|
loadApps()
|
|
}
|
|
|
|
async function loadPicks() {
|
|
const response = await axios.post(`/api/game/${gameId.value}/picks`)
|
|
console.log(response)
|
|
picks.value = response.data
|
|
}
|
|
|
|
async function loadApps() {
|
|
const response = await axios.post(`/api/game/${gameId.value}/apps`)
|
|
console.log(response)
|
|
apps.value = response.data
|
|
}
|
|
</script>
|