waves_function.js

        function drawWaves(now) {
            if (!layers.waves || !waveData.length) return;

            waveData.forEach(wave => {
                const dist = d3.geoDistance([wave.lon, wave.lat], projection.rotate().map(d => -d));
                if (dist > Math.PI / 2) return;

                const center = projection([wave.lon, wave.lat]);
                if (!center) return;

                const baseRadius = 3;
                const maxRadius = 15;
                const radius = baseRadius + (wave.height / 10) * (maxRadius - baseRadius);

                const intensity = Math.min(wave.height / 10, 1);
                const blue = Math.floor(100 + intensity * 155);
                const color = `rgba(0, ${Math.floor(blue * 0.6)}, ${blue}, 0.6)`;

                const pulsePhase = (now / 2000) % 1;

                ctx.save();

                for (let i = 0; i < 3; i++) {
                    const phaseOffset = i * 0.33;
                    const currentPhase = (pulsePhase + phaseOffset) % 1;
                    const currentRadius = radius * (0.5 + currentPhase * 0.5);
                    const alpha = 0.6 * (1 - currentPhase);

                    ctx.beginPath();
                    ctx.arc(center[0], center[1], currentRadius, 0, Math.PI * 2);
                    ctx.strokeStyle = color.replace(/[\d.]+\)$/, `${alpha})`);
                    ctx.lineWidth = 2;
                    ctx.stroke();
                }

                ctx.beginPath();
                ctx.arc(center[0], center[1], 2, 0, Math.PI * 2);
                ctx.fillStyle = color;
                ctx.fill();

                if (wave.direction) {
                    const dirRad = (wave.direction - 90) * Math.PI / 180;
                    const arrowLen = radius * 0.6;

                    ctx.beginPath();
                    ctx.moveTo(center[0], center[1]);
                    ctx.lineTo(
                        center[0] + Math.cos(dirRad) * arrowLen,
                        center[1] + Math.sin(dirRad) * arrowLen
                    );
                    ctx.strokeStyle = color.replace(/[\d.]+\)$/, '0.4)');
                    ctx.lineWidth = 1;
                    ctx.stroke();

                    const headSize = 3;
                    const headAngle = 30 * Math.PI / 180;
                    const tipX = center[0] + Math.cos(dirRad) * arrowLen;
                    const tipY = center[1] + Math.sin(dirRad) * arrowLen;

                    ctx.beginPath();
                    ctx.moveTo(tipX, tipY);
                    ctx.lineTo(
                        tipX - Math.cos(dirRad - headAngle) * headSize,
                        tipY - Math.sin(dirRad - headAngle) * headSize
                    );
                    ctx.moveTo(tipX, tipY);
                    ctx.lineTo(
                        tipX - Math.cos(dirRad + headAngle) * headSize,
                        tipY - Math.sin(dirRad + headAngle) * headSize
                    );
                    ctx.stroke();
                }

                ctx.restore();

                hoverTargets.push({
                    id: `wave-${wave.name}`,
                    type: 'wave',
                    x: center[0],
                    y: center[1],
                    radius: radius,
                    data: wave
                });
            });
        }