fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 05:37:41 +02:00
parent adc6704923
commit eaa030d7c5
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SubpageRain.astro
+10 -6
View File
@@ -1,9 +1,9 @@
--- ---
// src/components/SubpageRain.astro // src/components/SubpageRain.astro
--- ---
<!-- Subpage: Rain Detail --> <script is:inline>
<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" window.rainData = function() {
x-data="{ return {
rainIntensity: 50, rainIntensity: 50,
wind: 0, wind: 0,
lofiFilter: 800, lofiFilter: 800,
@@ -23,7 +23,6 @@
try { try {
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)(); this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// Erzeuge weißes Rauschen
let bufferSize = 2 * this.audioCtx.sampleRate; let bufferSize = 2 * this.audioCtx.sampleRate;
let noiseBuffer = this.audioCtx.createBuffer(1, bufferSize, this.audioCtx.sampleRate); let noiseBuffer = this.audioCtx.createBuffer(1, bufferSize, this.audioCtx.sampleRate);
let output = noiseBuffer.getChannelData(0); let output = noiseBuffer.getChannelData(0);
@@ -35,7 +34,6 @@
this.noiseNode.buffer = noiseBuffer; this.noiseNode.buffer = noiseBuffer;
this.noiseNode.loop = true; this.noiseNode.loop = true;
// Tiefpassfilter für den "Dumpf-Lofi"-Effekt
this.filterNode = this.audioCtx.createBiquadFilter(); this.filterNode = this.audioCtx.createBiquadFilter();
this.filterNode.type = 'lowpass'; this.filterNode.type = 'lowpass';
this.filterNode.frequency.setValueAtTime(this.lofiFilter, this.audioCtx.currentTime); this.filterNode.frequency.setValueAtTime(this.lofiFilter, this.audioCtx.currentTime);
@@ -61,7 +59,13 @@
this.filterNode.frequency.linearRampToValueAtTime(this.lofiFilter, this.audioCtx.currentTime + 0.2); 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())"> 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) --> <!-- Rain Container (Full Screen on this page) -->