BreizhHardware Roulette à shot

commit 1790ad0d6f525e0dcd223696e892cebdeee00689 Author: BreizhHardware Date: Fri Mar 11 22:32:12 2022 +0100 Init diff --git a/Roulette.code-workspace b/Roulette.code-workspace new file mode 100644 index 0000000..876a149 --- /dev/null +++ b/Roulette.code-workspace @@ -0,0 +1,8 @@ +{ + "folders": [ + { + "path": "." + } + ], + "settings": {} +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..b745c08 --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + BreizhHardware Roulette à shot + + + + + +

+ + + +

No results yet.

+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..0e8fe8b --- /dev/null +++ b/script.js @@ -0,0 +1,81 @@ +var $inner = $('.inner'), + $spin = $('#spin'), + $reset = $('#reset'), + $data = $('.data'), + $mask = $('.mask'), + maskDefault = 'Faites vos jeux', + timer = 9000; + +var red = [32,19,21,25,34,27,36,30,23,5,16,1,14,9,18,7,12,3]; + +$reset.hide(); + +$mask.text(maskDefault); + +$spin.on('click',function(){ + + // get a random number between 0 and 36 and apply it to the nth-child selector + var randomNumber = Math.floor(Math.random() * 36), + color = null; + $inner.attr('data-spinto', randomNumber).find('li:nth-child('+ randomNumber +') input').prop('checked','checked'); + // prevent repeated clicks on the spin button by hiding it + $(this).hide(); + // disable the reset button until the ball has stopped spinning + $reset.addClass('disabled').prop('disabled','disabled').show(); + + $('.placeholder').remove(); + + + setTimeout(function() { + $mask.text('Rien ne va plus'); + }, timer/2); + + setTimeout(function() { + $mask.text(maskDefault); + }, timer+500); + + + + // remove the disabled attribute when the ball has stopped + setTimeout(function() { + $reset.removeClass('disabled').prop('disabled',''); + + if($.inArray(randomNumber, red) !== -1){ color = 'red'} else { color = 'black'}; + if(randomNumber == 0){color = 'green'}; + + $('.result-number').text(randomNumber); + $('.result-color').text(color); + $('.result').css({'background-color': ''+color+''}); + $data.addClass('reveal'); + $inner.addClass('rest'); + + $thisResult = '

'+ randomNumber +''+ color +'

'; + + $('.previous-list').prepend($thisResult); + + + }, timer); + +}); + + +$reset.on('click',function(){ + // remove the spinto data attr so the ball 'resets' + $inner.attr('data-spinto','').removeClass('rest'); + $(this).hide(); + $spin.show(); + $data.removeClass('reveal'); +}); + +// so you can swipe it too +var myElement = document.getElementById('plate'); +var mc = new Hammer(myElement); +mc.on("swipe", function(ev) { + if(!$reset.hasClass('disabled')){ + if($spin.is(':visible')){ + $spin.click(); + } else { + $reset.click(); + } + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..13b76ae --- /dev/null +++ b/style.css @@ -0,0 +1,574 @@ +.number:nth-child(1) { + transform: rotateZ(9.72972973deg); +} +.number:nth-child(2) { + transform: rotateZ(19.45945946deg); +} +.number:nth-child(3) { + transform: rotateZ(29.18918919deg); +} +.number:nth-child(4) { + transform: rotateZ(38.91891892deg); +} +.number:nth-child(5) { + transform: rotateZ(48.64864865deg); +} +.number:nth-child(6) { + transform: rotateZ(58.37837838deg); +} +.number:nth-child(7) { + transform: rotateZ(68.10810811deg); +} +.number:nth-child(8) { + transform: rotateZ(77.83783784deg); +} +.number:nth-child(9) { + transform: rotateZ(87.56756757deg); +} +.number:nth-child(10) { + transform: rotateZ(97.2972973deg); +} +.number:nth-child(11) { + transform: rotateZ(107.02702703deg); +} +.number:nth-child(12) { + transform: rotateZ(116.75675676deg); +} +.number:nth-child(13) { + transform: rotateZ(126.48648649deg); +} +.number:nth-child(14) { + transform: rotateZ(136.21621622deg); +} +.number:nth-child(15) { + transform: rotateZ(145.94594595deg); +} +.number:nth-child(16) { + transform: rotateZ(155.67567568deg); +} +.number:nth-child(17) { + transform: rotateZ(165.40540541deg); +} +.number:nth-child(18) { + transform: rotateZ(175.13513514deg); +} +.number:nth-child(19) { + transform: rotateZ(184.86486486deg); +} +.number:nth-child(20) { + transform: rotateZ(194.59459459deg); +} +.number:nth-child(21) { + transform: rotateZ(204.32432432deg); +} +.number:nth-child(22) { + transform: rotateZ(214.05405405deg); +} +.number:nth-child(23) { + transform: rotateZ(223.78378378deg); +} +.number:nth-child(24) { + transform: rotateZ(233.51351351deg); +} +.number:nth-child(25) { + transform: rotateZ(243.24324324deg); +} +.number:nth-child(26) { + transform: rotateZ(252.97297297deg); +} +.number:nth-child(27) { + transform: rotateZ(262.7027027deg); +} +.number:nth-child(28) { + transform: rotateZ(272.43243243deg); +} +.number:nth-child(29) { + transform: rotateZ(282.16216216deg); +} +.number:nth-child(30) { + transform: rotateZ(291.89189189deg); +} +.number:nth-child(31) { + transform: rotateZ(301.62162162deg); +} +.number:nth-child(32) { + transform: rotateZ(311.35135135deg); +} +.number:nth-child(33) { + transform: rotateZ(321.08108108deg); +} +.number:nth-child(34) { + transform: rotateZ(330.81081081deg); +} +.number:nth-child(35) { + transform: rotateZ(340.54054054deg); +} +.number:nth-child(36) { + transform: rotateZ(350.27027027deg); +} +body { + font-family: 'Roboto', sans-serif; + background: radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, radial-gradient(hsl(0, 100%, 20%) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, radial-gradient(hsl(0, 100%, 20%) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsl(0, 0%, 0%) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsl(0, 0%, 0%) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0; + background-color: #300; + background-size: 100px 100px; +} +.main { + width: 374px; + margin: 0 auto; +} +.plate { + background-color: gray; + width: 350px; + height: 350px; + margin: 12px; + border-radius: 50%; + position: relative; + -webkit-animation: rotate 24s infinite linear; + animation: rotate 24s infinite linear; +} +.plate:after, +.plate:before { + content: ''; + display: block; + position: absolute; + border-radius: 50%; +} +.plate:after { + top: -6px; + right: -6px; + bottom: -6px; + left: -6px; + border: 6px solid gold; + box-shadow: inset 0px 0px 0px 2px #b39700, 0px 0px 0px 2px #ffeb80; +} +.plate:before { + background: rgba(0, 0, 0, 0.65); + border: 1px solid silver; + box-shadow: inset 0px 0px 0px 2px #808080; + top: 12%; + left: 12%; + right: 12%; + bottom: 12%; + z-index: 1; +} +.number { + width: 32px; + height: 175px; + display: inline-block; + text-align: center; + position: absolute; + top: 0; + left: calc(50% - (32px/2)); + transform-origin: 50% 100%; + background-color: transparent; + border-left: 16px solid transparent; + border-right: 16px solid transparent; + border-top: 175px solid black; + box-sizing: border-box; +} +.number:nth-child(odd) { + border-top-color: red; +} +.number:nth-child(37) { + border-top-color: green; +} +.pit { + color: #fff; + padding-top: 12px; + width: 32px; + display: inline-block; + font-size: 12px; + transform: scale(1, 1.8); + position: absolute; + top: -175px; + left: -16px; +} +.inner { + display: block; + height: 350px; + width: 350px; + position: relative; +} +.inner:after, +.inner:before { + content: ''; + display: block; + position: absolute; + border-radius: 50%; +} +.inner:after { + z-index: 3; + top: 24%; + right: 24%; + bottom: 24%; + left: 24%; + background-color: #4d4d4d; + border: 3px solid #808080; +} +.inner:before { + top: 24%; + bottom: 21%; + left: 24%; + right: 22%; + content: ''; + color: #fff; + font-size: 60px; + z-index: 5; + border-radius: 0; +} +.inner[data-spinto='1']:before { + transform: rotateZ(-2602deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='2']:before { + transform: rotateZ(-2774deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='3']:before { + transform: rotateZ(-2850deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='4']:before { + transform: rotateZ(-2793deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='5']:before { + transform: rotateZ(-2642deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='6']:before { + transform: rotateZ(-2734deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='7']:before { + transform: rotateZ(-2526deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='8']:before { + transform: rotateZ(-2673deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='9']:before { + transform: rotateZ(-2564deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='10']:before { + transform: rotateZ(-2652deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='11']:before { + transform: rotateZ(-2693deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='12']:before { + transform: rotateZ(-2868deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='13']:before { + transform: rotateZ(-2714deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='14']:before { + transform: rotateZ(-2582deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='15']:before { + transform: rotateZ(-2813deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='16']:before { + transform: rotateZ(-2622deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='17']:before { + transform: rotateZ(-2755deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='18']:before { + transform: rotateZ(-2545deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='19']:before { + transform: rotateZ(-2803deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='20']:before { + transform: rotateZ(-2592deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='21']:before { + transform: rotateZ(-2784deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='22']:before { + transform: rotateZ(-2554deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='23']:before { + transform: rotateZ(-2662deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='24']:before { + transform: rotateZ(-2632deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='25']:before { + transform: rotateZ(-2764deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='26']:before { + transform: rotateZ(-2840deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='27']:before { + transform: rotateZ(-2724deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='28']:before { + transform: rotateZ(-2877deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='29']:before { + transform: rotateZ(-2535deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='30']:before { + transform: rotateZ(-2684deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='31']:before { + transform: rotateZ(-2573deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='32']:before { + transform: rotateZ(-2822deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='33']:before { + transform: rotateZ(-2612deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='34']:before { + transform: rotateZ(-2745deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='35']:before { + transform: rotateZ(-2499deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='36']:before { + transform: rotateZ(-2703deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner[data-spinto='0']:before { + transform: rotateZ(-2831deg); + transition: transform 9s ease-out; + content: '\2022'; +} +.inner.rest:before { + transition: top 0.5s ease-in, right 0.5s ease-in, bottom 0.5s ease-in, left 0.5s ease-in; + top: 25%; + right: 25%; + bottom: 24%; + left: 25%; +} +.btn { + background: green; + border: 1px solid #000000; + border-top-color: #00b300; + border-left-color: #00b300; + padding: 0; + margin: 0; + display: inline-block; + font-size: 15px; + width: 175px; + padding: 12px; + margin: 12px; + cursor: pointer; + color: #fff; + font-family: 'Roboto', sans-serif; + border-radius: 3px; +} +.btn .btn-label { + padding: 12px; + white-space: nowrap; +} +.btn.btn-reset { + background: darkgreen; + border: 1px solid #000000; + border-top-color: #009700; + border-left-color: #009700; +} +.btn.disabled { + opacity: 0.2; + transition: opacity 0.24s linear; + cursor: not-allowed; +} +@-webkit-keyframes rotate { + 0% { + transform: rotateZ(0deg); + } + 100% { + transform: rotateZ(360deg); + } +} +@keyframes rotate { + 0% { + transform: rotateZ(0deg); + } + 100% { + transform: rotateZ(360deg); + } +} +.data { + display: block; + position: absolute; + top: 30%; + right: 30%; + bottom: 30%; + left: 30%; + border-radius: 50%; + animation: rotate 24s reverse linear infinite; + perspective: 2000px; + z-index: 100; +} +.data .data-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.72s; + transform-style: preserve-3d; +} +.data.reveal .data-inner { + transform: rotateY(180deg); +} +.data .mask, +.data .result { + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + border-radius: 50%; + overflow: hidden; + display: inline-block; +} +.data .mask { + color: #fff; + font-size: 24px; + margin: auto; + line-height: 1.4; + padding-top: 36px; +} +.data .result { + background-color: green; + color: white; + transform: rotateY(180deg); + align-items: center; + color: #fff; +} +.data .result-number { + font-size: 72px; + font-weight: 500; + line-height: 1.2; + margin-top: 12px; +} +.data .result-color { + text-transform: uppercase; + font-size: 21px; + line-height: 1; +} +.previous-results { + max-width: 350px; + margin: 24px 12px; +} +.previous-list { + perspective: 2000; +} +.previous-result { + display: flex; + margin: 1px; + padding: 12px; + color: #fff; +} +.previous-result:first-child { + -webkit-animation: flipin 0.48s ease-out; + animation: flipin 0.48s ease-out; +} +.previous-result .previous-number { + flex: 1; +} +.color-green { + background-color: green; +} +.color-black { + background-color: black; +} +.color-red { + background-color: red; +} +.visuallyhidden { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + height: 1px; + width: 1px; + margin: -1px; + padding: 0; + border: 0; +} +@-webkit-keyframes flipin { + 0% { + transform: rotateX(90deg); + } + 100% { + transform: rotateX(0deg); + } +} +@keyframes flipin { + 0% { + transform: rotateX(90deg); + } + 100% { + transform: rotateX(0deg); + } +} \ No newline at end of file