lq64
d73b4f396b
Added animations for mainmenu Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #22 Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const router = useRouter();
|
|
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'
|
|
},
|
|
{
|
|
title: 'Spiel beitreten',
|
|
description: 'Join a game by typing in the game identifier.',
|
|
icon: 'login',
|
|
routeName: 'join-Game',
|
|
color: 'blue-9'
|
|
},
|
|
{
|
|
title: 'Settings',
|
|
description: 'This area is currently under construction.',
|
|
icon: 'settings',
|
|
routeName: 'settings',
|
|
color: 'grey-8'
|
|
},
|
|
{
|
|
title: 'Rules',
|
|
description: 'Look at the rules to have a clear understanding for playing the game.',
|
|
icon: 'settings',
|
|
routeName: 'rules-Game',
|
|
color: 'grey-8'
|
|
}
|
|
];
|
|
|
|
const navigateTo = (routeName: string) => {
|
|
router.push({ name: 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.routeName)"
|
|
>
|
|
<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>
|