Merge pull request 'add progression system' (#25) from progression into main

Reviewed-on: #25

css/base.css

@@ -33,7 +33,7 @@ img {
 }
 
 a {
-    color: var(--accent-yellow);
+    color: black;
     text-decoration: none;
 }
 

css/home.css

@@ -16,3 +16,43 @@
     align-items: center;
     height: 200px;
 }
+
+/* Barre de progression */
+
+.progression {
+animation: 3s loadbar;
+width:auto;
+background-color: white;
+display: inline-block;
+padding: 0.7em 0.5em 0.5em 0.5em;
+text-wrap: nowrap;
+}
+
+@keyframes loadbar {
+  0% { width:0%; }
+}
+
+.bar {
+width : 50%;
+margin : auto;
+border : 2px solid white;
+display: inline-block;
+}
+.progression > span {
+
+display: inline-block;
+width: 100%;
+font-family: MonTrappist;
+font-size : 1.5em;
+}
+
+.lessthanhalf span {
+    padding-left: 100%;
+    color: white;
+    padding-left: calc(100% + 1em);
+}
+
+.morethanhalf {
+text-align : end;
+color:black;
+}

index.html

@@ -8,6 +8,7 @@
 		<link rel="stylesheet" href="css/home.css">
 		<link rel="stylesheet" href="css/drag.css">
 		<script src="js/drag.js" defer></script>
+		<script src="js/progress.js" defer></script>
 		<link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png">
 		<title>Camp Interhack</title>
 	</head>
@@ -80,8 +81,18 @@
 					Seule exigence, respecter toutes les marginalités, originalités, bizarreries et normaleries de
 					chacun·es.</p>
 			</section>
-
-
+			<h3>
+				<span>Où en est-on ?</span>
+			</h3>
+			<section id="progress">
+				<p>Il y a</p>
+				<div class="places"><span class="bar"><span id="gauge-bar" style="width:0" class="progression lessthanhalf"><span id="gauge-text">?/200</span></span></span></div>
+				<p>places déjà réservées. Ouverture prochaine des inscriptions !</p>
+				<br>
+				<p>Et nous avons reçu</p>
+				<div class="places"><span class="bar"><span id="fundraising-bar" style="width:0" class="progression lessthanhalf"><span id="fundraising-text">? %</span></span></span></div>
+				<p>des dons dont nous avons besoin (voir le détail des comptes)</p>
+			</section>
 			<h3>
 				<span>Iels y participent</span>
 			</h3>

js/progress.js

@@ -0,0 +1,91 @@
+const gauge_url = "https://api.camp.interhacker.space/api/gauge"
+const fundraising_url = "https://api.camp.interhacker.space/api/fundraising"
+const gaugeMax = 250;
+const fundraisingTotalMax = 20000;
+
+async function getGauge() {
+    // REMOVE WHEN SIGNUP FORM IS OPEN
+    return 0;
+
+    try {
+        const response = await fetch(gauge_url);
+        if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        return result.gauge
+    } catch (error) {
+        console.error(error.message);
+
+        return null;
+    }
+}
+
+async function getFundraisingTotal() {
+    try {
+        const response = await fetch(fundraising_url);
+        if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        return result.total
+    } catch (error) {
+        console.error(error.message);
+
+        return null;
+    }
+}
+
+function percentRatio(ratio) {
+    return Math.floor(ratio * 100);
+}
+
+function setAboveHalf(ratio, element) {
+    if (ratio > 0.5) {
+        element.classList.remove("lessthanhalf");
+        element.classList.add("morethanhalf");
+    }
+}
+
+async function setGauge() {
+    const gauge = await getGauge();
+
+    if (gauge !== null) {
+        const gaugeBar = document.getElementById("gauge-bar");
+        const gaugeText = document.getElementById("gauge-text");
+
+        const gaugeRatio = gauge / gaugeMax;
+
+        gaugeBar.style.setProperty("width", percentRatio(gaugeRatio) + "%");
+        gaugeText.innerText = gauge + "/" + gaugeMax;
+
+        setAboveHalf(gaugeRatio, gaugeBar);
+    }
+}
+
+async function setFundraisingTotal() {
+    const fundraising_total = await getFundraisingTotal();
+
+    if (fundraising_total !== null) {
+        const fundraisingBar = document.getElementById("fundraising-bar");
+        const fundraisingText = document.getElementById("fundraising-text");
+
+        const fundraisingRatio = fundraising_total / fundraisingTotalMax;
+
+        fundraisingBar.style.setProperty("width", percentRatio(fundraisingRatio) + "%");
+        fundraisingText.innerText = percentRatio(fundraisingRatio) + " %";
+
+        setAboveHalf(fundraisingRatio, fundraisingBar);
+    }
+}
+
+async function setProgress() {
+    setGauge();
+    setFundraisingTotal();
+}
+
+document.addEventListener("DOMContentLoaded", setProgress);