Sls js

back-end/debug_log.js

@@ -0,0 +1,22 @@
+console.log("lancement du debug_log");
+
+if (typeof game_details !== "undefined") {
+    console.log("✅ game_details est disponible :", game_details);
+} else {
+    console.warn("❌ game_details N'EST PAS défini !");
+}
+console.log("🗃️ localStorage :", localStorage);
+console.log("🗃️ sessionStorage :", sessionStorage);
+for (let key in window) {
+    if (typeof window[key] === "object") {
+        console.log(`📦 Objet détecté : ${key}`, window[key]);
+    }
+}
+console.log("📋 Liste des variables globales :");
+console.log(Object.keys(window));
+console.log("📋 Liste des fonctions globales :");
+for (let key in window) {
+    if (typeof window[key] === "function") {
+        console.log("🔹 Fonction détectée :", key);
+    }
+}

back-end/script.js

@@ -1,13 +1,65 @@
-const srvname = document.querySelector('#srv-name');
+const serverName = document.querySelector('#serverName');
+const mapName = document.querySelector('#mapName');
+const playerCount = document.querySelector('#playerCount');
+let mountingaddons = false;
 
 
-window.onload = function() {
-    srvname.textContent = "test"
-
-
-    let progress = 0;
-    const progressBar = document.querySelector('.progress');
+function GameDetails ( servername, serverurl, mapname, maxplayers, steamid, gamemode, volume, language ) {
+    serverName.textContent = `${servername}`;
+    mapName.textContent = `actuellement sur : ${mapname}, en ${gamemode}`;
+    playerCount.textContent = `nombre de joueur max : ${maxplayers}`;
 };
 
+function setProgress(percent , statusC, files) {
+    percent = Math.max(1, Math.min(100, percent));
 
-document.getElementById("music").volume = 0.2;
+    let progressBar = document.querySelector('.progress');
+    let progressText = document.querySelector('.progress-text');
+    let progressStatus = document.querySelector('.progress-status');
+    if (progressBar) {
+      progressBar.style.width = percent + "%";
+    }
+    if (progressText) {
+      progressText.innerText = `Chargement : ${percent}%`;
+    }
+    if (files) {
+      progressStatus.innerText = `téléchargement : ${files}`;
+    } else {
+      progressStatus.innerText = "";
+    }
+    console.log(`🔄 Progression mise à jour : ${percent}%`);
+}
+
+function SetStatusChanged( status ) {
+    if(status == "Mounting Addons"){
+      mountingaddons = true;
+    }
+    if(status == "Mounting Addons"){
+      mountingaddons = true;
+      setProgress(50, status);
+    }
+    if(status == "Workshop Complete"){
+      mountingaddons = true;
+      setProgress(50, status);
+    }
+    if(status == "Client info sent!"){
+      mountingaddons = true;
+      setProgress(92, status);
+    }
+    if(status == "Starting Lua..."){
+      mountingaddons = true;
+      setProgress(99, status);
+    }
+    if(status.indexOf("/") !== -1){
+        var statusarray = status.split("/");
+        downloadedFiles = statusarray[0];
+        neededFiles = statusarray[1].split(" ")[0];
+        var offset = 20;
+        if(mountingaddons == true){
+            offset = 50;
+        }
+        var percent = ((downloadedFiles / neededFiles) * 100) / 3;
+        setProgress(offset+percent, status, downloadedFiles);
+    }
+}; 
+document.getElementById("music").volume = 0.2;

doc/doc-loading-screen.txt

@@ -0,0 +1,57 @@
+/*
+	Called at the start, when the loading screen finishes loading all assets.
+
+	serverName - Server's name.
+		Convar: hostname
+		For exmaple: "Garry's Mod Server"
+	serverURL - URL for the loading screen.
+		Convar: sv_loadingurl
+		For example: "http://mywebsite.com/myloadingscreen.html"
+	mapName - The name of the map the server is playing.
+		For example: "cs_office"
+	maxPlayers - Maximum number of players for the server.
+		Convar: maxplayers
+	steamID - 64-bit, numeric Steam community ID of the client joining.
+		For example: 76561198012345678
+	gamemode - The gamemode the server is currently playing.
+		Convar: gamemode
+		For example: "deathrun"
+	volume - The value of the player's in-game 'snd_musicvolume' console variable (Music Volume), from 0 to 1
+	language - The value of the player's in-game 'gmod_language' console variable, a two letter representation of the player's main menu language
+*/
+function GameDetails( servername, serverurl, mapname, maxplayers, steamid, gamemode, volume, language ) {}
+
+/*
+	Called at the start
+
+	total- Total number of files the client will have to download.
+*/
+function SetFilesTotal( total ) {}
+
+/*
+	Called when the client starts downloading a file.
+
+	fileName- The full path and name of the file the client is downloading.
+		This path represents the resource's location rather than the actual file's location on the server.
+		For example, the file "garrysmod/addons/myAddon/materials/models/bobsModels/car.mdl" will be:
+			"materials/models/bobsModels/car.mdl"
+*/
+function DownloadingFile( fileName ) {}
+
+/*
+	Called when the client's joining status changes.
+
+	status- Current joining status.
+		For example: "Starting Lua..."
+
+	Under normal conditions this would not be fired until game client starts interacting with server files/workshop. This
+	means you probably can't use "Retrieving server info" and everything that goes before downloads.
+*/
+function SetStatusChanged( status ) {}
+
+/*
+	Called when the number of files remaining for the client to download changes.
+
+	needed- Number of files left for the client to download.
+*/
+function SetFilesNeeded( needed ) {}

index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chargement du Serveur...</title>
+    <link rel="stylesheet" href="page/style.css">
+</head>
+<body>
+
+
+    <div class="loading-container">
+        <h1 id="serverName">Chargement...</h1>
+        <p id="playerCount">Joueurs : ...</p>
+        <p id="mapName">Carte : ...</p>
+        <div class="progress-bar">
+            <div class="progress"></div>
+        </div>
+        <p class="progress-text">Connexion en cours...</p>
+        <p class="progress-status">status...</p>
+        <div class="random-stuffs">
+            <p id="credit-music">CREDIT : music interpreted by Gabriel Piano on youtube originally interpreted by Aaron Smith & KRONO remix</p>
+        </div>
+    </div>
+
+
+    <audio id="music" autoplay loop>
+        <source src="sound_stuff/dancin.ogg" type="audio/ogg">
+    </audio>
+    <script src="back-end/script.js"></script>
+    <script src="back-end/debug_log.js"></script>
+    <script>
+        console.log("🔄 Ajout de la vidéo d'arrière-plan...");
+
+        // Création de l'élément <video>
+        let video = document.createElement("video");
+        video.id = "background-video";
+        video.autoplay = true;
+        video.loop = true;
+        video.muted = true;
+        video.playsInline = true; // Pour éviter le mode plein écran sur mobile
+        video.style.position = "fixed";
+        video.style.top = "0";
+        video.style.left = "0";
+        video.style.width = "100%";
+        video.style.height = "100%";
+        video.style.objectFit = "cover";
+        video.style.zIndex = "-1";
+
+        // Ajout de la source vidéo
+        let source = document.createElement("source");
+        source.src = "sound_stuff/phasm.mp4"; // Remplace par ton URL
+        source.type = "video/mp4";
+
+        video.appendChild(source);
+        document.body.appendChild(video);
+
+        console.log("✅ Vidéo ajoutée avec succès !");
+
+    </script>
+</body>
+</html>

front-end/style.css → page/style.css

@@ -16,12 +16,13 @@ body {
     text-align: center;
 }
 
-.background {
-    position: absolute;
+#background-video {
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    background: url('background.jpg') center/cover no-repeat;
-    filter: blur(8px);
+    object-fit: cover;
     z-index: -1;
 }
 
@@ -54,3 +55,9 @@ body {
     margin-top: 10px;
     opacity: 0.8;
 }
+
+.random-stuffs {
+    font-size: 8px;
+    margin-top: 50px;
+    opacity: 0.5;
+}