From 47dd9a1b6e41cd0a668f659c31c958bd17c3a61e Mon Sep 17 00:00:00 2001
From: Peter Wolf <84736182+peterwolf-pl@users.noreply.github.com>
Date: Tue, 2 Sep 2025 04:29:41 +0200
Subject: [PATCH 1/2] Introduce intro screen and new kaszta variant

---
 App.jsx            | 20 +++++++++++++++++++-
 Intro.jsx          | 32 ++++++++++++++++++++++++++++++++
 LetterComposer.jsx |  8 ++++----
 poz_szuflada.json  |  6 ++++++
 4 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 Intro.jsx
 create mode 100644 poz_szuflada.json

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" && <Intro onSelect={handleSelect} />}
       {module === "letter" && (
         <LetterComposer
           onMoveLineToPage={line => {
             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 (
+    <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>
+  );
+}
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 }) {
             }}
           />
           <img
-            src="/assets/kaszta.png"
+            src={kasztaImage}
             alt="Kaszta zecerska"
             style={{
               width: "100%",
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

From ecefe6193773ff76c516dcb31f080729b5e62acf Mon Sep 17 00:00:00 2001
From: Peter Wolf <84736182+peterwolf-pl@users.noreply.github.com>
Date: Tue, 2 Sep 2025 04:40:17 +0200
Subject: [PATCH 2/2] Update PrintModule.jsx

ok
---
 PrintModule.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/PrintModule.jsx b/PrintModule.jsx
index e7552c8..3882f8c 100644
--- a/PrintModule.jsx
+++ b/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]);