settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: create game: show PIN

Browse Source
This commit is contained in:
Settel 2022-04-10 16:15:05 +02:00
parent 772edfdefc
commit 4fc4730e34
2 changed files with 53 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
client/src/components/CreateGame.vue
View File

@ -6,29 +6,41 @@
<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"
:disabled="name.length == 0 || teamname.length == 0"
@click="createGame"
>
create game
</Button>
<template v-if="authcode">
<div class="create-game__modal-success-message">
<p>Deine PIN lautet:</p>
<div class="create-game__modal-pin">
{{ authcode}}
</div>
<p>Schreibe sie Dir am besten gleich auf und logge dich anschließend damit ein.</p>
</div>
<PlayButton />
</template>
<template v-else>
<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"
:disabled="name.length == 0 || teamname.length == 0"
@click="createGame"
>
create game
</Button>
</template>
</div>
</template>
</div>
@ -40,12 +52,14 @@ export default {
return {
name: '',
teamname: '',
authcode: '',
showModal: false,
}
},
methods: {
openModal() {
this.showModal = true
this.authcode = ''
},
closeModal() {
this.showModal = false
@ -53,7 +67,8 @@ export default {
async createGame() {
this.showModal = false
const user = await this.$engine.createGame(this.name, this.teamname)
console.log(user)
this.showModal = true
this.authcode = user.data.authcode
},
},
}
@ -89,10 +104,11 @@ export default {
&__modal {
position: absolute;
left: 50%;
top: 15%;
top: 10%;
margin-left: -300px;
width: 600px;
height: 300px;
height: 400px;
overflow: hidden;
display: flex;
flex-direction: column;
z-index: 16;
@ -117,6 +133,16 @@ export default {
margin: auto 24px 24px auto;
}
&-success-message {
font-size: 24px;
text-align: center;
margin: 1em 2em 2em 2em;
}
&-pin {
font-size: 32px;
font-weight: 800;
}
&-close {
float: right;
margin: 16px -16px 16px 16px;

2
client/src/pages/index.vue
View File

@ -2,7 +2,7 @@
<div class="startpage">
<TitleBox />
<PlayButton class="startpage__buttonline" />
<CreateGame class="startpage__creategame" />
<CreateGame v-if="!$store.state.engine.user" class="startpage__creategame" />
<div class="startpage__copyright">
v{{ $config.version }}, © 2021-2022, Settel
</div>