RX Loading Screen V1 Configuration

V1 is configured in script/config.js. It intentionally keeps the page simple: edit the values already present in this file, then restart ripex-loadingscreen to load the new version for every player.

Keep paths relative to the resource root. For example, use song/track.mp3, not a Windows file path or a web URL.

Display scale

zoom.zoom changes the scale of the complete interface. Leave it at 1 for the original size; lower values create more space around the layout.

zoom.zoom = 0.9;

Avoid values far below 0.8, as text and staff cards can become difficult to read.

Brand and background

The logo and background video are local files. Replace the files themselves rather than inserting a remote source.

logo.setAttribute('src', 'logo/logo.png');
// Replace logo/test.mp4 with your own licensed local background video.

Use an H.264 MP4 for the background and keep its file size sensible so players do not wait on a large download before joining.

Welcome copy

Uncomment the two lines below to replace the default welcome label and message.

welcomeSpan.textContent = 'Welcome';
welcomeMessage.textContent = 'Get ready for an amazing experience!';

Keep both lines short. The welcome area is designed for one label and one concise sentence.

Staff cards

Each visible staff card has a name, role, avatar, role colour, and subtle glow. Update the four supplied entries directly.

FirstStaffName.textContent = 'Ripex';
FirstStaffRole.textContent = 'Owner';
FirstStaffImg.setAttribute('src', 'img/person1.png');
FirstStaffRole.style.background = 'linear-gradient(135deg, #ff4757, #ff6b81)';
FirstStaffRole.style.boxShadow = '0 2px 10px rgba(255,71,87,0.3)';

Use the same pattern for Second, Third, and Fourth. Store avatar files in img/ and update their relative paths. Keep the background and shadow colours in the same family for a coherent badge.

Adding more staff

The configuration includes commented card templates. Remove the comment markers around one template, update the image, name, role, and tooltip, then append it to staff-grid as shown in the template.

Add staff sparingly. More cards can make the grid scroll, so the first four should be the people you want players to see immediately.

News and server information

The updates and information panels accept normal text or HTML through innerHTML. Use this only for copy you control.

updatestitle.textContent = 'UPDATES / NEWS';
lastupdates.textContent = 'LAST UPDATED: 2026-08-20';

p.innerHTML = `<p><span class="highlight-text">New season</span> is now live.</p>`;
i.innerHTML = `<p>Read the <span class="highlight-text">rules</span> before joining.</p>`;

Use <span class="highlight-text">...</span> only for the few words you want highlighted. Avoid pasting untrusted player input into innerHTML.

Social links

The supplied commented example shows how to append another social button. Set the destination in href, choose a Font Awesome icon class, then append the new element to the social container.

a.innerHTML = `<a href="https://discord.gg/your-server" target="_blank" class="social-button discord" data-tooltip="Discord">
  <i class="fa-brands fa-discord"></i>
</a>`;

social.appendChild(a);

Social links only open normal browser destinations. They do not provide media playback.

Local music playlist

Put each audio file in song/, then declare it in window.defaultSongs. V1 accepts local mp3, ogg, wav, and m4a files.

window.defaultSongs = [
  { file: 'song/night-drive.mp3', name: 'Night Drive', thumbnail: 'logo/logo.png' },
  { file: 'song/arrival.ogg', name: 'Arrival', thumbnail: 'img/cover.png' }
];

window.updateDefaultSongs(window.defaultSongs);

The first configured track starts automatically when the interface loads. Players can use Space to play or pause, Arrow Up and Arrow Down for volume, and Arrow Left / Arrow Right to change track.

Only include audio you own or are licensed to redistribute. Remote audio URLs, YouTube embeds, and streaming playlists are blocked by design.