Replace grey line composer with photo and scaled baseline

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",

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,32 @@ 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 letterScale = lineScale * 2;
+  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 * letterScale;
       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 * letterScale,
+            width: slot.width * letterScale,
+            height: LETTER_HEIGHT * letterScale,
             zIndex: 3,
             cursor: "pointer"
           }}
@@ -186,8 +199,8 @@ export default function LetterComposer({ onMoveLineToPage }) {
           <img
             src={slot.img}
             alt={slot.char}
-            width={slot.width * scale}
-            height={96 * scale}
+            width={slot.width * letterScale}
+            height={LETTER_HEIGHT * letterScale}
             draggable={false}
             style={{ display: "block" }}
           />
@@ -206,10 +219,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 * letterScale) / 2,
+          top: ghostPos.y - (LETTER_HEIGHT * letterScale),
+          width: activeLetter.width * letterScale,
+          height: LETTER_HEIGHT * letterScale,
           pointerEvents: "none",
           zIndex: 1000,
           opacity: 1,
@@ -229,7 +242,7 @@ export default function LetterComposer({ onMoveLineToPage }) {
         minHeight: "100vh",
         display: "flex",
         flexDirection: "column",
-        background: "#f5f6f8",
+        background: "#d4d4d4",
         alignItems: "center",
         justifyContent: "stretch",
         overflow: "hidden",
@@ -324,37 +337,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()}

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",

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",

index.css

@@ -12,9 +12,10 @@
   -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;
+  --bg-tile-size: 64px;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -37,6 +38,10 @@ 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 {
@@ -66,7 +71,6 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #ffffff;
   }
   a:hover {
     color: #747bff;