diff --git a/App.jsx b/App.jsx index 5c5af47..8fe80df 100644 --- a/App.jsx +++ b/App.jsx @@ -2,11 +2,26 @@ import React, { useState } from "react"; import LetterComposer from "./LetterComposer"; import PageComposer from "./PageComposer"; import PrintModule from "./PrintModule"; +import Intro from "./Intro"; export default function App() { // Każdy ciąg znaków z wierszownika to tablica liter (obiektów), np. [{char, img, width}] const [lines, setLines] = useState([]); - const [module, setModule] = useState("letter"); + const [module, setModule] = useState("intro"); + const [kasztaVariant, setKasztaVariant] = useState("kaszta"); + + const kasztaSettings = { + kaszta: { image: "/assets/kaszta.png", poz: "/poz.json" }, + szuflada: { + image: "/assets/kaszta_szuflada.png", + poz: "/poz_szuflada.json", + }, + }; + + function handleSelect(variant) { + setKasztaVariant(variant); + setModule("letter"); + } // const [module, setModule] = useState("page"); // Dodaj nową linię (ciąg liter) do PageComposer @@ -23,12 +38,15 @@ export default function App() { return ( <> + {module === "intro" && } {module === "letter" && ( { addLine(line); setModule("page"); }} + kasztaImage={kasztaSettings[kasztaVariant].image} + pozSrc={kasztaSettings[kasztaVariant].poz} /> )} {module === "page" && ( diff --git a/Intro.jsx b/Intro.jsx new file mode 100644 index 0000000..1a3758c --- /dev/null +++ b/Intro.jsx @@ -0,0 +1,32 @@ +import React from "react"; + +export default function Intro({ onSelect }) { + return ( +
+

+ ZECER Muzeum Książki Artystycznej w Łodzi +

+
+ Kaszta onSelect("kaszta")} + /> + Kaszta szuflada onSelect("szuflada")} + /> +
+
+ ); +} diff --git a/LetterComposer.jsx b/LetterComposer.jsx index 6a798c3..17e0402 100644 --- a/LetterComposer.jsx +++ b/LetterComposer.jsx @@ -16,7 +16,7 @@ function getImageWidth(src) { }); } -export default function LetterComposer({ onMoveLineToPage }) { +export default function LetterComposer({ onMoveLineToPage, kasztaImage = "/assets/kaszta.png", pozSrc = "/poz.json" }) { const [letterFields, setLetterFields] = useState([]); const [slots, setSlots] = useState(Array(SLOTS_COUNT).fill(null)); const [activeLetter, setActiveLetter] = useState(null); @@ -58,11 +58,11 @@ export default function LetterComposer({ onMoveLineToPage }) { }, []); useEffect(() => { - fetch('/poz.json') + fetch(pozSrc) .then(res => res.json()) .then(setLetterFields) .catch(() => setLetterFields([])); - }, []); + }, [pozSrc]); // DRAG START (mouse/touch na field) @@ -292,7 +292,7 @@ export default function LetterComposer({ onMoveLineToPage }) { }} /> Kaszta zecerska { setClampTop(pageH - clampH); - const t = setTimeout(() => setClampTop(0), 1000); + const t = setTimeout(() => setClampTop(-clampH), 1000); return () => clearTimeout(t); }, [pageH]); diff --git a/poz_szuflada.json b/poz_szuflada.json new file mode 100644 index 0000000..3484c46 --- /dev/null +++ b/poz_szuflada.json @@ -0,0 +1,6 @@ +[ + { "char": "a", "x1": 645, "y1": 941, "x2": 518, "y2": 743, "img": "/assets/letters/a.png" }, + { "char": "ą", "x1": 663, "y1": 745, "x2": 794, "y2": 945, "img": "/assets/letters/ą.png" }, + { "char": "b", "x1": 808, "y1": 746, "x2": 941, "y2": 935, "img": "/assets/letters/b.png" }, + { "char": "c", "x1": 955, "y1": 748, "x2": 1086, "y2": 944, "img": "/assets/letters/c.png" }, +] \ No newline at end of file