minor ui tweaks

frontend/src/components/CharacterSelectorRow.vue

@@ -2,27 +2,60 @@
   <v-expansion-panel>
     <v-expansion-panel-title>
       <div class="d-flex flex-row">
-        <div class="charactername">{{ character.characterName || "Unkown Character"}}</div>
-        <div class="playername"> ( {{ character.playerName || "Unkown Player"}} )</div>
+        <div class="charactername">{{ characterName }}</div>
+        <div class="playername">( {{ playerName }} )</div>
       </div>
     </v-expansion-panel-title>
     <v-expansion-panel-text>
-      <div>Alias: {{ character.characterAlias }}</div>
-      <slot></slot>
+      <div>Alias: {{ alias }}</div>
+      <JsonEditorVue v-model="json" v-bind="editorConfig" />
     </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
 <style>
-	.charactername {
-		font-weight: bold;
-		margin-right: 10px;
-	}
+.charactername {
+  font-weight: bold;
+  margin-right: 10px;
+}
 </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>