novafarma/docs/CIRCULAR_MINIMAP_GUIDE.md

🗺️ CIRCULAR MINIMAP - Complete!

Date: December 13, 2025, 00:54

---

✅ FEATURES

Circular Design

• Small circle (60px) when collapsed
• Large circle (200px) when expanded
• Smooth animation between states

Position

• Top-right corner
• Above most UI elements
• Fixed to screen (doesn't scroll)

Interactive

• Click to expand/collapse
• Smooth 300ms animation
• Hand cursor on hover

Content

• Shows terrain (grass, water, sand, stone)
• Red dot for player position
• Updates as you move
• 25-tile radius view when expanded

---

🎮 HOW TO USE

Toggle Minimap

• Click on the circular minimap
• It will expand from 60px to 200px
• Click again to collapse

What You See

• Collapsed (60px): Just a small circle with red player dot
• Expanded (200px): Full terrain map with colors
  • 🟢 Green = Grass
  • 🔵 Blue = Water
  • 🟡 Yellow = Sand
  • ⚫ Gray = Stone
  • 🔴 Red dot = You!

Movement

• As you move, the map updates
• Player dot stays in center
• Terrain scrolls around you

---

📊 TECHNICAL DETAILS

Sizes

• Collapsed: 60px diameter
• Expanded: 200px diameter
• Animation: 300ms smooth transition

View Radius

• Collapsed: No terrain shown
• Expanded: 25 tiles around player

Colors

• Background: Black (70% opacity)
• Border: White (80% opacity)
• Player: Red
• Terrain: Type-specific colors

Performance

• Only updates when expanded
• Efficient circular clipping
• Smooth 60 FPS

---

🎨 VISUAL DESIGN

COLLAPSED (60px):
    ⚪ <- Small white circle
    🔴 <- Red player dot
    "MAP" <- Label above

EXPANDED (200px):
    ⚪⚪⚪⚪⚪ <- Large white circle
    🟢🟢🔵🔵🟡 <- Terrain colors
    🟢🔴🔵🔵🟡 <- Red dot in center
    🟢🟢🔵🔵🟡
    "MAP" <- Label above

---

🔧 CUSTOMIZATION

Change Size

Edit UIScene.js line 2559:

const minimapSize = 80;      // Larger collapsed (default: 60)
const expandedSize = 250;    // Larger expanded (default: 200)

Change Position

Edit UIScene.js line 2561-2562:

const x = this.scale.width - 100;  // Further from edge
const y = 100;                     // Lower position

Change View Radius

Edit UIScene.js line 2678:

const viewRadius = 30;  // See more (default: 25)

Change Colors

Edit UIScene.js line 2692-2696:

if (tile.type === 'water') color = 0x0000ff;  // Brighter blue
else if (tile.type === 'grass') color = 0x00ff00;  // Brighter green

---

✨ FEATURES

• ✅ Circular design (not square!)
• ✅ Top-right position
• ✅ Click to expand/collapse
• ✅ Smooth animation
• ✅ Shows terrain colors
• ✅ Player position (red dot)
• ✅ Updates as you move
• ✅ Efficient rendering

---

🎉 RESULT

Beautiful circular minimap!

• Small and unobtrusive when collapsed
• Detailed and useful when expanded
• Smooth animations
• Easy to use (just click!)
• Updates in real-time

---

RESTART GAME TO SEE THE MINIMAP! 🔄

Created: December 13, 2025, 00:54