117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
<template>
|
|
<div class="minigames-view">
|
|
<v-container>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<h1 class="text-h3 mb-6">{{ $t('minigames.title') }}</h1>
|
|
<p class="text-body-1 mb-8">{{ $t('minigames.description') }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" md="6" lg="4">
|
|
<v-card
|
|
class="game-card"
|
|
@click="navigateToGame('match3')"
|
|
hover
|
|
elevation="4"
|
|
>
|
|
<v-img
|
|
src="/images/icons/game.png"
|
|
height="200"
|
|
cover
|
|
class="game-image"
|
|
></v-img>
|
|
<v-card-title class="text-h5">
|
|
{{ $t('minigames.match3.title') }}
|
|
</v-card-title>
|
|
<v-card-text>
|
|
{{ $t('minigames.match3.description') }}
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-btn
|
|
color="primary"
|
|
variant="elevated"
|
|
@click="navigateToGame('match3')"
|
|
>
|
|
{{ $t('minigames.play') }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Platzhalter für weitere Spiele -->
|
|
<v-col cols="12" md="6" lg="4">
|
|
<v-card class="game-card coming-soon" disabled>
|
|
<v-img
|
|
src="/images/icons/coming-soon.png"
|
|
height="200"
|
|
cover
|
|
class="game-image"
|
|
></v-img>
|
|
<v-card-title class="text-h5">
|
|
{{ $t('minigames.comingSoon.title') }}
|
|
</v-card-title>
|
|
<v-card-text>
|
|
{{ $t('minigames.comingSoon.description') }}
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-btn disabled>
|
|
{{ $t('minigames.comingSoon') }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'MinigamesView',
|
|
methods: {
|
|
navigateToGame(game) {
|
|
this.$router.push(`/minigames/${game}`);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.minigames-view {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.game-card {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
cursor: pointer;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.game-card:hover:not(.coming-soon) {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 12px 24px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.game-image {
|
|
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
|
|
}
|
|
|
|
.coming-soon {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
h1 {
|
|
color: white;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
p {
|
|
color: rgba(255,255,255,0.9);
|
|
}
|
|
</style>
|