Add in some ui work for listing available characters.

frontend/src/App.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
+import CharacterEditer from './components/CharacterEditer.vue'
+import CharacterSelector from './components/CharacterSelector.vue'
 import { Character, ListCharacterRequest } from './proto/character'
 import { CharacterManagerClient } from './proto/character.client'
 import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport'
@@ -27,21 +29,29 @@ const butts = () => {
 </script>
 
 <template>
-  <header>
-    <!-- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> -->
-    <button class="button" @click="butts">butts</button>
-    <!-- <div class="wrapper"> -->
-    <!-- <HelloWorld msg="You did it!" /> -->
-    <!-- </div> -->
+  <CharacterSelector></CharacterSelector>
+  <!--   <header>
+    <img
+      alt="Vue logo"
+      class="logo"
+      src="./assets/logo.svg"
+      width="125"
+      height="125"
+    />
+    <div class="wrapper">
+      <HelloWorld msg="You did it!" />
+    </div>
   </header>
 
   <main>
-    <!-- <TheWelcome /> -->
-  </main>
+    potato
+    <button class="button" @click="butts">butts</button>
+    <CharacterEditer></CharacterEditer>
+  </main> -->
 </template>
 
 <style scoped>
-header {
+/*header {
   line-height: 1.5;
 }
 
@@ -66,5 +76,5 @@ header {
     place-items: flex-start;
     flex-wrap: wrap;
   }
-}
+}*/
 </style>

frontend/src/components/CharacterEditer.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>{{ character }}</div>
+  <JsonEditorVue v-model="value" v-bind="{}" />
+  <v-btn>Save Character</v-btn>
+</template>
+
+<style></style>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import JsonEditorVue from 'json-editor-vue'
+
+import { Character } from '../proto/character'
+
+const value = ref({})
+const character: Character = {
+  playerName: '',
+  characterName: '',
+  characterAlias: [],
+  version: '',
+  sourceTable: '',
+  json: '{}',
+}
+</script>

frontend/src/components/CharacterSelector.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-text-field
+    v-model="characterSearch"
+    label="Character Name / Alias"
+    type="input"
+    clearable
+  ></v-text-field>
+  <v-text-field
+    v-model="playerSearch"
+    label="Player Name"
+    type="input"
+    clearable
+  ></v-text-field>
+
+  {{ characterList }}
+</template>
+
+<style></style>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+import { Character, ListCharacterRequest } from '../proto/character'
+import { CharacterManagerClient } from '../proto/character.client'
+import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport'
+import { watchDebounced } from '@vueuse/core'
+
+const characterSearch = ref('')
+const playerSearch = ref('')
+
+const characterList = ref([])
+
+
+const client = new CharacterManagerClient(
+  new GrpcWebFetchTransport({
+    baseUrl: 'http://localhost/api',
+    format: 'binary',
+  }),
+)
+
+watchDebounced(
+  [characterSearch, playerSearch],
+  ([newCharacterValue, oldCharacterValue], [newPlayerValue, oldPlayerValue]) => {
+    console.log(newCharacterValue)
+    console.log(newPlayerValue)
+    client.listCharacters({characterName: characterSearch.value, playerName: playerSearch.value}).then((res) => {
+      characterList.value = res.response.characters
+    })
+  },
+  { debounce: 500 },
+)
+
+onMounted(() => {
+  let request = ListCharacterRequest.fromJson({
+    playerName: '',
+    characterName: '',
+  })
+
+  client.listCharacters(request).then((res) => {
+    characterList.value = res.response.characters
+  })
+})
+</script>

frontend/src/components/HelloWorld.vue

@@ -1,3 +1,4 @@
+d
 <script setup lang="ts">
 defineProps<{
   msg: string

frontend/src/main.ts

@@ -1,6 +1,13 @@
 import './assets/main.css'
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
 
 import { createApp } from 'vue'
+
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const vuetify = createVuetify({ components, directives })
+
+createApp(App).use(vuetify).mount('#app')