feat: add numbers choices for scene:cs_bs_phone

assets/scripts.js

@@ -173,12 +173,11 @@ function newList(id) {
 	}
 	return ul;
 }
-
+let selectedDigits = [];
 function addItem(ul, text, url, TheChoice) {
+	if (TheChoice.type !== "scene:cs_bs_phone"){
 		var li = document.createElement("li");
 		var a = document.createElement("a");
-
-	console.log("THE CHOICE", TheChoice, TheChoice.image)
 		if (TheChoice && TheChoice.image){
 			a.style.backgroundImage = TheChoice.image.styles.backgroundImage;
 			a.style.backgroundPosition = "center center";
@@ -190,6 +189,49 @@ function addItem(ul, text, url, TheChoice) {
 		a.setAttribute('href', url);
 		li.appendChild(a);
 		ul.appendChild(li);
+	}else{
+		selectedDigits = []
+		
+		// Créer le conteneur des champs de saisie
+		var inputContainer = document.createElement('div');
+		inputContainer.className = 'input-container';
+
+		// Créer les champs de saisie
+		for (var i = 0; i < 5; i++) {
+			var inputField = document.createElement('span');
+			inputField.type = 'text';
+			inputField.className = 'inputField';
+			inputContainer.appendChild(inputField);
+		}
+		
+		// Créer l'espace entre les conteneurs
+		var lineBreak = document.createElement('br');
+		inputContainer.appendChild(lineBreak.cloneNode());
+		inputContainer.appendChild(lineBreak.cloneNode());
+
+		// Créer le conteneur des boutons
+		var buttonContainer = document.createElement('div');
+		buttonContainer.className = 'buttonsCode';
+
+		// Créer les éléments de la liste des boutons
+		for (var i = 0; i < 10; i++) {
+			var listItem = document.createElement('span');
+			listItem.className = "buttonCodeNumber"
+			listItem.textContent = i;
+			listItem.setAttribute('onclick', 'selectDigit(' + i + ')');
+			buttonContainer.appendChild(listItem);
+		}
+
+		// Ajouter les conteneurs au document
+		var containerCode = document.createElement('div');
+		containerCode.className = 'containerCode';
+		containerCode.appendChild(inputContainer);
+		containerCode.appendChild(buttonContainer);
+		
+		ul.appendChild(containerCode);
+		updateInputPlaceholders();
+	}
+		
 	
 }
 
@@ -224,7 +266,52 @@ function addZones(segmentId) {
 	}
 }
 
-var currentChoiceMoment = null;
+
+function selectDigit(digit, p) {
+	if (selectedDigits.length <= 5) {
+		const emptyInputField = getEmptyInputField();
+		if (emptyInputField) {
+			emptyInputField.innerText  = digit;
+			selectedDigits.push(digit);
+		}
+
+		if (selectedDigits.length >= 5) {
+			var code = selectedDigits.join('');
+			if (code == "20541"){
+				console.log(p)
+				choice(0);
+			} else{
+				console.log(p)
+				choice(1);
+			}
+		}
+	}	
+	
+
+	updateInputPlaceholders();
+}
+
+function updateInputPlaceholders() {
+	
+	const inputFields = document.querySelectorAll('.inputField');
+	for (let i = 0; i < inputFields.length; i++) {
+		if (inputFields[i].textContent === '') {
+			inputFields[i].textContent = "-";
+		}
+	}
+}
+
+function getEmptyInputField() {
+	
+	const inputFields = document.querySelectorAll('.inputField');
+	for (let i = 0; i < inputFields.length; i++) {
+		if (inputFields[i].textContent === '-') {
+			return inputFields[i];
+		}
+	}
+	
+	return null;
+}
 
 function addChoices(r) {
 	currentChoiceMoment = r;
@@ -234,13 +321,17 @@ function addChoices(r) {
 	if (!r) return;
 
 	nextChoice = r.defaultChoiceIndex;
-
+	if (r.type == "scene:cs_bs_phone"){
+		addItem(ul, "", "", r);
+	}else{
 		let index = 0;
 		for (let x of r.choices) {
 			var caption = r.defaultChoiceIndex == index ? '[' + x.text + ']' : x.text;
-		addItem(ul, caption, 'javascript:choice(' + index + ')', x);
+			addItem(ul, caption, 'javascript:choice(' + index + ')', r);
 			index++;
 		}
+	}
+	
 
 	if (r.id in choicePoints)
 		document.getElementById("choiceCaption").innerHTML = choicePoints[r.id].description;
@@ -502,7 +593,6 @@ function togglePlayPause() {
 	if (v.paused) v.play();
 	else v.pause();
 }
-
 window.onload = function() {
 	var video_selector = document.getElementById("video");
 	var video_source_selector = document.getElementById("video-source");

assets/styles.css

@@ -313,3 +313,55 @@ h6 {
     content: '\2807';
     font-size: 2em;
 }
+
+
+/*Choice numbers part (put #6A or 6B in the URL)*/
+.buttons{
+    height: 100%;
+    margin: 0;
+}
+.buttons ul{
+    height: 100%;
+    margin: 0;
+}
+.containerCode {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 100%;
+}
+
+.input-container, .buttonsCode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #ffffff7a;
+      position: relative;
+}
+.input-container span, .buttonsCode span {
+    background-color: #222222;
+    opacity: 0.9;
+    color: white;
+    width: 3.6rem;
+    height: 5rem;
+    text-align: center;
+    margin: 5px;
+    border: none;
+    font-size: 2.5rem;
+    line-height: 5rem;
+}
+
+.buttonsCode span{
+    cursor: pointer;
+}
+
+.inputField::placeholder {
+color: white;
+content: "-";
+}
+
+.buttonsCode span:hover{
+    opacity: 0.7;
+}
+