/* * BoxCallBuilder — interactive product configurator for Green Swamp Turkey Calls. * * SECTIONS * 1. woodGrainPatterns — six SVG tiles (walnut, cherry, poplar, maple, cypress, cedar) * patternUnits="userSpaceOnUse" keeps grain continuous across adjacent faces * 2. WOODS / SELECT / BRAND — shared constants * 2b. BOX_SVG_INNER — hand-drawn 3/4-view artwork (exported from * Code/box_turkey_call.svg). The body/paddle faces carry * __BODY_FILL__ / __PADDLE_FILL__ placeholders swapped for * the chosen grain patterns at render. INLAY_STRIPES are the * lengthwise paddle inlay lines (clipped to clipPath #topClip). * 3. BoxCallBuilder (component) * a. State + previewFlash effect * b. SVG illustration — left column, 2000×780 source art in a "40 50 1920 820" * viewBox. Grain patterns live in ; the artwork is injected via * dangerouslySetInnerHTML and wrapped in a group that stretches 1.22× wide * for a "long" box. Optional inlay stripes overlay the paddle top. * c. Configuration form — right column, Tailwind-styled inputs * * NOTE: This file is loaded via Babel standalone in the plain HTML page (no bundler). * React hooks are pulled from the global React object. If this is ever moved into a * proper bundled project, restore: import { useState, useEffect, useRef } from 'react'; * and change the component declaration back to: export default function BoxCallBuilder() */ /* global React, ReactDOM */ const { useState, useEffect, useRef } = React; // Each pattern: patternUnits="userSpaceOnUse", 100x200 tile, grain runs horizontally. // Layers: base rect → depth overlays → grain stroke paths → tint overlay. const woodGrainPatterns = { walnut: ( ), cherry: ( ), poplar: ( ), maple: ( ), cypress: ( ), cedar: ( {/* Light early-wood bands */} {/* Dark late-wood bands */} {/* Fine grain lines over bands */} ), }; const WOODS = [ { value: 'walnut', label: 'Walnut' }, { value: 'cherry', label: 'Cherry' }, { value: 'poplar', label: 'Poplar' }, { value: 'maple', label: 'Maple' }, { value: 'cypress', label: 'Cypress' }, { value: 'cedar', label: 'Southern Red Cedar' }, ]; const SELECT = 'w-full border border-gray-300 rounded-lg px-3 py-2.5 text-base text-gray-800 ' + 'bg-white focus:outline-none focus:ring-2 focus:ring-stone-600 focus:border-transparent ' + 'appearance-none cursor-pointer'; const BRAND = '#5C3A1E'; /* * Box-call artwork — a hand-drawn 3/4-view illustration exported to SVG. * The two wood faces carry placeholder fills (__BODY_FILL__ / __PADDLE_FILL__) * that are swapped for the selected grain patterns at render time. Everything * else (shading gradients, chamber, ink linework, brass pivot) is baked in. * * Injected verbatim via dangerouslySetInnerHTML so the lengthy path data stays * out of the JSX. The string below is generated from Code/box_turkey_call.svg. */ const BOX_SVG_INNER = ` `; // Screw/pivot rendered separately so it always sits above inlay stripes. const PIVOT_SVG_INNER = ` `; // Inlay stripes run lengthwise down the paddle, parallel to its long axis, and // are clipped to the paddle top (clipPath #topClip from the artwork). Endpoints // overshoot the viewBox so the clip trims them to the paddle silhouette. // Slope -0.27135 matches the straight far-blade edge exactly // ((130.19-390.82)/(1539.23-578.75)), keeping stripes parallel to paddle lines. // Screw ellipse cy=159.5 ry=35.6 → top y=123.9, bottom y=195.1 at x=1749. const INLAY_STRIPES = [ { x1: 137, y1: 551, x2: 2065, y2: 28 }, // y≈114 at screw x — above screw top (124) { x1: 137, y1: 648, x2: 2065, y2: 124 }, // y≈210 at screw x — below screw bot (195) ]; function BoxCallBuilder() { const [callType, setCallType] = useState('regular'); const [bodyWood, setBodyWood] = useState('walnut'); const [paddleWood, setPaddleWood] = useState('walnut'); const [hasInlay, setHasInlay] = useState(false); const [inlayWood, setInlayWood] = useState('cherry'); const [previewFlash, setPreviewFlash] = useState(false); // Skip the flash on initial mount so the preview doesn't pulse on page load. const isMounted = useRef(false); useEffect(() => { if (!isMounted.current) { isMounted.current = true; return; } setPreviewFlash(true); const t = setTimeout(() => setPreviewFlash(false), 150); return () => clearTimeout(t); }, [bodyWood, paddleWood, callType, hasInlay, inlayWood]); // Regular: scale down 15%, centered on the art's visual center (967, 475). // Long: stretch 10% wider from the horizontal center. The viewBox also widens // for "long" so the stretched ends aren't clipped at the SVG boundary. const contentTransform = callType === 'long' ? 'translate(1000,0) scale(1.10,1) translate(-1000,0)' : 'translate(967,475) scale(0.85) translate(-967,-475)'; const svgViewBox = callType === 'long' ? '-100 50 2200 820' : '40 50 1920 820'; // Drop the selected grain patterns into the artwork's wood faces. const artHtml = BOX_SVG_INNER .split('__BODY_FILL__').join(`url(#grain-${bodyWood})`) .split('__PADDLE_FILL__').join(`url(#grain-${paddleWood})`); return (

{/* ── Left: Preview ── */}

{/* ── Right: Configurator ── */}

{/* Product title */}

Custom Box Call

Green Swamp Turkey Calls

Configure Your Call

{/* 1. Box Call Type */}

Box Call Type

{/* 2. Body Wood Type */}

Body Wood Type

{/* 3. Paddle Wood Type */}

Paddle Wood Type

{/* 4. Inlays toggle */}

Inlays

{/* 5. Inlay Wood Type — slides in/out with height + opacity transition */}

Inlay Wood Type

{/* Custom Wood Burning section */}

Custom Wood Burning

Custom wood burned artwork can be added for an additional charge. Contact us to discuss your design and receive a quote.

e.currentTarget.style.backgroundColor = '#4A2C14'} onMouseLeave={e => e.currentTarget.style.backgroundColor = BRAND} > Contact Us About Wood Burning

); } // Self-mount into #box-call-builder when loaded as a standalone script (no bundler). const _mountEl = document.getElementById('box-call-builder'); if (_mountEl) ReactDOM.createRoot(_mountEl).render(React.createElement(BoxCallBuilder));