KnockOutWhist-Frontend/src/components/MainMenuBoxes.vue

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useUserInfo } from '@/composables/useUserInfo';
import { useQuasar } from 'quasar';

const router = useRouter();
const userInfo = useUserInfo();
const $q = useQuasar();

const menuItems = [
  {
    title: 'Create game',
    description: 'Create a new game and invite your friends to play with you.',
    icon: 'add_circle_outline',
    routeName: 'create-Game',
    color: 'green-9',
    requiresAuth: true
  },
  {
    title: 'Spiel beitreten',
    description: 'Join a game by typing in the game identifier.',
    icon: 'login',
    routeName: 'join-Game',
    color: 'blue-9',
    requiresAuth: true
  },
  {
    title: 'Settings',
    description: 'This area is currently under construction.',
    icon: 'settings',
    routeName: 'settings',
    color: 'grey-8',
    requiresAuth: false
  },
  {
    title: 'Rules',
    description: 'Look at the rules to have a clear understanding for playing the game.',
    icon: 'settings',
    routeName: 'rule-Game',
    color: 'grey-8',
    requiresAuth: false
  }
];

const navigateTo = (item: any) => {
  if (item.requiresAuth && !userInfo.username) {
    $q.dialog({
      title: 'Authentication Required',
      message: 'You need to be logged in to create or join a game. Would you like to log in or sign up?',
      ok: {
        label: 'Login',
        color: 'primary'
      },
      cancel: {
        label: 'Sign Up',
        color: 'secondary'
      }
    }).onOk(() => {
      router.push({ name: 'login' });
    }).onCancel(() => {
      router.push({ name: 'register' });
    });
  } else {
    router.push({ name: item.routeName });
  }
};
</script>

<template>
  <transition-group
    appear
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"

    tag="div"
    class="row q-col-gutter-md justify-center"
    style="width: 100%; max-width: 1000px;"
  >
    <div
      v-for="(item, index) in menuItems"
      :key="index"
      class="col-12 col-sm-6 col-md-4"
      :style="{ animationDuration: '1.6s', animationDelay: `${index * 0.3 + 0.5}s` }"
    >
      <q-card
        class="menu-card bg-dark text-white q-pa-sm cursor-pointer"
        v-ripple
        @click="navigateTo(item)"
      >
        <q-card-section class="row items-center no-wrap">
          <q-avatar
            :icon="item.icon"
            :color="item.color"
            text-color="white"
            size="lg"
            class="q-mr-md shadow-2"
          />
          <div>
            <div class="text-h6">{{ item.title }}</div>
            <div class="text-caption text-grey-5">
              {{ item.description }}
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </transition-group>
</template>

<style scoped>
.menu-card {
  transition: transform 0.2s, background-color 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-card:hover {
  transform: translateY(-5px);
  background-color: #2c3e50 !important;
  border-color: var(--q-primary);
}
</style>