feat: FRO-17 Added Rule Component and changed Mainmenu structure (#11)

Added a Rule Component and changed MainMenu Structure

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #11
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>

src/views/CreateGame.vue

@@ -30,24 +30,16 @@ const createGameQuasar = async () => {
 </script>
 
 <template>
-  <q-layout>
-    <q-page-container>
-      <q-page class="flex justify-start items-center column ">
-        <header class="text-center q-mb-xl">
-          <h1 class="game-title text-white q-my-none">
-            KnockOutWhist
-          </h1>
-          <p
-            class="text-h5 text-grey-4 q-mt-md"
-            style="max-width: 900px; margin-left: auto; margin-right: auto;"
-          >
-            Are you ready to play? Please select a lobbyname of your choice, the amount of players you want
-            to play with and you are ready to go!
-          </p>
-        </header>
-
+  <header class="text-center q-mb-xl">
+    <p
+      class="text-h5 text-grey-4 q-mt-md"
+      style="max-width: 900px; margin-left: auto; margin-right: auto;"
+    >
+      Are you ready to play? Please select a lobbyname of your choice, the amount of players you want
+      to play with and you are ready to go!
+    </p>
+  </header>
         <div class="q-pa-md" style="width: 100%; max-width: 400px;">
-
           <div>
             <q-input
               v-model="lobbyName"
@@ -108,9 +100,6 @@ const createGameQuasar = async () => {
           </div>
 
         </div>
-      </q-page>
-    </q-page-container>
-  </q-layout>
 </template>
 
 <style scoped>