Refactor SubpageRain to use script tag for Alpine data, fixing build error
This commit is contained in:
@@ -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) -->
|
||||
|
||||
Reference in New Issue
Block a user