uggly working i guess

back/html/index.html

@@ -18,22 +18,21 @@
 	<h1>Défi :</h1>
 
 	<div id="content">
-		<audio id="one" controls></audio>
+		<div id="audios"></div>
-		<audio id="two" controls></audio>
-		<audio id="three" controls></audio>
-		<audio id="four" controls></audio>
-		<br/>
 	</div>
+	<button id="submit" disabled="true" onclick="checkAnswer()">Vérifier la réponse</button>
 
-	<button onclick="document.getElementById('answer').hidden = false">Révéler la réponse</button>
 	
-	<p id="answer" hidden="true">T'es pas censé voir ça ...</p>
+	<!-- <button onclick="document.getElementById('answer').hidden = false">Révéler la réponse</button> -->
+	
+	<p id="message" hidden="true">T'es pas censé voir ça ...</p>
 	
 	<form method="get" action="/">
 		<input type="submit" value="Nouveau défi" />
 	</form>
 	
 	<script src="monscript.js"></script>
+	
 </body>
 
 </html>

back/html/monscript.js

@@ -0,0 +1,50 @@
+const content = document.getElementById("content");
+const audios = document.getElementById("audios");
+const answerButton = document.getElementById("submit");
+
+const select = document.createElement("select");
+
+const messageText = document.getElementById("message");
+
+let realAnswer = "";
+
+function checkAnswer() {
+	messageText.hidden = false;
+	if (select.value === realAnswer) {
+		messageText.innerText = "Bravo !";
+	} else {
+		messageText.innerText = "Dommage, la réponse était : " + realAnswer;
+	}
+}
+
+function addAudio(data) {
+	const audio = document.createElement("audio");
+	audio.controls = true;
+	audio.src = "data:audio/ogg;base64," + data;
+	audios.append(audio);
+}
+
+function updateAudios(response) {
+	addAudio(response.dataOne);
+	addAudio(response.dataTwo);
+	addAudio(response.dataThree);
+	addAudio(response.dataFour);
+
+	content.append(document.createElement("br"));
+
+	response.answers.forEach(element => {
+		const option = document.createElement("option");
+		option.innerText = element;
+		select.append(option);
+	});
+	content.append(select);
+
+	realAnswer = response.answer;
+	answerButton.disabled = false;
+}
+
+fetch("/newchallenge", {
+	method: "POST"
+})
+.then((response) => response.json())
+.then((json) => updateAudios(json));

docker-compose.yaml

@@ -1,10 +1,7 @@
 services:
   web:
-    image: nginx
+    build:
-    volumes:
+      context: .
-    - ./html:/usr/share/nginx/html
+      dockerfile: images/Dockerfile
     ports:
-    - "8080:80"
+      - "8080:8080"
-    environment:
-    - NGINX_HOST=foobar.com
-    - NGINX_PORT=80

html/monscript.js

@@ -1,25 +0,0 @@
-document.getElementById("");
-
-// src="data:audio/ogg;base64,BASE64CODE"
-
-function updateAudios(response) {
-	document.getElementById("one").src = "data:audio/ogg;base64," + response.dataOne;
-	document.getElementById("two").src = "data:audio/ogg;base64," + response.dataTwo;
-	document.getElementById("three").src = "data:audio/ogg;base64," + response.dataThree;
-	document.getElementById("four").src = "data:audio/ogg;base64," + response.dataFour;
-	document.getElementById("answer").innerText = "Réponse : " + response.answer;
-
-	const select = document.createElement("select");
-	response.answers.forEach(element => {
-		const option = document.createElement("option");
-		option.innerText = element;
-		select.append(option);
-	});
-	document.getElementById("content").append(select);
-}
-
-fetch("/newchallenge", {
-	method: "POST",
-})
-.then((response) => response.json())
-.then((json) => updateAudios(json));

images/Dockerfile

@@ -0,0 +1,19 @@
+FROM debian:latest
+
+RUN apt update && apt install -y g++ git 7zip make cmake libmysqlcppconn-dev ffmpeg
+
+RUN git clone --recursive https://github.com/xmake-io/xmake.git \
+&& cd ./xmake \
+&& ./configure \
+&& make \
+&& make install
+
+ENV XMAKE_ROOT=y
+
+WORKDIR /app
+
+COPY back /app
+
+RUN xmake -y
+
+ENTRYPOINT xmake run