// Switches, toggles, power button for MENTESH2A faceplate // ────────────────────────────────────────────────────────────────────── // MiniToggleDPDT — photorealistic mini DPDT toggle switch // Matches a StewMac/Carling-style DPDT: red phenolic body (with side-mount raised bump), // silver chrome hex nut with 6-facet top view, threaded collar, tall polished chrome lever. function MiniToggleDPDT({ value, onChange, labels = ['OFF', 'ON'], stacked = true }) { const W = 54, H = 96; const uid = (React.useId ? React.useId() : String(Math.random())).replace(/[^a-z0-9]/gi, ''); const click = () => { if (window.playSwitchClick) window.playSwitchClick(); onChange && onChange(!value); }; // Lever tilts ±20°; "up" = value true const leverAngle = value ? -20 : 20; // Layout coordinates (expressed as absolute pixels for clarity) const cx = W / 2; // Hex nut center — this is also the lever pivot const hexCy = 52; const hexR = 13; // outer radius of hex const hexInnerR = 4.6; // inner hole where bat emerges // Body (red phenolic) — large rectangle below hex const bodyX = 10, bodyY = 62, bodyW = W - 20, bodyH = 22; // Collar between hex and body (threaded cylinder) const collarX = bodyX + 6, collarY = hexCy + 7, collarW = bodyW - 12, collarH = 4; // Lever — slim shaft + rounded tip const leverLen = 36; const leverW = 5; return (
{stacked && ( {labels[1]} )} {/* PHENOLIC BODY — deep saturated red with dark shadow at bottom */} {/* Subtle side gradient for the body for cylindrical feel */} {/* CHROME HEX — top-down view of nut, with center→edge fall-off */} {/* THREADED COLLAR */} {/* CHROME LEVER — strong left-to-right reflection */} {/* LEVER TIP — polished hemisphere */} {/* Inner bore shadow (dark hole in hex center) */} {/* Ground shadow ellipse under the body */} {/* ── PHENOLIC BODY ── */} {/* main block */} {/* side-fall shading overlay */} {/* top edge highlight */} {/* screw bump detail on the side (molded phenolic) */} {/* bottom shadow band */} {/* Solder pins poking out bottom (3 rows for DPDT) */} {[0.22, 0.50, 0.78].map((f, i) => ( {/* pin tip bright edge */} ))} {/* ── THREADED COLLAR (chrome cylinder under hex, above body) ── */} {/* thread lines */} {[0, 1, 2].map((i) => ( ))} {/* ── HEX NUT BEZEL (top-down view of hexagonal flats) ── */} {/* Drop shadow for depth */} {/* Main hex body — regular 6-gon, flat sides left/right */} {/* Edge bevels on each facet — thin highlight lines at each corner */} {[ [-hexR, 0, -hexR/2, -hexR*0.866], [-hexR/2, -hexR*0.866, hexR/2, -hexR*0.866], [ hexR/2, -hexR*0.866, hexR, 0], [ hexR, 0, hexR/2, hexR*0.866], [ hexR/2, hexR*0.866, -hexR/2, hexR*0.866], [-hexR/2, hexR*0.866, -hexR, 0], ].map(([x1,y1,x2,y2], i) => ( ))} {/* Top specular stripe across the hex */} {/* Inner hole (where the bat stem enters) */} {/* tiny bore highlight at top of hole */} {/* ── CHROME BAT LEVER (rotates around hex center) ── */} {/* cast shadow of lever onto the hex */} {/* lever shaft */} {/* fine knurled base ring around where shaft meets hex */} {/* rounded tip */} {/* specular on shaft */} {/* tiny tip specular */} {stacked && ( {labels[0]} )}
); } function ToggleSwitch({ value, onChange, labels = ['OFF', 'ON'], size = 'md' }) { const W = size === 'sm' ? 44 : 56; const H = size === 'sm' ? 22 : 28; return (
{ if (window.playSwitchClick) window.playSwitchClick(); onChange && onChange(!value); }} style={{ width: W, height: H, background: 'linear-gradient(180deg, #0a0806 0%, #1a1612 100%)', borderRadius: H / 2, border: '1px solid #000', boxShadow: 'inset 0 2px 3px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.2)', position: 'relative', cursor: 'pointer', padding: 3, transition: 'all 150ms', }} >
{labels[0]} {labels[1]}
); } // Vintage 3-position rotary selector (meter mode) function RotarySelector({ value, onChange, options, label }) { const idx = options.indexOf(value); const step = 360 / options.length; const angle = -60 + idx * 60; return (
{label && (
{label}
)}
{ if (window.playDetent) window.playDetent(); onChange(options[(idx + 1) % options.length]); }} style={{ width: 54, height: 54, position: 'relative', cursor: 'pointer', }} >
{options.map(o => ( {o} ))}
); } // Power lamp — glowing amber bulb with chrome jewel bezel function PowerLamp({ on = true }) { return (
{/* inner dark recess */}
{/* the bulb / jewel lens */}
{/* specular highlight on the glass dome */} {on && (
)}
); } // Small screw head — domed brushed steel with realistic shadow and slot function Screw({ angle = 45, size = 16 }) { const id = `scr-${angle}-${size}`; return ( {/* drop shadow under the head */} {/* head body */} {/* brushed-radial tint rings */} {/* slot */} {/* slot shadow */} {/* slot inner highlight edge */} {/* specular sheen */} ); } // Rack ears with mounting holes function RackEar({ side = 'left', variant }) { const holes = [0.12, 0.32, 0.52, 0.72, 0.92]; return (
{holes.map((y, i) => (
))}
); } // Vintage bat-handle toggle (chrome lever, vertical motion) function BatToggle({ value, onChange, color = 'chrome' }) { const W = 26, H = 36; const onClick = () => { if (window.playSwitchClick) window.playSwitchClick(); onChange && onChange(!value); }; return (
{/* nut / bezel */}
{/* hex nut indents */} {/* lever */}
{/* tip ball */}
); } Object.assign(window, { ToggleSwitch, RotarySelector, PowerLamp, Screw, RackEar, BatToggle, MiniToggleDPDT });