script.js

const CONFIG = {
  images: 12,
  maxPlayers: 150,
  title: 'Pure RP Title',
  description: 'Purescripts Advanced roleplay',
  discord: 'https://discord.gg/NT85wSdJy6',
  logo: 'https://media.discordapp.net/attachments/1136047160937422928/1443543289654677584/image.png?ex=692973f3&is=69282273&hm=59b23431775c0cbbf5a710943ba31a205154d13c69af2ad42223b3928cb2b665&=&format=webp&quality=lossless',
};

const imageState = {
  currentCycle: [],
  currentIndex: 0,
};

const discordClicked = () => {
  window.invokeNative('openUrl', CONFIG.discord);
};

const getImage = () => {
  if (imageState.currentIndex >= imageState.currentCycle.length) {
    imageState.currentCycle = Array.from(
      { length: CONFIG.images },
      (_, i) => i + 1,
    );
    for (let i = imageState.currentCycle.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [imageState.currentCycle[i], imageState.currentCycle[j]] = [
        imageState.currentCycle[j],
        imageState.currentCycle[i],
      ];
    }
    imageState.currentIndex = 0;
  }

  const number = imageState.currentCycle[imageState.currentIndex++];
  const imgSrc = `./images/${number}.png`;
  return imgSrc;
};

const updateImage = () => {
  const imgElement = document.getElementById('randomImage');
  const overlay = document.getElementById('imageOverlay');
  overlay.style.opacity = 0.25;
  setTimeout(() => {
    imgElement.src = getImage();
    overlay.style.opacity = 1;
  }, 500);
};

const tips = [
  'Got a new phone sim? Right click on your phone in the phone slot to place a SIM.',
  'Third-eye some dumpsters, you might find something useful.',
  'Need a bite to eat? Burger Shot has you covered.',
  'Police Officer do something wrong? File a complaint at the front desk.',
  'Need to grab something from your pockets? Press Tab.',
  'You can use /me to enhance your roleplay interactions.',
  'Don’t rush — let the story unfold. Quality RP takes time.',
  'Civilian jobs are a great way to earn money and build connections.',
  'Not sure what to do? Post on Twooter and learn from others in city.',
  'Your Apartment is your space, use the tablet to decorate it.',
  'Most jobs require the right tools, Mega Mall usually has you covered.',
  'Need some major cosmetic changes? Head to the plastic surgeon at the Hospital.',
  'Armor requires plates, be sure to stock up when you need it.',
];

const newTip = () => {
  const help = document.getElementById('helpText');
  const outer = document.getElementById('help');
  const num = Math.floor(Math.random() * tips.length);
  const randomTip = tips[num];
  // help.innerText(randomTip);
  help.innerText = randomTip;
  // help
  outer.className = 'popupBg tip slideRightHome';

  setTimeout(() => {
    outer.className = 'popupBg tip slideFromRight';
  }, 1500);
};

window.onload = () => {
  newTip();
  setInterval(updateImage, 5000);
  setInterval(newTip, 5000);
  document.getElementById('title').innerText = CONFIG.title;
  document.getElementById('description').innerText = CONFIG.description;
  document.getElementById('serverLogo').src = CONFIG.logo;
  document.getElementById('maxPlayers').innerText = CONFIG.maxPlayers;
};

let states = {
  INIT_BEFORE_MAP_LOADED: {
    count: 0,
    done: 0,
  },
  MAP: {
    count: 0,
    done: 0,
  },
  INIT_AFTER_MAP_LOADED: {
    count: 0,
    done: 0,
  },
  INIT_SESSION: {
    count: 0,
    done: 0,
  },
};

const updateGlobalProgressText = () => {
  let totalDone = 0;
  let totalCount = 0;

  for (let type in states) {
    totalDone += states[type].done;
    totalCount += states[type].count;
  }

  document.getElementById('progressStuff').innerText =
    `${totalDone}/${totalCount}`;
};

const handlers = {
  startInitFunctionOrder: (data) => {
    // Reconnecting
    if (
      data.type === 'INIT_SESSION' &&
      states['INIT_BEFORE_MAP_LOADED'].count < 1
    ) {
      states['INIT_BEFORE_MAP_LOADED'].count = 1;
      states['INIT_BEFORE_MAP_LOADED'].done = 1;
      states['MAP'].count = 1;
      states['MAP'].done = 1;
      states['INIT_AFTER_MAP_LOADED'].count = 1;
      states['INIT_AFTER_MAP_LOADED'].done = 1;
    }

    states[data.type].count += data.count;
    updateGlobalProgressText();
  },

  initFunctionInvoked: (data) => {
    states[data.type].done++;
    updateGlobalProgressText();
  },

  startDataFileEntries: (data) => {
    states['MAP'].count = data.count;
    updateGlobalProgressText();
  },

  performMapLoadFunction: () => {
    states['MAP'].done++;
    updateGlobalProgressText();
  },
};

let last = 0;

window.addEventListener('message', (e) =>
  (handlers[e.data.eventName] || (() => {}))(e.data),
);

window.addEventListener('DOMContentLoaded', () => {
  document.getElementById('currentPlayers').innerText =
    window.nuiHandoverData.players;
});

setInterval(() => {
  let progress = 0;
  for (let type in states) {
    if (states[type].done < 1 || states[type].count < 1) continue;
    progress += (states[type].done / states[type].count) * 100;
  }

  let total = Math.min(Math.round(progress / Object.keys(states).length), 100);
  if (total < last) total = last;
  last = total;

  //   document.getElementById('progress-bar-value').innerHTML = total;
  document.getElementById('progInner').style.width = total + '%';
}, 100);