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"> <template v-if="showModal">
<div class="create-game__backdrop" /> <div class="create-game__backdrop" />
<div class="create-game__modal"> <div class="create-game__modal">
<div class="create-game__modal-content"> <template v-if="authcode">
<div class="create-game__modal-close" @click="closeModal" /> <div class="create-game__modal-success-message">
<p> <p>Deine PIN lautet:</p>
Erstellt eine neues, leeres Spiel und einen Useraccount als Gamemaster. <div class="create-game__modal-pin">
</p> {{ authcode}}
<table class="create-game__modal-content-table"> </div>
<tr> <p>Schreibe sie Dir am besten gleich auf und logge dich anschließend damit ein.</p>
<td>Name</td> </div>
<td><input v-model="name" size="16" /></td> <PlayButton />
</tr> </template>
<tr> <template v-else>
<td>Teamname</td> <div class="create-game__modal-content">
<td><input v-model="teamname" size="16" /></td> <div class="create-game__modal-close" @click="closeModal" />
</tr> <p>
</table> Erstellt eine neues, leeres Spiel und einen Useraccount als Gamemaster.
</div> </p>
<Button <table class="create-game__modal-content-table">
class="create-game__modal-cta" <tr>
:disabled="name.length == 0 || teamname.length == 0" <td>Name</td>
@click="createGame" <td><input v-model="name" size="16" /></td>
> </tr>
create game <tr>
</Button> <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> </div>
</template> </template>
</div> </div>
@ -40,12 +52,14 @@ export default {
return { return {
name: '', name: '',
teamname: '', teamname: '',
authcode: '',
showModal: false, showModal: false,
} }
}, },
methods: { methods: {
openModal() { openModal() {
this.showModal = true this.showModal = true
this.authcode = ''
}, },
closeModal() { closeModal() {
this.showModal = false this.showModal = false
@ -53,7 +67,8 @@ export default {
async createGame() { async createGame() {
this.showModal = false this.showModal = false
const user = await this.$engine.createGame(this.name, this.teamname) 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 { &__modal {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 15%; top: 10%;
margin-left: -300px; margin-left: -300px;
width: 600px; width: 600px;
height: 300px; height: 400px;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
z-index: 16; z-index: 16;
@ -117,6 +133,16 @@ export default {
margin: auto 24px 24px auto; 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 { &-close {
float: right; float: right;
margin: 16px -16px 16px 16px; margin: 16px -16px 16px 16px;

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

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