Skip to content

Commit d67fc7e

Browse files
iKlemiKlem
committed
Update to 1.0.4
Update some UI, some JS code and added some SVG images.
1 parent 3a253a5 commit d67fc7e

File tree

4 files changed

+105
-59
lines changed

4 files changed

+105
-59
lines changed

‎css/style.css‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,22 @@ body {
3030

3131
/* PROGRESS BARS */
3232
#loadBar {
33+
position: relative;
34+
content: "";
3335
width: 85%;
34-
height: 20px;
35-
padding: 4px;
36+
height: 8px;
37+
margin: 13px auto;
3638
border-radius: 10px;
37-
border-width: 2px;
38-
border-style: solid;
39-
border-color: #939393;
4039
}
40+
#loadBar-width {
41+
position: absolute;
42+
content: "";
43+
top: 0px;
44+
width: 0%;
45+
height: 8px;
46+
border-radius: 10px;
47+
visibility: hidden;
48+
}
4149
#loadBar::-webkit-progress-bar {
4250
border-radius: 10px;
4351
background-color: #939393;
@@ -66,7 +74,7 @@ header {
6674
top: 10%;
6775
left: 1%;
6876
width: 47%;
69-
height: 484px;
77+
height: 490px;
7078
box-shadow: 0px 0px 50px;
7179
font-size: 20px;
7280
}

‎css/user.css‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
2-
* @author: iKlem <[email protected]>
3-
* @version: 1.0
4-
*/
2+
* @author: iKlem <[email protected]>
3+
* @version: 1.0
4+
*/
55

66
/* Change the background image and color. */
77
body {
@@ -17,4 +17,34 @@ header {
1717
h1, #player {
1818
color: white;
1919
background-color: #045FB4;
20+
}
21+
22+
/* SVG COLORATION - dl.svg */
23+
#dlSVG {
24+
fill: #176BAA;
25+
stroke: black;
26+
stroke-width: 1px;
27+
}
28+
29+
/* SVG COLORATION - Gmod logo */
30+
#square {
31+
fill: #045FB4;
32+
stroke: black;
33+
stroke-width: 1px;
34+
}
35+
36+
#G {
37+
fill: white;
38+
stroke: black;
39+
stroke-width: 1px;
40+
}
41+
42+
/* Change the background color of the back bar */
43+
#loadBar {
44+
background-color: #939393;
45+
}
46+
47+
/* Change the background color of the bar*/
48+
#loadBar-width {
49+
background-color: black;
2050
}

‎index.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<!--
3-
-- Welcome to the main file of the LicorneLoader.
4-
-- This HTML page is already filled with informations to know how to modify the file.
5-
-- When you have finished, you can delete all these comment.
3+
-- Welcome to the main file of the LicorneLoader.
4+
-- This HTML page is already filled with informations to know how to modify the file.
5+
-- When you have finished, you can delete all these comment.
66
-->
77
<html lang="en">
88
<head>
@@ -27,7 +27,10 @@
2727
<header>
2828
<!-- These name are temporary names. They will be modify with the script ("script.js" file) -->
2929
<h1 id="servName">ServerName</h1>
30-
<img id="imgLeft" src="img/gmod.png" /><h2 id="gameMode">Gamemode</h2>
30+
<svg class='gmodImg' id="imgLeft" width="90px" height="90px" viewBox="0 0 90 90">
31+
<path id="square" fill="none" stroke="black" stroke-width="1" d="M 4.50,4.53 C 4.50,4.53 85.47,4.56 85.47,4.56 85.47,4.56 85.47,86.50 85.47,86.50 85.47,86.50 4.47,86.34 4.47,86.34 4.47,86.34 4.50,4.53 4.50,4.53 Z" />
32+
<path id="G" fill="none" stroke="black" stroke-width="1" d="M 44.00,58.98 C 27.29,59.40 21.67,48.03 22.01,33.00 22.11,29.03 22.69,25.65 24.35,22.00 28.42,13.08 39.40,7.12 49.00,11.01 51.84,12.16 53.76,14.00 56.00,16.00 56.00,16.00 56.00,11.00 56.00,11.00 56.00,11.00 68.00,11.00 68.00,11.00 68.00,11.00 68.00,61.00 68.00,61.00 67.96,64.23 67.86,67.01 66.43,70.00 58.74,86.11 24.32,87.50 22.00,62.00 22.00,62.00 32.91,62.13 32.91,62.13 33.87,72.48 48.02,74.39 53.65,67.74 56.80,64.03 56.00,58.52 56.00,54.00 51.57,57.58 49.81,58.84 44.00,58.98 Z M 37.51,24.13 C 32.94,29.80 32.99,51.87 47.00,49.76 60.27,47.76 61.25,19.80 44.00,20.38 41.12,21.17 39.49,21.67 37.51,24.13 Z" />
33+
</svg><h2 id="gameMode">Gamemode</h2>
3134
<img id="imgLeft" src="img/map.png" /><h2 id="map">Mapname</h2>
3235
<span id="imgLoad">
3336
<img id="noBorder" class="walk" src="img/gear.png" width="90px" />
@@ -36,7 +39,7 @@ <h1 id="servName">ServerName</h1>
3639
<h2 id="stateLoad">Connexion...</h2>
3740
<!-- You have all the informations when an action is sended. -->
3841
<div id="nbFiles">
39-
<progress id="loadBar" value="0" max="100"><span>Loading...</span></progress>
42+
<div id="loadBar"><div id="loadBar-width"></div></div>
4043
<div id="progressInfo"> - - - </div>
4144
<div id="progressInfoWS"> - - - </div>
4245
</div>
@@ -62,6 +65,6 @@ <h1>RULES</h1>
6265
</body>
6366
</html>
6467
<!-- And this is the end of the file... I'm serious here ;)
65-
-- Thank you for use this Script loader for your Garry's Mod server.
66-
-- Don't hesitate to make a donation on the Github Page : LIEN ICI
68+
-- Thank you for use this Script loader for your Garry's Mod server.
69+
-- Don't hesitate to make a donation on the Github Page : LIEN ICI
6770
-->

‎js/script.js‎

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -17,62 +17,90 @@ var isDownload = false;
1717
//Percentage of the progress bar
1818
var percentage = 0;
1919
//Get the progress bar values and the element itself.
20-
var progressbar = $('#loadBar'),
21-
max = percentage,
22-
value = progressbar.val();
20+
var progressbar = $('#loadBar-width'),
21+
max = percentage,
22+
value = 0;
2323
//Value for the interval clearing function.
24-
var animationFunction = null;
24+
var animationFunction;
25+
var isAnimate = false;
26+
27+
28+
/* IMAGE SVG */
29+
var dlFile = "<svg class='dlImg' xmlns='http://www.w3.org/2000/svg' width='90px' height='90px' viewBox='0 0 128 128'><path id='dlSVG' fill='black' stroke='black' stroke-width='1' d='M 110.00,116.00 C 110.00,116.00 110.00,124.00 110.00,124.00 110.00,124.00 20.00,124.00 20.00,124.00 20.00,124.00 20.00,116.00 20.00,116.00 20.00,116.00 110.00,116.00 110.00,116.00 Z M 83.00,3.00 C 83.00,3.00 83.00,65.00 83.00,65.00 83.00,65.00 110.00,65.00 110.00,65.00 110.00,65.00 97.63,78.88 97.63,78.88 97.63,78.88 76.63,99.88 76.63,99.88 76.63,99.88 64.88,111.13 64.88,111.13 64.88,111.13 53.13,99.63 53.13,99.63 53.13,99.63 32.38,79.00 32.38,79.00 32.38,79.00 20.00,65.00 20.00,65.00 20.00,65.00 47.00,65.00 47.00,65.00 47.00,65.00 47.00,3.00 47.00,3.00 47.00,3.00 83.00,3.00 83.00,3.00 Z' /></svg>"
2530

2631
/* DEBUG VALUES */
2732
/* --- */
2833

34+
//Update of all elements in the page
35+
function RefreshFileBox() {
36+
if(percentage < 100 || (filesDL == filesNeeded)) {
37+
percentage = Math.floor((100 / filesNeeded) * filesDL);
38+
}
39+
40+
if(isAnimate) {
41+
animationFunction = setInterval(animationBar, 15);
42+
} else {
43+
clearInterval(animationFunction);
44+
}
45+
46+
if(filesNeeded > 0) {
47+
if(percentage == 100 || (filesDL == filesNeeded)) {
48+
$("#progressInfoWS").html("Done !");
49+
$("#progressInfo").html("Files donwloaded : " + filesDL + "<br>Files remaining : " + filesNeeded);
50+
} else {
51+
$("#progressInfo").html("Files donwloaded : " + filesDL + "<br>Files remaining : " + filesNeeded);
52+
}
53+
}
54+
}
2955
//Animation when page is loaded.
3056
$("body").ready(function() {
3157
$("body").animate({opacity: 1, marginTop: "0px"}, 500);
3258
});
33-
3459
// Called when the number of files to download changes.
3560
function SetFilesNeeded(needed) {
3661
filesNeeded = needed;
3762
RefreshFileBox();
3863
}
39-
4064
// Called at the start, tells us how many files need to be downloaded in total.
4165
function SetFilesTotal(total) {
4266
filesTotal = total;
4367
RefreshFileBox();
4468
}
45-
4669
// Called when a file starts downloading. The filename includes the entire path of the file;
4770
// for example "materials/models/bobsModels/car.mdl".
4871
function DownloadingFile(fileName) {
72+
if(isDownload) {
73+
filesDL++;
74+
isDownload = false;
75+
isAnimate = true;
76+
}
77+
$("#loadBar-width").css({"visibility": "visible"});
4978
isDownload = true;
5079
$("#stateLoad").html("Downloading " + fileName);
51-
$("#noBorder").attr("src", "./img/dl.png");
80+
$("#imgLoad").html(dlFile);
5281
$("#noBorder").attr("class", "NOPE");
53-
var test = fileName.split(" ");
54-
for (var i = 0; i<test.length; i++) {
55-
if(test[i] == "Workshop") {
82+
var splitSTR = fileName.split(" ");
83+
for (var i = 0; i<splitSTR.length; i++) {
84+
if(splitSTR[i] == "Workshop") {
5685
$("#progressInfoWS").html("Download addon from Workshop...");
5786
} else {
5887
$("#progressInfoWS").html(" - - - ");
5988
}
6089
}
6190
RefreshFileBox();
6291
}
63-
6492
// Called when something happens. This might be "Initialising Game Data", "Sending Client Info", etc.
6593
function SetStatusChanged(status) {
6694
if(isDownload) {
6795
filesDL++;
6896
isDownload = false;
97+
isAnimate = true;
6998
}
7099
var statusSTR = status.split(" ");
71100
for (var i = 0; i < statusSTR.length; i++) {
72101
if(statusSTR[i] == "Sending") {
73102
percentage = 100;
74-
animateFinal();
75-
$("#serverInfo").html(status + "<br><div id='spinner'></div>");
103+
setTimeout(function() { animateFinal(); $("#serverInfo").html(status + "<br><div id='spinner'></div>"); }, 1000);
76104
}
77105
}
78106
$("#stateLoad").html(status);
@@ -87,39 +115,16 @@ function GameDetails(servername, serverurl, mapname, maxplayers, steamid, gamemo
87115
$("#map").html(mapname);
88116
$("#serverBanner img").attr("alt", servername + " - IMAGE MISSING");
89117
}
90-
91-
//Mise à jour des différents éléments présent dans la page
92-
function RefreshFileBox() {
93-
if(percentage < 100) {
94-
percentage = Math.floor((100 / filesNeeded) * filesDL);
95-
}
96-
97-
if(percentage <= 100 && percentage > 0 && percentage != value) {
98-
animationFunction = setInterval(function() { animationBar(); }, 10);
99-
} else {
100-
clearInterval(animationFunction);
101-
}
102-
103-
if(filesNeeded > 0) {
104-
if(percentage == 100) {
105-
$("#progressInfoWS").html("Done !");
106-
} else {
107-
$("#progressInfo").html("Files donwloaded : " + filesDL + "<br>Files remaining : " + filesNeeded);
108-
}
109-
}
110-
}
111-
118+
// Animate the progress of the Progress bar.
112119
function animationBar() {
113120
if(percentage > value) {
114121
value += 1;
115-
addValue = progressbar.val(value);
116-
} else if (percentage >= 100) {
117-
$("#loadBar").animate({backgroundColor:"green", padding:"10px", borderWidth:"0px"}, 500, "easeOutExpo");
118-
percentage = percentage + 1;
119-
clearInterval(animationFunction);
122+
progressbar.width(value+"%");
123+
$("#rules").html(value+"%");
124+
} else if (percentage == 100) {
125+
$("#loadBar-width").animate({backgroundColor:"green"}, 500, "easeOutExpo");
120126
}
121127
}
122-
123128
//Animate the panels when the message "Sending Clien Info" is sended.
124129
function animateFinal() {
125130
$("header").animate({left:"-55%"}, 500, "easeOutExpo");
@@ -131,5 +136,5 @@ function animateFinal() {
131136
$("#serverBanner").animate({top:"15%"}, 500, "easeOutExpo");
132137
$("#serverInfo").animate({opacity:1, top:"45%"}, 500, "easeOutExpo");
133138
});
134-
139+
clearInterval(animationFunction);
135140
}

0 commit comments

Comments
 (0)