raizen/GMod_BF4_Loadingscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init Commit

Browse Source
This commit is contained in:
raizen
2023-08-01 18:33:14 +02:00
parent b47ce8bf1f
commit 02c6478af9
8 changed files with 236 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
backgrounds/gm_construct/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 KiB

BIN
backgrounds/gm_construct/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 KiB

23
config.json Normal file
View File

@@ -0,0 +1,23 @@
{
"map": {
"gm_construct": {
"images": [
"/backgrounds/gm_construct/1.jpg",
"/backgrounds/gm_construct/2.jpg"
],
"music": [
"/music/gm_construct/1.mp3"
]
},
"gm_flatgrass": {
"images": [
"/backgrounds/gm_flatgrass/1.jpg",
"/backgrounds/gm_flatgrass/2.jpg"
],
"music": [
"/music/gm_flatgrass/1.mp3",
"/music/gm_flatgrass/2.mp3"
]
}
}
}

62
effects.js vendored Normal file
View File

@@ -0,0 +1,62 @@
let currentImage = 1, prevImage = 0;
let bgObj;
// Certified MDN Classic
function getRandomInt(max)
{
return Math.floor(Math.random() * max);
}
async function GameDetails( servername, serverurl, mapname, maxplayers, steamid, gamemode, volume, language )
{
const config = await (await fetch("/config.json")).json();
const audioplayer = document.getElementById("audioplayer");
let imgArray = [];
for (let i = 0; i < config.map[mapname].images.length; i++)
{
imgArray[i] = new Image();
imgArray[i].src = config.map[mapname].images[i];
let obj = document.createElement("img");
obj.classList.add("bgImage");
obj.src = imgArray[i].src;
document.getElementsByClassName("backgroundImages")[0].appendChild(obj);
}
bgObj = document.getElementsByClassName("bgImage");
document.getElementsByClassName("mapName")[0].innerHTML = "<h1>" + mapname.toUpperCase() + "</h1>";
document.getElementsByClassName("gamemodeName")[0].textContent = gamemode;
let autoCycleImages = setInterval(() => {
if (bgObj[prevImage].classList.contains("blendInAnimation"))
{
bgObj[prevImage].classList.remove("blendInAnimation");
}
bgObj[prevImage].classList.add("blendOutAnimation");
if (bgObj[currentImage].classList.contains("blendOutAnimation"))
{
bgObj[currentImage].classList.remove("blendOutAnimation");
}
bgObj[currentImage].classList.add("blendInAnimation");
prevImage = currentImage;
currentImage++;
if (currentImage >= imgArray.length)
currentImage = 0;
}, 5000)
audioplayer.volume = 0;
let autoAdjustVolume = setInterval(() => { if (audioplayer.volume > 0.9) { clearInterval(autoAdjustVolume); return; } audioplayer.volume += 0.01}, 40);
audioplayer.src = config.map[mapname].music[getRandomInt(config.map[mapname].music.length)];
audioplayer.play();
document.getElementsByClassName("loadingEntry")[0].classList.add("blendInAnimation");
}

BIN
fonts/Purista.ttf Normal file
View File

Binary file not shown.

42
index.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GMod BF4 Loading Screen</title>
<link rel="stylesheet" href="style.css">
<script src="/effects.js"></script>
</head>
<body>
<div class="loadingEntry">
</div>
<div class="backgroundMusic">
<audio loop id="audioplayer">
<source src="" type="audio/mp3">
</audio>
</div>
<div class="backgroundImages">
</div>
<div class="loadingIcon">
</div>
<div class="mapName">
<h1>Map Name</h1>
</div>
<div class="gamemodeName">
<p>Gamemode Name</p>
</div>
<div class="gamemodeInfo">
<p>▶ Gamemode Info line 1</p>
<p>▶ Gamemode Info line 2</p>
<p>▶ Gamemode Info line 3</p>
</div>
<div class="serverInfo">
<p>Server Info line 1</p>
<p>Server Info line 2</p>
<p>Server Info line 3</p>
</div>
</body>
</html>

BIN
music/gm_construct/1.mp3 Normal file
View File

Binary file not shown.

109
style.css Normal file
View File

@@ -0,0 +1,109 @@
/* purista-regular - latin */
@font-face
{
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Purista';
font-style: normal;
font-weight: 400;
src: url('/fonts/Purista.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
*
{
margin: 0;
font-family: Purista;
}
.bgImage
{
background-color: black;
position: fixed;
width: 100vw;
height: 100vh;
}
.loadingEntry
{
z-index: 1;
position: fixed;
width: 100vw;
height: 100vh;
background-color: black;
}
.blendInAnimation
{
animation-fill-mode: forwards;
animation-name: blendIn;
animation-duration: 2s;
}
.blendOutAnimation
{
animation-fill-mode: forwards;
animation-name: blendOut;
animation-duration: 2s;
}
.mapName
{
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-size: 20pt;
padding: 10px;
position: fixed;
top: 50px;
left: 100px;
}
.gamemodeName
{
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-size: 20pt;
padding: 10px;
position: fixed;
top: 140px;
left: 100px;
}
.gamemodeInfo
{
color: white;
font-size: 20pt;
padding: 10px;
position: fixed;
top: 280px;
left: 90px;
}
.gamemodeInfo > p
{
margin-bottom: 10px;
}
.serverInfo
{
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-size: 20pt;
padding: 10px;
max-width: 700px;
position: fixed;
bottom: 110px;
right: 100px;
}
@keyframes blendIn
{
from {opacity: 1;}
to {opacity: 0;}
}
@keyframes blendOut
{
from {opacity: 0;}
to {opacity: 1;}
}