From 1b6871d5026a2cb859fe2f0914fc01bc8a6f901f Mon Sep 17 00:00:00 2001 From: "jean-lou.saulnier" Date: Thu, 14 Apr 2022 09:50:40 +0200 Subject: [PATCH] fin js roulette --- main.js | 71 ----------------------- test.html | 26 --------- test_jl/js_save.txt | 96 +++++++++++++++++++++++++++++++ test_jl/main.js | 134 ++++++++++++++++++++++++++++++++++++++++++++ test_jl/test.css | 60 ++++++++++++++++++++ test_jl/test.html | 47 ++++++++++++++++ 6 files changed, 337 insertions(+), 97 deletions(-) delete mode 100644 main.js delete mode 100644 test.html create mode 100644 test_jl/js_save.txt create mode 100644 test_jl/main.js create mode 100644 test_jl/test.css create mode 100644 test_jl/test.html diff --git a/main.js b/main.js deleted file mode 100644 index 887e7e9..0000000 --- a/main.js +++ /dev/null @@ -1,71 +0,0 @@ -//let machine_sous = new Object(); -let argent -let nombres = [] -let bank = 1000 -let mise -let gains = 0 - -function start(){ - argent = document.getElementById("argent").value; - regle(); - test(); -} - -function test(){ - console.log(argent); -} - -function regle(){ - console.log("les règles sont .............."); - console.log("Mais aussi ça ............."); -} - -function saisie(){ - mise = document.getElementById("mise").value; - bank+=Number(mise); - argent-=Number(mise); - nb_alea(); -} - -function nb_alea(){ - var random_1 = Math.floor(Math.random() * (10 - 1)) + 1; - var random_2 = Math.floor(Math.random() * (10 - 1)) + 1; - var random_3 = Math.floor(Math.random() * (10 - 1)) + 1; - gain(random_1, random_2, random_3); -} - -function gain(random_1, random_2, random_3){ - if (random_1==random_2 && random_2==random_3 && random_3==9) { - argent+=bank; - bank-=bank; - gains+=bank; - console.log("Bingo"); - } - - else if(random_1==random_2 && random_2==random_3){ - argent+=6*Number(mise); - bank-=6*Number(mise); - gains+=6*Number(mise); - console.log("trois égaux"); - } - - else if(random_1==random_2||random_2==random_3||random_3==random_1){ - argent+=3*Number(mise); - bank-=3*Number(mise); - gains+=3*Number(mise); - console.log("deux égaux"); - } - - else{ - console.log("aucun égaux"); - } - affiche(random_1, random_2, random_3); -} - -function affiche(random_1, random_2, random_3){ - console.log('Vous avez gagné %d jetons', gains); - console.log('\nIl vous reste %d jetons, et il reste %d jetons dans le bac de la machine.\n', argent, bank); -} - - - diff --git a/test.html b/test.html deleted file mode 100644 index eec2fd1..0000000 --- a/test.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - -
-

- -
- - - - - - \ No newline at end of file diff --git a/test_jl/js_save.txt b/test_jl/js_save.txt new file mode 100644 index 0000000..4f24b70 --- /dev/null +++ b/test_jl/js_save.txt @@ -0,0 +1,96 @@ +const items = [ + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", +]; + //document.querySelector(".info").textContent = items.join(" "); + +const doors = document.querySelectorAll(".door"); +document.querySelector("#spinner").addEventListener("click", spin); +document.querySelector("#reseter").addEventListener("click", init); + +async function spin() { + init(false, 1, 2); + for (const door of doors) { + const boxes = door.querySelector(".boxes"); + const duration = parseInt(boxes.style.transitionDuration); + boxes.style.transform = "translateY(0)"; + await new Promise((resolve) => setTimeout(resolve, duration * 100)); + } +} + +function init(firstInit, groups, duration) { + for (const door of doors) { + //if (firstInit) { + //console.log("dans le focntion") + //door.dataset.spinned = "0"; + //} else if (door.dataset.spinned === "1") { + //return; + //} + + const boxes = door.querySelector(".boxes"); + const boxesClone = boxes.cloneNode(false); + + const pool = ["❓"]; + if (!firstInit) { + const arr = []; + for (let n = 0; n < (groups > 0 ? groups : 1); n++) { + arr.push(...items); + } + pool.push(...shuffle(arr)); + console.log(pool); + + //boxesClone.addEventListener( + "transitionstart", + //function () { + //door.dataset.spinned = "1"; + //this.querySelectorAll(".box").forEach((box) => { + //box.style.filter = "blur(1px)"; + //}); + //}, + //{ once: true } + //); + + boxesClone.addEventListener( + "transitionend", + function () { + this.querySelectorAll(".box").forEach((box, index) => { + box.style.filter = "blur(0)"; + if (index > 0) this.removeChild(box); + }); + }, + //{ once: true } + ); + } + + for (let i = pool.length - 1; i >= 0; i--) { + const box = document.createElement("div"); + box.classList.add("box"); + //box.style.width = door.clientWidth + "px"; + box.style.height = door.clientHeight + "px"; + box.textContent = pool[i]; + boxesClone.appendChild(box); + } + boxesClone.style.transitionDuration = `${duration > 0 ? duration : 1}s`; + boxesClone.style.transform = `translateY(-${door.clientHeight * (pool.length - 1)}px)`; + door.replaceChild(boxesClone, boxes); + // console.log(door); + } +} + +function shuffle([...arr]) { + let m = arr.length; + while (m) { + const i = Math.floor(Math.random() * m--); + [arr[m], arr[i]] = [arr[i], arr[m]]; + } + return arr; +} + +init(); \ No newline at end of file diff --git a/test_jl/main.js b/test_jl/main.js new file mode 100644 index 0000000..16beb24 --- /dev/null +++ b/test_jl/main.js @@ -0,0 +1,134 @@ +//let machine_sous = new Object(); +let argent = 100 +let nombres = [] +let bank = 1000 +let mise +let gains = 0 + +regle() + + +function regle(){ + console.log("les règles sont .............."); + console.log("Mais aussi ça ............."); +} + +function saisie(){ + if (argent>0){ + mise = document.getElementById("mise").value; + bank+=Number(mise); + argent-=Number(mise); + gain(nombres); + } + else{ + console.log("PLUS DE SOUS") + } +} + +function gain(nb){ + if (nb[1]==nb[2] && nb[2]==nb[3] && nb[3]==9) { + argent+=bank; + bank-=bank; + gains+=bank; + console.log("Bingo"); + } + + else if(nb[1]==nb[2] && nb[2]==nb[3]){ + argent+=6*Number(mise); + bank-=6*Number(mise); + gains+=6*Number(mise); + console.log("trois égaux"); + } + + else if(nb[1]==nb[2]||nb[2]==nb[3]||nb[3]==nb[1]){ + argent+=3*Number(mise); + bank-=3*Number(mise); + gains+=3*Number(mise); + console.log("deux égaux"); + } + + else{ + console.log("aucun égaux"); + } + affiche(); +} + +function affiche(){ + console.log('Vous avez gagné %d jetons', gains); + console.log('\nIl vous reste %d jetons, et il reste %d jetons dans le bac de la machine.\n', argent, bank); +} + + +const items = [ + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", +]; + +const doors = document.querySelectorAll(".door"); +document.querySelector("#spinner").addEventListener("click", spin); +//document.querySelector("#reseter").addEventListener("click", init); + +async function spin() { + init(false, 1, 2); + for (const door of doors) { + const boxes = door.querySelector(".boxes"); + const duration = parseInt(boxes.style.transitionDuration); + boxes.style.transform = "translateY(0)"; + await new Promise((resolve) => setTimeout(resolve, duration * 100)); + } +} +function init(firstInit, groups, duration) { + for (const door of doors) { + const boxes = door.querySelector(".boxes"); + const boxesClone = boxes.cloneNode(false); + const pool = ["❓"]; + if (!firstInit) { + const arr = []; + for (let n = 0; n < (groups > 0 ? groups : 1); n++) { + arr.push(...items); + } + pool.push(...shuffle(arr)); + boxesClone.addEventListener( + "transitionend", + function () { + this.querySelectorAll(".box").forEach((box, index) => { + box.style.filter = "blur(0)"; + if (index > 0) this.removeChild(box); + }); + }, + ); + } + for (let i = pool.length - 1; i >= 0; i--) { + const box = document.createElement("div"); + box.classList.add("box"); + box.style.height = door.clientHeight + "px"; + box.textContent = pool[i]; + boxesClone.appendChild(box); + } + boxesClone.style.transitionDuration = `${duration > 0 ? duration : 1}s`; + boxesClone.style.transform = `translateY(-${door.clientHeight * (pool.length - 1)}px)`; + door.replaceChild(boxesClone, boxes); + nombres.push(pool[9]); + } + console.log(nombres); + saisie() + nombres = []; + //console.log(nombres); +} +function shuffle([...arr]) { + let m = arr.length; + while (m) { + const i = Math.floor(Math.random() * m--); + [arr[m], arr[i]] = [arr[i], arr[m]]; + } + return arr; +} + + diff --git a/test_jl/test.css b/test_jl/test.css new file mode 100644 index 0000000..d8b7bea --- /dev/null +++ b/test_jl/test.css @@ -0,0 +1,60 @@ +#app { + width: 100%; + height: 100%; + + background: #212121; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.doors { + display: flex; +} + +.door { + background: #fafafa; + box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.4) inset; + + width: 100px; + height: 150px; + overflow: hidden; + + border-radius: 1ex; + margin: 1ch; +} + +.boxes { + /* transform: translateY(0); */ + transition: transform 1s ease-in-out; +} + +.box { + display: flex; + justify-content: center; + align-items: center; + + font-size: 3rem; +} + +.buttons { + margin: 1rem 0 2rem 0; +} + +button { + cursor: pointer; + + font-size: 1.2rem; + text-transform: uppercase; + + margin: 0 0.2rem 0 0.2rem; +} + +.info { + position: fixed; + bottom: 0; + width: 100%; + text-align: center; +} \ No newline at end of file diff --git a/test_jl/test.html b/test_jl/test.html new file mode 100644 index 0000000..0d643d4 --- /dev/null +++ b/test_jl/test.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+ + +
+ + + +

+
+ + + + \ No newline at end of file