move frontend to its own folder

frontend/src/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-app>
+    <v-main>
+      <v-app-bar></v-app-bar>
+      <v-navigation-drawer rail></v-navigation-drawer>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+//
+</script>

frontend/src/assets/logo.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>

frontend/src/main.ts

@@ -0,0 +1,24 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+async function run() {
+  const app = createApp(App)
+
+  registerPlugins(app)
+
+  app.mount('#app')
+}
+
+run()

frontend/src/plugins/index.ts

@@ -0,0 +1,19 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+import pinia from '../store'
+import router from '../router'
+
+// Types
+import type { App } from 'vue'
+
+const defaultDatabaseFileName = './testdb.db'
+
+export async function registerPlugins(app: App) {
+  app.use(vuetify).use(router).use(pinia)
+}

frontend/src/plugins/sqliteplugin.ts

@@ -0,0 +1,14 @@
+import { open } from 'sqlite'
+
+const defaultDatabaseFileName = './testdb.db'
+
+export default {
+  install(app, options) {
+    // let database = await open({
+    // 	filename: defaultDatabaseFileName,
+    // 	driver: sqlite3.Database
+    // })
+
+    console.log('potato')
+  }
+}

frontend/src/plugins/vuetify.ts

@@ -0,0 +1,17 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: { defaultTheme: 'dark' }
+})

frontend/src/router/index.ts

@@ -0,0 +1,20 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+import GameList from '../vues/GameList'
+
+const rootPath = {
+  path: '/',
+  component: GameList
+}
+
+const gameListRoute = {
+  path: '/potato',
+  component: GameList
+}
+
+const routes = [rootPath, gameListRoute]
+
+export default createRouter({
+  history: createWebHashHistory(),
+  routes
+})

frontend/src/store/README.md

@@ -0,0 +1,5 @@
+# Store
+
+Pinia stores are used to store reactive state and expose actions to mutate it.
+
+Full documentation for this feature can be found in the Official [Pinia](https://pinia.esm.dev/) repository.

frontend/src/store/app.ts

@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  })
+})

frontend/src/store/characterstore.ts

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+
+export enum CharacterStatus {
+  Active = 'Active',
+  Inactive = 'Inactive',
+  Dead = 'Dead',
+  Retired = 'Retired'
+}
+
+export type Character = {
+  status: CharacterStatus
+  playerName: string
+  characterName: string
+  role: String
+  approvalDate: Date
+}
+
+export const useGameStore = defineStore('characters', {
+  state: () => {
+    return {
+      games: [{} as Character, {} as Character, {} as Character]
+    }
+  },
+  actions: {}
+})

frontend/src/store/gamestore.ts

@@ -0,0 +1,38 @@
+import { defineStore } from 'pinia'
+
+export enum GameStatus {
+  Complete = 'Complete',
+  Postponed = 'Postponed',
+  Pending = 'Pending'
+}
+
+export type Game = {
+  potato: string
+  alsoPotato: string
+  title: string
+  status: GameStatus
+  fix: boolean
+  datePosted: Date
+  dateRun: Date
+  gmPlayerName: string
+  charactersPicked: []
+  charactersApplied: []
+}
+
+export const useGameStore = defineStore('games', {
+  state: () => {
+    return {
+      count: 0,
+      games: [
+        { potato: 'potato', alsoPotato: 'potato' } as Game,
+        { potato: 'potato', alsoPotato: 'potato' } as Game,
+        { potato: 'potato', alsoPotato: 'potato' } as Game
+      ]
+    }
+  },
+  actions: {
+    increment() {
+      this.count++
+    }
+  }
+})

frontend/src/store/index.ts

@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()

frontend/src/styles/settings.scss

@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );

frontend/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

frontend/src/vues/GameList.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-container><div>potato</div></v-container>
+  <v-table>
+    <thead>
+      <tr>
+        <th class="text-left">potato</th>
+        <th class="text-left">also potato</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="game in games.games">
+        <td>{{ game.potato }}</td>
+        <td>{{ game.alsoPotato }}</td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+<style></style>
+
+<script setup lang="ts">
+import { Game, useGameStore } from '../store/gamestore'
+
+const games = useGameStore()
+</script>