Admin : Page créée avec « import React, { useEffect, useMemo, useRef, useState } from "react"; // ============================================= // Prouvost Palace Builder – Single-file React App // ============================================= // • Créez des salons/pièces (hôtel particulier, palais) // • Définissez une image de fond par pièce (plan, photo, texture, couleur) // • Importez des photos d'objets/tableaux/meubles et placez-les dans la pièce // • Déplacez / red... »

2025-10-18T16:24:25Z

Page créée avec « import React, { useEffect, useMemo, useRef, useState } from "react"; // ============================================= // Prouvost Palace Builder – Single-file React App // ============================================= // • Créez des salons/pièces (hôtel particulier, palais) // • Définissez une image de fond par pièce (plan, photo, texture, couleur) // • Importez des photos d'objets/tableaux/meubles et placez-les dans la pièce // • Déplacez / red... »

Nouvelle page

import React, { useEffect, useMemo, useRef, useState } from "react";

// =============================================
// Prouvost Palace Builder – Single-file React App
// =============================================
// • Créez des salons/pièces (hôtel particulier, palais)
// • Définissez une image de fond par pièce (plan, photo, texture, couleur)
// • Importez des photos d'objets/tableaux/meubles et placez-les dans la pièce
// • Déplacez / redimensionnez / superposez les objets
// • Sauvegarde auto dans localStorage + Export/Import JSON
// • Mode Présentation pour naviguer en plein écran entre les pièces
// =============================================

function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (e) {
return initialValue;
}
});
useEffect(() => {
try {
window.localStorage.setItem(key, JSON.stringify(value));
} catch {}
}, [key, value]);
return [value, setValue];
}

const defaultProject = {
title: "Hôtel particulier Prouveau",
rooms: [
{
id: cryptoRandomId(),
name: "Grand Salon",
bgType: "color", // 'image' | 'color'
bgColor: "#f5f1ea",
bgImage: null,
width: 1400,
height: 800,
items: [],
},
],
activeRoomId: null,
};

function cryptoRandomId() {
const arr = new Uint8Array(8);
if (window.crypto && window.crypto.getRandomValues) {
window.crypto.getRandomValues(arr);
} else {
for (let i = 0; i < arr.length; i++) arr[i] = Math.floor(Math.random() * 256);
}
return Array.from(arr, (b) => b.toString(16).padStart(2, "0")).join("");
}

export default function ProuveauPalaceBuilder() {
const [project, setProject] = useLocalStorage("prv_palace_project_v1", defaultProject);
const activeRoom = useMemo(() => {
const id = project.activeRoomId ?? project.rooms[0]?.id;
return project.rooms.find((r) => r.id === id) || project.rooms[0];
}, [project]);

// Ensure activeRoomId initialized
useEffect(() => {
if (!project.activeRoomId && project.rooms[0]) {
setProject((p) => ({ ...p, activeRoomId: p.rooms[0].id }));
}
}, []);

const setActiveRoom = (id) => setProject((p) => ({ ...p, activeRoomId: id }));

const addRoom = () => {
const r = {
id: cryptoRandomId(),
name: `Pièce ${project.rooms.length + 1}`,
bgType: "color",
bgColor: "#ffffff",
bgImage: null,
width: 1200,
height: 700,
items: [],
};
setProject((p) => ({ ...p, rooms: [...p.rooms, r], activeRoomId: r.id }));
};

const deleteRoom = (id) => {
setProject((p) => {
const nextRooms = p.rooms.filter((r) => r.id !== id);
const nextActive = nextRooms[0]?.id || null;
return { ...p, rooms: nextRooms, activeRoomId: nextActive };
});
};

const updateRoom = (patch) => {
setProject((p) => ({
...p,
rooms: p.rooms.map((r) => (r.id === activeRoom.id ? { ...r, ...patch } : r)),
}));
};

const exportJSON = () => {
const blob = new Blob([JSON.stringify(project, null, 2)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `${(project.title || "projet").replace(/\s+/g, "_")}.json`;
a.click();
URL.revokeObjectURL(url);
};

const importJSON = (file) => {
const reader = new FileReader();
reader.onload = () => {
try {
const data = JSON.parse(reader.result);
if (data && data.rooms) setProject(data);
} catch (e) {
alert("Fichier invalide");
}
};
reader.readAsText(file);
};

const [present, setPresent] = useState(false);

return (
<div className="min-h-screen w-full bg-neutral-50 text-neutral-900">
{/* Header */}
<header className="sticky top-0 z-30 bg-white border-b border-neutral-200">
<div className="mx-auto max-w-7xl px-4 py-3 flex items-center gap-3">
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-yellow-500 to-red-600 flex items-center justify-center text-white font-bold shadow-sm">PP</div>
<input
className="text-xl md:text-2xl font-semibold bg-transparent outline-none flex-1"
value={project.title}
onChange={(e) => setProject((p) => ({ ...p, title: e.target.value }))}
/>
<div className="flex items-center gap-2">
<button className="px-3 py-1.5 rounded-lg bg-neutral-900 text-white hover:bg-neutral-800" onClick={addRoom}>
+ Ajouter une pièce
</button>
<label className="px-3 py-1.5 rounded-lg bg-neutral-200 hover:bg-neutral-300 cursor-pointer">
Importer
<input type="file" className="hidden" accept="application/json" onChange={(e) => e.target.files?.[0] && importJSON(e.target.files[0])} />
</label>
<button className="px-3 py-1.5 rounded-lg bg-neutral-200 hover:bg-neutral-300" onClick={exportJSON}>
Exporter
</button>
<button className="px-3 py-1.5 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700" onClick={() => setPresent((s) => !s)}>
{present ? "Quitter Présentation" : "Mode Présentation"}
</button>
</div>
</div>
</header>

<main className="mx-auto max-w-7xl grid grid-cols-1 md:grid-cols-12 gap-4 px-4 py-4">
{/* Sidebar rooms */}
<aside className="md:col-span-3 lg:col-span-3 bg-white border border-neutral-200 rounded-2xl p-3 shadow-sm">
<h2 className="text-sm font-semibold uppercase tracking-wider text-neutral-500 mb-2">Pièces</h2>
<div className="space-y-2 max-h-[50vh] overflow-auto pr-1">
{project.rooms.map((r) => (
<button
key={r.id}
onClick={() => setActiveRoom(r.id)}
className={`w-full text-left px-3 py-2 rounded-xl border ${
r.id === activeRoom?.id ? "border-neutral-900 bg-neutral-900 text-white" : "border-neutral-200 hover:border-neutral-300"
}`}
>
<div className="font-medium">{r.name}</div>
<div className="text-xs opacity-70">{r.width} × {r.height}px</div>
</button>
))}
</div>
{activeRoom && (
<div className="mt-4 space-y-3">
<div className="flex items-center gap-2">
<input
className="border rounded-lg px-2 py-1 flex-1"
value={activeRoom.name}
onChange={(e) => updateRoom({ name: e.target.value })}
/>
<button className="px-3 py-1.5 rounded-lg border border-red-200 text-red-700 hover:bg-red-50" onClick={() => deleteRoom(activeRoom.id)}>
Supprimer
</button>
</div>

<div className="grid grid-cols-2 gap-2">
<label className="col-span-2 text-sm font-semibold">Fond de la pièce</label>
<button
className={`px-2 py-1 rounded-lg border ${activeRoom.bgType === "color" ? "border-neutral-900" : "border-neutral-200"}`}
onClick={() => updateRoom({ bgType: "color" })}
>
Couleur
</button>
<button
className={`px-2 py-1 rounded-lg border ${activeRoom.bgType === "image" ? "border-neutral-900" : "border-neutral-200"}`}
onClick={() => updateRoom({ bgType: "image" })}
>
Image
</button>
{activeRoom.bgType === "color" ? (
<input
type="color"
value={activeRoom.bgColor}
onChange={(e) => updateRoom({ bgColor: e.target.value })}
className="col-span-2 w-full h-10 rounded-lg border"
/>
) : (
<label className="col-span-2 w-full px-3 py-2 rounded-lg border cursor-pointer hover:bg-neutral-50">
Importer une image de fond
<input
type="file"
accept="image/*"
className="hidden"
onChange={async (e) => {
const f = e.target.files?.[0];
if (!f) return;
const dataUrl = await fileToDataURL(f);
updateRoom({ bgImage: dataUrl });
}}
/>
</label>
)}
</div>

<div className="grid grid-cols-2 gap-2">
<label className="col-span-2 text-sm font-semibold">Taille de la scène</label>
<input
type="number"
className="border rounded-lg px-2 py-1"
value={activeRoom.width}
onChange={(e) => updateRoom({ width: clampInt(e.target.value, 400, 4000) })}
/>
<input
type="number"
className="border rounded-lg px-2 py-1"
value={activeRoom.height}
onChange={(e) => updateRoom({ height: clampInt(e.target.value, 300, 3000) })}
/>
</div>

<AddItemPanel onAdd={async (item) => {
setProject((p) => ({
...p,
rooms: p.rooms.map((r) => r.id === activeRoom.id ? { ...r, items: [...r.items, item] } : r),
}));
}} />

<LayersPanel room={activeRoom} onChange={(items) => updateRoom({ items })} />
</div>
)}
</aside>

{/* Canvas */}
<section className="md:col-span-9 lg:col-span-9">
{activeRoom ? (
<RoomCanvas key={activeRoom.id} room={activeRoom} onChange={(patch) => updateRoom(patch)} present={present} />
) : (
<div className="h-96 bg-white border border-dashed rounded-2xl grid place-items-center text-neutral-400">Aucune pièce</div>
)}
</section>
</main>
</div>
);
}

function clampInt(val, min, max) {
const n = parseInt(val, 10);
if (isNaN(n)) return min;
return Math.max(min, Math.min(max, n));
}

async function fileToDataURL(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}

function AddItemPanel({ onAdd }) {
const [label, setLabel] = useState("");
const [scale, setScale] = useState(1);
const [file, setFile] = useState(null);

const handleAdd = async () => {
let src = null;
if (file) src = await fileToDataURL(file);
const item = {
id: cryptoRandomId(),
label: label || "Objet",
x: 50 + Math.random() * 200,
y: 50 + Math.random() * 120,
w: 180,
h: 180,
rotation: 0,
src,
scale: scale || 1,
z: Date.now(),
note: "",
};
onAdd(item);
setLabel("");
setFile(null);
setScale(1);
};

return (
<div className="mt-2 p-3 border rounded-2xl">
<div className="text-sm font-semibold mb-2">Ajouter un objet / tableau / meuble</div>
<div className="flex flex-col gap-2">
<input className="border rounded-lg px-2 py-1" placeholder="Nom (ex. Portrait de 1860)" value={label} onChange={(e) => setLabel(e.target.value)} />
<label className="px-3 py-2 rounded-lg border cursor-pointer hover:bg-neutral-50">
Importer une image (PNG/JPG)
<input type="file" accept="image/*" className="hidden" onChange={(e) => setFile(e.target.files?.[0] || null)} />
</label>
<div className="flex items-center gap-2">
<span className="text-sm text-neutral-600">Échelle</span>
<input type="range" min={0.2} max={3} step={0.1} value={scale} onChange={(e) => setScale(parseFloat(e.target.value))} className="flex-1" />
<span className="text-sm w-10 text-right">{scale.toFixed(1)}×</span>
</div>
<button className="px-3 py-2 rounded-lg bg-neutral-900 text-white hover:bg-neutral-800" onClick={handleAdd}>+ Ajouter à la pièce</button>
<p className="text-xs text-neutral-500">Astuce : vous pouvez ajouter des objets sans image (cartels textuels) pour matérialiser des idées à imaginer plus tard.</p>
</div>
</div>
);
}

function LayersPanel({ room, onChange }) {
const [selectedId, setSelectedId] = useState(null);
const items = room.items || [];

const remove = (id) => onChange(items.filter((i) => i.id !== id));
const bringToFront = (id) => onChange(items.map((i) => (i.id === id ? { ...i, z: Date.now() } : i)));

return (
<div className="mt-2 p-3 border rounded-2xl">
<div className="flex items-center justify-between mb-2">
<div className="text-sm font-semibold">Calques / objets ({items.length})</div>
</div>
<div className="max-h-56 overflow-auto divide-y">
{items.length === 0 && <div className="text-sm text-neutral-500 py-4">Aucun objet encore</div>}
{items
.slice()
.sort((a, b) => a.z - b.z)
.map((i) => (
<div key={i.id} className={`flex items-center gap-2 py-2 ${selectedId === i.id ? "bg-neutral-50" : ""}`}>
<button
className="px-2 py-1 rounded border"
onClick={() => bringToFront(i.id)}
title="Amener au premier plan"
>⬆️</button>
<div className="flex-1">
<div className="text-sm font-medium">{i.label}</div>
<div className="text-[11px] text-neutral-500">x:{i.x.toFixed(0)} y:{i.y.toFixed(0)} • rot:{i.rotation}°</div>
</div>
<button className="px-2 py-1 rounded border border-red-200 text-red-700" onClick={() => remove(i.id)}>Suppr</button>
</div>
))}
</div>
</div>
);
}

function RoomCanvas({ room, onChange, present }) {
const containerRef = useRef(null);
const [drag, setDrag] = useState(null); // {id, dx, dy}
const [resize, setResize] = useState(null); // {id, startW, startH}
const [rot, setRot] = useState(null); // {id, startRot}

const setItems = (updater) => onChange({ items: updater(room.items || []) });

const styleBg = room.bgType === "image"
? { backgroundImage: `url(${room.bgImage})`, backgroundSize: "cover", backgroundPosition: "center" }
: { backgroundColor: room.bgColor };

const scaleFit = present ? Math.min((window.innerWidth - 48) / room.width, (window.innerHeight - 160) / room.height, 1) : 1;

useEffect(() => {
const onUp = () => {
setDrag(null);
setResize(null);
setRot(null);
};
const onMove = (e) => {
if (drag) {
const { id, startX, startY, origX, origY } = drag;
const dx = (e.clientX - startX) / scaleFit;
const dy = (e.clientY - startY) / scaleFit;
setItems((items) => items.map((it) => (it.id === id ? { ...it, x: origX + dx, y: origY + dy } : it)));
}
if (resize) {
const { id, startX, startY, startW, startH } = resize;
const dx = (e.clientX - startX) / scaleFit;
const dy = (e.clientY - startY) / scaleFit;
setItems((items) => items.map((it) => (it.id === id ? { ...it, w: Math.max(40, startW + dx), h: Math.max(40, startH + dy) } : it)));
}
if (rot) {
const { id, centerX, centerY, startAngle } = rot;
const ang = Math.atan2(e.clientY - centerY, e.clientX - centerX);
const deg = Math.round((ang * 180) / Math.PI);
setItems((items) => items.map((it) => (it.id === id ? { ...it, rotation: deg - startAngle } : it)));
}
};
window.addEventListener("mousemove", onMove);
window.addEventListener("mouseup", onUp);
return () => {
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mouseup", onUp);
};
}, [drag, resize, rot, scaleFit]);

const startDrag = (e, it) => {
e.stopPropagation();
setDrag({ id: it.id, startX: e.clientX, startY: e.clientY, origX: it.x, origY: it.y });
bringToFront(it.id);
};
const startResize = (e, it) => {
e.stopPropagation();
setResize({ id: it.id, startX: e.clientX, startY: e.clientY, startW: it.w, startH: it.h });
bringToFront(it.id);
};
const startRotate = (e, it, box) => {
e.stopPropagation();
const rect = box.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const ang = Math.atan2(e.clientY - centerY, e.clientX - centerX);
const startAngle = Math.round((ang * 180) / Math.PI) - it.rotation;
setRot({ id: it.id, centerX, centerY, startAngle });
bringToFront(it.id);
};
const bringToFront = (id) => setItems((items) => items.map((i) => (i.id === id ? { ...i, z: Date.now() } : i)));

return (
<div className="bg-white border border-neutral-200 rounded-2xl p-3 shadow-sm">
<div className="flex items-center justify-between mb-2">
<div>
<div className="text-lg font-semibold">{room.name}</div>
<div className="text-xs text-neutral-500">Scène {room.width} × {room.height}px</div>
</div>
<div className="text-xs text-neutral-500">Glissez, redimensionnez, faites pivoter. Double‑clic pour éditer le libellé.</div>
</div>
<div className="w-full overflow-auto">
<div
ref={containerRef}
className="relative rounded-xl border border-neutral-200 mx-auto"
style={{ width: room.width * scaleFit, height: room.height * scaleFit, transform: `scale(${scaleFit})`, transformOrigin: "top left", ...styleBg }}
>
{(room.items || [])
.slice()
.sort((a, b) => a.z - b.z)
.map((it) => (
<DraggableItem
key={it.id}
item={it}
onMouseDown={startDrag}
onResize={startResize}
onRotate={startRotate}
onChange={(patch) => setItems((items) => items.map((i) => (i.id === it.id ? { ...i, ...patch } : i)))}
/>
))}
</div>
</div>
</div>
);
}

function DraggableItem({ item, onMouseDown, onResize, onRotate, onChange }) {
const boxRef = useRef(null);
const [editing, setEditing] = useState(false);

const style = {
position: "absolute",
left: item.x,
top: item.y,
width: item.w,
height: item.h,
transform: `rotate(${item.rotation || 0}deg) scale(${item.scale || 1})`,
transformOrigin: "center center",
};

return (
<div ref={boxRef} style={style} className="group select-none" onDoubleClick={() => setEditing(true)}>
<div
className="w-full h-full rounded-xl overflow-hidden border border-neutral-300 bg-white/70 backdrop-blur cursor-move shadow-sm"
onMouseDown={(e) => onMouseDown(e, item)}
>
{item.src ? (
<img src={item.src} alt={item.label} className="w-full h-full object-contain" draggable={false} />
) : (
<div className="w-full h-full grid place-items-center text-center p-3 text-neutral-600">
<div>
<div className="font-semibold">{item.label}</div>
<div className="text-xs">(Sans image – idée/repère)</div>
</div>
</div>
)}
</div>
{/* Controls */}
<div className="absolute -top-8 left-1/2 -translate-x-1/2 scale-0 group-hover:scale-100 transition">
<button
className="px-2 py-1 text-xs rounded-lg bg-neutral-900 text-white"
onClick={() => onChange({ note: prompt("Ajouter/éditer une note :", item.note || "") || item.note })}
>
✎ Note
</button>
</div>
<button
className="absolute -bottom-3 -right-3 w-6 h-6 rounded-full bg-neutral-900 text-white grid place-items-center cursor-se-resize"
onMouseDown={(e) => onResize(e, item)}
title="Redimensionner"
>
↘
</button>
<button
className="absolute -top-3 -right-3 w-6 h-6 rounded-full bg-neutral-900 text-white grid place-items-center cursor-alias"
onMouseDown={(e) => onRotate(e, item, boxRef.current)}
title="Pivoter"
>
⟳
</button>
{editing && (
<div className="absolute inset-0 grid place-items-center bg-white/80 p-2" onDoubleClick={(e) => e.stopPropagation()}>
<input
autoFocus
className="w-11/12 border rounded-lg px-2 py-1"
value={item.label}
onChange={(e) => onChange({ label: e.target.value })}
onBlur={() => setEditing(false)}
onKeyDown={(e) => e.key === "Enter" && setEditing(false)}
/>
</div>
)}
</div>
);
}

Application Palais Prouvost - Historique des versions