Reorganize art directory with subdirectories

Restructured mapgameimgs/ into organized subdirectories:
- monsters/ - Monster sprites (default, moop variants)
- player/ - Player sprites (playerattack)
- bases/ - Home base icons (homebase00, homebase01)
- effects/ - Status effect icons (defense, poison, buffs)

Updated all image references in:
- index.html: Monster icons, home base markers, status effects
- server.js: Homebase icons API, monster creation image copy

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

index.html

@@ -9769,7 +9769,7 @@
                     const type = MONSTER_TYPES[m.type] || { name: 'Unknown', icon: '👹' };
                     monstersHtml += `
                         <div class="char-sheet-monster">
-                            <img src="/mapgameimgs/${m.type}50.png" onerror="this.src='/mapgameimgs/default50.png'" alt="${type.name}" class="monster-thumb">
+                            <img src="/mapgameimgs/monsters/${m.type}50.png" onerror="this.src='/mapgameimgs/monsters/default50.png'" alt="${type.name}" class="monster-thumb">
                             <span class="monster-info">Lv${m.level} ${type.name}</span>
                             <span class="monster-hp">${m.hp}/${m.maxHp} HP</span>
                         </div>
@@ -10165,12 +10165,12 @@
 
             // Use selected icon or default to '00' (use 100px, CSS scales to 50)
             const iconId = playerStats.homeBaseIcon || '00';
-            const iconSrc = `/mapgameimgs/homebase${iconId}-100.png`;
+            const iconSrc = `/mapgameimgs/bases/homebase${iconId}-100.png`;
 
             const iconHtml = `
                 <div class="home-base-marker">
                     <img src="${iconSrc}" alt="Home Base" style="width:50px;height:50px;"
-                         onerror="this.src='/mapgameimgs/default50.png'">
+                         onerror="this.src='/mapgameimgs/monsters/default50.png'">
                 </div>
             `;
 
@@ -10288,7 +10288,7 @@
                          onclick="selectHomebaseIcon('${icon.id}')"
                          data-icon-id="${icon.id}">
                         <img src="${icon.preview}" alt="Homebase ${icon.id}"
-                             onerror="this.src='/mapgameimgs/default50.png'">
+                             onerror="this.src='/mapgameimgs/monsters/default50.png'">
                     </div>
                 `).join('');
             } catch (err) {
@@ -10800,8 +10800,8 @@
 
             const iconHtml = `
                 <div class="monster-marker" data-monster-id="${monster.id}">
-                    <img class="monster-icon" src="/mapgameimgs/${monster.type}50.png"
-                         onerror="this.src='/mapgameimgs/default50.png'" alt="${monsterType.name}">
+                    <img class="monster-icon" src="/mapgameimgs/monsters/${monster.type}50.png"
+                         onerror="this.src='/mapgameimgs/monsters/default50.png'" alt="${monsterType.name}">
                     <div class="monster-dialogue-bubble" style="display: none;"></div>
                 </div>
             `;
@@ -11033,11 +11033,11 @@
 
             // Check for buffs (defense, generic, etc.)
             if (monster.buffs.defense && monster.buffs.defense.turnsLeft > 0) {
-                html += `<img class="buff-icon" src="/mapgameimgs/defense100.png"
-                         onerror="this.src='/mapgameimgs/default_buff100.png'"
+                html += `<img class="buff-icon" src="/mapgameimgs/effects/defense100.png"
+                         onerror="this.src='/mapgameimgs/effects/default_buff100.png'"
                          alt="Defense Up" title="Defense +${monster.buffs.defense.percent}% (${monster.buffs.defense.turnsLeft} turns)">`;
             } else if (monster.buffs.generic && monster.buffs.generic.turnsLeft > 0) {
-                html += `<img class="buff-icon" src="/mapgameimgs/default_buff100.png"
+                html += `<img class="buff-icon" src="/mapgameimgs/effects/default_buff100.png"
                          alt="Buff" title="Buffed (${monster.buffs.generic.turnsLeft} turns)">`;
             }
 
@@ -11045,8 +11045,8 @@
             if (monster.statusEffects) {
                 monster.statusEffects.forEach(effect => {
                     const effectType = effect.type || 'status';
-                    html += `<img class="status-icon" src="/mapgameimgs/${effectType}100.png"
-                             onerror="this.src='/mapgameimgs/default_status100.png'"
+                    html += `<img class="status-icon" src="/mapgameimgs/effects/${effectType}100.png"
+                             onerror="this.src='/mapgameimgs/effects/default_status100.png'"
                              alt="${effectType}" title="${effectType} (${effect.turnsLeft} turns)">`;
                 });
             }
@@ -11061,8 +11061,8 @@
 
             // Check for player defense buff
             if (combatState.defenseBuffTurns > 0) {
-                html += `<img class="buff-icon" src="/mapgameimgs/defense100.png"
-                         onerror="this.src='/mapgameimgs/default_buff100.png'"
+                html += `<img class="buff-icon" src="/mapgameimgs/effects/defense100.png"
+                         onerror="this.src='/mapgameimgs/effects/default_buff100.png'"
                          alt="Defense Up" title="Defense Up (${combatState.defenseBuffTurns} turns)">`;
             }
 
@@ -11070,8 +11070,8 @@
             if (combatState.playerStatusEffects && combatState.playerStatusEffects.length > 0) {
                 combatState.playerStatusEffects.forEach(effect => {
                     const effectType = effect.type || 'status';
-                    html += `<img class="status-icon" src="/mapgameimgs/${effectType}100.png"
-                             onerror="this.src='/mapgameimgs/default_status100.png'"
+                    html += `<img class="status-icon" src="/mapgameimgs/effects/${effectType}100.png"
+                             onerror="this.src='/mapgameimgs/effects/default_status100.png'"
                              alt="${effectType}" title="${effectType} (${effect.turnsLeft} turns)">`;
                 });
             }
@@ -11113,8 +11113,8 @@
                     <div class="monster-entry-header">
                         ${index === combatState.selectedTargetIndex ? '<span class="target-arrow">▶</span>' : ''}
                         <div class="sprite-container">
-                            <img class="monster-entry-icon" src="/mapgameimgs/${monster.type}100.png"
-                                 onerror="this.src='/mapgameimgs/default100.png'" alt="${monster.data.name}">
+                            <img class="monster-entry-icon" src="/mapgameimgs/monsters/${monster.type}100.png"
+                                 onerror="this.src='/mapgameimgs/monsters/default100.png'" alt="${monster.data.name}">
                             <div class="status-overlay">${monsterOverlayHtml}</div>
                         </div>
                         <span class="monster-entry-name">${monster.data.name} Lv.${monster.level}</span>

server.js

@@ -887,14 +887,14 @@ app.post('/api/user/home-base', authenticateToken, (req, res) => {
     }
 });
 
-// Get available homebase icons (auto-detected from mapgameimgs directory)
+// Get available homebase icons (auto-detected from mapgameimgs/bases directory)
 app.get('/api/homebase-icons', (req, res) => {
     try {
         const fs = require('fs');
-        const imagesDir = path.join(__dirname, 'mapgameimgs');
+        const basesDir = path.join(__dirname, 'mapgameimgs', 'bases');
 
         // Read directory and find homebaseXX-100.png files
-        const files = fs.readdirSync(imagesDir);
+        const files = fs.readdirSync(basesDir);
         const iconPattern = /^homebase(\d+)-100\.png$/;
 
         const icons = files
@@ -904,8 +904,8 @@ app.get('/api/homebase-icons', (req, res) => {
                     return {
                         id: match[1],
                         filename: file,
-                        preview: `/mapgameimgs/${file}`,  // Use 100px, CSS scales down
-                        full: `/mapgameimgs/${file}`
+                        preview: `/mapgameimgs/bases/${file}`,  // Use 100px, CSS scales down
+                        full: `/mapgameimgs/bases/${file}`
                     };
                 }
                 return null;
@@ -1216,11 +1216,11 @@ app.post('/api/admin/monster-types', adminOnly, async (req, res) => {
         db.createMonsterType(data);
 
         // Copy default images for the new monster
-        const imgDir = path.join(__dirname, 'mapgameimgs');
+        const monstersDir = path.join(__dirname, 'mapgameimgs', 'monsters');
         const sizes = ['50', '100'];
         for (const size of sizes) {
-            const defaultImg = path.join(imgDir, `default${size}.png`);
-            const newImg = path.join(imgDir, `${monsterId}${size}.png`);
+            const defaultImg = path.join(monstersDir, `default${size}.png`);
+            const newImg = path.join(monstersDir, `${monsterId}${size}.png`);
             try {
                 // Only copy if the new image doesn't already exist
                 await fs.access(newImg);