// cop-elements.jsx — visual building blocks for the COP explainer video.
// Depends on globals from video-shared.jsx: W, H, VC, lerp, smooth, ramp, fadeWindow.
// ── Outdoor air-to-water heat pump unit ────────────────────────────────────
// Stylised: rounded box, fan with rotating blades, top louvers, brand dot.
function HeatPump({ x, y, size = 200, opacity = 1, spinning = true, label = true }) {
const t = useTime();
const rot = spinning ? (t * 90) % 360 : 0;
const w = size, h = size * 0.84;
return (
);
}
// ── Static-position house with optional thermostat readout ────────────────
function CopHouse({ x, y, size = 280, drawT = 1, opacity = 1, comfort = true, indoorTemp = '21°' }) {
return (
);
}
// ── Weather tile (sun / cloud / etc) ───────────────────────────────────────
function Weather({ x, y, kind = 'sun', size = 80, opacity = 1, value }) {
return (
{value && (
{value}
)}
);
}
// ── Thermostat dial ───────────────────────────────────────────────────────
function Thermostat({ x, y, size = 160, opacity = 1, value = 21 }) {
return (
);
}
// ── Vertical flow temperature gauge (thermometer-ish) ─────────────────────
function FlowGauge({ x, y, height = 460, value, fromValue, toValue, opacity = 1, label = 'FREMLØB' }) {
// value: current temperature (°C). Range maps 30..60 °C to bottom..top of the tube.
const min = 28, max = 62;
const pct = (v) => Math.max(0, Math.min(1, (v - min) / (max - min)));
const tubeH = height - 110;
const fillH = tubeH * pct(value);
// colour interpolates blue → copper as temp rises
const blend = pct(value);
const fillColor = `oklch(0.66 0.13 ${lerp(220, 40, blend)})`;
return (
{label}
{value.toFixed(0)}°C
{fromValue != null && toValue != null && value !== fromValue && (
{fromValue}° → {toValue}°
)}
);
}
// ── Generic plot area (axes, grid, helper for curves) ─────────────────────
function PlotFrame({ x, y, w, h, opacity = 1, children, xLabel, yLeftLabel, yRightLabel, xTicks = [] }) {
return (
{yLeftLabel && (
{yLeftLabel}
)}
{yRightLabel && (
{yRightLabel}
)}
{xLabel && (
{xLabel}
)}
);
}
// Build a path string from points array
function buildPath(points) {
if (!points.length) return '';
return points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0]} ${p[1]}`).join(' ');
}
// ── Power consumption graph: spiky vs smooth comparison ───────────────────
// Conventional: many cycles, each ~5 min on (sharp startup → run plateau → drop).
// VikingHeat: few cycles, each ~30-45 min on (smooth ramp up → plateau → ramp down).
// drawT 0..1 reveals from left to right.
function PowerGraph({ x, y, w, h, drawT = 1, opacity = 1, variant = 'spiky' }) {
const N = 360;
// Window represents ~6 hours of operation (360 minutes), 1 sample per minute.
// Conventional cycle: 30 min period, 5 min on (with startup spike), 25 min off.
const conv = (min) => {
const period = 30;
const on = 5;
const phase = min % period;
if (phase >= on) return 0.04; // off (small standby)
// Within the 5-min on-window:
// 0..0.5 min: steep startup spike from 0 → 1.0
// 0.5..1.0 min: drop from 1.0 → 0.55
// 1.0..4.5 min: stay at ~0.55 with tiny modulation
// 4.5..5.0 min: drop from 0.55 → 0
if (phase < 0.5) return phase / 0.5;
if (phase < 1.0) return 1.0 - (phase - 0.5) / 0.5 * 0.45;
if (phase < 4.5) return 0.55 + 0.03 * Math.sin(phase * 4);
/* 4.5..5.0 */ return 0.55 - (phase - 4.5) / 0.5 * 0.55;
};
// VikingHeat cycle: ~80 min period, ~38 min on (smooth ramp), ~42 min off.
const vh = (min) => {
// 4 cycles staggered with slightly varied on-times (35..45 min)
const cycles = [
{ start: 12, end: 50 }, // 38 min on
{ start: 110, end: 152 }, // 42 min on
{ start: 200, end: 245 }, // 45 min on
{ start: 295, end: 330 }, // 35 min on
];
const baseline = 0.06;
for (const c of cycles) {
if (min < c.start || min > c.end) continue;
const dur = c.end - c.start;
const phase = min - c.start;
const ramp = 4; // minutes for ramp up / down
const plateau = 0.50;
let v;
if (phase < ramp) v = (phase / ramp) * plateau;
else if (phase > dur - ramp) v = ((dur - phase) / ramp) * plateau;
else v = plateau + 0.025 * Math.sin(phase * 0.18);
return Math.max(baseline, v);
}
return baseline;
};
const series = [];
for (let i = 0; i < N; i++) {
const min = (i / (N - 1)) * 360;
const px = (i / (N - 1)) * w;
const v = variant === 'smooth' ? vh(min) : conv(min);
series.push([px, h - v * h * 0.92]);
}
const cut = Math.max(2, Math.floor(N * drawT));
const draw = series.slice(0, cut);
const stroke = variant === 'smooth' ? VC.copper : VC.muted;
const strokeW = variant === 'smooth' ? 3 : 2;
const fillCol = variant === 'smooth' ? VC.copper : VC.muted;
const fillOp = variant === 'smooth' ? 0.12 : 0.10;
return (
);
}
Object.assign(window, {
HeatPump, CopHouse, Weather, Thermostat,
FlowGauge, PlotFrame, buildPath, PowerGraph,
});