type logos

src/lib/components/Pages/Pictuary.svelte

@@ -11,6 +11,8 @@
   import PicletDetail from '../Piclets/PicletDetail.svelte';
   import AddToRosterDialog from '../Piclets/AddToRosterDialog.svelte';
   import ViewAll from './ViewAll.svelte';
+  import { migratePicletTypes } from '$lib/utils/typeMigration';
+  import { PicletType } from '$lib/types/picletTypes';
   
   let rosterPiclets: PicletInstance[] = $state([]);
   let storagePiclets: PicletInstance[] = $state([]);
@@ -31,9 +33,43 @@
     });
     return map;
   });
+
+  // Get the most common type in the roster for background theming
+  let dominantType = $derived(() => {
+    if (rosterPiclets.length === 0) {
+      return PicletType.BEAST; // Default fallback
+    }
+
+    // Count type occurrences
+    const typeCounts = new Map<PicletType, number>();
+    rosterPiclets.forEach(piclet => {
+      if (piclet.primaryType) {
+        const count = typeCounts.get(piclet.primaryType) || 0;
+        typeCounts.set(piclet.primaryType, count + 1);
+      }
+    });
+
+    // Find the most common type
+    let maxCount = 0;
+    let mostCommonType = PicletType.BEAST;
+    typeCounts.forEach((count, type) => {
+      if (count > maxCount) {
+        maxCount = count;
+        mostCommonType = type;
+      }
+    });
+
+    return mostCommonType;
+  });
+
+  // Get background image path for the dominant type
+  let backgroundImagePath = $derived(`/classes/${dominantType}.png`);
   
   async function loadPiclets() {
     try {
+      // Run type migration first time to fix any invalid types
+      await migratePicletTypes();
+      
       const allInstances = await getAllPicletInstances();
       
       // Filter based on rosterPosition instead of isInRoster
@@ -139,7 +175,7 @@
     onBack={() => viewAllMode = null}
   />
 {:else}
-  <div class="pictuary-page">
+  <div class="pictuary-page" style="--bg-image: url('{backgroundImagePath}')">
   {#if isLoading}
     <div class="loading-state">
       <div class="spinner"></div>
@@ -247,6 +283,23 @@
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     background: white;
+    position: relative;
+  }
+  
+  .pictuary-page::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: var(--bg-image);
+    background-size: 300px 300px;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+    opacity: 0.03;
+    pointer-events: none;
+    z-index: 0;
   }
   
   
@@ -259,6 +312,8 @@
     height: calc(100% - 100px);
     padding: 2rem;
     text-align: center;
+    position: relative;
+    z-index: 1;
   }
   
   .spinner {
@@ -290,6 +345,8 @@
   
   .content {
     padding: 0 1rem 100px;
+    position: relative;
+    z-index: 1;
   }
   
   section {

src/lib/components/UI/TypeBadge.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { PicletType } from '$lib/types/picletTypes';
-  import { TYPE_DATA } from '$lib/types/picletTypes';
+  import { TYPE_DATA, PicletType as PicletTypeEnum } from '$lib/types/picletTypes';
   
   interface Props {
-    type: PicletType;
+    type: PicletType | string | undefined;
     size?: 'small' | 'medium' | 'large';
     showIcon?: boolean;
     showLabel?: boolean;
@@ -11,16 +11,59 @@
   
   let { type, size = 'medium', showIcon = true, showLabel = false }: Props = $props();
   
-  const typeInfo = $derived(TYPE_DATA[type]);
+  // Safely get type info with fallback for invalid types
+  const typeInfo = $derived(() => {
+    // Handle undefined or null
+    if (!type) {
+      return TYPE_DATA[PicletTypeEnum.BEAST]; // Default fallback
+    }
+    
+    // Check if type exists in TYPE_DATA
+    const typeData = TYPE_DATA[type as PicletType];
+    if (typeData) {
+      return typeData;
+    }
+    
+    // Handle legacy string types by mapping them
+    const legacyTypeMap: Record<string, PicletType> = {
+      'normal': PicletTypeEnum.BEAST,
+      'fire': PicletTypeEnum.BEAST,
+      'water': PicletTypeEnum.AQUATIC,
+      'electric': PicletTypeEnum.MACHINA,
+      'grass': PicletTypeEnum.FLORA,
+      'ice': PicletTypeEnum.MINERAL,
+      'fighting': PicletTypeEnum.BEAST,
+      'poison': PicletTypeEnum.FLORA,
+      'ground': PicletTypeEnum.MINERAL,
+      'flying': PicletTypeEnum.BEAST,
+      'psychic': PicletTypeEnum.SPACE,
+      'bug': PicletTypeEnum.BUG,
+      'rock': PicletTypeEnum.MINERAL,
+      'ghost': PicletTypeEnum.SPACE,
+      'dragon': PicletTypeEnum.BEAST,
+      'dark': PicletTypeEnum.SPACE,
+      'steel': PicletTypeEnum.MACHINA,
+      'fairy': PicletTypeEnum.CULTURE
+    };
+    
+    const mappedType = legacyTypeMap[type as string];
+    if (mappedType) {
+      return TYPE_DATA[mappedType];
+    }
+    
+    // Final fallback
+    return TYPE_DATA[PicletTypeEnum.BEAST];
+  });
+  
   const sizeClass = $derived(`size-${size}`);
 </script>
 
-<div class="type-badge {sizeClass}" style="--type-color: {typeInfo.color}">
+<div class="type-badge {sizeClass}" style="--type-color: {typeInfo().color}">
   {#if showIcon}
-    <span class="type-icon">{typeInfo.icon}</span>
+    <span class="type-icon">{typeInfo().icon}</span>
   {/if}
   {#if showLabel}
-    <span class="type-label">{typeInfo.name}</span>
+    <span class="type-label">{typeInfo().name}</span>
   {/if}
 </div>
 

src/lib/utils/typeMigration.ts

@@ -0,0 +1,88 @@
+import { db } from '../db/index';
+import { PicletType, getTypeFromConcept } from '../types/picletTypes';
+import type { PicletInstance } from '../db/schema';
+
+// Migration function to fix piclets with invalid or legacy types
+export async function migratePicletTypes(): Promise<void> {
+  console.log('Starting piclet type migration...');
+  
+  try {
+    // Get all piclet instances
+    const allPiclets = await db.picletInstances.toArray();
+    let migratedCount = 0;
+    
+    for (const piclet of allPiclets) {
+      let needsUpdate = false;
+      let newType: PicletType | undefined;
+      
+      // Check if primaryType is invalid or missing
+      if (!piclet.primaryType || !isValidPicletType(piclet.primaryType)) {
+        // Try to determine type from concept/caption
+        if (piclet.concept) {
+          newType = getTypeFromConcept(piclet.concept, piclet.imageCaption);
+          needsUpdate = true;
+        } else {
+          // Fallback to Beast type
+          newType = PicletType.BEAST;
+          needsUpdate = true;
+        }
+      }
+      
+      // Check for legacy string types that need mapping
+      else if (typeof piclet.primaryType === 'string' && isLegacyType(piclet.primaryType)) {
+        newType = mapLegacyType(piclet.primaryType);
+        needsUpdate = true;
+      }
+      
+      if (needsUpdate && newType && piclet.id) {
+        await db.picletInstances.update(piclet.id, {
+          primaryType: newType
+        });
+        migratedCount++;
+        console.log(`Migrated piclet ${piclet.nickname || piclet.typeId} from "${piclet.primaryType}" to "${newType}"`);
+      }
+    }
+    
+    console.log(`Migration complete: Updated ${migratedCount} piclets`);
+  } catch (error) {
+    console.error('Error during piclet type migration:', error);
+  }
+}
+
+function isValidPicletType(type: any): type is PicletType {
+  return Object.values(PicletType).includes(type);
+}
+
+function isLegacyType(type: string): boolean {
+  const legacyTypes = [
+    'normal', 'fire', 'water', 'electric', 'grass', 'ice',
+    'fighting', 'poison', 'ground', 'flying', 'psychic', 'bug',
+    'rock', 'ghost', 'dragon', 'dark', 'steel', 'fairy'
+  ];
+  return legacyTypes.includes(type.toLowerCase());
+}
+
+function mapLegacyType(legacyType: string): PicletType {
+  const legacyTypeMap: Record<string, PicletType> = {
+    'normal': PicletType.BEAST,
+    'fire': PicletType.BEAST,
+    'water': PicletType.AQUATIC,
+    'electric': PicletType.MACHINA,
+    'grass': PicletType.FLORA,
+    'ice': PicletType.MINERAL,
+    'fighting': PicletType.BEAST,
+    'poison': PicletType.FLORA,
+    'ground': PicletType.MINERAL,
+    'flying': PicletType.BEAST,
+    'psychic': PicletType.SPACE,
+    'bug': PicletType.BUG,
+    'rock': PicletType.MINERAL,
+    'ghost': PicletType.SPACE,
+    'dragon': PicletType.BEAST,
+    'dark': PicletType.SPACE,
+    'steel': PicletType.MACHINA,
+    'fairy': PicletType.CULTURE
+  };
+  
+  return legacyTypeMap[legacyType.toLowerCase()] || PicletType.BEAST;
+}