Roulette : Casino Game

index.html

<!-- originally from https://codepen.io/daniandl/pen/mMQmGV -->

<div class="roulette">
  <div class="wheel spin">
    <div class="arrow">
    </div>
    <img src="https://i.imgur.com/N01W3Ks.png">
  </div>
</div>

roulette-casino-game.markdown

Roulette : Casino Game

Just a simple Roulette Wheel based on https://codepen.io/daniandl/pen/mMQmGV

A Pen by Dima on CodePen.

License.

script.babel

perfecthalf = ((1 / 37) * 360) / 2;

let currentLength = perfecthalf;

$(".wheel img").css("transform", "rotate(" + perfecthalf + "deg)");

$(".spin").click(() => {
  $(".wheel img").css("filter", "blur(8px)");

  spininterval = getRandomInt(0, 37) * (360 / 37) + getRandomInt(3, 4) * 360;
  currentLength += spininterval;

  numofsecs = spininterval;

  console.log(currentLength);
  $(".wheel img").css("transform", "rotate(" + currentLength + "deg)");

  setTimeout(function () {
    $(".wheel img").css("filter", "blur(0px)");
  }, numofsecs);
});

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(document).ready(function() {
  $(".spin").click();
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

style.less

body {
  margin: 0;
  background: tomato;
}

.roulette {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;

  .wheel img {
    transition: transform 10s cubic-bezier(0.3, 1, 0.7, 1),
      10s filter cubic-bezier(0.1, 1, 0.8, 1),
      10s -webkit-filter cubic-bezier(0.1, 1, 0.8, 1);
    will-change: transform;
    border-radius: 50%;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 600px;
    /* border:4px dashed rgba(255,255,255, .5); */
  }

  .arrow {
    width: 0;
    height: 0;
    border: 80px solid transparent;
    border-top: 110px solid tomato;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -100px);
    z-index: 20;
    border-radius: 0.35em;
  }
  .arrow:after {
  }
}

.spin {
  cursor: crosshair;
}