infissionline.configurator/.github/copilot-instructions.md

Copilot Instructions for infissionline-vite

Welcome to the infissionline-vite project! This document provides essential guidelines for AI coding agents to be productive in this codebase. Follow these instructions to understand the architecture, workflows, and conventions specific to this project.

---

Project Overview

This project is a web-based configurator for infissi (windows and doors) built using Vite. It includes a modular structure for managing assets, data, and JavaScript logic. The primary goal is to provide a dynamic and interactive user experience for configuring and visualizing products.

Key Components

1. Frontend:

   • HTML Templates: Located in src/index.html and src/assets/_menu*.html.
   • CSS Styles: Defined in src/assets/style.css.
   • JavaScript Logic: Core functionality resides in src/js/.
     • app.js: Entry point for initializing the application.
     • configurator.js: Handles product configuration logic.
     • menu_builder.js: Dynamically builds menus.
     • params_parser.js: Parses URL parameters.
     • price_calculator.js: Calculates product prices.
     • starter.js: Bootstraps the application.

2. Data Management:

   • JSON Files: Product data is stored in src/assets/data/.
     • modelli/: Contains model-specific data for alluminio and pvc.
     • sistemi/: Defines system-level configurations (e.g., handle heights).
   • Images: Product images are organized in src/assets/data/icone/ and src/assets/data/immagini/.

3. Build System:

   • Vite is used for development and production builds.
   • Configuration is defined in vite.config.js.

---

Developer Workflows

Building the Project

• Use pnpm install to install dependencies.
• Run pnpm dev to start the development server.
• Use pnpm build to create a production build.

Debugging

• Open the browser console to inspect JavaScript errors.
• Use console.log for debugging specific parts of the code.
• Modify src/js/ files to test changes dynamically during development.

Testing

• No explicit testing framework is set up. Use manual testing by interacting with the configurator in the browser.

---

Project-Specific Conventions

1. File Organization:

   • Separate alluminio and pvc data under modelli/ and sistemi/.
   • Maintain a clear hierarchy for images and models.

2. Data Format:

   • JSON files follow a structured format for product attributes.
   • Example: src/assets/data/modelli/alluminio/finestra_1_anta/modello.json.

3. Dynamic Imports:

   • Use dynamic imports in JavaScript for better performance.

4. Naming Conventions:

   • Use lowercase and underscores for file names.
   • Follow camelCase for JavaScript variables and functions.

---

Integration Points

• External Libraries:

  • Vite: Build tool for modern web development.
  • Ensure all dependencies are listed in package.json.

• Cross-Component Communication:

  • JavaScript modules communicate via imports/exports.
  • Data flows from JSON files to the frontend via configurator.js.

---

Examples

Adding a New Product Model

1. Create a new folder under src/assets/data/modelli/{material}/{product_name}.
2. Add a modello.json file with the product's attributes.
3. Update configurator.js to include the new model if necessary.

Debugging Price Calculation

1. Modify src/js/price_calculator.js.
2. Add console.log statements to inspect intermediate values.
3. Test changes by running pnpm dev and interacting with the configurator.

---

For further questions or updates, refer to the src/js/ directory for examples of existing patterns.