reorganize resource directories

2025-12-12 06:14:09 +01:00 · 2019-12-10 09:54:29 +01:00
parent 60da977c02
commit 51cc79eda2
77 changed files with 7 additions and 1518 deletions
--- a/resources/[test]/example-loadscreen/__resource.lua
+++ b/resources/[test]/example-loadscreen/__resource.lua
@@ -0,0 +1,10 @@
+files {
+    'index.html',
+    'keks.css',
+    'bankgothic.ttf',
+    'loadscreen.jpg'
+}
+
+loadscreen 'index.html'
+
+resource_manifest_version '77731fab-63ca-442c-a67b-abc70f28dfa5'
--- a/resources/[test]/example-loadscreen/bankgothic.ttf
+++ b/resources/[test]/example-loadscreen/bankgothic.ttf
--- a/resources/[test]/example-loadscreen/index.html
+++ b/resources/[test]/example-loadscreen/index.html
@@ -0,0 +1,77 @@
+<html>
+    <head>
+        <link href="keks.css" rel="stylesheet" type="text/css" />
+    </head>
+    <body>
+        <div class="backdrop">
+            <div class="top">
+                <h1 title="Free Mode">Free Mode</h1>
+                <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 no heart. You do.</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/fivem/blob/master/code/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>
--- a/resources/[test]/example-loadscreen/keks.css
+++ b/resources/[test]/example-loadscreen/keks.css
@@ -0,0 +1,151 @@
+body
+{
+    margin: 0px;
+    padding: 0px;
+}
+
+.backdrop
+{
+    position: relative;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+
+    background-image: url(loadscreen.jpg);
+    background-size: 100% 100%;
+}
+
+.bottom
+{
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+#gradient
+{
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+
+    height: 25%;
+
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+}
+
+@font-face {
+    font-family: 'BankGothic';
+    src: url('bankgothic.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+h1, h2 {
+  position: relative;
+  background: transparent;
+  z-index: 0;
+}
+/* add a single stroke */
+h1:before, h2:before {
+  content: attr(title);
+  position: absolute;
+  -webkit-text-stroke: 0.1em #000;
+  left: 0;
+  z-index: -1;
+}
+
+
+.letni
+{
+    position: absolute;
+    left: 5%;
+    right: 5%;
+    bottom: 10%;
+
+    z-index: 5;
+
+    color: #fff;
+
+    font-family: "Segoe UI";
+}
+
+.letni p
+{
+    font-size: 22px;
+
+    margin-left: 3px;
+
+    margin-top: 0px;
+}
+
+.letni h2, .letni h3
+{
+    font-family: BankGothic;
+
+    text-transform: uppercase;
+
+    font-size: 50px;
+
+    margin: 0px;
+
+    display: inline-block;
+}
+
+.top
+{
+    color: #fff;
+
+    position: absolute;
+    top: 7%;
+    left: 5%;
+    right: 5%;
+}
+
+.top h1
+{
+    font-family: BankGothic;
+    font-size: 60px;
+
+    margin: 0px;
+}
+
+.top h2
+{
+    font-family: BankGothic;
+    font-size: 40px;
+
+    margin: 0px;
+
+    color: #ddd;
+}
+
+.loadbar
+{
+    width: 100%;
+    background-color: rgba(140, 140, 140, .9);
+    height: 20px;
+
+    margin-left: 2px;
+    margin-right: 3px;
+
+    margin-top: 5px;
+    margin-bottom: 5px;
+
+    overflow: hidden;
+
+    position: relative;
+
+    display: block;
+}
+
+.thingy
+{
+    width: 10%;
+    background-color: #eee;
+    height: 20px;
+
+    position: absolute;
+    left: 10%;
+}
--- a/resources/[test]/example-loadscreen/loadscreen.jpg
+++ b/resources/[test]/example-loadscreen/loadscreen.jpg