From 079bc0c309a5547612316898bdd0ac6a2031faf8 Mon Sep 17 00:00:00 2001
From: Peter Wolf <84736182+peterwolf-pl@users.noreply.github.com>
Date: Mon, 1 Sep 2025 09:20:01 +0200
Subject: [PATCH 1/6] Replace wierszownik graphic with photo and adjust letter
 line

---
 LetterComposer.jsx | 73 +++++++++++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 34 deletions(-)

diff --git a/LetterComposer.jsx b/LetterComposer.jsx
index 9f79c41..1edc04d 100644
--- a/LetterComposer.jsx
+++ b/LetterComposer.jsx
@@ -3,6 +3,9 @@ import React, { useRef, useState, useEffect } from "react";
 const KASZTA_WIDTH = 1618;
 const KASZTA_HEIGHT = 1080;
 const SLOTS_COUNT = 20;
+const LINE_OFFSET_RIGHT = 340;
+const LINE_OFFSET_BOTTOM = 240;
+const LETTER_HEIGHT = 96;
 
 function getImageWidth(src) {
   return new Promise((resolve) => {
@@ -22,6 +25,7 @@ export default function LetterComposer({ onMoveLineToPage }) {
   const kasztaRef = useRef();
   const wierszownikRef = useRef();
   const [kasztaW, setKasztaW] = useState(KASZTA_WIDTH);
+  const [wierszownikSize, setWierszownikSize] = useState({ w: 0, h: 0 });
 
   // BLOKUJ SCROLL strony
   useEffect(() => {
@@ -160,23 +164,31 @@ export default function LetterComposer({ onMoveLineToPage }) {
   const scale = kasztaW / KASZTA_WIDTH;
   const kasztaH = kasztaW * (KASZTA_HEIGHT / KASZTA_WIDTH);
   const lineW = kasztaW * 0.8; // WIERSZOWNIK 80% kaszty
+  const lineScale = wierszownikSize.w ? lineW / wierszownikSize.w : scale;
+  const lineStartX = wierszownikSize.w
+    ? (wierszownikSize.w - LINE_OFFSET_RIGHT) * lineScale
+    : 0;
+  const lineStartY = wierszownikSize.h
+    ? (wierszownikSize.h - LINE_OFFSET_BOTTOM) * lineScale
+    : 0;
 
   function renderLettersOnLine() {
+    if (!wierszownikSize.w) return null;
     let right = 0;
     let visibleSlots = [];
     for (let i = slots.length - 1; i >= 0; i--) {
       const slot = slots[i];
       if (!slot) continue;
-      right += slot.width * scale;
+      right += slot.width * lineScale;
       visibleSlots.push(
         <div
           key={slot.id}
           style={{
             position: "absolute",
-            left: lineW - right,
-            top: `${16 * scale}px`,
-            width: slot.width * scale,
-            height: 96 * scale,
+            left: lineStartX - right,
+            top: lineStartY - LETTER_HEIGHT * lineScale,
+            width: slot.width * lineScale,
+            height: LETTER_HEIGHT * lineScale,
             zIndex: 3,
             cursor: "pointer"
           }}
@@ -186,8 +198,8 @@ export default function LetterComposer({ onMoveLineToPage }) {
           <img
             src={slot.img}
             alt={slot.char}
-            width={slot.width * scale}
-            height={96 * scale}
+            width={slot.width * lineScale}
+            height={LETTER_HEIGHT * lineScale}
             draggable={false}
             style={{ display: "block" }}
           />
@@ -206,10 +218,10 @@ export default function LetterComposer({ onMoveLineToPage }) {
         alt={activeLetter.char}
         style={{
           position: "fixed",
-          left: ghostPos.x - (activeLetter.width * scale) / 2,
-          top: ghostPos.y - (96 * scale),
-          width: activeLetter.width * scale,
-          height: 96 * scale,
+          left: ghostPos.x - (activeLetter.width * lineScale) / 2,
+          top: ghostPos.y - (LETTER_HEIGHT * lineScale),
+          width: activeLetter.width * lineScale,
+          height: LETTER_HEIGHT * lineScale,
           pointerEvents: "none",
           zIndex: 1000,
           opacity: 1,
@@ -324,37 +336,30 @@ export default function LetterComposer({ onMoveLineToPage }) {
             style={{
               position: "relative",
               width: lineW,
-              minHeight: 116 * scale,
+              height: wierszownikSize.h
+                ? wierszownikSize.h * lineScale
+                : 116 * scale,
               margin: "1px auto 0px auto",
               borderRadius: 8 * scale,
-              background: "#a6a3a8",
               touchAction: "none",
               flexShrink: 0,
               boxSizing: "border-box"
             }}
           >
-            <div
+            <img
+              src="/assets/wierszownik.jpg"
+              alt="Wierszownik"
+              onLoad={e =>
+                setWierszownikSize({
+                  w: e.target.naturalWidth,
+                  h: e.target.naturalHeight
+                })
+              }
+              draggable={false}
               style={{
-                position: "absolute",
-                left: -5 * scale,
-                top: 96 * scale + 16 * scale,
-                width: lineW + (10 * scale),
-                height: 8 * scale,
-                background: "#111",
-                borderRadius: 8 * scale,
-                zIndex: 1
-              }}
-            />
-            <div
-              style={{
-                position: "absolute",
-                right: -4 * scale,
-                top: 0,
-                width: 8 * scale,
-                height: 116 * scale + 3,
-                background: "#111",
-                borderRadius: 8 * scale,
-                zIndex: 1
+                width: "100%",
+                height: "auto",
+                display: "block"
               }}
             />
             {renderLettersOnLine()}

From 31dc619ed1e97fc4f7ca6f5b45e3da532a1cc262 Mon Sep 17 00:00:00 2001
From: Peter Wolf <84736182+peterwolf-pl@users.noreply.github.com>
Date: Mon, 1 Sep 2025 09:43:38 +0200
Subject: [PATCH 2/6] Set page background to #d4d4d4

---
 index.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/index.css b/index.css
index 33389ba..8979692 100644
--- a/index.css
+++ b/index.css
@@ -12,9 +12,9 @@
   -webkit-user-select: none;
   -ms-user-select: none;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color-scheme: light;
+  color: #213547;
+  background-color: #d4d4d4;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -37,6 +37,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  background-color: #d4d4d4;
 }
 
 h1 {
@@ -66,7 +67,7 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #ffffff;
+    background-color: #d4d4d4;
   }
   a:hover {
     color: #747bff;

From 58405c1c23d8678f21bb84baa0b477e4a875e195 Mon Sep 17 00:00:00 2001
From: Peter Wolf <84736182+peterwolf-pl@users.noreply.github.com>
Date: Mon, 1 Sep 2025 09:43:43 +0200
Subject: [PATCH 3/6] Double drag letter size on wierszownik

---
 LetterComposer.jsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/LetterComposer.jsx b/LetterComposer.jsx
index 1edc04d..42d54aa 100644
--- a/LetterComposer.jsx
+++ b/LetterComposer.jsx
@@ -165,6 +165,7 @@ export default function LetterComposer({ onMoveLineToPage }) {
   const kasztaH = kasztaW * (KASZTA_HEIGHT / KASZTA_WIDTH);
   const lineW = kasztaW * 0.8; // WIERSZOWNIK 80% kaszty
   const lineScale = wierszownikSize.w ? lineW / wierszownikSize.w : scale;
+  const letterScale = lineScale * 2;
   const lineStartX = wierszownikSize.w
     ? (wierszownikSize.w - LINE_OFFSET_RIGHT) * lineScale
     : 0;
@@ -179,16 +180,16 @@ export default function LetterComposer({ onMoveLineToPage }) {
     for (let i = slots.length - 1; i >= 0; i--) {
       const slot = slots[i];
       if (!slot) continue;
-      right += slot.width * lineScale;
+      right += slot.width * letterScale;
       visibleSlots.push(
         <div
           key={slot.id}
           style={{
             position: "absolute",
             left: lineStartX - right,
-            top: lineStartY - LETTER_HEIGHT * lineScale,
-            width: slot.width * lineScale,
-            height: LETTER_HEIGHT * lineScale,
+            top: lineStartY - LETTER_HEIGHT * letterScale,
+            width: slot.width * letterScale,
+            height: LETTER_HEIGHT * letterScale,
             zIndex: 3,
             cursor: "pointer"
           }}
@@ -198,8 +199,8 @@ export default function LetterComposer({ onMoveLineToPage }) {
           <img
             src={slot.img}
             alt={slot.char}
-            width={slot.width * lineScale}
-            height={LETTER_HEIGHT * lineScale}
+            width={slot.width * letterScale}
+            height={LETTER_HEIGHT * letterScale}
             draggable={false}
             style={{ display: "block" }}
           />
@@ -218,10 +219,10 @@ export default function LetterComposer({ onMoveLineToPage }) {
         alt={activeLetter.char}
         style={{
           position: "fixed",
-          left: ghostPos.x - (activeLetter.width * lineScale) / 2,
-          top: ghostPos.y - (LETTER_HEIGHT * lineScale),
-          width: activeLetter.width * lineScale,
-          height: LETTER_HEIGHT * lineScale,
+          left: ghostPos.x - (activeLetter.width * letterScale) / 2,
+          top: ghostPos.y - (LETTER_HEIGHT * letterScale),
+          width: activeLetter.width * letterScale,
+          height: LETTER_HEIGHT * letterScale,
           pointerEvents: "none",
           zIndex: 1000,
           opacity: 1,

From 20022aa63fe05d0992f5668984119d7de7f786ee Mon Sep 17 00:00:00 2001
From: Peter Wolf <84736182+peterwolf-pl@users.noreply.github.com>
Date: Mon, 1 Sep 2025 12:07:00 +0200
Subject: [PATCH 4/6] Apply repeatable bg tile with adjustable size

---
 assets/.gitkeep | 0
 index.css       | 7 ++++---
 2 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 assets/.gitkeep

diff --git a/assets/.gitkeep b/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/index.css b/index.css
index 8979692..888e81c 100644
--- a/index.css
+++ b/index.css
@@ -14,7 +14,7 @@
 
   color-scheme: light;
   color: #213547;
-  background-color: #d4d4d4;
+  --bg-tile-size: 64px;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -37,7 +37,9 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
-  background-color: #d4d4d4;
+  background-image: url('assets/bg.png');
+  background-repeat: repeat;
+  background-size: var(--bg-tile-size);
 }
 
 h1 {
@@ -67,7 +69,6 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #d4d4d4;
   }
   a:hover {
     color: #747bff;

From dfc57ed98b480aa716716e56d2d8b2339d2d1d07 Mon Sep 17 00:00:00 2001
From: Peter Wolf <84736182+peterwolf-pl@users.noreply.github.com>
Date: Mon, 1 Sep 2025 12:21:22 +0200
Subject: [PATCH 5/6] Set page background color to #d4d4d4

---
 index.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/index.css b/index.css
index 888e81c..21876f2 100644
--- a/index.css
+++ b/index.css
@@ -14,6 +14,7 @@
 
   color-scheme: light;
   color: #213547;
+  background-color: #d4d4d4;
   --bg-tile-size: 64px;
 
   font-synthesis: none;
@@ -37,6 +38,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  background-color: #d4d4d4;
   background-image: url('assets/bg.png');
   background-repeat: repeat;
   background-size: var(--bg-tile-size);

From 7d0330f5230d71058c0558c0a8c1aa53a79c0ea9 Mon Sep 17 00:00:00 2001
From: Peter Wolf <84736182+peterwolf-pl@users.noreply.github.com>
Date: Mon, 1 Sep 2025 13:18:08 +0200
Subject: [PATCH 6/6] Use light gray background across app

---
 LetterComposer copy.jsx | 2 +-
 LetterComposer.jsx      | 2 +-
 PageComposer.jsx        | 2 +-
 PrintModule.jsx         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/LetterComposer copy.jsx b/LetterComposer copy.jsx
index 71c44a5..ec484da 100644
--- a/LetterComposer copy.jsx	
+++ b/LetterComposer copy.jsx	
@@ -216,7 +216,7 @@ export default function LetterComposer() {
       style={{
         width: "100vw",
         height: "100vh",
-        background: "#f5f6f8",
+        background: "#d4d4d4",
         overflow: "hidden",
         minHeight: "100vh",
         display: "flex",
diff --git a/LetterComposer.jsx b/LetterComposer.jsx
index 42d54aa..f955547 100644
--- a/LetterComposer.jsx
+++ b/LetterComposer.jsx
@@ -242,7 +242,7 @@ export default function LetterComposer({ onMoveLineToPage }) {
         minHeight: "100vh",
         display: "flex",
         flexDirection: "column",
-        background: "#f5f6f8",
+        background: "#d4d4d4",
         alignItems: "center",
         justifyContent: "stretch",
         overflow: "hidden",
diff --git a/PageComposer.jsx b/PageComposer.jsx
index 3c267e9..8a4365b 100644
--- a/PageComposer.jsx
+++ b/PageComposer.jsx
@@ -205,7 +205,7 @@ export default function PageComposer({
       style={{
         minHeight: "100vh",
         width: "100vw",
-        background: "#f5f6f8",
+        background: "#d4d4d4",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
diff --git a/PrintModule.jsx b/PrintModule.jsx
index 10252f1..9114b57 100644
--- a/PrintModule.jsx
+++ b/PrintModule.jsx
@@ -39,7 +39,7 @@ export default function PrintModule({ lines, onBack }) {
       style={{
         minHeight: "100vh",
         width: "100vw",
-        background: "#f5f6f8",
+        background: "#d4d4d4",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",