/* global React */ /* ============================================================ HandDrawnScene — animated ink sketch of Smålandshamn port Richer skyline + 3 turbines + 2 PV arrays + BESS rack cluster + multiple cars + ship berthing with shore-power cable ============================================================ */ const HandDrawnScene = () => { return ( {/* ---------- CLOUDS ---------- */} {/* ---------- SUN ---------- */} {Array.from({ length: 12 }).map((_, i) => { const a = (i * 30) * Math.PI / 180; const r1 = 62, r2 = i % 2 === 0 ? 92 : 82; const x1 = Math.cos(a) * r1, y1 = Math.sin(a) * r1; const x2 = Math.cos(a) * r2, y2 = Math.sin(a) * r2; return ; })} {/* ---------- PLANE ---------- */} {/* ---------- SKYLINE: 5 buildings ---------- */} {/* Bldg A — tallest */} {[0,1,2,3,4,5,6].map(r => [0,1,2].map(c => ( )))} {/* Bldg B — short wide */} {[0,1,2,3,4].map(r => [0,1,2,3].map(c => ( )))} {/* rooftop PV on bldg B */} {[0,1,2,3,4].map(i => ( ))} {/* Bldg C — medium tower */} {[0,1,2,3,4,5,6,7].map(r => [0,1].map(c => ( )))} {/* Bldg D — wide low behind */} {[0,1,2,3].map(r => [0,1,2,3,4].map(c => ( )))} {/* Bldg E — slim back */} {[0,1,2,3,4,5].map(r => ( ))} {/* ---------- WIND TURBINES x3 ---------- */} {/* Turbine 1 — large, foreground right */} {[0, 120, 240].map(deg => ( ))} {/* Turbine 2 — back, medium */} {[0, 120, 240].map(deg => ( ))} {/* Turbine 3 — far back, small */} {[0, 120, 240].map(deg => ( ))} {/* ---------- SOLAR PV ARRAYS x2 ---------- */} {/* PV array 1 — large ground-mounted */} {[0,1,2,3,4,5,6,7].map(i => ( ))} {/* PV array 2 — smaller, to the right */} {[0,1,2,3,4,5].map(i => ( ))} {/* ---------- BESS RACK CLUSTER (styled after reference) ---------- */} {/* 4 rack groups in an isometric-ish layout */} {/* label removed */} {/* ---------- GROUND LINE ---------- */} {/* ---------- CARS x3 + EV CHARGER ---------- */} {/* sedan EV */} {/* hatchback */} {/* SUV darker */} {/* EV charger station */} {/* small charger indicator light */} {/* ---------- WATER / WAVES ---------- */} {Array.from({ length: 24 }).map((_, i) => ( ))} {Array.from({ length: 24 }).map((_, i) => ( ))} {/* ---------- DOCK / PIER ---------- */} {/* pier surface */} {/* pier pilings going into water */} {[0,1,2,3,4,5].map(i => ( ))} {/* bollards on pier */} {/* OPS shore-power cabinet on pier */} {/* lightning bolt */} {/* ---------- SHIP (berthed, receiving shore power from OPS) ---------- */} {/* hull */} {/* hull stripe */} {/* waterline */} {/* hull anchor port */} {/* main deck */} {/* upper deck */} {/* bridge */} {/* bridge windows */} {/* lifeboats */} {/* portholes / windows (lit when receiving power) */} {[0,1,2,3,4,5,6].map(i => ( ))} {[0,1,2,3,4].map(i => ( ))} {/* funnel */} {/* mast */} {/* flag (waving) */} {/* navigation lights */} {/* SHORE POWER CABLE — from OPS cabinet to ship power inlet */} {/* main cable droop */} {/* animated electricity flowing along cable */} {/* ship power inlet socket (glowing) */} {/* energy particles along cable */} {[0, 0.33, 0.66].map((d, i) => ( ))} {/* seagulls */} ); }; /* ---------- BESS rack group sub-component (reference-inspired) ---------- */ const BessRackGroup = ({ x, y, count = 3, scale = 1, opacity = 1 }) => { // Each rack: box with red cap + vertical vents + small lightning bolt const W = 26 * scale, H = 58 * scale, depth = 10 * scale; return ( {/* ground shadow */} {Array.from({ length: count }).map((_, i) => { const xo = i * (W * 0.78); return ( {/* side face (darker) */} {/* front box */} {/* red cap (top) */} {/* vents — vertical lines */} {Array.from({ length: 5 }).map((_, v) => ( ))} {/* lightning bolt */} {/* small feet */} ); })} ); }; /* ---------- Car sub-component ---------- */ const CarShape = ({ fill, windowFill = 'rgba(251,251,247,0.6)', bigger }) => { const s = bigger ? 1.1 : 1; return ( ); }; window.HandDrawnScene = HandDrawnScene;