commit 4e9640ddfa619eb4ca826d9922248c1fe6bb3b0c Author: Mathieu Fort Date: Wed May 27 10:05:07 2026 +0200 feat: scaffold projet avec stubs et test runner navigateur diff --git a/css/app.css b/css/app.css new file mode 100644 index 0000000..2b58b56 --- /dev/null +++ b/css/app.css @@ -0,0 +1,14 @@ +.drop-active { + border-color: #3b82f6 !important; + background-color: #eff6ff !important; +} +.image-card { + transition: box-shadow 0.2s; +} +.image-card:hover { + box-shadow: 0 4px 12px rgba(0,0,0,0.1); +} +.picking-color { + cursor: crosshair; + outline: 3px solid #7c3aed; +} diff --git a/docs/superpowers/plans/2026-05-27-convertisseur-images-shopify.md b/docs/superpowers/plans/2026-05-27-convertisseur-images-shopify.md new file mode 100644 index 0000000..16737cf --- /dev/null +++ b/docs/superpowers/plans/2026-05-27-convertisseur-images-shopify.md @@ -0,0 +1,1278 @@ +# Convertisseur Images Shopify — Plan d'implémentation + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Construire une app web client-side qui convertit des photos HEIC de produits en JPG avec suppression automatique du fond blanc et pipette manuelle pour les cas complexes, puis exporte un ZIP en conservant les noms de fichiers d'origine. + +**Architecture:** Page HTML unique avec Alpine.js pour la gestion d'état. Quatre modules ES (`heicConverter`, `bgRemover`, `imageProcessor`, `zipExporter`) chargés via ` + + + + + + +

+ Convertisseur Images Shopify +

+ + +

Zone d'upload (à construire)

+ + +

Grille d'images (à construire)

+ + +

Zone d'export (à construire)

+ + + + +``` + +- [ ] **Étape 3 : Créer les stubs des modules** + +`js/heicConverter.js` : +```javascript +export async function convertHeicToJpeg(file) { + throw new Error('Not implemented'); +} +``` + +`js/bgRemover.js` : +```javascript +export function chebyshevDistance(c1, c2) { + throw new Error('Not implemented'); +} +export function createFloodFillMask(imageData, seedColor, tolerance) { + throw new Error('Not implemented'); +} +export function applyMaskToImageData(imageData, mask, replacementColor) { + throw new Error('Not implemented'); +} +export function softEdges(imageData, mask) { + throw new Error('Not implemented'); +} +export function removeBackground(canvas, seedColor, tolerance = 30) { + throw new Error('Not implemented'); +} +export async function pickColorFromCanvas(canvas) { + throw new Error('Not implemented'); +} +``` + +`js/imageProcessor.js` : +```javascript +export async function processBatch(items, processFn, concurrency = 3) { + throw new Error('Not implemented'); +} +``` + +`js/zipExporter.js` : +```javascript +export async function downloadAllAsZip(processedFiles) { + throw new Error('Not implemented'); +} +``` + +- [ ] **Étape 4 : Créer css/app.css** + +```css +.drop-active { + border-color: #3b82f6 !important; + background-color: #eff6ff !important; +} +.image-card { + transition: box-shadow 0.2s; +} +.image-card:hover { + box-shadow: 0 4px 12px rgba(0,0,0,0.1); +} +.picking-color { + cursor: crosshair; + outline: 2px solid #7c3aed; +} +``` + +- [ ] **Étape 5 : Créer test.html avec l'assistant d'assertions** + +```html + + + + + Tests — Convertisseur Images + + + +

Tests unitaires

+ + + + +``` + +- [ ] **Étape 6 : Ouvrir index.html dans Chrome et vérifier le chargement** + +Attendu : titre "Convertisseur Images Shopify" visible, aucune erreur console. + +- [ ] **Étape 7 : Ouvrir test.html dans Chrome et vérifier "0 passé(s), 0 échoué(s)"** + +- [ ] **Étape 8 : Commit initial** + +```bash +git init +git add . +git commit -m "feat: scaffold projet avec stubs et test runner navigateur" +``` + +--- + +### Tâche 2 : Module HEIC Converter + +**Fichiers :** +- Modifier : `js/heicConverter.js` +- Modifier : `test.html` + +- [ ] **Étape 1 : Ajouter les tests dans test.html** + +Dans le ` + + + + + + +

+ Convertisseur Images Shopify +

+ + +

Zone d'upload (à construire)

+ + +

Grille d'images (à construire)

+ + +

Zone d'export (à construire)

+ + + + diff --git a/js/bgRemover.js b/js/bgRemover.js new file mode 100644 index 0000000..b316d09 --- /dev/null +++ b/js/bgRemover.js @@ -0,0 +1,18 @@ +export function chebyshevDistance(c1, c2) { + throw new Error('Not implemented'); +} +export function createFloodFillMask(imageData, seedColor, tolerance) { + throw new Error('Not implemented'); +} +export function applyMaskToImageData(imageData, mask, replacementColor) { + throw new Error('Not implemented'); +} +export function softEdges(imageData, mask) { + throw new Error('Not implemented'); +} +export function removeBackground(canvas, seedColor, tolerance = 30) { + throw new Error('Not implemented'); +} +export async function pickColorFromCanvas(canvas) { + throw new Error('Not implemented'); +} diff --git a/js/heicConverter.js b/js/heicConverter.js new file mode 100644 index 0000000..1f5a563 --- /dev/null +++ b/js/heicConverter.js @@ -0,0 +1,3 @@ +export async function convertHeicToJpeg(file) { + throw new Error('Not implemented'); +} diff --git a/js/imageProcessor.js b/js/imageProcessor.js new file mode 100644 index 0000000..6e09245 --- /dev/null +++ b/js/imageProcessor.js @@ -0,0 +1,3 @@ +export async function processBatch(items, processFn, concurrency = 3) { + throw new Error('Not implemented'); +} diff --git a/js/zipExporter.js b/js/zipExporter.js new file mode 100644 index 0000000..5d59811 --- /dev/null +++ b/js/zipExporter.js @@ -0,0 +1,3 @@ +export async function downloadAllAsZip(processedFiles) { + throw new Error('Not implemented'); +} diff --git a/test.html b/test.html new file mode 100644 index 0000000..355c43a --- /dev/null +++ b/test.html @@ -0,0 +1,181 @@ + + + + + Tests — Convertisseur Images + + + +

Tests unitaires

+ + + +