M0RE

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import type { MonsterGeneratorProps, MonsterWorkflowState, CaptionType, CaptionLength } from '$lib/types';
+  import type { MonsterGeneratorProps, MonsterWorkflowState, CaptionType, CaptionLength, MonsterStats } from '$lib/types';
   import UploadStep from './UploadStep.svelte';
   import WorkflowProgress from './WorkflowProgress.svelte';
   import MonsterResult from './MonsterResult.svelte';
   import { makeWhiteTransparent } from '$lib/utils/imageProcessing';
+  import { saveMonster } from '$lib/db/monsters';
   
   interface Props extends MonsterGeneratorProps {}
   
@@ -42,7 +43,7 @@ Include:
 - Personality traits
 - Habitat or origin
 
-Assistant: **`;
+Assistant: **Monster Name:**`;
 
   const IMAGE_GENERATION_PROMPT = (concept: string) => `User: Convert this monster concept into a clear and succinct description of its appearance:
 "${concept}"
@@ -64,20 +65,26 @@ Here is the output schema:
 \`\`\`
 {
   "properties": {
-    "name": {"type": "string", "description": "The monster's name"},
-    "description": {"type": "string", "description": "A brief description of the monster"},
+    "name": {"type": "string", "description": "The monster's unique name"},
+    "description": {"type": "string", "description": "A brief physical description of the monster's appearance"},
     "rarity": {"type": "integer", "minimum": 0, "maximum": 100, "description": "How rare/unique the monster is (0=very common, 100=legendary)"},
-    "HP": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Health points (0=fragile, 100=tank)"},
-    "defence": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Defensive capability (0=paper thin, 100=impenetrable)"},
-    "attack": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Attack power (0=harmless, 100=devastating)"},
-    "speed": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Movement speed (0=immobile, 100=lightning fast)"},
-    "specialPassiveTraitDescription": {"type": "string", "description": "Description of a passive trait that gives the monster a unique advantage in battle"},
-    "attackActionDescription": {"type": "string", "description": "Description of a primary attack that deals damage"},
-    "boostActionDescription": {"type": "string", "description": "Description of an action that buffs the monster's own stats/status"},
-    "disparageActionDescription": {"type": "string", "description": "Description of an action that lowers enemy stats/status"},
-    "specialActionDescription": {"type": "string", "description": "Description of a powerful action with single use per battle"}
+    "HP": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Health/vitality stat (0=fragile, 100=incredibly tanky)"},
+    "defence": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Defensive/armor stat (0=paper thin, 100=impenetrable fortress)"},
+    "attack": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Physical attack power (0=harmless, 100=devastating force)"},
+    "speed": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Movement and reaction speed (0=immobile, 100=lightning fast)"},
+    "specialPassiveTraitDescription": {"type": "string", "description": "Describe a passive ability that gives this monster a unique advantage in battle"},
+    "attackActionName": {"type": "string", "description": "Name of the monster's primary damage-dealing attack (e.g., 'Flame Burst', 'Toxic Bite')"},
+    "attackActionDescription": {"type": "string", "description": "Describe how this attack damages the opponent and any special effects"},
+    "boostActionName": {"type": "string", "description": "Name of the monster's self-buff ability (e.g., 'Iron Defense', 'Speed Boost')"},
+    "boostActionDescription": {"type": "string", "description": "Describe which stats are boosted and how this improves the monster's battle performance"},
+    "disparageActionName": {"type": "string", "description": "Name of the monster's enemy debuff ability (e.g., 'Intimidate', 'Slow Poison')"},
+    "disparageActionDescription": {"type": "string", "description": "Describe which enemy stats are lowered and how this weakens the opponent"},
+    "specialActionName": {"type": "string", "description": "Name of the monster's ultimate move (one use per battle)"},
+    "specialActionDescription": {"type": "string", "description": "Describe this powerful finishing move and its dramatic effects in battle"}
   },
-  "required": ["name", "description", "rarity", "HP", "defence", "attack", "speed", "specialPassiveTraitDescription", "attackActionDescription", "boostActionDescription", "disparageActionDescription", "specialActionDescription"]
+  "required": ["name", "description", "rarity", "HP", "defence", "attack", "speed", "specialPassiveTraitDescription",
+    "attackActionName", "attackActionDescription", "boostActionName", "boostActionDescription",
+    "disparageActionName", "disparageActionDescription", "specialActionName", "specialActionDescription"]
 }
 \`\`\`
 
@@ -119,6 +126,9 @@ Assistant: \`\`\`json`;
       // Step 5: Generate monster image
       await generateMonsterImage();
       
+      // Step 6: Auto-save the monster
+      await autoSaveMonster();
+      
       state.currentStep = 'complete';
     } catch (err) {
       console.error('Workflow error:', err);
@@ -379,6 +389,36 @@ Assistant: \`\`\`json`;
     }
   }
   
+  async function autoSaveMonster() {
+    if (!state.monsterImage || !state.imageCaption || !state.monsterConcept || !state.imagePrompt || !state.monsterStats) {
+      console.error('Cannot auto-save: missing required data');
+      return;
+    }
+    
+    try {
+      const monsterData = {
+        name: state.monsterStats.name,
+        imageUrl: state.monsterImage.imageUrl,
+        imageData: state.monsterImage.imageData || state.monsterImage.imageUrl, // Fallback to URL if no transparent image
+        imageCaption: state.imageCaption,
+        concept: state.monsterConcept,
+        imagePrompt: state.imagePrompt,
+        stats: state.monsterStats
+      };
+      
+      console.log('Auto-saving monster:', {
+        ...monsterData,
+        imageData: monsterData.imageData ? `${monsterData.imageData.substring(0, 50)}... (length: ${monsterData.imageData.length})` : 'null'
+      });
+      
+      const id = await saveMonster(monsterData);
+      console.log('Monster auto-saved with ID:', id);
+    } catch (err) {
+      console.error('Failed to auto-save monster:', err);
+      // Don't throw - we don't want to interrupt the workflow
+    }
+  }
+  
   function reset() {
     state = {
       currentStep: 'upload',

src/lib/components/MonsterGenerator/MonsterResult.svelte

@@ -37,7 +37,7 @@
   }
   
   async function saveToCollection() {
-    if (!workflowState.monsterImage || !workflowState.imageCaption || !workflowState.monsterConcept || !workflowState.imagePrompt) {
+    if (!workflowState.monsterImage || !workflowState.imageCaption || !workflowState.monsterConcept || !workflowState.imagePrompt || !workflowState.monsterStats) {
       saveError = 'Missing monster data';
       return;
     }
@@ -65,16 +65,23 @@
         monsterName = workflowState.monsterStats.name;
       }
       
-      await saveMonster({
+      const monsterData = {
         name: monsterName,
         imageUrl: workflowState.monsterImage.imageUrl,
         imageData: workflowState.monsterImage.imageData,
         imageCaption: workflowState.imageCaption,
         concept: workflowState.monsterConcept,
         imagePrompt: workflowState.imagePrompt,
-        stats: workflowState.monsterStats || undefined
+        stats: workflowState.monsterStats
+      };
+      
+      console.log('Saving monster with data:', {
+        ...monsterData,
+        imageData: monsterData.imageData ? `${monsterData.imageData.substring(0, 50)}... (length: ${monsterData.imageData.length})` : 'null'
       });
       
+      await saveMonster(monsterData);
+      
       isSaved = true;
     } catch (err) {
       console.error('Failed to save monster:', err);
@@ -87,6 +94,7 @@
 
 <div class="result-container">
   <h3>{workflowState.monsterStats?.name || 'Your Monster Has Been Created!'}</h3>
+  <p class="saved-message">✓ Automatically saved to your collection</p>
   
   {#if workflowState.monsterImage}
     <div class="monster-image-container">
@@ -98,8 +106,11 @@
     </div>
   {/if}
   
+  {#if workflowState.monsterStats?.description}
+    <p class="monster-description">{workflowState.monsterStats.description}</p>
+  {/if}
     
-    {#if workflowState.monsterStats}
+  {#if workflowState.monsterStats}
       <div class="result-section">
         <h4>Battle Stats</h4>
         <div class="stats-grid">
@@ -135,19 +146,19 @@
             <p>{workflowState.monsterStats.specialPassiveTrait}</p>
           </div>
           <div class="ability-item">
-            <h5>Attack</h5>
+            <h5>Attack: {workflowState.monsterStats.attackActionName}</h5>
             <p>{workflowState.monsterStats.attackActionDescription}</p>
           </div>
           <div class="ability-item">
-            <h5>Boost</h5>
+            <h5>Boost: {workflowState.monsterStats.boostActionName}</h5>
             <p>{workflowState.monsterStats.boostActionDescription}</p>
           </div>
           <div class="ability-item">
-            <h5>Disparage</h5>
+            <h5>Debuff: {workflowState.monsterStats.disparageActionName}</h5>
             <p>{workflowState.monsterStats.disparageActionDescription}</p>
           </div>
           <div class="ability-item">
-            <h5>Special</h5>
+            <h5>Ultimate: {workflowState.monsterStats.specialActionName}</h5>
             <p>{workflowState.monsterStats.specialActionDescription}</p>
           </div>
         </div>
@@ -161,26 +172,6 @@
       </svg>
       Download Monster
     </button>
-    <button 
-      class="action-button save" 
-      onclick={saveToCollection}
-      disabled={isSaving || isSaved}
-    >
-      {#if isSaving}
-        <div class="spinner-small"></div>
-        Saving...
-      {:else if isSaved}
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-          <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
-        </svg>
-        Saved!
-      {:else}
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-          <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
-        </svg>
-        Save to Collection
-      {/if}
-    </button>
     <button class="action-button reset" onclick={onReset}>
       <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
         <path d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.058 7.293a1 1 0 01-1.414 1.414l-2.35-2.35A1 1 0 011 5.648V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.943 13H13a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"/>
@@ -404,6 +395,23 @@
     line-height: 1.4;
   }
   
+  .saved-message {
+    color: #28a745;
+    font-size: 0.9rem;
+    margin: -0.5rem 0 1.5rem;
+    text-align: center;
+  }
+  
+  .monster-description {
+    text-align: center;
+    color: #555;
+    font-size: 1rem;
+    line-height: 1.5;
+    margin: 1rem auto 2rem;
+    max-width: 600px;
+    font-style: italic;
+  }
+  
   @media (max-width: 768px) {
     .result-container {
       padding: 1rem;

src/lib/types/index.ts

@@ -112,8 +112,12 @@ export interface MonsterStats {
   attack: number; // 0-100
   speed: number; // 0-100
   specialPassiveTrait: string;
+  attackActionName: string;
   attackActionDescription: string;
+  boostActionName: string;
   boostActionDescription: string;
+  disparageActionName: string;
   disparageActionDescription: string;
+  specialActionName: string;
   specialActionDescription: string;
 }