Compare commits
6 Commits
a3cd0cae46
...
1b6871d502
| Author | SHA1 | Date |
|---|---|---|
jean-lou.saulnier
|
1b6871d502 | 3 years ago |
|
jean-lou.saulnier
|
26d25e649c | 3 years ago |
|
jean-lou.saulnier
|
b2e99a664a | 3 years ago |
|
jean-lou.saulnier
|
8d93df35f1 | 3 years ago |
|
jean-lou.saulnier
|
3abb99e134 | 3 years ago |
|
jean-lou.saulnier
|
697d19f99c | 3 years ago |
6 changed files with 337 additions and 54 deletions
@ -1,28 +0,0 @@ |
|||||
//let machine_sous = new Object();
|
|
||||
let argent |
|
||||
let nombres = [] |
|
||||
let bank = 1000 |
|
||||
let mise |
|
||||
let gains = 0 |
|
||||
|
|
||||
function start(){ |
|
||||
argent = document.getElementById("input").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("argent").value; |
|
||||
bank += mise; |
|
||||
argent -= mise; |
|
||||
console.log(bank) |
|
||||
} |
|
||||
@ -1,26 +0,0 @@ |
|||||
<!DOCTYPE html> |
|
||||
|
|
||||
<html> |
|
||||
|
|
||||
<head> |
|
||||
|
|
||||
<meta charset="utf-8"> |
|
||||
|
|
||||
<title></title> |
|
||||
|
|
||||
<link rel="stylesheet" type="text/css" href="styles.css"> |
|
||||
</head> |
|
||||
<body> |
|
||||
|
|
||||
<img src="logo.jpeg"> |
|
||||
|
|
||||
<input type="text" id="input" name="input" value=""><br> |
|
||||
<input type="button" id="bouton" value="Contrôler" onclick="start()"><br><br> |
|
||||
|
|
||||
<input type="text" id="argent" name="argent" value=""><br> |
|
||||
<input type="button" id="bouton" value="Contrôler" onclick="saisie()"> |
|
||||
|
|
||||
<script src="main.js"></script> |
|
||||
|
|
||||
</body> |
|
||||
</html> |
|
||||
@ -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(); |
||||
@ -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; |
||||
|
} |
||||
|
|
||||
|
|
||||
@ -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; |
||||
|
} |
||||
@ -0,0 +1,47 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
|
||||
|
<html> |
||||
|
|
||||
|
<head> |
||||
|
|
||||
|
<meta charset="utf-8"> |
||||
|
|
||||
|
<title></title> |
||||
|
|
||||
|
<link rel="stylesheet" type="text/css" href="test.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"> |
||||
|
<div class="doors"> |
||||
|
<div class="door"> |
||||
|
<div class="boxes"> |
||||
|
<!-- <div class="box">?</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="door"> |
||||
|
<div class="boxes"> |
||||
|
<!-- <div class="box">?</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="door"> |
||||
|
<div class="boxes"> |
||||
|
<!-- <div class="box">?</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="buttons"> |
||||
|
<button id="spinner">Spin</button> |
||||
|
<!--<button id="reseter">Reset</button>--> |
||||
|
</div> |
||||
|
|
||||
|
<input type="text" id="mise" name="mise"> |
||||
|
|
||||
|
<p class="info"></p> |
||||
|
</div> |
||||
|
|
||||
|
<script src="main.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue