Add intro screen with kaszta variant selection

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" && <Intro onSelect={handleSelect} />}
       {module === "letter" && (
         <LetterComposer
           onMoveLineToPage={line => {
             addLine(line);
             setModule("page");
           }}
+          kasztaImage={kasztaSettings[kasztaVariant].image}
+          pozSrc={kasztaSettings[kasztaVariant].poz}
         />
       )}
      {module === "page" && (

Intro.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+export default function Intro({ onSelect }) {
+  return (
+    <div style={{ textAlign: "center", padding: "2rem" }}>
+      <h1 style={{ fontFamily: "GrohmanGrotesk-Classic", fontSize: "2.5rem" }}>
+        ZECER Muzeum Książki Artystycznej w Łodzi
+      </h1>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          gap: "2rem",
+          marginTop: "1rem",
+        }}
+      >
+        <img
+          src="/assets/kaszta.png"
+          alt="Kaszta"
+          style={{ width: "200px", cursor: "pointer" }}
+          onClick={() => onSelect("kaszta")}
+        />
+        <img
+          src="/assets/kaszta_szuflada.png"
+          alt="Kaszta szuflada"
+          style={{ width: "200px", cursor: "pointer" }}
+          onClick={() => onSelect("szuflada")}
+        />
+      </div>
+    </div>
+  );
+}

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 }) {
             }}
           />
           <img
-            src="/assets/kaszta.png"
+            src={kasztaImage}
             alt="Kaszta zecerska"
             style={{
               width: "100%",

PrintModule.jsx

@@ -30,7 +30,7 @@ export default function PrintModule({ lines, onBack }) {
 
   useEffect(() => {
     setClampTop(pageH - clampH);
-    const t = setTimeout(() => setClampTop(0), 1000);
+    const t = setTimeout(() => setClampTop(-clampH), 1000);
     return () => clearTimeout(t);
   }, [pageH]);
 

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" },
+]