update keks loading screen example

resources/[test]/keks/__resource.lua

@@ -4,3 +4,7 @@ files {
     'bankgothic.ttf',
     'loadscreen.jpg'
 }
+
+loadscreen 'index.html'
+
+resource_manifest_version '77731fab-63ca-442c-a67b-abc70f28dfa5'

resources/[test]/keks/index.html

@@ -6,13 +6,14 @@
         <div class="backdrop">
             <div class="top">
                 <h1 title="Free Mode">Free Mode</h1>
-                <h2 title="Algonquin">Algonquin</h2>
+                <h2 title="Not Algonquin">Not Algonquin</h2>
             </div>
 
             <div class="letni">
                 <h2 title="INTEL">Intel</h2>
+                <h3></h3>
                 <div class="loadbar"><div class="thingy"></div></div>
-                <p>The Statue of Happiness has a heart. Have one too!</p>
+                <p>The Statue of Happiness has no heart. You do.</p>
             </div>
             <div class="bottom">
                 <div id="gradient">
@@ -20,22 +21,57 @@
             </div>
         </div>
 
-        <script type="text/javascript">
+<script type="text/javascript">
-        var left = -10;
+// 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;
 
-        var self = function()
+const emoji = {
+    INIT_BEFORE_MAP_LOADED: [ '🍉' ],
+    INIT_AFTER_MAP_LOADED: [ '🍋', '🍊' ],
+    INIT_SESSION: [ '🍐', '🍅', '🍆' ],
+};
+
+const handlers = {
+    startInitFunctionOrder(data)
     {
-            var elem = document.querySelector('.thingy');
+        count = data.count;
-            left += (0.15 / 60) * 100;
+
-            if (left >= 100)
+        document.querySelector('.letni h3').innerHTML += emoji[data.type][data.order - 1] || '';
+    },
+
+    initFunctionInvoking(data)
     {
-                left = -10;
+        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 + "..!";
     }
+};
 
-            elem.style.left = left + '%';
+window.addEventListener('message', function(e)
-            requestAnimationFrame(self);
+{
-        };
+    (handlers[e.data.eventName] || function() {})(e.data);
-        requestAnimationFrame(self);
+});
-        </script>
+</script>
     </body>
 </html>

resources/[test]/keks/keks.css

@@ -80,7 +80,7 @@ h1:before, h2:before {
     margin-top: 0px;
 }
 
-.letni h2
+.letni h2, .letni h3
 {
     font-family: BankGothic;
 
@@ -89,6 +89,8 @@ h1:before, h2:before {
     font-size: 50px;
 
     margin: 0px;
+
+    display: inline-block;
 }
 
 .top
@@ -134,6 +136,8 @@ h1:before, h2:before {
     overflow: hidden;
 
     position: relative;
+
+    display: block;
 }
 
 .thingy