🎨 Asset Manager Desktop App

2026-01-05 23:47:37 +01:00
parent b0488a7bc1
commit 99f9aa063d
3 changed files with 207 additions and 1 deletions
--- a/tools/ASSET_MANAGER_README.md
+++ b/tools/ASSET_MANAGER_README.md
@@ -0,0 +1,156 @@
+# 🎨 NovaFarma Asset Manager
+
+**Standalone Desktop Application** for browsing and managing game assets.
+
+---
+
+## 🚀 Quick Start
+
+### Launch Asset Manager (Desktop App)
+```bash
+npm run asset-manager
+```
+
+This will open a **standalone Electron window** with the Asset Manager interface.
+
+---
+
+## ✨ Features
+
+- 🖼️ **Visual Asset Browser** - Browse all game assets with previews
+- 📋 **One-Click Copy** - Click any asset to copy its path to clipboard
+- 🔍 **Search** - Find assets by name or path
+- 📂 **Category Filters** - Filter by Teren, Narava, Zgradbe, Objekti, Crops, Biomi
+- 🎨 **Dark UI** - Beautiful purple gradient theme matching the game
+- 🖥️ **Desktop App** - No browser needed!
+
+---
+
+## 🎮 Usage
+
+### Running the Asset Manager
+
+**Method 1: Desktop App (Recommended)**
+```bash
+npm run asset-manager
+```
+
+**Method 2: Browser (Legacy)**
+Open `tools/asset_browser.html` directly in a browser.
+
+### Browsing Assets
+
+1. Launch the Asset Manager
+2. Use **category buttons** to filter by type:
+   - 🌍 Teren (Ground Tiles)
+   - 🌿 Narava (Nature - trees, grass, etc.)
+   - 🏚️ Zgradbe (Buildings)
+   - 📦 Objekti (Objects)
+   - 🌾 Crops (All crop growth stages)
+   - 🗺️ Biomi (Biome-specific assets)
+
+3. Use the **search box** to find specific assets
+4. **Click any asset** to copy its path to clipboard
+5. **Paste** the path directly into Tiled or your code
+
+### Copy Path Example
+
+When you click on an asset like `Dirt Path`, the following path is copied:
+```
+assets/slike 🟢/teren/teren_dirt_path_style32.png
+```
+
+You can paste this directly into:
+- Tiled tileset configuration
+- Game code (`scene.load.image()`)
+- Documentation
+
+---
+
+## 🛠️ Development
+
+### File Structure
+```
+/tools/
+  asset_browser.html      # Main HTML interface
+/asset_manager_main.js    # Electron main process
+/package.json             # Script: "asset-manager"
+```
+
+### Adding New Assets
+
+The Asset Manager will automatically show assets from these directories:
+- `assets/slike 🟢/teren/`
+- `assets/slike 🟢/narava/`
+- `assets/slike 🟢/zgradbe/`
+- `assets/slike 🟢/objekti/`
+- `assets/crops/faza1/`
+- `assets/slike 🟢/biomi/`
+
+To add new assets:
+1. Place your PNG files in the appropriate category folder
+2. Edit `tools/asset_browser.html` and add the asset to `knownAssets` array
+3. Restart the Asset Manager
+
+---
+
+## 📦 Building Standalone App
+
+To package the Asset Manager as a standalone .app or .exe:
+
+```bash
+# macOS
+npm run build:mac
+
+# Windows
+npm run build:win
+
+# Linux
+npm run build:linux
+```
+
+This will create a distributable application in the `dist/` folder.
+
+---
+
+## 🎨 Customization
+
+### Change Window Size
+Edit `asset_manager_main.js`:
+```javascript
+width: 1600,  // Change width
+height: 1000, // Change height
+```
+
+### Change Theme Colors
+Edit `tools/asset_browser.html` CSS:
+```css
+background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+```
+
+---
+
+## 🐛 Troubleshooting
+
+### Assets Not Loading
+- Make sure asset paths in `asset_browser.html` match your actual file structure
+- Check that images are in PNG format
+- Verify paths use forward slashes `/`
+
+### Window Not Opening
+- Ensure Electron is installed: `npm install`
+- Check console for errors
+- Try running: `npm run asset-manager` again
+
+---
+
+## 📝 Notes
+
+- Asset Manager is a **development tool** - not shipped with the game
+- Paths are automatically copied to clipboard on click
+- Use pixel-perfect rendering for crisp sprite previews
+- Dark theme reduces eye strain during long asset browsing sessions
+
+---
+
+**Enjoy browsing your assets!** 🎨✨