A Val Town application for mapping your garden and tracking information about each plant.

• Interactive garden map interface
• Customizable garden size - Resize your garden map to fit your needs
• Add plants with specific coordinates and diameters
• Store notes and information about each plant
• Edit and delete existing plants
• Visual representation of plants on the map
• Mobile-friendly with touch support
• Admin panel for database management and inspection of both plants and settings tables

The application provides the following RESTful API endpoints:

Returns the current garden configuration settings.

Updates garden configuration settings. Required fields:

• garden_width: Width of the garden map in pixels (300-2000)
• garden_height: Height of the garden map in pixels (300-2000)

Returns a list of all plants in the garden.

Returns details for a specific plant by ID.

Creates a new plant. Required fields:

• x_coordinate: X position on the map
• y_coordinate: Y position on the map
• diameter: Size of the plant in pixels

Optional fields:

• name: Name of the plant
• notes: Additional information about the plant

Updates an existing plant. All fields are optional.

Removes a plant from the garden.

The application uses SQLite with the following schemas:

CREATE TABLE garden_plants (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  x_coordinate REAL NOT NULL,
  y_coordinate REAL NOT NULL,
  diameter REAL NOT NULL,
  name TEXT,
  notes TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)

CREATE TABLE garden_settings (
  id INTEGER PRIMARY KEY CHECK (id = 1),
  garden_width INTEGER NOT NULL DEFAULT 800,
  garden_height INTEGER NOT NULL DEFAULT 500,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)

1. Resize your garden: Click the "Resize Garden" button next to the Garden Map header to set a custom size for your garden map. Choose from preset sizes or enter custom dimensions.
2. Tap anywhere on the map to immediately see a placeholder plant at that location and open the edit form
3. Fill in the plant details form and tap "Save Plant" to convert the placeholder into a real plant
4. Tap "Clear Form" to remove the placeholder plant and reset the form
5. Tap on existing plants to edit their details
6. Use the plant list on the right to quickly find and select plants
7. Access the admin panel by clicking "Admin Panel" in the header to view both database tables (plants and settings) with their schemas and records

• Custom Sizes: Set any garden size between 300×300 and 2000×2000 pixels
• Preset Options: Choose from Small (600×400), Medium (800×500), or Large (1000×600) sizes
• Persistent Settings: Your garden size preference is saved in the database and restored when you return to the app
• Responsive Design: The garden map adapts to your chosen dimensions while maintaining mobile compatibility

• Immediate Visual Feedback: When you click the map, a gray dashed placeholder plant appears instantly
• Real-time Size Updates: Adjust the diameter in the form to see the placeholder plant resize in real-time
• Smart Cleanup: Placeholder plants are automatically removed when you save, clear the form, or select an existing plant

• Hono.js for the API backend
• SQLite for data storage
• Vanilla JavaScript for the frontend
• Twind for styling