[keks] change loading screen emojis

FiveM Resource Development Discussion
1

I have gotten my loading screen to work so far, but the emojis that represent the different statuses of loading is kind of off my style, is there a way I can find them? Or assign them new emojis?

<html>
    <head>
        <link href="keks.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
		<audio id="Loading" autoplay loop >
        <source src="music/Loading.ogg" type="audio/ogg">
    </audio>
	<script>
     var vid = document.getElementById("Loading");
     vid.volume = 0.2
    </script>
        <div class="backdrop">
            <div class="top">
                <h1 title="Rules">Rules</h1>
                <h2 title="No godmode, and don't be an asshole.">No godmode, and don't be an asshole.</h2>
            </div>

            <div class="letni">
                <h2 title="Role Play... or Apocalypse, you decide.">Role Play... or Apocalypse, you decide.</h2>
                <h3></h3>
                <div class="loadbar"><div class="thingy"></div></div>
                <p>When I listen to music, I don't want to hear about flowers. I like death and destruction. -Jonathan Davis</p>
            </div>
            <div class="bottom">
                <div id="gradient">
                </div>
            </div>
        </div>

<script type="text/javascript">
// this will actually restart the loading bar a lot, making multiple loading bars is an exercise to the reader... for now.
// for a set of possible events, see https://github.com/citizenfx/cfx-client/blob/up-master/components/loading-screens-five/src/LoadingScreens.cpp
var count = 0;
var thisCount = 0;

const emoji = {
    INIT_BEFORE_MAP_LOADED: [ '🍉' ],
    INIT_AFTER_MAP_LOADED: [ '🍋', '🍊' ],
    INIT_SESSION: [ '🍐', '🍅', '🍆' ],
};

const handlers = {
    startInitFunctionOrder(data)
    {
        count = data.count;

        document.querySelector('.letni h3').innerHTML += emoji[data.type][data.order - 1] || '';
    },

    initFunctionInvoking(data)
    {
        document.querySelector('.thingy').style.left = '0%';
        document.querySelector('.thingy').style.width = ((data.idx / count) * 100) + '%';
    },

    startDataFileEntries(data)
    {
        count = data.count;

        document.querySelector('.letni h3').innerHTML += "\u{1f358}";
    },

    performMapLoadFunction(data)
    {
        ++thisCount;

        document.querySelector('.thingy').style.left = '0%';
        document.querySelector('.thingy').style.width = ((thisCount / count) * 100) + '%';
    },

    onLogLine(data)
    {
        document.querySelector('.letni p').innerHTML = data.message + "..!";
    }
};

window.addEventListener('message', function(e)
{
    (handlers[e.data.eventName] || function() {})(e.data);
});
</script>
    </body>
</html>

I think

const emoji = {
    INIT_BEFORE_MAP_LOADED: [ '🍉' ],
    INIT_AFTER_MAP_LOADED: [ '🍋', '🍊' ],
    INIT_SESSION: [ '🍐', '🍅', '🍆' ],
};

has something to do with it, but I don’t know what " ‘🍋’ " references.

2

Try opening it in a text editor that does recognize UTF-8.

1 Like
3

Ah ha! I set my Notepad ++ encoding to UTF-8 and it read it as:

const emoji = {
    INIT_BEFORE_MAP_LOADED: [ '🍉' ],
    INIT_AFTER_MAP_LOADED: [ '🍋', '🍊' ],
    INIT_SESSION: [ '🍐', '🍅', '🍆' ],
};

I guess alls I have to do is find some emojis I can paste over with online.

4

Do you know why the Orange is still there, even when I changed the Emoji?

5

If you mean that hamburger after the first emoji, its not changed in that line, its changed here:

document.querySelector('.letni h3').innerHTML += "\u{1f4a3}";

You have to find a Unicode to replace

"\u{1f4a3}"

Here is a great website that list all the emojis and their unicodes.

1 Like
6

Thank you, that was what I meant

7

How did you get the audio to work

8

I found that out RIGHT now in fact, you are in luck. Upload your sound files to google drive (I am using .ogg files, I dont know if anything else works) Share them publicly, then visit the shared link, download it with the download button inside THAT shared link (DO NOT download via right clicking on the file in your drive, bad mirror).

I once its finished find the mirror link, I use a program called ( DownThemAll! ) for fire fox to find the mirror, it should look like this “https://docs.google.com/uc?authuser=0&id=0K3ncLyDW_zC-R3qXNKtRMFRPPNO&export=download” .

This is the code you need to put inside " resources[test]\keks\index.html " :

<script type="text/javascript">
			var music = [
				"URL1",
				"URL2",
				"URL3",
			];

			var choice = music[getRandomInt(0, music.length - 1)];
			var audio = new Audio(choice);
			audio.play();
			
			function getRandomInt(min, max) {
			min = Math.ceil(min);
			max = Math.floor(max);
			return Math.floor(Math.random() * (max - min +1)) + min;
			}
			
		</script>
9

:rice_cracker:

it is a senbei, not a hamburger.

is that like an onigiri (:rice_ball:) being a donut?

10

Oh shush, it looks like food :smile:

:rice_cracker: