create a game modal

src/boot/axios.js

@@ -1,24 +1,24 @@
-import { boot } from 'quasar/wrappers'
-import axios from 'axios'
+import { boot } from "quasar/wrappers";
+import axios from "axios";
 
 // Be careful when using SSR for cross-request state pollution
 // due to creating a Singleton instance here;
 // If any client changes this (global) instance, it might be a
 // good idea to move this instance creation inside of the
 // "export default () => {}" function below (which runs individually
 // for each client)
-const api = axios.create({ baseURL: 'https://api.example.com' })
+const api = axios.create({ baseURL: "https://api.example.com" });
 
 export default boot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api
 
-  app.config.globalProperties.$axios = axios
+  app.config.globalProperties.$axios = axios;
   // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
   //       so you won't necessarily have to import axios in each vue file
 
-  app.config.globalProperties.$api = api
+  app.config.globalProperties.$api = api;
   // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
   //       so you can easily perform requests against your app's API
-})
+});
 
-export { api }
+export { api };

src/components/game_finder/create_a_game.vue

@@ -0,0 +1,144 @@
+<template>
+  <q-card class="card q-pa-sm">
+    <q-card-section>
+      <div class="text-h6">Create a Game</div>
+    </q-card-section>
+
+    <q-card-section class="q-pa-sm">
+      <q-input
+        filled
+        label="Game Title"
+        bg-color="grey-3"
+        class="select"
+        label-color="primary"
+        v-model="game_title"
+      />
+
+      <q-select
+        v-model="game_line"
+        :options="[
+          { label: 'Vampire: The Masquerade', value: 1 },
+          { label: 'Werewolf: The Apocalypse', value: 2 },
+          { label: 'Hunter: The Reckoning', value: 3 },
+        ]"
+        label="Which Game Line?"
+        label-color="primary"
+        bg-color="grey-3"
+        filled
+        style="margin-bottom: 10px"
+        color="secondary"
+        popup-content-style="background-color:#222831; color:white"
+      />
+      <q-input
+        filled
+        type="number"
+        label="Minimum Number of Players"
+        bg-color="grey-3"
+        class="select"
+        label-color="primary"
+        v-model="min_players"
+      />
+      <q-input
+        filled
+        type="number"
+        label="Maximum Number of Players"
+        bg-color="grey-3"
+        class="select"
+        label-color="primary"
+        v-model="max_players"
+      />
+
+      <q-input
+        filled
+        type="textarea"
+        label="Describe your Game"
+        bg-color="grey-3"
+        class="select"
+        label-color="primary"
+        v-model="game_description"
+      />
+      <div>Include how you would like potential players to contact you</div>
+    </q-card-section>
+
+    <q-card-actions
+      class="text-primary"
+      style="display: flex; flex-direction: column"
+    >
+      <q-btn style="color: white" flat label="Create Game" v-close-popup />
+      <q-btn flat style="color: white" label="Cancel" v-close-popup />
+    </q-card-actions>
+  </q-card>
+</template>
+
+<style scoped>
+.card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: white;
+  width: 750px;
+
+  background-color: #222831;
+
+  @media (max-width: 768px) {
+    min-width: 2em;
+  }
+
+  @media (max-width: 480px) {
+    min-width: 1.5em;
+  }
+}
+
+.q-input.select {
+  width: 35em;
+  margin-bottom: 10px;
+
+  @media (max-width: 768px) {
+    width: 50px;
+  }
+
+  @media (max-width: 480px) {
+    width: 45px;
+  }
+}
+
+.q-select.select {
+  width: 35em;
+  margin-top: 80px;
+
+  @media (max-width: 768px) {
+    width: 50px;
+  }
+
+  @media (max-width: 480px) {
+    width: 45px;
+  }
+}
+</style>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "createAGame",
+  async created() {
+    if (window.location.href.includes("localhost")) {
+      this.baseUrl = "http://localhost:5000";
+    } else {
+      this.baseUrl = window.location.origin;
+    }
+  },
+  data() {
+    return {
+      baseUrl: null,
+      game_title: "",
+      min_players: 1,
+      max_players: 2,
+      game_line: "",
+    };
+  },
+
+  methods: {},
+});
+</script>

src/pages/game_finder/find_a_game.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="top-box">
     <h2 class="banner">Find Your Next Game</h2>
+    <div><q-btn label="Create a Game" @click="createDialog = true" /></div>
+
+    <!-- Dialog -->
+    <q-dialog v-model="createDialog" persistent>
+      <create_a_game />
+    </q-dialog>
   </div>
 </template>
 
@@ -83,9 +89,10 @@
 <script>
 import { defineComponent } from "vue";
 import nosImage from "../../assets/images/Nosfer_logo.png";
+import create_a_game from "../../components/game_finder/create_a_game.vue";
 
 export default defineComponent({
-  components: {},
+  components: { create_a_game },
   name: "findAGame",
   async created() {
     if (window.location.href.includes("localhost")) {
@@ -117,6 +124,7 @@ export default defineComponent({
       baseUrl: "",
       currentUser: null,
       nosImage,
+      createDialog: false,
     };
   },
   methods: {},