From a1dbe41b6c1ad4d2579f9778a0d0eee5f2f26afc Mon Sep 17 00:00:00 2001
From: Sirttas <sophiegaelle.calloch@gmail.com>
Date: Sat, 23 May 2026 23:47:06 +0200
Subject: [PATCH] character rules

---
 src/characters/CharacterLabel.vue |  7 +++++--
 src/characters/chartacters.ts     |  4 +++-
 src/pages/Characters.vue          |  4 +++-
 src/pages/Rules.vue               | 16 +---------------
 src/pages/rules/EditRuleBook.vue  | 30 ++++++++++++++++++++++++++++++
 src/pages/rules/ListRuleBooks.vue | 17 +++++++++++++++++
 src/routes.ts                     |  9 ++++++---
 src/rules/index.ts                |  0
 8 files changed, 65 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/rules/EditRuleBook.vue
 create mode 100644 src/pages/rules/ListRuleBooks.vue
 create mode 100644 src/rules/index.ts

diff --git a/src/characters/CharacterLabel.vue b/src/characters/CharacterLabel.vue
index fe3de5e..37380ba 100644
--- a/src/characters/CharacterLabel.vue
+++ b/src/characters/CharacterLabel.vue
@@ -4,14 +4,17 @@ import {Character} from "./chartacters.ts";
 
 interface Props {
   character: Character;
+  size?: number;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  size: 32
+})
 </script>
 
 <template>
   <div class="flex">
-    <img class="me-2" :src="`https://images.evetech.net/characters/${character.characterId}/portrait?size=32`" />
+    <img class="me-2" :src="`https://images.evetech.net/characters/${character.characterId}/portrait?size=${size}`" />
     <span>{{ character.name }}</span>
   </div>
 </template>
diff --git a/src/characters/chartacters.ts b/src/characters/chartacters.ts
index 7195bfd..63d4512 100644
--- a/src/characters/chartacters.ts
+++ b/src/characters/chartacters.ts
@@ -8,9 +8,11 @@ export type Character = CharacterResponse
 export const useCharactersStore = defineStore('characters', () => {
     const characters = ref<Character[]>([]);
 
+    const findById = (characterId: number): Character | undefined => characters.value.find(c => c.characterId === characterId);
+
     const refresh = () => characterControllerApi.getCharacters().then(response => characters.value = response.data);
 
     refresh();
 
-    return {characters, refresh};
+    return {characters, findById, refresh};
 })
\ No newline at end of file
diff --git a/src/pages/Characters.vue b/src/pages/Characters.vue
index 3103c7e..7969c55 100644
--- a/src/pages/Characters.vue
+++ b/src/pages/Characters.vue
@@ -13,7 +13,9 @@ const addCharacter = () => {
 
 <template>
     <div class="grid mb-2 mt-4">
-      <button class="justify-self-end" @click="addCharacter">Add chacarcter</button>
+      <div class="mb-4 border-b-1 flex justify-end">
+        <button class="mb-2" @click="addCharacter">Add chacarcter</button>
+      </div>
       <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
         <CharacterLabel :character="character" />
       </div>
diff --git a/src/pages/Rules.vue b/src/pages/Rules.vue
index 8eb5db4..84ff7ed 100644
--- a/src/pages/Rules.vue
+++ b/src/pages/Rules.vue
@@ -1,21 +1,7 @@
 <script setup lang="ts">
-import {mammonAddCharacterUrl} from "@/mammon";
-import {storeToRefs} from "pinia";
-import {CharacterLabel, useCharactersStore} from "@/characters";
-import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 
-const {characters} = storeToRefs(useCharactersStore());
-
-const addCharacter = () => {
-  window.location.replace(mammonAddCharacterUrl);
-}
 </script>
 
 <template>
-  <div class="grid mb-2 mt-4">
-    <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
-      <CharacterLabel class="flex grow" :character="character" />
-      <button class="btn-icon ms-2" @click=""><PencilSquareIcon /></button>
-    </div>
-  </div>
+<RouterView />
 </template>
\ No newline at end of file
diff --git a/src/pages/rules/EditRuleBook.vue b/src/pages/rules/EditRuleBook.vue
new file mode 100644
index 0000000..b30b06f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/rules/ListRuleBooks.vue b/src/pages/rules/ListRuleBooks.vue
new file mode 100644
index 0000000..8c5ca3d
--- /dev/null
+++ b/src/pages/rules/ListRuleBooks.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {storeToRefs} from "pinia";
+import {CharacterLabel, useCharactersStore} from "@/characters";
+import {PencilSquareIcon} from "@heroicons/vue/24/outline";
+
+const {characters} = storeToRefs(useCharactersStore());
+
+</script>
+
+<template>
+  <div class="grid mb-2 mt-4">
+    <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
+      <CharacterLabel class="flex grow" :character="character" />
+      <RouterLink class="btn-icon ms-2" :to="{ name: 'character-rulebook', params: { characterId: character.characterId } }"><PencilSquareIcon /></RouterLink>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 33c061b..bf20236 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -4,11 +4,14 @@ export const routes: RouteRecordRaw[] = [
     {path: '/', name: 'home', component: () => import('@/pages/Index.vue')},
     {path: '/callback', name: 'callback', component: () => import('@/pages/Index.vue')},
 
-    {path: '/ledgers', component: () => import('./pages/Ledgers.vue'), children: [
-        {path: '', component: () => import('./pages/ledger/ListLedgers.vue')},
+    {path: '/ledgers', component: () => import('@/pages/Ledgers.vue'), children: [
+        {path: '', component: () => import('@/pages/ledger/ListLedgers.vue')},
     ]},
 
-    {path: '/rules', component: () => import('@/pages/Rules.vue')},
+    {path: '/rules', component: () => import('@/pages/Rules.vue'), children: [
+        {path: '', component: () => import('./pages/rules/ListRuleBooks.vue')},
+        {path: ':characterId', name: 'character-rulebook', component: () => import('@/pages/rules/EditRuleBook.vue')},
+    ]},
 
     {path: '/market', component: () => import('@/pages/Market.vue'), children: [
         {path: '', redirect: '/market/types'},
diff --git a/src/rules/index.ts b/src/rules/index.ts
new file mode 100644
index 0000000..e69de29