feat: Implement comprehensive repository improvements
- Set up ESLint and Prettier for code quality - Split large script.js into modular architecture (DOM, animations, effects, easter-eggs, sound, interactions) - Organize assets into proper directory structure (assets/css, assets/js/modules, assets/images) - Add semantic HTML5 landmarks (header, main, nav, footer) - Implement ARIA labels and keyboard navigation for accessibility - Set up Vite build system with minification and optimization - Add CSS custom properties for design tokens - Create sitemap.xml and robots.txt for SEO - Add MIT LICENSE - Expand README with comprehensive documentation - Set up GitHub Actions CI/CD workflow - Optimize build output: ~59KB total (30KB image + 13KB CSS + 16KB JS gzipped) Co-authored-by: ZaneThePython <102631678+ZaneThePython@users.noreply.github.com>
This commit is contained in:
54
assets/js/modules/sound.js
Normal file
54
assets/js/modules/sound.js
Normal file
@@ -0,0 +1,54 @@
|
||||
// Sound effects
|
||||
import { DOM } from './dom.js';
|
||||
|
||||
// Play sound effect
|
||||
export function playSound(type) {
|
||||
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
|
||||
if (type === 'click') {
|
||||
const oscillator = audioContext.createOscillator();
|
||||
const gainNode = audioContext.createGain();
|
||||
|
||||
oscillator.connect(gainNode);
|
||||
gainNode.connect(audioContext.destination);
|
||||
|
||||
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
|
||||
oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.1);
|
||||
|
||||
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
|
||||
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
|
||||
|
||||
oscillator.start(audioContext.currentTime);
|
||||
oscillator.stop(audioContext.currentTime + 0.1);
|
||||
} else if (type === 'hover') {
|
||||
const oscillator = audioContext.createOscillator();
|
||||
const gainNode = audioContext.createGain();
|
||||
|
||||
oscillator.connect(gainNode);
|
||||
gainNode.connect(audioContext.destination);
|
||||
|
||||
oscillator.frequency.setValueAtTime(600, audioContext.currentTime);
|
||||
oscillator.frequency.exponentialRampToValueAtTime(800, audioContext.currentTime + 0.05);
|
||||
|
||||
gainNode.gain.setValueAtTime(0.05, audioContext.currentTime);
|
||||
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.05);
|
||||
|
||||
oscillator.start(audioContext.currentTime);
|
||||
oscillator.stop(audioContext.currentTime + 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
// Add sound effects to buttons
|
||||
export function addSoundEffects() {
|
||||
const buttons = DOM.getAll('.nav-button');
|
||||
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener('click', function () {
|
||||
playSound('click');
|
||||
});
|
||||
|
||||
button.addEventListener('mouseenter', function () {
|
||||
playSound('hover');
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user