Refactor SubpageRain to use script tag for Alpine data, fixing build error

This commit is contained in:
Felix Brabetz
2026-05-16 05:37:41 +02:00
parent adc6704923
commit eaa030d7c5
+10 -6
View File
@@ -1,9 +1,9 @@
---
// src/components/SubpageRain.astro
---
<!-- Subpage: Rain Detail -->
<div x-show="currentPage === 'page-rain'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950 relative overflow-hidden"
x-data="{
<script is:inline>
window.rainData = function() {
return {
rainIntensity: 50,
wind: 0,
lofiFilter: 800,
@@ -23,7 +23,6 @@
try {
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// Erzeuge weißes Rauschen
let bufferSize = 2 * this.audioCtx.sampleRate;
let noiseBuffer = this.audioCtx.createBuffer(1, bufferSize, this.audioCtx.sampleRate);
let output = noiseBuffer.getChannelData(0);
@@ -35,7 +34,6 @@
this.noiseNode.buffer = noiseBuffer;
this.noiseNode.loop = true;
// Tiefpassfilter für den "Dumpf-Lofi"-Effekt
this.filterNode = this.audioCtx.createBiquadFilter();
this.filterNode.type = 'lowpass';
this.filterNode.frequency.setValueAtTime(this.lofiFilter, this.audioCtx.currentTime);
@@ -61,7 +59,13 @@
this.filterNode.frequency.linearRampToValueAtTime(this.lofiFilter, this.audioCtx.currentTime + 0.2);
}
}
}"
};
}
</script>
<!-- Subpage: Rain Detail -->
<div x-show="currentPage === 'page-rain'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950 relative overflow-hidden"
x-data="window.rainData()"
x-init="generateDrops(rainIntensity); $watch('rainIntensity', value => { generateDrops(value); updateAudio() }); $watch('lofiFilter', value => updateAudio()); $watch('currentPage', val => val === 'page-rain' && initAudio())">
<!-- Rain Container (Full Screen on this page) -->