Skip to content

Instantly share code, notes, and snippets.

@chrisrobison

chrisrobison/index.html

Created January 24, 2021 18:21
Show Gist options
  • Save chrisrobison/efc341042602b9ac53b3acd03a19a7ba to your computer and use it in GitHub Desktop.
Save chrisrobison/efc341042602b9ac53b3acd03a19a7ba to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chrisrobison created this gist Jan 24, 2021.
    9 changes: 9 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <!-- 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>
    7 changes: 7 additions & 0 deletions roulette-casino-game.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Roulette : Casino Game
    ----------------------
    Just a simple Roulette Wheel based on https://codepen.io/daniandl/pen/mMQmGV

    A [Pen](https://codepen.io/ChristopherRobison/pen/QWKXNBz) by [Christopher Robison](https://codepen.io/ChristopherRobison) on [CodePen](https://codepen.io).

    [License](https://codepen.io/ChristopherRobison/pen/QWKXNBz/license).
    29 changes: 29 additions & 0 deletions script.babel
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    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();
    })
    3 changes: 3 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <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>
    42 changes: 42 additions & 0 deletions style.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    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;
    }