character rules

src/pages/rules/EditRuleBook.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {Character, CharacterLabel, useCharactersStore} from "@/characters";
+import {useRoute} from "vue-router";
+import {ref, watch} from "vue";
+import log from "loglevel";
+
+const {findById} = useCharactersStore();
+
+const character = ref<Character>();
+
+watch(useRoute(), async route => {
+  if (route.params.characterId) {
+    const id = parseInt(typeof route.params.characterId === 'string' ? route.params.characterId : route.params.characterId[0]);
+
+    character.value = findById(id);
+    log.info('Loaded character:', character.value);
+  } else {
+    character.value = undefined;
+    log.info('No character to load');
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div v-if="character" class="grid mb-2 mt-4">
+    <div class="mb-4 border-b-1 flex">
+      <CharacterLabel class="flex grow mb-2" :character="character" size="128" />
+    </div>
+  </div>
+</template>