jhim
111 lines
2.5 KiB
Vue
111 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
let buttons = [
|
|
{
|
|
name: "Lokaler Multiplayer",
|
|
icon: "mdi-account-switch",
|
|
color: "red",
|
|
componentName: "LocalMode"
|
|
},
|
|
{
|
|
name: "Lokal gegen Bot",
|
|
icon: "mdi-robot-angry-outline",
|
|
color: "green",
|
|
},
|
|
{
|
|
name: "Online Multiplayer",
|
|
icon: "mdi-web",
|
|
color: "blue",
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<v-container class="fill-height d-flex justify-center align-center" fluid>
|
|
<div class="homepage-content">
|
|
<div class="title-section text-center">
|
|
<h1 class="main-title">Wähle deinen</h1>
|
|
<h1 class="main-title highlight-title">Spielmodus</h1>
|
|
</div>
|
|
|
|
<div class="button-section">
|
|
<v-btn
|
|
v-for="button of buttons"
|
|
:key="button.name"
|
|
:color="button.color"
|
|
:to="{ name: button.componentName }"
|
|
size="x-large"
|
|
min-width="340"
|
|
rounded="xl"
|
|
class="mode-btn justify-start"
|
|
elevation="8"
|
|
>
|
|
<template v-slot:prepend>
|
|
<div class="d-flex justify-start" style="width: 32px">
|
|
<v-icon :icon="button.icon" size="24"></v-icon>
|
|
</div>
|
|
</template>
|
|
|
|
<span class="flex-grow-1 text-center btn-label">
|
|
{{ button.name }}
|
|
</span>
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.homepage-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8vh;
|
|
}
|
|
|
|
.title-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.main-title {
|
|
font-family: "Roboto", sans-serif;
|
|
font-size: 3rem;
|
|
font-weight: 300;
|
|
letter-spacing: 2px;
|
|
line-height: 1.2;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.highlight-title {
|
|
font-weight: 700;
|
|
font-size: 3.5rem;
|
|
color: #fdd835;
|
|
letter-spacing: 4px;
|
|
}
|
|
|
|
.button-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
width: 100%;
|
|
}
|
|
|
|
.mode-btn {
|
|
font-family: "Roboto", sans-serif;
|
|
font-weight: 500;
|
|
letter-spacing: 1px;
|
|
text-transform: none;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.mode-btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.btn-label {
|
|
font-size: 1.05rem;
|
|
}
|
|
</style>
|