/* ============================================================
RIVA — LE PLAT QUI SE CONSTRUIT SOUS LES YEUX
On coche « Fior di latte » : des billes de mozzarella se posent sur la
pizza. On décoche « Roquette » : les feuilles s'envolent. C'est tout
l'objet de ce fichier.
Deux vues, parce que deux plats qui ne se regardent pas pareil :
• LA PIZZA se voit de dessus. Les ingrédients se répartissent sur le
disque, chacun avec sa vraie forme — la rondelle d'olive est un
anneau, le champignon a son pied, la roquette a ses nervures.
• LE PANUOZZO se voit de profil, ouvert. Chaque ingrédient est une
COUCHE qui s'intercale, et le pain du dessus monte à mesure. C'est
exactement ce que promet la carte de la maison : « garniture
généreuse ? nous adaptons la taille du pain ».
Pourquoi dessiné et pas photographié : il faudrait une photo détourée
par ingrédient et par position, soit des centaines de fichiers. Et
pourquoi pas une banque d'images libres : les jeux CC0 mélangent les
styles, on verrait une olive au trait à côté d'un champignon en dégradé.
============================================================ */
const { useMemo: useCp } = React;
const Mo = (typeof Motion !== 'undefined') ? Motion : null;
const mo = Mo ? Mo.motion : null;
const Presence = Mo ? Mo.AnimatePresence : (({ children }) => children);
/* ---------- 1. Reconnaître un ingrédient ---------- */
function sansAccent(s) {
return String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
}
/* Chaque ingrédient a une FORME et une couleur. La forme est ce qui rend le
dessin crédible : une tranche de mortadelle ne ressemble pas à une bille
de mozzarella, et si les deux sont des ronds de couleur, personne n'y croit. */
const FORMES = [
// [ motif, forme, couleur, couleur secondaire ]
['stracciatella', 'filaments', '#FBF6EC', '#EADFC8'],
['burrata', 'bille', '#FBF6EC', '#E6D9C0'],
['fior di latte', 'bille', '#F8F1E4', '#E3D6BE'],
['mozzarella', 'bille', '#F8F1E4', '#E3D6BE'],
['boursin', 'noisette', '#F6EFDE', '#DFD2B6'],
['chevre', 'rondin', '#F7F2E6', '#DCD2BC'],
['gorgonzola', 'persille', '#F0E8D2', '#5E6E7A'],
['parmigiano', 'copeau', '#EFDFAE', '#D8C489'],
['maroilles', 'coulee', '#E0A94A', '#C08E32'],
['creme', 'coulee', '#F3EADA', '#DFD3BC'],
['truffe', 'copeau', '#2E2720', '#1B1712'],
['champignon', 'champignon','#CBB28C', '#A8906B'],
['roquette', 'feuille', '#5C8A3A', '#41682A'],
['basilic', 'feuille', '#4E7A32', '#375824'],
['persil', 'brins', '#4E7A32', '#375824'],
['pesto', 'coulee', '#4E7A32', '#3B5F26'],
['salade', 'feuille', '#6A9B40', '#4E7530'],
['herbes', 'brins', '#4E7A32', '#375824'],
['tomates confites','petale', '#B8412A', '#8E3020'],
['tomate', 'rondelle', '#C0402A', '#96301F'],
['sauce tomate', 'coulee', '#C0402A', '#96301F'],
['harissa', 'coulee', '#A82A1C', '#7E1F14'],
['olive', 'anneau', '#2F3A22', '#1C2415'],
['capre', 'bille', '#5C6B3A', '#41502A'],
['poivron', 'lamelle', '#D9822B', '#B0651C'],
['oignons confits', 'lamelle', '#A56A2C', '#7E4E1E'],
['oignon', 'arc', '#9B5FA0', '#734478'],
['courgette', 'rondelle', '#7FA24A', '#5E7A33'],
['aubergine', 'rondelle', '#7A5580', '#5A3D5F'],
['legumes grilles', 'lamelle', '#C2762B', '#98591C'],
['pomme de terre', 'rondelle', '#E8CE9B', '#C9AC76'],
['mortadelle', 'tranche', '#E8A79C', '#CE8479'],
['bresaola', 'tranche', '#9C3B33', '#7A2A24'],
['pastrami', 'tranche', '#A5443A', '#82302A'],
['bacon', 'lardon', '#C2604A', '#9A4736'],
['spianata', 'rondelle', '#B03A2A', '#8A2A1E'],
['jambon', 'tranche', '#E8A79C', '#CE8479'],
['veau effiloche', 'effiloche', '#8E5A34', '#6C4325'],
['veau', 'des', '#8E4A2E', '#6B3721'],
['kefta', 'boulette', '#7E4527', '#5E321B'],
['boeuf', 'emiette', '#8E4A2E', '#6B3721'],
['viande hachee', 'emiette', '#8E4A2E', '#6B3721'],
['merguez', 'troncon', '#A83A22', '#822A17'],
['poulet', 'des', '#DEBE86', '#BC9C64'],
['escalope', 'tranche', '#DEBE86', '#BC9C64'],
['thon', 'emiette', '#C99A6A', '#A57A4E'],
['anchois', 'filet', '#9A8158', '#786239'],
['saumon', 'tranche', '#E2734A', '#BD5834'],
['scampi', 'crevette', '#E8845C', '#C46540'],
['crevette', 'crevette', '#E8845C', '#C46540'],
['fruits de mer', 'crevette', '#E8845C', '#C46540'],
['oeuf', 'oeuf', '#F7F2E4', '#F0B429'],
['pistache', 'eclat', '#8FA84A', '#6E8535'],
['miel', 'coulee', '#E8B33C', '#C9922E'],
['citron', 'zeste', '#E8CE55', '#C9AC33'],
['origan', 'brins', '#6E7A46', '#515A33'],
['piment', 'eclat', '#A82A1C', '#7E1F14'],
];
function profil(nom) {
const n = sansAccent(nom);
for (const [motif, forme, c1, c2] of FORMES) {
if (n.includes(motif)) return { forme, c1, c2 };
}
return { forme: 'bille', c1: '#EFE2BC', c2: '#D3C39A' };
}
/* Des positions stables : cocher un nouvel ingrédient ne doit pas faire
sauter les précédents ailleurs sur la pizza. */
function semis(cle, n, rayon) {
let h = 2166136261;
for (let i = 0; i < cle.length; i++) { h ^= cle.charCodeAt(i); h = Math.imul(h, 16777619); }
const suite = () => { h = Math.imul(h ^ (h >>> 15), 2246822507); return ((h >>> 0) % 10000) / 10000; };
const pts = [];
for (let i = 0; i < n; i++) {
const a = suite() * Math.PI * 2;
const d = Math.sqrt(suite()) * rayon;
pts.push({ x: Math.cos(a) * d, y: Math.sin(a) * d, r: suite() * 360, e: 0.85 + suite() * 0.3 });
}
return pts;
}
/* ---------- 2. Le dessin d'un morceau ---------- */
function Morceau({ forme, c1, c2 }) {
switch (forme) {
case 'feuille':
return (
);
case 'anneau':
return (
);
case 'champignon':
return (
);
case 'bille':
return (
);
case 'noisette':
return ;
case 'rondin':
return (
);
case 'persille':
return (
);
case 'copeau':
return ;
case 'coulee':
return ;
case 'filaments':
return (
);
case 'rondelle':
return (
);
case 'petale':
return ;
case 'lamelle':
return ;
case 'arc':
return ;
case 'tranche':
return (
);
case 'lardon':
return (
);
case 'effiloche':
return (
);
case 'des':
return ;
case 'boulette':
return (
);
case 'emiette':
return (
);
case 'troncon':
return ;
case 'filet':
return ;
case 'crevette':
return (
);
case 'oeuf':
return (
);
case 'eclat':
return (
);
case 'zeste':
return ;
case 'brins':
return (
);
default:
return ;
}
}
/* ---------- 3. La pizza, vue de dessus ----------
Refaite en octobre 2026 : la première version faisait « clip-art » sous
la vraie photo de pizza (aplats de couleur, points noirs sur la croûte
qui passaient pour des olives, garnitures entassées au même endroit).
Ce qui la rapproche d'une vraie napolitaine :
• une croûte dorée, plus foncée au bord, avec de petites cloques brunes ;
• une sauce au bord irrégulier, avec du grain (filtre de bruit) ;
• la fior di latte FONDUE, en flaques crémeuses légèrement gratinées —
elle est comprise sur toutes les pizzas, c'est elle qui fait la pizza ;
• une ombre douce sous chaque morceau : il est posé, pas collé ;
• une répartition régulière (spirale « tournesol ») propre à chaque
ingrédient et tournée d'un angle différent : chacun couvre toute la
pizza, et ajouter un supplément ne déplace pas ceux déjà posés. */
/* 64 emplacements répartis uniformément sur le disque (angle d'or). */
const EMPLACEMENTS = (() => {
const out = [], n = 64, r = 58, or = Math.PI * (3 - Math.sqrt(5));
for (let i = 0; i < n; i++) {
const d = r * Math.sqrt((i + 0.6) / n);
out.push({ x: Math.cos(i * or) * d, y: Math.sin(i * or) * d });
}
return out;
})();
/* La fior di latte n'est pas posée en billes : elle est fondue (voir plus bas). */
function estFromageFondu(nom) {
const n = sansAccent(nom);
return n.includes('fior di latte') || n === 'mozzarella';
}
function PizzaComposee({ base, ingredients }) {
const G = mo ? mo.g : 'g';
const poses = ingredients.filter(ing => !estFromageFondu(ing.nom));
const sauceClaire = /creme|citron|maroilles/i.test(base.nom || '');
// Fior di latte prise EN SUPPLÉMENT : deux fois plus de flaques fondues.
const doubleFromage = ingredients.some(ing => estFromageFondu(ing.nom) && !ing.dejaLa);
return (
);
}
/* Le bord de la sauce : un cercle légèrement ondulé, toujours le même. */
function contourSauce() {
const pts = [], n = 36, alea = semis('sauce-riva', n, 1);
for (let i = 0; i < n; i++) {
const a = (i / n) * Math.PI * 2;
const r = 72 + alea[i].x * 1.8;
pts.push([100 + Math.cos(a) * r, 100 + Math.sin(a) * r]);
}
let d = `M${pts[0][0].toFixed(1)},${pts[0][1].toFixed(1)}`;
for (let i = 0; i < n; i++) {
const p1 = pts[(i + 1) % n], m = [(pts[i][0] + p1[0]) / 2, (pts[i][1] + p1[1]) / 2];
d += ` Q${pts[i][0].toFixed(1)},${pts[i][1].toFixed(1)} ${m[0].toFixed(1)},${m[1].toFixed(1)}`;
}
return d + ' Z';
}
/* ---------- 4. Le panuozzo, de profil, en couches ---------- */
function PanuozzoCompose({ base, ingredients }) {
const G = mo ? mo.g : 'g';
/* Le sandwich reste dans son cadre, quoi qu'on empile.
Naïvement, une couche de hauteur fixe par ingrédient : à douze
ingrédients le pain du dessus sort de l'écran. Ici la garniture dispose
d'une hauteur MAXIMALE ; au-delà de quelques ingrédients les couches se
resserrent et se chevauchent — ce que fait un vrai sandwich trop garni,
d'ailleurs. Le pain monte donc, mais jamais hors du cadre. */
const n = ingredients.length;
const SOCLE = 212; // dessus du pain du bas
const HAUTEUR_MAX = 104; // ce que la garniture peut occuper
const monte = Math.min(HAUTEUR_MAX, n * 17);
const pas = n ? monte / n : 0;
return (
);
}
/* ---------- 5. Ce qu'on montre à côté du dessin ---------- */
const PALIERS = [
{ seuil: 0, nom: 'À nu', mot: 'Ajoutez ce qui vous fait envie.' },
{ seuil: 2, nom: 'Sobre', mot: 'Ça commence.' },
{ seuil: 4, nom: 'Garni', mot: 'Voilà qui ressemble à quelque chose.' },
{ seuil: 6, nom: 'Généreux', mot: 'Là on parle.' },
{ seuil: 9, nom: 'Débordant', mot: 'Le pain va devoir grandir.' },
{ seuil: 12, nom: 'Monumental', mot: 'On adapte la taille du pain.' },
];
function palierPour(n) {
let c = PALIERS[0];
for (const p of PALIERS) if (n >= p.seuil) c = p;
return c;
}
/* La base du plat : la sauce, qui colore tout le fond. */
function baseDe(texte) {
const n = sansAccent(texte);
if (n.includes('truffe')) return { couleur: '#2E2720', nom: 'truffe' };
if (n.includes('maroilles')) return { couleur: '#E0A94A', nom: 'Maroilles' };
if (n.includes('poivrons')) return { couleur: '#D9822B', nom: 'poivrons' };
if (n.includes('pesto')) return { couleur: '#697B42', nom: 'pesto' };
if (n.includes('citron-herbes')) return { couleur: '#C8BD68', nom: 'citron-herbes' };
if (n.includes('creme')) return { couleur: '#F3EADA', nom: 'crème blanche' };
if (n.includes('tomate')) return { couleur: '#C0402A', nom: 'sauce tomate' };
return { couleur: '#E8D7B4', nom: 'nature' };
}
function Composition({ forme, ingredients, base: baseNoms, texteBase }) {
const base = useCp(() => baseDe(texteBase || ''), [texteBase]);
/* Ce que le plat porte déjà (lu dans sa description) vient en premier, et
ne s'anime pas : il était là avant d'ouvrir l'écran. Les suppléments
cochés viennent par-dessus, eux avec leur entrée. On écarte les sauces
de la liste : elles colorent le fond, elles ne se posent pas en morceaux. */
const deposes = useCp(() => {
const sauces = ['creme', 'sauce'];
const vus = new Set();
const out = [];
(baseNoms || []).forEach(nom => {
const n = sansAccent(nom);
if (!nom || sauces.some(x => n.startsWith(x)) || n.startsWith('base') || n.startsWith('pain artisanal')) return;
if (vus.has(nom)) return;
vus.add(nom);
out.push({ nom, dejaLa: true });
});
(ingredients || []).forEach(ing => {
if (vus.has(ing.nom)) return;
vus.add(ing.nom);
out.push({ ...ing, dejaLa: false });
});
return out;
}, [baseNoms, ingredients]);
const n = ingredients.length;
const palier = palierPour(n);
return (