feat: character creation

src/components/profile/characters/CharacterListColumn.vue

@@ -9,12 +9,12 @@
         :title="$t('profile.characters.emptyTitle')"
       >
         <Button
-          disabled
+          @click="reroute('/character/add')"
         >
           <Icon
-            style="opacity: 0.22"
             name="add"
             small
+            dark
           />
           {{ $t('action.add') }}
         </Button>
@@ -39,6 +39,7 @@ import Button from '@/components/form/Button.vue'
 import Column from '@/components/layout/Column.vue'
 import Icon from '@/components/material/Icon.vue'
 import CollectionEmptyPane from '@/components/material3/CollectionEmptyPane.vue'
+import { useUxActions } from '@/composables/useUxActions'
 import { useCharacters } from '@/state/characters'
 import { defineComponent } from 'vue'
 import CharacterListCard from './CharacterListCard.vue'
@@ -47,7 +48,8 @@ export default defineComponent({
   components: { Column, Loader, CollectionEmptyPane, Button, Icon, CharacterListCard },
   setup () {
     const { characters, loading } = useCharacters()
-    return { characters, loading }
+    const { reroute } = useUxActions()
+    return { characters, loading, reroute }
   }
 })
 </script>

src/router/index.ts

@@ -246,6 +246,12 @@ const routes: Array<RouteRecordRaw> = [
     props: true,
     component: () => import(/* webpackChunkName: "mekanismi" */ '../views/characters/CharacterView.vue')
   },
+  {
+    name: 'character.add',
+    path: '/character/add',
+    props: false,
+    component: () => import(/* webpackChunkName: "mekanismi" */ '../views/characters/AddCharacterView.vue')
+  },
   {
     name: 'site.keeper.view',
     path: '/site/:siteid/keeper',

src/state/characters/Character.ts

@@ -13,6 +13,9 @@ export interface CharacterStatModel {
   max?: number,
   formula?: string
 }
+export interface CharacterStat {
+  [key: string]: number|string|boolean
+}
 
 export interface CharacterSheetModel {
   layout: Array<Array<Array<string>>>
@@ -35,14 +38,16 @@ export class Character {
   public sheet: CharacterSheetModel = CHARACTER_SHEET_TYPES.default
   public stats: Map<string, number>
   private math = create(all)
+  public characterSheetType: string
 
-  constructor (id: string, data?:DocumentData) {
-    this.id = id
+  constructor (id?: string, data?:DocumentData) {
+    this.id = id || ''
     this.player = data?.player || undefined
     this.name = data?.name || 'N.N.'
     this.htmlDescription = data?.htmlDescription || ''
     this.site = data?.site || undefined
     this.stats = Character.parseStats(data?.stats || {})
+    this.characterSheetType = data?.characterSheetType || 'default'
     if (data?.characterSheetType) {
       this.applyCharacterSheet(data?.characterSheetType as string)
     }
@@ -132,19 +137,17 @@ export class Character {
     return Math.floor(result)
   }
 
-  public dryCopy (): {
-      id: string,
-      name: string,
-      htmlDescription: string
-      site: string|undefined
-        player: string|undefined
-        } {
-    return {
+  public dryCopy (): { [x: string]: string|CharacterStat } {
+    const dry: { [x: string]: undefined|string|CharacterStat } = {
       id: this.id,
       name: this.name,
       htmlDescription: this.htmlDescription,
       site: this.site,
-      player: this.player
+      characterSheetType: this.characterSheetType,
+      player: this.player,
+      stats: Object.fromEntries(this.stats.entries()) as { [key: string]: number|string|boolean }
     }
+    Object.keys(dry).forEach(k => dry[k] === undefined ? delete dry[k] : null)
+    return dry as { [x: string]: string|CharacterStat }
   }
 }

src/state/characters/index.ts

@@ -109,17 +109,24 @@ async function deleteCharacter (id: string): Promise<void> {
   pushSnack('Character deleted')
 }
 
+async function createCharacter (character: Character): Promise<string> {
+  logDebug('createCharacter', character.id)
+  const { user } = useAuth()
+  const { pushSnack } = useSnack()
+  character.player = user.value.uid
+  const doc = await addDoc(
+    collection(getFirestore(), 'characters'),
+    character.dryCopy()
+  )
+  pushSnack('Character created')
+  return doc.id
+}
+
 export function useCharacters (): {
-    // addPlayerCharacter: (type: string) => Promise<string>
     characters: ComputedRef<Map<string, Character>>,
     loading: ComputedRef<boolean>
+    createCharacter: (character: Character) => Promise<string>,
     deleteCharacter: (id: string) => Promise<void>
-    /* updatePlayerCharacter: (char:PlayerCharacter) => Promise<void>,
-    fetchPlayerCharacter: (id: string) => Promise<void>,
-    character: ComputedRef<PlayerCharacter|undefined|null>,
-    updatePlayerCharacterFields: (id: string, fields: PartialPlayerCharacter) => Promise<void>,
-    characterid: ComputedRef<string>,
-    createNewPlayerCharacter: (fields: PartialPlayerCharacter) => Promise<DocumentData> */
     } {
   if (!_init) {
     _init = true
@@ -132,5 +139,9 @@ export function useCharacters (): {
       }
     }, { immediate: true })
   }
-  return { loading, characters, deleteCharacter }
+  return { loading, characters, createCharacter, deleteCharacter }
+}
+
+export {
+  Character
 }

src/views/characters/AddCharacterView.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="AddCharacterView">
+    <Header>
+      <ViewTitle icon="add">
+        {{ $t('character.add.title') }}
+      </ViewTitle>
+    </Header>
+    <main class="singleColumnLayout">
+      <Textfield
+        v-model="name"
+        :label="$t('character.meta.name')"
+      />
+      <Select
+        v-model="system"
+        name="systemSelector"
+        :label="$t('character.meta.system')"
+        :opts="opts"
+      />
+      <Toolbar>
+        <SpacerDiv />
+        <Button
+          text
+          @click="reroute('/characters')"
+        >
+          {{ $t('action.cancel') }}
+        </Button>
+        <Button
+          :disabled="!name"
+          @click="addCharacter"
+        >
+          {{ $t('action.add') }}
+        </Button>
+      </Toolbar>
+    </main>
+  </div>
+</template>
+
+<script lang="ts">
+import Textfield from '@/components/form/Textfield.vue'
+import Header from '@/components/layout/Header.vue'
+import ViewTitle from '@/components/layout/ViewTitle.vue'
+import Select from '@/components/form/Select.vue'
+import { defineComponent, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Toolbar from '@/components/layout/Toolbar.vue'
+import SpacerDiv from '@/components/layout/SpacerDiv.vue'
+import Button from '@/components/form/Button.vue'
+import { useUxActions } from '@/composables/useUxActions'
+import { useCharacters, Character } from '@/state/characters'
+
+export default defineComponent({
+  components: { ViewTitle, Header, Textfield, Select, Button, Toolbar, SpacerDiv },
+  setup () {
+    const i18n = useI18n()
+    const { reroute } = useUxActions()
+    const { createCharacter } = useCharacters()
+    const name = ref('')
+    const system = ref('-')
+    const opts = new Map<string, string>(
+      [
+        ['-', i18n.t('character.sheet.plain')],
+        ['dd', i18n.t('character.sheet.dnd')],
+        ['quick', i18n.t('character.sheet.quick')]
+      ])
+
+    const addCharacter = async () => {
+      const character = new Character()
+      character.name = name.value
+      character.characterSheetType = system.value
+      const id = await createCharacter(character)
+      reroute('/character/' + id)
+    }
+
+    return {
+      opts,
+      system,
+      reroute,
+      addCharacter,
+      name
+    }
+  }
+})
+</script>

src/views/characters/CharacterView.vue

@@ -75,7 +75,7 @@ export default defineComponent({
     const i18n = useI18n()
     const { characters, deleteCharacter } = useCharacters()
     const deleteConfirm = ref(false)
-    const showDeleteDialog = ref(true)
+    const showDeleteDialog = ref(false)
     const { reroute } = useUxActions()
 
     const character = computed(() => {

src/views/profile/UserCharactersView.vue

@@ -8,12 +8,12 @@
       </ViewTitle>
       <SpacerDiv />
       <Button
-        disabled
+        @click="reroute('/character/add')"
       >
         <Icon
-          style="opacity: 0.22"
           name="add"
           small
+          dark
         />
         {{ $t('action.add') }}
       </Button>
@@ -32,12 +32,14 @@ import Icon from '@/components/material/Icon.vue'
 import Button from '@/components/form/Button.vue'
 import { defineComponent } from 'vue'
 import CharacterListColumn from '@/components/profile/characters/CharacterListColumn.vue'
+import { useUxActions } from '@/composables/useUxActions'
 
 export default defineComponent({
   name: 'UserCharactersView',
   components: { Header, ViewTitle, SpacerDiv, Icon, Button, CharacterListColumn },
   setup () {
-
+    const { reroute } = useUxActions()
+    return { reroute }
   }
 })
 </script>