feat: create game (WIP)
This commit is contained in:
Settel
parent
f6e2e8590f
commit
db7bfaac8b
49
client/src/components/Button.vue
Normal file
49
client/src/components/Button.vue
Normal 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>
|
||||
133
client/src/components/CreateGame.vue
Normal file
133
client/src/components/CreateGame.vue
Normal 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>
|
||||
@ -6,11 +6,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~/assets/css/components';
|
||||
|
||||
|
||||
@ -3,14 +3,12 @@
|
||||
<div v-if="!$fetchState.pending" class="playbutton">
|
||||
<template v-if="user && user.name">
|
||||
<div class="playbutton__greeting">Hi {{ user.name }}!</div>
|
||||
<NuxtLink class="playbutton__playbutton" to="/play">
|
||||
Play!
|
||||
</NuxtLink>
|
||||
<Button @click="$router.push('/play')">Play!</Button>
|
||||
<div class="playbutton__logout" @click="logout">
|
||||
logout/switch session
|
||||
</div>
|
||||
</template>
|
||||
<form v-else v-on:submit="login">
|
||||
<form v-else>
|
||||
<input
|
||||
v-model="authCode"
|
||||
class="playbutton__authinput"
|
||||
@ -19,11 +17,7 @@
|
||||
maxlength="6"
|
||||
placeholder="code"
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
value="Go"
|
||||
:class="[ 'playbutton__authbutton', { disabled: loginDisabled }]"
|
||||
/>
|
||||
<Button :disabled="loginDisabled" @click="login">Go</Button>
|
||||
<div class="playbutton__errormessage" v-if="errorMessage">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
@ -53,7 +47,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async login(e) {
|
||||
e.preventDefault()
|
||||
try {
|
||||
await this.$axios.$get(`/api/login?code=${this.authCode}`)
|
||||
this.$fetch()
|
||||
@ -127,29 +120,6 @@ export default {
|
||||
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 {
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<div class="startpage">
|
||||
<TitleBox />
|
||||
<div class="startpage__buttonline">
|
||||
<PlayButton />
|
||||
</div>
|
||||
<PlayButton class="startpage__buttonline" />
|
||||
<CreateGame class="startpage__creategame" />
|
||||
<div class="startpage__copyright">
|
||||
v{{ $config.version }}, © 2021-2022, Settel
|
||||
</div>
|
||||
@ -12,10 +11,20 @@
|
||||
|
||||
<style lang="scss">
|
||||
.startpage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__buttonline {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__creategame {
|
||||
margin: auto 0 2em 2em;
|
||||
}
|
||||
|
||||
&__copyright {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user