KnockOutWhist-Frontend/src/components/lobby/LobbyComponent.vue

<script setup lang="ts">
import type {User} from "@/types/GameSubTypes.ts";
import {useIngame} from "@/composables/useIngame.ts";
import type {LobbyInfo} from "@/types/GameTypes.ts";
import {useWebSocket} from "@/composables/useWebsocket.ts";
import {computed} from "vue";
import router from "@/router";
import {useQuasar} from "quasar";

const wb = useWebSocket()
const ig = useIngame();
const $q = useQuasar();

const maxPlayers = computed(() => (<LobbyInfo>ig.data).maxPlayers);
const isHost = computed(() => (<LobbyInfo>ig.data).self.host);
const players = computed(() => {
  return (<LobbyInfo>ig.data).users;
})
const lobbyName = computed(() => {
  return `${ig.data?.gameId}`
});

const handleKickPlayer = (user: User) => {
  if (isHost) {
    wb.send("KickPlayer", {playerId: user.id})
  }
};

const handleStartGame = () => {
  if (isHost) {
    wb.sendAndWait("StartGame", {})
  }
};

const handleLeaveGame = (user: User) => {
  wb.sendAndWait("LeaveGame", {user: user})
};

wb.useEvent("SessionClosed", () => {
  $q.notify({
    message: `You left the lobby.`,
    color: "positive"
  })
  router.replace("/")
})
wb.useEvent("LeftEvent", () => {
  $q.notify({
    message: `You left the lobby.`,
    color: "positive"
  })
  router.replace("/")
})

wb.useEvent("KickEvent", () => {
  $q.notify({
    message: `You were kicked from the lobby!`,
    color: "amber"
  })
  router.replace("/")
})
const profileIcon = 'person';
</script>

<template>

    <div class="row q-pa-md items-center">
      <div class="col text-center text-h4 text-weight-medium">
        Lobby Name: {{ lobbyName }} </div>
      <q-btn
        color="negative"
        label="Exit"
        @click="handleLeaveGame((<LobbyInfo>ig.data).self)"
        class="q-ml-auto"
      />
    </div>

    <div class="row q-pb-md">
      <div class="col text-center text-subtitle1">
        Players: {{ players.length }} / {{ maxPlayers }}
      </div>
    </div>

    <div class="row justify-center items-center flex-grow-1 q-px-md">
      <div class="col-12">
        <div class="row justify-center q-gutter-md">
          <div v-for="player in players" :key="player.id" class="col-auto">
            <q-card class="bg-dark q-pa-md text-center" style="width: 250px;">

              <q-avatar size="80px" color="primary" text-color="white" :icon="profileIcon" class="q-mb-sm" />

              <q-card-section>
                <div class="text-h6">
                  {{ player.username }} <q-badge v-if="player.id === (<LobbyInfo>ig.data).self.id" color="orange" align="middle" class="q-ml-xs">
                  (You)
                </q-badge>
                  <q-badge v-else-if="player.host" color="blue" align="middle" class="q-ml-xs">
                    (Host)
                  </q-badge>
                </div>
              </q-card-section>

              <q-card-actions align="center" v-if="isHost">
                <q-btn
                  v-if="player.id !== (<LobbyInfo>ig.data).self.id"
                  color="negative"
                  label="Remove"
                  @click="handleKickPlayer(player)"
                  class="full-width"
                />
                <q-btn
                  v-else
                  color="negative"
                  label="Remove (Cannot Kick Self)"
                  disable
                  class="full-width"
                />
              </q-card-actions>

            </q-card>
          </div>
        </div>
      </div>
    </div>

    <div class="row q-py-lg text-center">
      <div class="col-12">
        <template v-if="isHost">
          <q-btn
            color="positive"
            label="Start Game"
            size="lg"
            @click="handleStartGame"
          />
        </template>
        <template v-else>
          <div class="text-h6 q-mb-sm">
            Waiting for the host to start the game...
          </div>
          <q-spinner
            color="primary"
            size="3em"
            :thickness="2"
          />
        </template>
      </div>
    </div>
</template>

<style scoped>
</style>