feat: create game (WIP)

client/src/components/Button.vue

@@ -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>

client/src/components/CreateGame.vue

@@ -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>

client/src/components/Infobox.vue

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

client/src/components/PlayButton.vue

@@ -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">
+        <Button @click="$router.push('/play')">Play!</Button>
-          Play!
-        </NuxtLink>
         <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
+        <Button :disabled="loginDisabled" @click="login">Go</Button>
-          type="submit"
-          value="Go"
-          :class="[ 'playbutton__authbutton', { disabled: loginDisabled }]"
-        />
         <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;

client/src/pages/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="startpage">
     <TitleBox />
-    <div class="startpage__buttonline">
+    <PlayButton class="startpage__buttonline" />
-      <PlayButton />
+    <CreateGame class="startpage__creategame" />
-    </div>
     <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;