Add most of the tags feature

public/manifest.json

@@ -9,6 +9,6 @@
     "icon": "/icon.svg",
     "popover": "/tags",
     "height": 600,
-    "width": 800
+    "width": 1000
   }
 }

src/assets/main.css

@@ -69,3 +69,7 @@ input::-webkit-inner-spin-button {
 input[type=number] {
   -moz-appearance: textfield;
 }
+
+button {
+  cursor: pointer;
+}

src/components/StatSet.vue

@@ -1,38 +1,132 @@
 <template>
   <div class="container">
-    <label>{{ label }}</label>
+    <div class="title">
+      <div class="label">{{ label }}</div>
+      <div class="button" style="background-color: var(--background-primary)">
+        <img alt="dice" width="32" height="32" src="@/assets/dice-text.svg" />
+      </div>
+    </div>
+    <div class="tag" v-for="(tag, idx) in model" :key="idx">
+      <div class="name">
+        <input v-model="tag.name" placeholder="Tag Name"/>
+        <button class="exp" @click="tag.exp++" @contextmenu.prevent="tag.exp--">{{ tag.exp }}</button>
+        <div class="button">
+          <img alt="dice" width="32" height="32" src="@/assets/dice-accent.svg" />
+        </div>
+      </div>
+      <textarea v-model="tag.description" placeholder="Description"></textarea>
+    </div>
+    <button @click="model.push({ name: '', description: '', exp: 1 })">+</button>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { CharacterTag } from "@/stores/character";
+
 const props = defineProps<{
   label: string;
 }>()
 
-const model = defineModel<{
-  name: string;
-  description: string;
-  exp: number;
-}[]>({ required: true })
-
-
+const model = defineModel<CharacterTag[]>({ required: true })
 </script>
 
 <style scoped>
 .container {
-  display: grid;
-  grid-template-columns: 100px 1fr 75px;
+  --stat-color: var(--theme-primary);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: start;
   gap: 1px;
 }
 
-.container > * {
-  background: var(--theme-primary);
+.title {
+  display: flex;
+}
+
+.label {
+  background: var(--stat-color);
+  padding: 0 16px;
+  margin-left: auto;
+  width: fit-content;
+  height: 100%;
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.tag {
+  width: 100%;
+  background-color: var(--stat-color);
+}
+
+.tag .name {
+  width: 100%;
+  height: 36px;
+  background-color: var(--text-color);
+  display: flex;
+  flex-direction: row;
+}
+
+.tag textarea {
+  display: block;
+  width: 100%;
+  padding: 4px;
+  box-sizing: border-box;
+  min-height: 80px;
+  height: fit-content;
+}
+
+.tag > div > * {
+  height: 100%;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stat-color);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.tag input {
+  flex: 1;
+  padding: 0 16px;
 }
 
-label {
-  font-size: 20px;
-  font-weight: bold;
-  text-align: center;
+.tag input:focus {
+  outline: none;
+  background: var(--accent-color);
 }
 
+.tag .exp {
+  width: 36px;
+  height: 36px;
+  background-color: var(--accent-color);
+  font-size: 18px;
+  border-left: 1px var(--text-color) solid;
+}
+
+.container button {
+  height: 36px;
+  border: none;
+  outline: none;
+  background: var(--text-color);
+  color: var(--stat-color);
+  font-size: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 </style>

src/stores/character.ts

@@ -1,19 +1,25 @@
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { useCollection, useFirestore } from "vuefire";
 import { collection, doc, setDoc } from "firebase/firestore";
 
+export interface CharacterTag {
+  name: string;
+  description: string;
+  exp: number;
+}
+
 export interface CharacterSheet {
   createdAt: string;
   health: number;
   power: number;
   name: string;
   inventory: string;
-  heart: {
-    name: string;
-    description: string;
-    exp: number;
-  }[]
+  heart: CharacterTag[];
+  weird: CharacterTag[];
+  keen: CharacterTag[];
+  fell: CharacterTag[];
+  brawn: CharacterTag[];
 }
 
 export const useCharacterStore = defineStore('characters', () => {
@@ -61,7 +67,11 @@ export const useCharacterStore = defineStore('characters', () => {
       power: 10,
       name: playerName.value || '',
       inventory: '',
-      heart: []
+      heart: [],
+      weird: [],
+      keen: [],
+      fell: [],
+      brawn: []
     }
     await setDoc(charDoc, newSheet)
   }

src/views/CharacterTags.vue

@@ -1,13 +1,27 @@
 <template>
-  <div>{{sheet}}</div>
+  <div id="tags">
+    <StatSet label="Brawn" v-model="sheet.brawn"/>
+    <StatSet label="Keen" v-model="sheet.keen" style="--stat-color: var(--theme-secondary)"/>
+    <StatSet label="Heart" v-model="sheet.heart"/>
+    <StatSet label="Weird" v-model="sheet.weird" style="--stat-color: var(--theme-secondary)"/>
+    <StatSet label="Fell" v-model="sheet.fell"/>
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { CharacterSheet } from "@/stores/character";
+import StatSet from "@/components/StatSet.vue";
 
-const sheet = defineModel<CharacterSheet>()
+const sheet = defineModel<CharacterSheet>({
+  required: true
+})
 </script>
 
 <style scoped>
-
+#tags {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-rows: auto;
+  gap: 16px;
+}
 </style>