Hello,
I have coded a jackpot and I would like it to be responsive.
For that, I put percentages, tried Bootstrap…
But I can’t adapt the jackpot slots and the handle, especially on mobile devices.
Here are my lines of CSS and HTML. I can provide the JS if needed.
Thanks and have a nice day! 
/*** Global ***/
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
* {
padding: 0;
margin: 0;
}
img {
width: 100%;
}
:root {
--machine-w: 400px;
--machine-h: 150px;
}
/*** Responsive ***/
@media screen and (max-width: 959px) {
img {
max-width: 100%;
height: auto;
}
.logo-fromage img {
height: 40px;
width: auto;
}
.logo-marmiton img {
height: 20px;
width: auto;
}
}
.head-1 {
background: url(../img/bg-top-1.jpg) center center no-repeat;
height: 192px;
padding-top: 10px;
}
.titre_top {
padding-bottom: 45px;
color: #fff;
}
.titre_top .date {
font-size: 16px;
}
.title-form {
color: #324c5c;
margin-left: 20px;
margin-right: 20px;
margin-top: 15px;
font-size: 1.5em;
font-family: "Source Serif Pro", serif;
}
.color-2 {
color: #e25944;
}
.style-nom {
background: #f9d643;
padding: 10px;
border-radius: 20px;
}
body {
font-weight: 600;
text-align: center;
background: #f2f2f2;
width: 100%;
overflow: hidden;
}
.titre-jeu {
margin-top: 1rem;
font-family: "Source Serif Pro", serif;
}
h1,
h2,
.titre-jeu {
color: white;
font-family: "Source Serif Pro", serif;
font-weight: 700;
margin-bottom: 0px;
}
/*** Jackpot ***/
#jackpot-bg {
position: relative;
padding-top: 50px;
max-width: 520px;
margin: auto;
}
#jackpot-slot {
position: absolute;
top: 65%;
left: 10%;
width: 76%;
}
#jackpot-stick {
cursor: pointer;
position: absolute;
top: 65%;
left: 50%;
}
.base-machine {
height: var(--machine-h);
background: -webkit-linear-gradient(top, #cb5838 0%, #cb5838 100%);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.base-frame {
width: 95%;
height: 85%;
opacity: 1;
border-radius: 3px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.slot {
width: calc((var(--machine-w) / 3) - 20px);
height: calc(var(--machine-h) - 40px);
background: #ffffff;
border-radius: 6px;
overflow: hidden;
}
.band,
.band1,
.band2 {
width: 150px;
position: relative;
}
.band img,
.band1 img,
.band2 img {
position: absolute;
left: -20px;
top: -525px;
height: auto;
}
.event-none {
pointer-events: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bandit manchot</title>
<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="img/ruby.png" />
</head>
<body>
<!--Header-->
<header class="head-1">
<div class="container d-flex flex-column h-100">
<div class="top-logo d-flex justify-content-between align-items-center">
<div class="logo-fromage">
<img
src="img/logo-fromage.png"
width="289"
height="55"
alt="qui veut du fromage"
/>
</div>
<div class="logo-marmiton">
<img
src="img/logo-marmiton.svg"
width="180"
height="28"
alt="marmiton"
/>
</div>
</div>
<div class="m-auto titre_top text-center">
<h1>Grand Jeu Concours</h1>
<div class="date">du --/--/2021 au 28/11/2021</div>
</div>
</div>
</header>
<!-- Jackpot entier -->
<div class="title-content">
<p class="title-form">
<b>
Cliquez sur le manche et tentez de remporter
<span class="color-2">un cours de cuisine</span> avec
<span class="style-nom">@NOMINFLUENCEUR</span>
</b>
</p>
</div>
<!-- SVG Machine background -->
<div id="jackpot-bg" class="row">
<img src="img/bg-casino.svg" alt="background jackpot" />
<!-- Slots -->
<div id="jackpot-slot" class="col">
<div class="base-machine">
<div class="base-frame">
<div class="slot">
<div class="band"><img src="img/bande.jpg" /></div>
</div>
<div class="slot">
<div class="band1"><img src="img/bande.jpg" /></div>
</div>
<div class="slot">
<div class="band2"><img src="img/bande.jpg" /></div>
</div>
</div>
</div>
</div>
<!-- Manche de la machine -->
<div id="jackpot-stick" class="col">
<svg
id="trigger"
width="59"
height="110"
viewBox="0 0 35 143.6"
>
<defs>
<linearGradient
id="linear-gradient"
x1="0%"
y1="51%"
x2="100%"
y2="49%"
gradientUnits="userSpaceOnUse"
>
<stop
offset="0%"
style="stop-color: rgb(255, 174, 44); stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: rgb(255, 219, 138); stop-opacity: 1"
/>
</linearGradient>
<linearGradient
id="linear-gradient-2"
x1="23.71"
y1="127.98"
x2="23.71"
y2="83.01"
xlink:href="#linear-gradient"
/>
<linearGradient
id="linear-gradient-3"
x1="20.46"
y1="55.66"
x2="25.41"
y2="55.66"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#6b6b6b" />
<stop offset="1" stop-color="#454545" />
</linearGradient>
<radialGradient
id="radial-gradient"
cx="50%"
cy="50%"
r="50%"
gradientTransform="translate(1.5 -0.3) scale(0.93 0.93)"
gradientUnits="userSpaceOnUse"
>
<stop
offset="0%"
style="stop-color: rgb(175, 29, 74); stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: rgb(228, 54, 85); stop-opacity: 1"
/>
</radialGradient>
</defs>
<path
id="ring1"
d="M0,67.4H7.3a5.1,5.1,0,0,1,5.1,5.1v66.1a5.1,5.1,0,0,1-5.1,5.1H0a0,0,0,0,1,0,0V67.4A0,0,0,0,1,0,67.4Z"
fill="url(#linear-gradient)"
/>
<path
id="ring2"
d="M12.4,83H29.7A5.3,5.3,0,0,1,35,88.3v34.4a5.3,5.3,0,0,1-5.3,5.3H12.4a0,0,0,0,1,0,0V83A0,0,0,0,1,12.4,83Z"
fill="url(#linear-gradient-2)"
/>
<ellipse
id="hole"
cx="22.9"
cy="88.6"
rx="5.9"
ry="2.2"
fill="#3f3f3f"
/>
<rect
id="stick"
x="20.5"
y="22.2"
width="5"
height="66.88"
fill="url(#linear-gradient-3)"
/>
<ellipse
id="head"
cx="22.9"
cy="11.3"
rx="11.2"
ry="11.3"
fill="url(#radial-gradient)"
/>
</svg>
</div>
</div>
<!-- Modal Bootstrap perdu/gagné une fois l'animation jackpot terminée -->
<div class="modal" id="modal-box" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button
type="button"
class="btn-close close"
data-dismiss="modal"
aria-label="Close"
data-toggle="modal"
data-backdrop="false"
></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary btn-fermer close"
data-dismiss="modal"
data-toggle="modal"
data-backdrop="false"
>
Fermer
</button>
</div>
</div>
</div>
</div>
<!-- Bibliothèques JS + plugin + script.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"
></script>
<script src="js/jquery.jackpotDC.js"></script>
<script src="js/script.js"></script>
</body>
</html>
(function($) {
$.fn.jackpotDC = function(options) {
var settings = $.extend({
counter : 0,
nbTour : 3,
loseTitle : 'Perdu !',
winTitle : 'Gagné !',
loseText : 'Lorem ipsum',
winText : 'Lorem ipsum',
}, options );
return this.each(function () {
/*** Variables ***/
const band = $('.band');
const band1 = $('.band1');
const band2 = $('.band2');
const wBand = $('.band img').width();
const hBand = $('.band img').height();
const hCase = hBand / 5;
const hCaseDemi = hCase / 2;
console.log(hCase, hCaseDemi);
let win; // Détermine si le joueur perd ou gagne
let tab = [];
const tabTotal = tab.length;
let random;
// Ajoute dans tab les milieux de case sur lesquels tombe le jackpot
for(let i=1; i<5; i++) {
tab.push(Math.abs((hCase * i) - hCaseDemi));
}
console.log(tab);
const myModal = new bootstrap.Modal(document.getElementById('modal-box'), {
keyboard: false
})
// random avec exclusion du lot
/*function randomExcluded(min, max, excluded) {
var n = Math.floor(Math.random() * (max-min) + min);
if (n >= excluded) n++;
return n;
}*/
// random Donne un entier aléatoire entre 0 et x
function randomPicto(x){
return Math.floor((Math.random() * x) + 1) - 1;
}
// Animation des bandes du jackpot
let tl = gsap.timeline({paused:true});
tl.to(band, {duration:.2, repeat:5, y:hCase * 3 + "px", ease:"none", onComplete:fin, onCompleteParams:[band]}, 0.2)
.to(band1, {duration:.2, repeat:5, y:hCase * 3 + "px", ease:"none", onComplete:fin, onCompleteParams:[band1]}, 0)
.to(band2, {duration:.2, repeat:5, y:hCase * 3 + "px", ease:"none", onComplete:fin, onCompleteParams:[band2]}, 0.8);
// Animation du manche du jackpot
function slotTriggerMove() {
gsap.set([head, stick, hole], {y:0, scale: 1}); // Décomposition du manche en 3 parties : tête, bras, base
gsap.to(head, {duration: .4, y: "70"+"px", repeat: 1, yoyo: true, ease:Sine.easeIn});
gsap.to(stick, {duration: .4, y: "14"+"px", scaleY: .3, transformOrigin:"50% 100%", repeat: 1, yoyo: true, ease:Sine.easeIn});
gsap.to(hole, {duration: .4, y: "10"+"px", scaleY: 2, repeat: 1, yoyo: true, ease:Sine.easeIn});
}
function displayModal() {
myModal.show();
}
function fin(var1){
if (var1 == band2) {
if (!win) {
if (random == (tabTotal -1)) {
random = 0
} else {
random ++;
}
gsap.set(var1, {y:"0"});
gsap.to(var1, {duration:0.5, y:"+"+tab[random]+"px", ease:"back.out(2)"})
$('.modal-title').text(settings.loseTitle);
$('.modal-body').text(settings.loseText);
setTimeout(displayModal, 1000);
} else {
$('.modal-title').text(settings.winTitle);
$('.modal-body').text(settings.winText);
setTimeout(displayModal, 1000);
}
}
gsap.set(var1, {y:"0"});
gsap.to(var1, {duration:0.5, y:"+"+tab[random]+"px", ease:"back.out(2)"})
}
$('#jackpot-stick').click(function() {
random = randomPicto(tabTotal); console.log(random)
tl.play(0);
slotTriggerMove();
settings.counter++;
if (settings.counter < settings.nbTour ) {
win = false;
} else {
win = true;
$('#jackpot-stick').addClass('event-none');
};
});
$("img").mousedown(function(){
return false;
});
});
};
})(jQuery);
