+
+
+
+
TRACK 1
00:00 / 00:00
@@ -1602,6 +1836,186 @@
// SOUND EFFECTS MODULE - END
// ========================================
+ // ========================================
+ // DISPLAY GLITCH MODULE - START
+ // Random visual glitches for dystopian CRT effect
+ // ========================================
+ const DisplayGlitch = {
+ display: null,
+ vhsTracking: null,
+ isEnabled: true,
+
+ // Timing ranges (in milliseconds)
+ RGB_GLITCH_MIN_INTERVAL: 5000, // 5 seconds
+ RGB_GLITCH_MAX_INTERVAL: 15000, // 15 seconds
+ RGB_GLITCH_DURATION_MIN: 80, // 80ms
+ RGB_GLITCH_DURATION_MAX: 250, // 250ms
+
+ BLACKOUT_MIN_INTERVAL: 30000, // 30 seconds
+ BLACKOUT_MAX_INTERVAL: 90000, // 90 seconds
+ BLACKOUT_DURATION: 60, // 60ms per flicker
+
+ VHS_MIN_INTERVAL: 10000, // 10 seconds
+ VHS_MAX_INTERVAL: 30000, // 30 seconds
+ VHS_DURATION: 400, // 400ms
+
+ /**
+ * Initialize the glitch module
+ * Gets DOM references and starts random glitch intervals
+ */
+ init() {
+ this.display = document.getElementById('display');
+ this.vhsTracking = document.getElementById('vhsTracking');
+
+ if (!this.display || !this.vhsTracking) {
+ console.warn('DisplayGlitch: Could not find display elements');
+ return;
+ }
+
+ // Start the random glitch schedulers
+ this.scheduleNext('rgb');
+ this.scheduleNext('blackout');
+ this.scheduleNext('vhs');
+
+ console.log('DisplayGlitch: Initialized');
+ },
+
+ /**
+ * Get a random value between min and max
+ */
+ randomBetween(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ },
+
+ /**
+ * Trigger RGB chromatic aberration glitch
+ * Adds class that causes RGB channel separation animation
+ */
+ triggerRgbGlitch() {
+ if (!this.isEnabled || !this.display) return;
+
+ const duration = this.randomBetween(
+ this.RGB_GLITCH_DURATION_MIN,
+ this.RGB_GLITCH_DURATION_MAX
+ );
+
+ this.display.classList.add('glitch-rgb');
+
+ setTimeout(() => {
+ this.display.classList.remove('glitch-rgb');
+ }, duration);
+ },
+
+ /**
+ * Trigger intermittent display failure (blackout)
+ * Creates 1-3 quick flickers for realistic CRT failure
+ */
+ triggerBlackout() {
+ if (!this.isEnabled || !this.display) return;
+
+ // Random number of flickers (1-3)
+ const flickerCount = this.randomBetween(1, 3);
+ let currentFlicker = 0;
+
+ const doFlicker = () => {
+ this.display.classList.add('blackout');
+
+ setTimeout(() => {
+ this.display.classList.remove('blackout');
+ currentFlicker++;
+
+ // If more flickers needed, do them after a short gap
+ if (currentFlicker < flickerCount) {
+ setTimeout(doFlicker, this.randomBetween(30, 80));
+ }
+ }, this.BLACKOUT_DURATION);
+ };
+
+ doFlicker();
+ },
+
+ /**
+ * Trigger VHS tracking lines
+ * Randomly shows vertical (scrolling up) or horizontal (scrolling left) tracking lines
+ */
+ triggerVhsTracking() {
+ if (!this.isEnabled || !this.vhsTracking) return;
+
+ // Remove all classes to reset
+ this.vhsTracking.classList.remove('active', 'vertical', 'horizontal');
+
+ // Force reflow to restart animation
+ void this.vhsTracking.offsetWidth;
+
+ // Randomly choose direction (50/50 chance)
+ const direction = Math.random() < 0.5 ? 'vertical' : 'horizontal';
+
+ this.vhsTracking.classList.add(direction);
+ this.vhsTracking.classList.add('active');
+
+ // Remove classes after animation completes
+ setTimeout(() => {
+ this.vhsTracking.classList.remove('active', 'vertical', 'horizontal');
+
+ // 30% chance of a second burst shortly after
+ if (Math.random() < 0.3) {
+ setTimeout(() => {
+ this.triggerVhsTracking();
+ }, this.randomBetween(100, 300));
+ }
+ }, this.VHS_DURATION);
+ },
+
+ /**
+ * Schedule the next occurrence of a glitch type
+ * @param {string} type - 'rgb', 'blackout', or 'vhs'
+ */
+ scheduleNext(type) {
+ let minInterval, maxInterval, triggerFn;
+
+ switch (type) {
+ case 'rgb':
+ minInterval = this.RGB_GLITCH_MIN_INTERVAL;
+ maxInterval = this.RGB_GLITCH_MAX_INTERVAL;
+ triggerFn = () => this.triggerRgbGlitch();
+ break;
+ case 'blackout':
+ minInterval = this.BLACKOUT_MIN_INTERVAL;
+ maxInterval = this.BLACKOUT_MAX_INTERVAL;
+ triggerFn = () => this.triggerBlackout();
+ break;
+ case 'vhs':
+ minInterval = this.VHS_MIN_INTERVAL;
+ maxInterval = this.VHS_MAX_INTERVAL;
+ triggerFn = () => this.triggerVhsTracking();
+ break;
+ default:
+ return;
+ }
+
+ const delay = this.randomBetween(minInterval, maxInterval);
+
+ setTimeout(() => {
+ triggerFn();
+ this.scheduleNext(type); // Schedule next occurrence
+ }, delay);
+ },
+
+ /**
+ * Enable or disable glitch effects
+ * @param {boolean} enabled
+ */
+ setEnabled(enabled) {
+ this.isEnabled = enabled;
+ }
+ };
+
+ // Initialize glitch effects after a short delay
+ setTimeout(() => DisplayGlitch.init(), 1000);
+ // ========================================
+ // DISPLAY GLITCH MODULE - END
+ // ========================================
+
// ========================================
// BUTTON CLICK SOUNDS - Add to all buttons
// Uses mousedown for immediate tactile feedback