feat: create game (WIP)

This commit is contained in:
Settel 2022-04-09 20:57:32 +02:00
parent f6e2e8590f
commit db7bfaac8b
5 changed files with 197 additions and 41 deletions

View File

@ -0,0 +1,49 @@
<template>
<div class="button" :class="{ disabled }" @click="click">
<slot />
</div>
</template>
<script>
export default {
props: ['disabled'],
methods: {
click() {
this.$emit('click')
},
},
}
</script>
<style lang="scss">
@import '~/assets/css/components';
.button {
display: inline-block;
margin: auto;
padding: 4px 24px;
border: 4px solid $button-border-color;
border-radius: 8px;
background-color: $button-background-color;
color: $button-text-color;
text-align: center;
font-family: Dosis;
font-weight: bold;
font-size: 24px;
cursor: pointer;
&:hover {
border-color: $button-hover-border-color;
background-color: $button-hover-background-color;
color: $button-hover-text-color;
}
&.disabled,
&:hover.disabled {
cursor: default;
background-color: $button-disabled-background-color;
border-color: $button-disabled-border-color;
color: $button-disabled-text-color;
}
}
</style>

View File

@ -0,0 +1,133 @@
<template>
<div class="create-game">
<div v-if="!showModal" class="create-game__button" @click="openModal">
create game
</div>
<template v-if="showModal">
<div class="create-game__backdrop" />
<div class="create-game__modal">
<div class="create-game__modal-content">
<div class="create-game__modal-close" @click="closeModal" />
<p>
Erstellt eine neues, leeres Spiel und einen Useraccount als Gamemaster.
</p>
<table class="create-game__modal-content-table">
<tr>
<td>Name</td>
<td><input v-model="name" size="16" /></td>
</tr>
<tr>
<td>Teamname</td>
<td><input v-model="teamname" size="16" /></td>
</tr>
</table>
</div>
<Button class="create-game__modal-cta" @click="createGame">create game</Button>
</div>
</template>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
teamname: '',
showModal: false,
}
},
methods: {
openModal() {
this.showModal = true
},
closeModal() {
this.showModal = false
},
createGame() {
this.showModal = false
this.$router.push('/gamemaster')
},
},
}
</script>
<style lang="scss">
@import '~/assets/css/components';
.create-game {
&__backdrop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 15;
background-color: rgba(36, 24, 72, 0.8);
}
&__button {
display: inline;
font-family: Dosis;
font-weight: 800;
font-size: 24px;
color: $button-secondary-text-color;
cursor: pointer;
&:hover {
color: $button-secondary-hover-text-color;
}
}
&__modal {
position: absolute;
left: 50%;
top: 15%;
margin-left: -300px;
width: 600px;
height: 300px;
display: flex;
flex-direction: column;
z-index: 16;
border: 1px solid $primary-box-border-color;
border-radius: 20px;
background-color: $primary-box-background-color;
font-family: Dosis;
font-size: 20px;
color: #ffffff;
&-content {
padding: 0 40px;
}
&-content-table {
margin: 36px 0 0 -12px;
border-collapse: separate;
border-spacing: 12px 0;
}
&-cta {
margin: auto 24px 24px auto;
}
&-close {
float: right;
margin: 16px -16px 16px 16px;
padding: 12px;
border: 1px solid #ffffff;
border-radius: 8px;
background-color: $primary-background-color;
font-family: "Wendy One";
color: #ffffff;
cursor: pointer;
&:hover {
background-color: $primary-box-background-color;
}
&::after {
content: 'x';
}
}
}
}
</style>

View File

@ -6,11 +6,6 @@
</div> </div>
</template> </template>
<script>
export default {
}
</script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @import '~/assets/css/components';

View File

@ -3,14 +3,12 @@
<div v-if="!$fetchState.pending" class="playbutton"> <div v-if="!$fetchState.pending" class="playbutton">
<template v-if="user && user.name"> <template v-if="user && user.name">
<div class="playbutton__greeting">Hi {{ user.name }}!</div> <div class="playbutton__greeting">Hi {{ user.name }}!</div>
<NuxtLink class="playbutton__playbutton" to="/play"> <Button @click="$router.push('/play')">Play!</Button>
Play!
</NuxtLink>
<div class="playbutton__logout" @click="logout"> <div class="playbutton__logout" @click="logout">
logout/switch session logout/switch session
</div> </div>
</template> </template>
<form v-else v-on:submit="login"> <form v-else>
<input <input
v-model="authCode" v-model="authCode"
class="playbutton__authinput" class="playbutton__authinput"
@ -19,11 +17,7 @@
maxlength="6" maxlength="6"
placeholder="code" placeholder="code"
/> />
<input <Button :disabled="loginDisabled" @click="login">Go</Button>
type="submit"
value="Go"
:class="[ 'playbutton__authbutton', { disabled: loginDisabled }]"
/>
<div class="playbutton__errormessage" v-if="errorMessage"> <div class="playbutton__errormessage" v-if="errorMessage">
{{ errorMessage }} {{ errorMessage }}
</div> </div>
@ -53,7 +47,6 @@ export default {
}, },
methods: { methods: {
async login(e) { async login(e) {
e.preventDefault()
try { try {
await this.$axios.$get(`/api/login?code=${this.authCode}`) await this.$axios.$get(`/api/login?code=${this.authCode}`)
this.$fetch() this.$fetch()
@ -127,29 +120,6 @@ export default {
font-size: 24px; font-size: 24px;
} }
&__authbutton {
display: inline;
width: 80px;
height: 48px;
background-color: $button-background-color;
border: 4px solid $button-border-color;
border-radius: 8px;
color: $button-text-color;
font-size: 24px;
&.disabled,
&:hover.disabled {
background-color: $button-disabled-background-color;
border-color: $button-disabled-border-color;
color: $button-disabled-text-color;
}
&:hover {
background-color: $button-hover-background-color;
border-color: $button-hover-border-color;
color: $button-hover-text-color;
}
}
&__errormessage { &__errormessage {
padding: 8px; padding: 8px;
font-size: 18px; font-size: 18px;

View File

@ -1,9 +1,8 @@
<template> <template>
<div class="startpage"> <div class="startpage">
<TitleBox /> <TitleBox />
<div class="startpage__buttonline"> <PlayButton class="startpage__buttonline" />
<PlayButton /> <CreateGame class="startpage__creategame" />
</div>
<div class="startpage__copyright"> <div class="startpage__copyright">
v{{ $config.version }}, © 2021-2022, Settel v{{ $config.version }}, © 2021-2022, Settel
</div> </div>
@ -12,10 +11,20 @@
<style lang="scss"> <style lang="scss">
.startpage { .startpage {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
&__buttonline { &__buttonline {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
&__creategame {
margin: auto 0 2em 2em;
}
&__copyright { &__copyright {
position: absolute; position: absolute;
right: 1em; right: 1em;