minor ui tweaks

frontend/src/App.vue

@@ -48,7 +48,7 @@ const butts = () => {
 </template>
 
 <style scoped>
-/*header {
+header {
   line-height: 1.5;
 }
 
@@ -73,5 +73,5 @@ const butts = () => {
     place-items: flex-start;
     flex-wrap: wrap;
   }
-}*/
+}
 </style>

frontend/src/components/CharacterSelectorRow.vue

@@ -2,13 +2,13 @@
   <v-expansion-panel>
     <v-expansion-panel-title>
       <div class="d-flex flex-row">
-        <div class="charactername">{{ character.characterName || "Unkown Character"}}</div>
+        <div class="charactername">{{ characterName }}</div>
-        <div class="playername"> ( {{ character.playerName || "Unkown Player"}} )</div>
+        <div class="playername">( {{ playerName }} )</div>
       </div>
     </v-expansion-panel-title>
     <v-expansion-panel-text>
-      <div>Alias: {{ character.characterAlias }}</div>
+      <div>Alias: {{ alias }}</div>
-      <slot></slot>
+      <JsonEditorVue v-model="json" v-bind="editorConfig" />
     </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
@@ -21,8 +21,41 @@
 </style>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import JsonEditorVue from 'json-editor-vue'
+
+import { computed } from 'vue'
 import { Character, ListCharacterRequest } from '../proto/character'
 
-const props = defineProps<{ character?: Character }>()
+const editorConfig = {
+  mainMenuBar: false,
+  navigationBar: false,
+  readOnly: true,
+}
+
+const {
+  character = {
+    playerName: 'Unkown Player',
+    characterName: 'Player Character',
+    characterAlias: ['No Alias'],
+    json: "",
+  },
+} = defineProps<{ character?: Character }>()
+
+const playerName = computed(() => {
+  return character.playerName || 'Unnamed Player'
+})
+
+const characterName = computed(() => {
+  return character.characterName || 'Unnamed Character'
+})
+
+const alias = computed(() => {
+  return (character.characterAlias || [])
+    .map((entry) => '"' + entry + '"')
+    .join(', ')
+})
+
+const json = computed(() => {
+  return character.json || '{}'
+})
 </script>