/* Configurator — live engraving preview on a drawn ukulele */ const { useState, useEffect, useRef } = React; const FONTS = [ { id: "instrument", name: "Instrument", sample: "Aa", family: '"Instrument Serif", serif', weight: 400, style: "normal", size: 34 }, { id: "playfair", name: "Playfair", sample: "Aa", family: '"Playfair Display", serif', weight: 500, style: "italic", size: 32 }, { id: "dancing", name: "Dancing", sample: "Aa", family: '"Dancing Script", cursive', weight: 600, style: "normal", size: 36 }, { id: "caveat", name: "Caveat", sample: "Aa", family: '"Caveat", cursive', weight: 600, style: "normal", size: 36 }, { id: "sf", name: "SF", sample: "Aa", family: '-apple-system, "SF Pro Display"', weight: 500, style: "normal", size: 30 }, { id: "notoserif", name: "Noto Serif", sample: "Aa", family: '"Noto Serif SC", serif', weight: 600, style: "normal", size: 32 }, ]; const LOCATIONS = [ { id: "headstock", name: "Headstock" }, { id: "body", name: "Body front" }, { id: "back", name: "Back panel" }, { id: "heel", name: "Heel" }, { id: "side", name: "Side" }, ]; // Realistic soprano ukulele on a 400×620 viewBox // Anatomy: headstock (top, slightly flared), nut, long thin neck, body (hourglass). const ZONES = { headstock: { x: 168, y: 22, w: 64, h: 70, label: { x: 200, y: 60 }, fontScale: 0.28 }, body: { x: 130, y: 380, w: 140, h: 60, label: { x: 200, y: 412 }, fontScale: 0.7 }, back: { x: 130, y: 470, w: 140, h: 60, label: { x: 200, y: 502 }, fontScale: 0.7 }, heel: { x: 184, y: 290, w: 32, h: 22, label: { x: 200, y: 302 }, fontScale: 0.22 }, side: { x: 78, y: 460, w: 26, h: 80, label: { x: 91, y: 500 }, fontScale: 0.22, rotate: -90 }, }; function UkuleleSVG({ text, font, engravingX, engravingY, engravingAngle, engravingSize, shape, view }) { // Shape parameters — mirrored across x=200 center const s = shape; const upperBout = s.upperBout; // right-side x of widest upper bout (default 280) const upperToWaist = s.upperToWaist; // right-side x of upper-to-waist curve (default 266) const waist = s.waist; // right-side x at waist (default 250) const lowerBout = s.lowerBout; // right-side x of widest lower bout (default 280) const bottomRound = s.bottomRound; // right-side x of bottom-round (default 296) const bottomY = s.bottomY; // y of bottom-center (default 600) const waistY = s.waistY; // y of waist narrowest (default 450) const upperBoutY = s.upperBoutY; // y of upper-bout-widest (default 348) const lowerBoutY = s.lowerBoutY; // y of lower-bout-widest (default 504) const upperToWaistY = s.upperToWaistY; // y of upper-to-waist curve (default 422) const bottomRoundY = s.bottomRoundY; // y of bottom-round curve (default 562) // Mirror right-side x values onto the left const mUpperBout = 400 - upperBout; const mUpperToWaist = 400 - upperToWaist; const mWaist = 400 - waist; const mLowerBout = 400 - lowerBout; const mBottomRound = 400 - bottomRound; // Body silhouette — proper guitar/ukulele shape with two bouts and a waist. const bodyPath = ` M 200 312 C 240 312, ${upperBout - 12} 320, ${upperBout} ${upperBoutY} C ${upperBout + 10} ${upperBoutY + 24}, ${upperBout} ${upperBoutY + 52}, ${upperToWaist} ${upperToWaistY} C ${upperToWaist - 10} ${upperToWaistY + 14}, ${waist} ${waistY - 8}, ${waist} ${waistY} C ${waist} ${waistY + 16}, ${upperToWaist - 2} ${waistY + 28}, ${lowerBout} ${lowerBoutY} C ${bottomRound} ${bottomRoundY}, ${bottomRound} ${bottomY - 38}, ${bottomRound - 26} ${bottomY - 20} C ${lowerBout - 34} ${bottomY - 4}, 220 ${bottomY}, 200 ${bottomY} C 180 ${bottomY}, ${mLowerBout + 34} ${bottomY - 4}, ${mBottomRound + 26} ${bottomY - 20} C ${mBottomRound} ${bottomY - 38}, ${mBottomRound} ${bottomRoundY}, ${mLowerBout} ${lowerBoutY} C ${mUpperToWaist + 2} ${waistY + 28}, ${mWaist} ${waistY + 16}, ${mWaist} ${waistY} C ${mWaist} ${waistY - 8}, ${mUpperToWaist + 10} ${upperToWaistY + 14}, ${mUpperToWaist} ${upperToWaistY} C ${mUpperBout} ${upperBoutY + 52}, ${mUpperBout - 10} ${upperBoutY + 24}, ${mUpperBout} ${upperBoutY} C ${mUpperBout + 12} 320, 160 312, 200 312 Z `; // Dynamic positions for soundhole + bridge (override-able via shape props) const holeY = s.holeY; const holeR = s.holeR; const bridgeY = s.bridgeY; const bridgeW = s.bridgeW; const bridgeH = s.bridgeH; const bridgeX = 200 - bridgeW / 2; return ( {/* drop shadow */} {/* Headstock — tapered, slightly wider than neck */} {/* Tuning pegs (4) */} {[[164, 38], [164, 76], [236, 38], [236, 76]].map(([cx, cy], i) => ( ))} {/* Brand mark on headstock */} Ukunili {/* Nut */} {/* Neck — fretboard + frets only on front; back uses body wood */} {view === "front" ? ( <> {/* Fretboard overlay */} {/* Frets */} {[110, 130, 152, 178, 208, 240, 274].map((y, i) => ( ))} {/* Fret dots */} ) : ( // Back: neck matches body wood, no frets )} {/* Heel — connects neck to body */} {/* Body */} {/* Sound hole — front only */} {view === "front" && ( <> {/* Rosette ring */} )} {/* Bridge / saddle — front only */} {view === "front" && ( <> {/* Bridge pins */} {[-16, -8, 0, 8, 16].map((dx, i) => ( ))} )} {/* Strings — front only */} {view === "front" && [-9, -3, 3, 9].map((dx, i) => ( ))} {/* Engraved text — position + angle controlled by user */} {text && ( {text.length > 18 ? text.slice(0, 18) + "…" : text} )} ); } function Configurator() { // Tweaks integration — engraving text + ukulele shape sliders, persisted const [tweaks, setTweak] = window.useTweaks(/*EDITMODE-BEGIN*/{ "engravingText": "Ocean Blue", "engravingX": 157, "engravingY": 380, "engravingAngle": -90, "engravingSize": 22, "upperBout": 269, "upperToWaist": 265, "waist": 264, "lowerBout": 293, "bottomRound": 304, "upperBoutY": 350, "upperToWaistY": 417, "waistY": 400, "lowerBoutY": 483, "bottomRoundY": 515, "bottomY": 600, "holeY": 416, "holeR": 30, "bridgeY": 516, "bridgeW": 67, "bridgeH": 18 }/*EDITMODE-END*/); const [fontId, setFontId] = useState("caveat"); const [view, setView] = useState("front"); const text = tweaks.engravingText ?? ""; const font = FONTS.find(f => f.id === fontId) || FONTS[0]; const shape = { upperBout: tweaks.upperBout, upperToWaist: tweaks.upperToWaist, waist: tweaks.waist, lowerBout: tweaks.lowerBout, bottomRound: tweaks.bottomRound, upperBoutY: tweaks.upperBoutY, upperToWaistY: tweaks.upperToWaistY, waistY: tweaks.waistY, lowerBoutY: tweaks.lowerBoutY, bottomRoundY: tweaks.bottomRoundY, bottomY: tweaks.bottomY, holeY: tweaks.holeY, holeR: tweaks.holeR, bridgeY: tweaks.bridgeY, bridgeW: tweaks.bridgeW, bridgeH: tweaks.bridgeH, }; function onTextChange(e) { setTweak("engravingText", e.target.value); } // Broadcast text to non-React parts of the page (name preview) useEffect(() => { document.dispatchEvent(new CustomEvent("engrave:text-change", { detail: text })); }, [text]); // Tweaks panel mounted via portal-like pattern — actually just render inline; // it floats absolutely positioned, so layout isn't affected. const { TweaksPanel, TweakSection, TweakText, TweakSlider } = window; return ( <> {TweaksPanel && ( setTweak("engravingText", v)} placeholder="Type to preview live" /> setTweak("upperBout", v)} /> setTweak("upperToWaist", v)} /> setTweak("waist", v)} /> setTweak("lowerBout", v)} /> setTweak("bottomRound", v)} /> setTweak("upperBoutY", v)} /> setTweak("upperToWaistY", v)} /> setTweak("waistY", v)} /> setTweak("lowerBoutY", v)} /> setTweak("bottomRoundY", v)} /> setTweak("bottomY", v)} /> setTweak("holeY", v)} /> setTweak("holeR", v)} /> setTweak("bridgeY", v)} /> setTweak("bridgeW", v)} /> setTweak("bridgeH", v)} /> )} {/* Preview */}
Live preview · {font.name} · X {tweaks.engravingX} · Y {tweaks.engravingY} · {tweaks.engravingAngle}° · {tweaks.engravingSize}px
{/* Controls */}
STEP 01

Your text

{text.length}/24
Letters, numbers, punctuation — emoji-free Free
STEP 02

Typeface

{font.name}
{FONTS.map(f => (
setFontId(f.id)} >
{f.sample}
{f.name}
))}
STEP 03

Position & angle

{tweaks.engravingAngle}°
Drag the sliders to move and rotate your inscription anywhere on the ukulele.
¥ 268 Engraving included
); } // Mount const mount = document.getElementById("configurator"); if (mount) ReactDOM.createRoot(mount).render();