// Photo-accurate dartboard + LED ring visual based on the real product photos.
// The ring is a black outer hoop, white frosted inner panel that diffuses LED light,
// with 4 black camera mount clips at top/right/bottom/left (cardinal positions).
const NUMBERS = [20,1,18,4,13,6,10,15,2,17,3,19,7,16,8,11,14,9,12,5];
// Authentic dartboard built from SVG. realistic colors: cream + black segments,
// red/green doubles & triples, red/green bull.
const Dartboard = ({size=600, showDarts=false}) => {
const cx = size/2, cy = size/2;
// proportions roughly true to a real board: bull r=6, 25 r=15, triple inner r=99, triple outer r=107, double inner r=162, double outer r=170 (out of 226 board radius)
// We'll scale around board radius ~ 0.42 * size
const R = size * 0.42;
const k = R / 170;
const rBull = 6*k;
const r25 = 15*k;
const rTrIn = 99*k;
const rTrOut= 107*k;
const rDbIn = 162*k;
const rDbOut= 170*k;
const rNum = 188*k;
const segPath = (rIn, rOut, a1, a2) => {
const p = (a, r) => [cx + Math.cos(a)*r, cy + Math.sin(a)*r];
const [x1,y1] = p(a1, rOut);
const [x2,y2] = p(a2, rOut);
const [x3,y3] = p(a2, rIn);
const [x4,y4] = p(a1, rIn);
return `M${x1} ${y1} A${rOut} ${rOut} 0 0 1 ${x2} ${y2} L${x3} ${y3} A${rIn} ${rIn} 0 0 0 ${x4} ${y4} Z`;
};
return (
{/* Outer black bezel of the dartboard itself */}
{/* number band — matte black */}
{/* Segments */}
{NUMBERS.map((n, i) => {
const a1 = (-99 + i*18) * Math.PI/180;
const a2 = (-81 + i*18) * Math.PI/180;
const isLight = i % 2 === 1;
const baseFill = isLight ? '#e9d8a8' : '#0d0d0d';
return (
{/* outer (single, between triple and double) */}
{/* triple ring */}
{/* inner single */}
{/* double ring */}
);
})}
{/* spider wires */}
{Array.from({length:20}).map((_,i)=>{
const a = (-99 + i*18) * Math.PI/180;
return
})}
{/* Bull */}
{/* Numbers */}
{NUMBERS.map((n,i)=>{
const a = (-90 + i*18) * Math.PI/180;
const x = cx + Math.cos(a)*rNum;
const y = cy + Math.sin(a)*rNum;
return {n};
})}
{/* darts */}
{showDarts && (
)}
);
};
const Dart = ({x,y,angle}) => (
);
// Dartboard + ring with cameras. Reusable across hero + step views.
const BoardWithRing = ({size=720, glow=1, showCameras=true, highlight, showDarts=false, showLabels=true}) => {
const cx = size/2, cy = size/2;
// Ring proportions per photo: outer ring ~ 0.94*size radius, inner aperture ~ 0.50*size radius
const Rout = size * 0.47; // outer black hoop edge
const Rband = size * 0.435; // inside of outer hoop (start of frosted panel)
const Rinner= size * 0.34; // inner aperture (where dartboard sits)
const Rmount= size * 0.455; // where camera mounts attach (on outer hoop)
// 3 camera mount positions per the actual product photo:
// clock 12 (top), clock 6 (bottom), clock 7 (lower-left).
// Clock-to-degree mapping: 12 → -90, 6 → 90, 7 → 120.
const mounts = [
{a: -90, label:'CAM 01'}, // 12 o'clock
{a: 90, label:'CAM 02'}, // 6 o'clock
{a: 120, label:'CAM 03'}, // 7 o'clock
];
return (
);
};
// HERO: real product photo treated to match the dark theme
const HeroVisual = () => (
{/* purple ambient halo behind the product */}
{/* soft white LED bloom */}
{step === 0 &&
}
{step === 1 &&
}
{step === 2 &&
}
{step === 3 &&
}
{step === 4 &&
}
);
// ── Flat-screen monitor illustration ──────────────────────────────────────────
const MonitorSVG = () => (
);
// ── Mock: hero ring connected to a Dell OptiPlex Micro (animated USB packets) ──
const ConnectPCMock = () => (
{/* Ring product on the left, smaller */}
{/* Monitor top-right */}
{/* OptiPlex Micro in the bottom-right */}
{/* SVG overlay: USB cables (ring→PC) + HDMI cable (monitor→PC) */}
{/* Status chips */}
USB 3.0 · LINKED
3× CAM · 1× LED PWR
{/* Ring image — slightly inset to make room for accessories */}
{/* Allen key — bottom left */}
{/* Manual — bottom right */}
{/* Label chip */}
ASSEMBLE + LED
{/* Wall surface */}
{/* Top mounting bracket */}
{/* Ring mounted centre */}
{/* Side wall anchors */}
{[{left:'6%'}, {right:'6%'}].map((pos,i) => (
))}
{/* Spirit level indicator */}
LEVEL
{/* Status chip */}
MOUNTED · SECURED
{/* window chrome */}
{/* body */}
Sign in to your account
{/* email field */}
EMAIL
you@dartcraft.com.au
{/* password field */}
{/* sign in button */}
Sign in & link board
{/* board pairing chip */}
↔
BOARD ID
DC-7F2A · paired
✓
{/* Left: live calibrated board feed */}
{/* Calibration crosshair */}
{/* status chips */}
LIVE · 60 FPS
CAL · OK
CAM 01 · CAM 02 · CAM 03
{/* Right: scoreboard panel */}
{/* Player A — active */}
{/* Player B */}
{/* Last throw */}
LAST
T20 · 20 · 5