98 lines
3.6 KiB
Markdown
98 lines
3.6 KiB
Markdown
# 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. |