Create more stickers.

src/composables/sticker.ts

@@ -2,28 +2,32 @@ import { onBeforeMount, ref } from 'vue'
 import type { Ref } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { type User } from '@/stores/sessionStore'
 import {
-  activist,
   type Sticker as StickerType,
   useStickersStore,
 } from '@/stores/stickersStore'
 
 
-export function useSticker() {
+export function useSticker(user: User) {
-  let sticker: Ref<StickerType> = ref<StickerType>(activist);
+  const stickersStore = useStickersStore();
+  const { create, getSticker } = stickersStore;
+  const s = create(user.username);
+  let sticker: Ref<StickerType> = ref<StickerType>(s);
   const route = useRoute();
   if (!("id" in route.params)) {
     return sticker;
   }
   const id = ref<string>(route.params.id as string);
-  const stickersStore = useStickersStore();
-  const { getSticker } = stickersStore;
 
   onBeforeMount(async () => {
+    if (!id.value) {
+      return;
+    }
     await stickersStore.fetch(id.value);
     let sticker2 = getSticker(id.value);
     if (!sticker2) {
-      return
+      return;
     }
     sticker.value = sticker2;
     stickersStore.activeSticker = id.value

src/router/index.ts

@@ -45,7 +45,7 @@ const router = createRouter({
         title: 'Sticker Builder',
       },
       name: 'stickerbuilder',
-      path: `/stickerbuilder/${id}`,
+      path: `/stickerbuilder/${id}*`,
       // TODO: Consider using /:id/edit
     },
     {

src/stores/sessionStore.ts

@@ -5,7 +5,7 @@ import { useUserStore } from '@/stores/userStore'
 export interface User {
   name: string,
   sticker_ids: string[],
-  username: string | null,
+  username: string,
 }
 
 const anonymous: User = {

src/stores/stickersStore.ts

@@ -1,4 +1,4 @@
-import {acceptHMRUpdate, defineStore} from 'pinia'
+import { acceptHMRUpdate, defineStore } from 'pinia'
 
 import type { User } from '@/stores/types'
 import { useUserStore } from '@/stores/userStore'
@@ -6,6 +6,7 @@ import { useUserStore } from '@/stores/userStore'
 
 export interface Sticker {
   color: string,
+  createdBy: string | null,
   layout: string,
   orgs: string[],
   message1: string | null,
@@ -18,6 +19,7 @@ export interface Sticker {
 
 export const activist: Sticker = {
   color: '888888',
+  createdBy: null,
   layout: 'layout1',
   orgs: [],
   message1: 'I AM AN ACTIVIST',
@@ -28,13 +30,36 @@ export const activist: Sticker = {
   id: '6dcd2dae-7be2-4f79-8b10-caeb379452fc',
 };
 
+export const colors = [
+  'c9c918', 'abe11c', '8bf226',
+  '6afc37', '4bfd4c', '2ff665',
+  '18e780', '09d09a', '02b4b3',
+  '0395c9', '0d74d9', '1e54e3',
+  '3637e7', '541ee3', '740dd9',
+  '9503c9', 'b402b3', 'd0099a',
+  'e71880', 'f62f65', 'fd4b4c',
+  'fc6a37', 'f28b26', 'e1ab1c',
+];
+
 export interface State {
   activeSticker: string | null;  // id
   stickers: Sticker[];
 }
 
+function randomColor() {
+  return colors[Math.floor(Math.random() * colors.length)];
+}
+
 export const useStickersStore = defineStore('stickers', {
   actions: {
+    create(username: string) {
+      const sticker = structuredClone(activist);
+      sticker.color = randomColor();
+      sticker.createdBy = username;
+      sticker.id = self.crypto.randomUUID();
+      this.stickers.push(sticker);
+      return sticker;
+    },
     async fetch(id: string) {
       if (this.getSticker(id)) {
         return;
@@ -75,6 +100,15 @@ export const useStickersStore = defineStore('stickers', {
         return state.stickers.find((sticker: Sticker) => sticker.id === id)
       };
     },
+    getStickersCreatedBy: (state: State) => {
+      return (username: string | null | undefined): Sticker[] => {
+        if (!username) {
+          return [];
+        }
+        return state.stickers
+          .filter((sticker: Sticker) => sticker.createdBy === username);
+      };
+    },
   },
   state: (): State =>  {
     return {

src/views/ProfileView.vue

@@ -79,12 +79,28 @@ const events = [{
             <Sticker v-bind="stickersStore.getSticker(sticker_id)" />
           </RouterLink>
         </div>
+      </div>
+    </Panel>
+    <Panel header="Stickers Created">
       <Button
         as="router-link"
-            to="/sticker"
+        to="/stickerbuilder"
         v-if="myPage">
         New sticker
       </Button>
+      <div class="stickers">
+        <div v-for="sticker in stickersStore.getStickersCreatedBy(user?.username)">
+          <div class="stickerWrapper">
+            <RouterLink :to="{ name: 'sticker', params: { id: sticker.id }}">
+              <Sticker v-bind="sticker" />
+            </RouterLink>
+          </div>
+          <Button
+            v-bind:disabled="sessionStore.isAnonymous"
+            v-if="sticker?.owner == null">
+            Claim
+          </Button>
+        </div>
       </div>
     </Panel>
     <Panel header="Metrics">
@@ -151,7 +167,14 @@ const events = [{
 }
 .stickerWrapper {
   background-color: #F2F2F2;
+  display: flex;
+  flex-direction: column;
   padding: 10px;
+  .sticker {
     width: 300px;
+    @media (screen(sm)) {
+      zoom: 250%;
+    }
+  }
 }
 </style>

src/views/StickerBuilderView.vue

@@ -18,16 +18,21 @@ import IconLayout3Vue from '@/components/layouts/IconLayout3.vue';
 import IconLayout4Vue from '@/components/layouts/IconLayout4.vue';
 import Sticker from '@/components/Sticker.vue';
 import { type Organization, useOrganization } from '@/queries/organization';
+import { useSessionStore } from '@/stores/sessionStore';
 import { useSticker } from '@/composables/sticker';
 import { activist, type Sticker as StickerType } from '@/stores/stickersStore';
 
 
+// TODO: Handle when the user is anonymous
+const sessionStore = useSessionStore();
+
 const { state: orgs } = useOrganization();
-const original = useSticker();
+const original = useSticker(sessionStore.user);
 let sticker = ref<StickerType>(activist);
 const orgFilter = ref("");
 
-// When the original sticker appears, copy it into a local coy.
+// When the original sticker loads, copy it into a local copy
+// for editing.
 watch(original, (newValue) => {
   sticker.value = structuredClone(toRaw(newValue));
 });

src/views/StickerView.vue

@@ -90,7 +90,7 @@ function claimSticker() {
 <style scoped>
 #StickerWrapper {
   background-color: #DDD;
-  padding: 12px;
+  padding: 10px;
   #Sticker {
     width: 300px;
     @media (screen(sm)) {