script.js

AOS.init({
  duration: 800,
  once: false,
  mirror: true,
});

particlesJS.load('particles-js', 'particles.json', function () {
  console.log('Particles.js loaded!');
});

const music = document.getElementById('background-music');
const volumeControl = document.getElementById('volume-control');
const pauseButton = document.getElementById('pause-button');
const continueButton = document.getElementById('continue-button');

const savedTime = parseFloat(sessionStorage.getItem('musicTime')) || 0;
const savedVolume = parseFloat(sessionStorage.getItem('musicVolume')) || 0.5;
const savedState = sessionStorage.getItem('musicState') === 'playing';

music.volume = savedVolume;
music.currentTime = savedTime;

if (savedState) {
  music.play();
  pauseButton.classList.remove('hidden');
  continueButton.classList.add('hidden');
} else {
  pauseButton.classList.add('hidden');
  continueButton.classList.remove('hidden');
}

volumeControl.value = savedVolume;
volumeControl.addEventListener('input', () => {
  music.volume = volumeControl.value;
  sessionStorage.setItem('musicVolume', music.volume);
});

pauseButton.addEventListener('click', () => {
  music.pause();
  pauseButton.classList.add('hidden');
  continueButton.classList.remove('hidden');
  sessionStorage.setItem('musicState', 'paused');
});

continueButton.addEventListener('click', () => {
  music.play();
  continueButton.classList.add('hidden');
  pauseButton.classList.remove('hidden');
  sessionStorage.setItem('musicState', 'playing');
});

window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('musicTime', music.currentTime);
  sessionStorage.setItem('musicState', music.paused ? 'paused' : 'playing');
});

document.addEventListener('DOMContentLoaded', () => {
  const playMusic = () => {
    music.play().catch(() => {
      document.addEventListener('click', () => {
        music.play();
      }, { once: true });
    });
  };

  if (savedState) {
    playMusic();
  }
});

const discordAvatar = document.getElementById('discord-avatar');
const statusIndicator = document.getElementById('status-indicator');
const activityContainer = document.getElementById('activity-container');

const discordUserId = '905428271733301268';

const socket = new WebSocket('wss://api.lanyard.rest/socket');

socket.onopen = () => {
  socket.send(JSON.stringify({
    op: 2,
    d: {
      subscribe_to_id: discordUserId,
    },
  }));
};

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);

  if (data.t === 'INIT_STATE' || data.t === 'PRESENCE_UPDATE') {
    const status = data.d.discord_status;
    const avatar = `https://cdn.discordapp.com/avatars/${discordUserId}/${data.d.discord_user.avatar}.png?size=256`;
    const activities = data.d.activities;

    discordAvatar.src = avatar;

    switch (status) {
      case 'online':
        statusIndicator.className = 'absolute bottom-2 right-2 w-6 h-6 rounded-full border-4 border-dark bg-green-500';
        break;
      case 'idle':
        statusIndicator.className = 'absolute bottom-2 right-2 w-6 h-6 rounded-full border-4 border-dark bg-yellow-500';
        break;
      case 'dnd':
        statusIndicator.className = 'absolute bottom-2 right-2 w-6 h-6 rounded-full border-4 border-dark bg-red-500';
        break;
      case 'offline':
        statusIndicator.className = 'absolute bottom-2 right-2 w-6 h-6 rounded-full border-4 border-dark bg-gray-500';
        break;
      default:
        statusIndicator.className = 'absolute bottom-2 right-2 w-6 h-6 rounded-full border-4 border-dark bg-gray-500';
    }

    activityContainer.innerHTML = '';

    if (activities && activities.length > 0) {
      activities.forEach(activity => {
        const activityElement = document.createElement('div');
        activityElement.className = 'bg-dark p-4 rounded-lg shadow-lg mb-4';

        if (activity.type === 0) {
          activityElement.innerHTML = `
            <h3 class="text-xl font-bold mb-2 text-white">Playing ${activity.name}</h3>
            <p class="text-gray-300">${activity.details || ''}</p>
            <p class="text-gray-300">${activity.state || ''}</p>
          `;
        } else if (activity.type === 2 && activity.name === 'Spotify') {
          activityElement.innerHTML = `
            <h3 class="text-xl font-bold mb-2 text-white">Listening to ${activity.details}</h3>
            <p class="text-gray-300">by ${activity.state}</p>
            <p class="text-gray-300">on Spotify</p>
          `;
        }

        activityContainer.appendChild(activityElement);
      });
    } else {
      activityContainer.innerHTML = '<p class="text-gray-300">No activities</p>';
    }
  }
};

socket.onclose = () => {
  statusIndicator.className = 'absolute bottom-2 right-2 w-6 h-6 rounded-full border-4 border-dark bg-gray-500';
  activityContainer.innerHTML = '<p class="text-gray-300">Disconnected</p>';
};

socket.onerror = () => {
  statusIndicator.className = 'absolute bottom-2 right-2 w-6 h-6 rounded-full border-4 border-dark bg-gray-500';
  activityContainer.innerHTML = '<p class="text-gray-300">Error fetching status</p>';
};

const statusElement = document.getElementById("status");

function updateStatus(status) {
  statusElement.textContent = status;
  statusElement.classList.remove("online", "offline", "dnd");
  statusElement.classList.add(status.toLowerCase());
}

updateStatus("Online");

document.getElementById("social-button").addEventListener("click", function (event) {
  event.preventDefault();
  const socialSection = document.getElementById("social-media");
  socialSection.scrollIntoView({ behavior: "smooth" });
});

window.addEventListener("load", function () {
  const doorAnimation = document.getElementById("door-animation");

  setTimeout(function () {
    doorAnimation.style.display = "none";
  }, 3000);
});