prompt

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -66,16 +66,16 @@ Here is the output schema:
   "properties": {
     "name": {"type": "string", "description": "The monster's name"},
     "description": {"type": "string", "description": "A brief description of the monster"},
-    "rarity": {"type": "string", "enum": ["very-low", "low", "medium", "high", "very-high"], "description": "How rare/unique the monster is"},
-    "HP": {"type": "string", "enum": ["very-low", "low", "medium", "high", "very-high"], "description": "Health points"},
-    "defence": {"type": "string", "enum": ["very-low", "low", "medium", "high", "very-high"], "description": "Defensive capability"},
-    "attack": {"type": "string", "enum": ["very-low", "low", "medium", "high", "very-high"], "description": "Attack power"},
-    "speed": {"type": "string", "enum": ["very-low", "low", "medium", "high", "very-high"], "description": "Movement speed"},
-    "specialAbility": {"type": "string", "description": "Passive trait that gives the monster a unique advantage in battle"},
-    "attackActionDescription": {"type": "string", "description": "Primary attack that deals damage"},
-    "boostActionDescription": {"type": "string", "description": "Action that buffs the monster's own stats/status"},
-    "disparageActionDescription": {"type": "string", "description": "Action that lowers enemy stats/status"},
-    "specialActionDescription": {"type": "string", "description": "Powerful action with single use per battle"}
+    "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)"},
+    "specialAbility": {"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"}
   },
   "required": ["name", "description", "rarity", "HP", "defence", "attack", "speed", "specialAbility", "attackActionDescription", "boostActionDescription", "disparageActionDescription", "specialActionDescription"]
 }
@@ -338,11 +338,29 @@ Assistant: \`\`\`json`;
         const matches = jsonString.match(/```(?:json)?\s*([\s\S]*?)```/);
         if (matches) {
           cleanJson = matches[1];
+        } else {
+          // If no closing ```, just remove the opening ```json
+          cleanJson = jsonString.replace(/^```(?:json)?\s*/, '').replace(/```\s*$/, '');
         }
       }
       
       try {
-        const stats: MonsterStats = JSON.parse(cleanJson.trim());
+        const parsedStats = JSON.parse(cleanJson.trim());
+        
+        // Ensure numeric fields are actually numbers
+        const numericFields = ['rarity', 'HP', 'defence', 'attack', 'speed'];
+        
+        for (const field of numericFields) {
+          if (parsedStats[field] !== undefined) {
+            // Convert string numbers to actual numbers
+            parsedStats[field] = parseInt(parsedStats[field]);
+            
+            // Clamp to 0-100 range
+            parsedStats[field] = Math.max(0, Math.min(100, parsedStats[field]));
+          }
+        }
+        
+        const stats: MonsterStats = parsedStats;
         state.monsterStats = stats;
         console.log('Monster stats generated:', stats);
       } catch (parseError) {

src/lib/components/MonsterGenerator/MonsterResult.svelte

@@ -28,6 +28,14 @@
     alert('Prompt copied to clipboard!');
   }
   
+  function getStatColor(value: number): string {
+    if (value >= 80) return '#007bff'; // very high - blue
+    if (value >= 60) return '#28a745'; // high - green
+    if (value >= 40) return '#ffc107'; // medium - yellow
+    if (value >= 20) return '#fd7e14'; // low - orange
+    return '#dc3545'; // very low - red
+  }
+  
   async function saveToCollection() {
     if (!workflowState.monsterImage || !workflowState.imageCaption || !workflowState.monsterConcept || !workflowState.imagePrompt) {
       saveError = 'Missing monster data';
@@ -78,7 +86,7 @@
 </script>
 
 <div class="result-container">
-  <h3>Your Monster Has Been Created!</h3>
+  <h3>{workflowState.monsterStats?.name || 'Your Monster Has Been Created!'}</h3>
   
   {#if workflowState.monsterImage}
     <div class="monster-image-container">
@@ -90,59 +98,35 @@
     </div>
   {/if}
   
-  <div class="results-grid">
-    <div class="result-section">
-      <h4>Original Description</h4>
-      <div class="result-content">
-        <p>{workflowState.imageCaption || 'No caption available'}</p>
-      </div>
-    </div>
-    
-    <div class="result-section">
-      <h4>Monster Concept</h4>
-      <div class="result-content">
-        <p>{workflowState.monsterConcept || 'No concept available'}</p>
-      </div>
-    </div>
-    
-    <div class="result-section">
-      <h4>Generation Prompt</h4>
-      <div class="result-content">
-        <p>{workflowState.imagePrompt || 'No prompt available'}</p>
-        {#if workflowState.imagePrompt}
-          <button class="copy-button" onclick={copyPrompt}>
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2 0v8h8V2H6zM2 6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2h-2v2H2V8h2V6H2z"/>
-            </svg>
-            Copy
-          </button>
-        {/if}
-      </div>
-    </div>
     
     {#if workflowState.monsterStats}
       <div class="result-section">
         <h4>Battle Stats</h4>
         <div class="stats-grid">
           <div class="stat-item">
-            <span class="stat-label">Rarity:</span>
-            <span class="stat-value stat-{workflowState.monsterStats.rarity}">{workflowState.monsterStats.rarity}</span>
+            <div class="stat-bar" style="width: {workflowState.monsterStats.rarity}%; background-color: {getStatColor(workflowState.monsterStats.rarity)}20"></div>
+            <span class="stat-label">Rarity</span>
+            <span class="stat-value" style="color: {getStatColor(workflowState.monsterStats.rarity)}">{workflowState.monsterStats.rarity}</span>
           </div>
           <div class="stat-item">
-            <span class="stat-label">HP:</span>
-            <span class="stat-value stat-{workflowState.monsterStats.HP}">{workflowState.monsterStats.HP}</span>
+            <div class="stat-bar" style="width: {workflowState.monsterStats.HP}%; background-color: {getStatColor(workflowState.monsterStats.HP)}20"></div>
+            <span class="stat-label">HP</span>
+            <span class="stat-value" style="color: {getStatColor(workflowState.monsterStats.HP)}">{workflowState.monsterStats.HP}</span>
           </div>
           <div class="stat-item">
-            <span class="stat-label">Attack:</span>
-            <span class="stat-value stat-{workflowState.monsterStats.attack}">{workflowState.monsterStats.attack}</span>
+            <div class="stat-bar" style="width: {workflowState.monsterStats.attack}%; background-color: {getStatColor(workflowState.monsterStats.attack)}20"></div>
+            <span class="stat-label">Attack</span>
+            <span class="stat-value" style="color: {getStatColor(workflowState.monsterStats.attack)}">{workflowState.monsterStats.attack}</span>
           </div>
           <div class="stat-item">
-            <span class="stat-label">Defence:</span>
-            <span class="stat-value stat-{workflowState.monsterStats.defence}">{workflowState.monsterStats.defence}</span>
+            <div class="stat-bar" style="width: {workflowState.monsterStats.defence}%; background-color: {getStatColor(workflowState.monsterStats.defence)}20"></div>
+            <span class="stat-label">Defence</span>
+            <span class="stat-value" style="color: {getStatColor(workflowState.monsterStats.defence)}">{workflowState.monsterStats.defence}</span>
           </div>
           <div class="stat-item">
-            <span class="stat-label">Speed:</span>
-            <span class="stat-value stat-{workflowState.monsterStats.speed}">{workflowState.monsterStats.speed}</span>
+            <div class="stat-bar" style="width: {workflowState.monsterStats.speed}%; background-color: {getStatColor(workflowState.monsterStats.speed)}20"></div>
+            <span class="stat-label">Speed</span>
+            <span class="stat-value" style="color: {getStatColor(workflowState.monsterStats.speed)}">{workflowState.monsterStats.speed}</span>
           </div>
         </div>
         <div class="abilities-section">
@@ -236,11 +220,6 @@
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   }
   
-  .results-grid {
-    display: grid;
-    gap: 1.5rem;
-    margin-bottom: 3rem;
-  }
   
   .result-section {
     background: #f8f9fa;
@@ -370,31 +349,38 @@
   .stat-item {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    padding: 0.5rem;
+    padding: 0.75rem;
     background: white;
     border-radius: 6px;
     border: 1px solid #dee2e6;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .stat-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    transition: width 0.3s ease;
+    z-index: 0;
   }
   
   .stat-label {
     font-size: 0.85rem;
     color: #6c757d;
     margin-bottom: 0.25rem;
+    position: relative;
+    z-index: 1;
   }
   
   .stat-value {
     font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.9rem;
+    font-size: 1.1rem;
+    position: relative;
+    z-index: 1;
   }
   
-  .stat-very-low { color: #dc3545; }
-  .stat-low { color: #fd7e14; }
-  .stat-medium { color: #ffc107; }
-  .stat-high { color: #28a745; }
-  .stat-very-high { color: #007bff; }
-  
   .abilities-section {
     display: grid;
     gap: 1rem;

src/lib/types/index.ts

@@ -103,16 +103,14 @@ export interface MonsterGeneratorProps {
 }
 
 // Monster Stats Types
-export type LikertScale = 'very-low' | 'low' | 'medium' | 'high' | 'very-high';
-
 export interface MonsterStats {
   name: string;
   description: string;
-  rarity: LikertScale;
-  HP: LikertScale;
-  defence: LikertScale;
-  attack: LikertScale;
-  speed: LikertScale;
+  rarity: number; // 0-100
+  HP: number; // 0-100
+  defence: number; // 0-100
+  attack: number; // 0-100
+  speed: number; // 0-100
   specialAbility: string;
   attackActionDescription: string;
   boostActionDescription: string;