feature: added create,join,spectate buttons and create game dialog

webclientvue/src/components/ExampleComponent.vue

@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import type { Todo, Meta } from './models';
+import type { Todo, Meta } from '../models/models';
 
 interface Props {
   title: string;

webclientvue/src/components/models.ts

@@ -1,8 +0,0 @@
-export interface Todo {
-  id: number;
-  content: string;
-}
-
-export interface Meta {
-  totalCount: number;
-}

webclientvue/src/constants/gametypes.ts

@@ -0,0 +1,16 @@
+const gameTypes = [
+  'Standard',
+  'Pioneer',
+  'Modern',
+  'Legacy',
+  'Vintage',
+  'Limited',
+  'Commander',
+  'Highlander',
+  'Pre-Modern',
+  'Old School',
+  'Pauper',
+  'Other',
+] 
+
+export default gameTypes;

webclientvue/src/fake-data/gameColumns.ts

@@ -1,14 +1,5 @@
 import type { QTableProps } from 'quasar';
-
-interface Games {
-  age: string;
-  description: string;
-  creator: string;
-  type: string;
-  restrictions: string;
-  players: string;
-  spectators: string | number;
-}
+import type { Games } from 'src/models/models';
 
 const restrictions = ['🔒 password', 'reg. users only', 'buddies only'];
 

webclientvue/src/models/models.ts

@@ -0,0 +1,19 @@
+export interface Todo {
+  id: number;
+  content: string;
+}
+
+export interface Meta {
+  totalCount: number;
+}
+
+export interface Games {
+  age: string;
+  description: string;
+  creator: string;
+  type: string;
+  restrictions: string;
+  players: string;
+  spectators: string | number;
+}
+

webclientvue/src/pages/GamePage.vue

@@ -0,0 +1,3 @@
+<template>
+    <p>HELLO</p>
+</template>

webclientvue/src/pages/HomePage.vue

@@ -10,7 +10,101 @@
         virtual-scroll
         :pagination-label="(start, end, total) => `Total games: ${total}`"
         style="height: 60%"
+        @row-click="
+          (evt, row, index) => {
+            console.log('Row clicked:', row);
+            selectedGame = row;
+          }
+        "
       />
+      <div class="flex justify-end q-mt-md">
+        <div class="row q-pa-sm q-gutter-sm">
+          <q-btn outline label="Create" color="primary" @click="createGameDialog = true" />
+          <!-- @click="redirectGame" -->
+          <q-btn outline label="Join" color="secondary" :disable="selectedGame ? false : true" />
+          <q-btn outline label="Join as Spectator" :disable="selectedGame ? false : true" />
+        </div>
+      </div>
+
+      <q-dialog v-model="createGameDialog" persistent>
+        <q-card style="min-width: 350px">
+          <q-card-section class="row items-center bg-primary">
+            <CockatriceAvatar square size="25px" />
+            <div class="flex justify-between text-h6" style="color: white; width: 100%">
+              <div>Create game</div>
+
+              <q-btn icon="close" flat round dense v-close-popup />
+            </div>
+          </q-card-section>
+
+          <q-card-section class="row justify-center q-pa-md q-gutter-md">
+            <!-- COLUMN 1 -->
+            <div class="col q-gutter-sm">
+              <q-input
+                filled
+                label="Description"
+                label-color="primary"
+                v-model="newGameDesc"
+                autofocus
+              />
+
+              <q-input
+                filled
+                label="Players"
+                type="number"
+                label-color="primary"
+                v-model="newGamePlayers"
+                autofocus
+              />
+              <q-select
+                filled
+                label="Game Type"
+                label-color="primary"
+                v-model="newGameType"
+                :options="gameTypes"
+              />
+              <div>
+                <q-input
+                  filled
+                  label="Life Total"
+                  type="number"
+                  label-color="primary"
+                  v-model="newGameLifeTotal"
+                />
+              </div>
+            </div>
+
+            <!-- COLUMN 2 -->
+            <div class="col q-gutter-sm">
+              <q-input
+                filled
+                label="Password"
+                type="password"
+                label-color="primary"
+                v-model="newGamePassword"
+                autofocus
+              />
+              <q-checkbox label="Only buddies can join" v-model="newGameOnlyBuddies" />
+              <q-checkbox label="Only registered users can join" v-model="newGameOnlyRegistered" />
+              <q-checkbox label="Spectators can watch" v-model="newGameSpectatorsCanWatch" />
+              <q-checkbox
+                label="Spectators need a password to watch"
+                v-model="newGameSpectatorsNeedPassword"
+              />
+              <q-checkbox label="Spectators can chat" v-model="newGameSpectatorsCanChat" />
+              <q-checkbox label="Spectators can see hands" v-model="newGameSpectatorsCanSeeHands" />
+              <q-checkbox label="Create game as Spectator" v-model="newGameAsSpectator" />
+            </div>
+          </q-card-section>
+
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="OK" @click="redirectGame" />
+            <q-btn flat label="Clear" />
+            <q-btn flat label="CANCEL" @click="createGameDialog = false" />
+          </q-card-actions>
+        </q-card>
+        <!-- END OF LOGIN -->
+      </q-dialog>
 
       <q-card style="height: 30%" class="q-mt-md">
         <q-list bordered separator>
@@ -38,7 +132,42 @@
 <script setup lang="ts">
 import userBadge from 'assets/pawn_single.svg';
 import { games, gameColumns } from 'src/fake-data/gameColumns';
+import type { Games } from 'src/models/models';
 import { chats } from 'src/fake-data/chats';
+import { useRouter } from 'vue-router';
+import { ref } from 'vue';
+import gameTypes from 'src/constants/gametypes';
+
+const selectedGame = ref<Games | null>(null);
+const createGameDialog = ref(false);
+
+const newGameDesc = ref(''); // Default description for new game
+const newGamePlayers = ref(4); // Default to 4 players
+
+//join restrictions
+const newGamePassword = ref(''); // Default empty password
+const newGameOnlyBuddies = ref(false); // Default to false
+const newGameOnlyRegistered = ref(false); // Default to false
+
+//game types
+const newGameType = ref(gameTypes[7]); // Default empty game type
+
+//spectators
+const newGameSpectatorsCanWatch = ref(false); // Default to false
+const newGameSpectatorsNeedPassword = ref(false); // Default to false
+const newGameSpectatorsCanChat = ref(false); // Default empty password for spectators
+const newGameSpectatorsCanSeeHands = ref(false); // Default to false
+const newGameAsSpectator = ref(false); // Default to false
+
+// // Game setup options
+const newGameLifeTotal = ref(40); // Default life total
+
+const router = useRouter();
+
+async function redirectGame() {
+  console.log('Redirecting to game...');
+  await router.push({ name: 'game' });
+}
 </script>
 
 <style scoped>

webclientvue/src/router/routes.ts

@@ -12,6 +12,12 @@ const routes: RouteRecordRaw[] = [
     component: () => import('layouts/MainLayout.vue'),
     children: [{ path: 'home', name: 'home', component: () => import('pages/HomePage.vue') }],
   },
+  {
+    path: '/',
+    name: '',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [{ path: 'game', name: 'game', component: () => import('pages/GamePage.vue') }],
+  },
 
   // Always leave this as last one,
   // but you can also remove it