Responsive jackpot (CSS +JS)

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.


jackpot_mobiledevice

Here are my lines of CSS and HTML. I can provide the JS if needed.
Thanks and have a nice day! :slightly_smiling_face:

/*** 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);

hey. You might want to add the js file too, or at least hardcode in the html what the slots would be.

Hi! Ok, my post is edited! :slight_smile:

Problem solved, my jackpot is responsive! :slight_smile: