uggly working i guess

2025-07-01 20:01:24 +02:00
parent bbb9bc2751
commit 3a64770bb0
10 changed files with 88 additions and 48 deletions
--- a/back/html/index.html
+++ b/back/html/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>TLT Guesser</title>
+	<script
+		src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>
+</head>
+
+<body>
+	<!-- <midi-player src="indie.mid" sound-font
+		visualizer="#myVisualizer">
+	</midi-player>
+	<midi-visualizer type="piano-roll" id="myVisualizer"></midi-visualizer> -->
+
+	<h1>Défi :</h1>
+
+	<div id="content">
+		<div id="audios"></div>
+	</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="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>
+
+
+<!-- 
+
+
+Prendre un fichier midi :
+
+	- Sélectionner un passage
+	- Sélectionner les instruments
+	- Générer les fichiers midi
+
+
+
+
+-->
--- a/back/html/monscript.js
+++ b/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));