lq64
6c914b1421
Added a minimal ui for the tie selection. Tie selection gets sent to the server via websocket and gets response from it. Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #26
99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import {useWebSocket} from "@/composables/useWebsocket.ts";
|
|
import {useIngame} from "@/composables/useIngame.ts";
|
|
import type {GameInfo, LobbyInfo, TieInfo, TrumpInfo} from "@/types/GameTypes.ts";
|
|
import {useQuasar} from "quasar";
|
|
import { ref } from 'vue';
|
|
import { computed } from 'vue'
|
|
|
|
const wb = useWebSocket()
|
|
const wi = useIngame()
|
|
const tieInf = computed(() => wi.data as TieInfo)
|
|
const tieBlankCard = [
|
|
"/images/cards/AS.png"
|
|
]
|
|
const $q = useQuasar();
|
|
function getCardImagePath(cardPath: string) {
|
|
if (!cardPath) return ''
|
|
if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
|
|
return `/${cardPath}`
|
|
}
|
|
function selectTie(tieIndex: number) {
|
|
wb.sendAndWait("PickTie", { cardIndex: tieIndex }).then(
|
|
$q.notify({
|
|
message: "You've successfully picked your tieCard",
|
|
color: "positive",
|
|
position: "top"
|
|
})
|
|
|
|
).catch((error) => {
|
|
$q.notify({
|
|
message: error.message,
|
|
color: "negative",
|
|
position: "top"
|
|
})
|
|
})
|
|
}
|
|
const model = ref(1)
|
|
const options = computed(() => {
|
|
const list = []
|
|
const max = tieInf.value.highestAmount?.valueOf() || 0
|
|
for (let i = 1; i <= max; i++) {
|
|
list.push(i)
|
|
}
|
|
return list
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<q-card v-if="tieInf.self?.name === tieInf.currentPlayer?.name" class="player-profile-card" flat bordered>
|
|
<q-card-section class="bg-white text-dark text-center q-py-lg">
|
|
<div class="text-h3 text-weight-bolder">
|
|
{{ tieInf.self?.name || "Loading Player..."}}
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section class="bg-dark text-dark text-center q-py-lg">
|
|
<div class="q-pa-md" style="max-width: 500px">
|
|
<div class="q-gutter-md">
|
|
<q-select
|
|
v-model="model"
|
|
:options="options"
|
|
label="Select Amount"
|
|
filled
|
|
bg-color="white"
|
|
label-color="primary"
|
|
color="primary"
|
|
popup-content-class="bg-white text-black"
|
|
/>
|
|
<q-btn
|
|
color="positive"
|
|
icon="sports_martial_arts"
|
|
@click="selectTie(model)"
|
|
class="full-width"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
</q-card>
|
|
<q-card
|
|
v-else
|
|
class="player-profile-card text-center"
|
|
flat
|
|
bordered
|
|
style="min-height: 200px; display: flex; flex-direction: column; justify-content: center;"
|
|
>
|
|
<q-card-section class="q-pa-lg">
|
|
<q-spinner-hourglass color="black" size="3em" class="q-mb-md" />
|
|
<div class="text-h5 text-grey-8">
|
|
Waiting for {{ tieInf.currentPlayer?.name || 'the other player' }} to select card for the tie...
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|