Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="spin_widget">
  <div class="wheel_holder" id="the_wheel">
    <div class="assests" style="display: none">
      <img src="https://dl.dropboxusercontent.com/s/du2xrt3903k34b2/spinner-wheel_board__bg.png?token_hash=AAHefLlKqPXsIxfza_HfuvEfRwZnY5EWMYOGA5kt3FZv4Q&dl=1" alt="" id="wheel_bg"/>
      <img src="https://dl.dropboxusercontent.com/s/p1grg6kuspaklqe/spinner-wheel_board__highlight.png?token_hash=AAFEC_xUVm6Na2aYdb0jcdC1-1q-0f3svu5uOQPwYIEu1A&dl=1" alt="" id="highlights" />
      <img id="wheel" class="wheel" src="http://files.enjin.com/545223/spinner-wheel_board__content1.png" alt="" />
    <img id="needle" src="https://dl.dropboxusercontent.com/s/e3vqwrud9zbi185/spinner-needle.png?token_hash=AAF9of63bm8-N0cFzBBJRSNOwegi-QZyoxyKdFSMGkflzg&dl=1" />
    <img src="http://files.enjin.com/545223/d62f28ffffffcc224efffffffa19ffffffccffffffd1494f31ffffff9251.bmp" alt="" id="pin"  />
    </div>
  </div>
  
  <div class="content">
    <div id="action_text">
      <h1><div>calcula tu finiquito</div> <div>y gana <span class="highlight">premios</span></div> <div>Garantizados</div></h1>
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTCbSRfss0yFLSIClsB3plFmnQGlxWstITWIkn0N4KAHnA0Kip6" alt="" id="btn_spin_me" style="display: none"/>
    </div>
    <div id="result_text" class="hide">
      <h1>
        <div class="highlight">Enhorabuena</div> 
        <div>has ganado <span id="prize_money" class="highlight"></span></div>
      </h1>
      <p>
       F5 Para volver a jugar
      </p>
    </div><!--result_text-->
  </div>
</div>

 
              
            
!

CSS

              
                @import "compass/css3";

$wheel_height: 400px;
$wheel_width: $wheel_height;

.spin_widget{
  position: relative;
  color: #fff;
  background-color: black;
  height: 500px;
  .hide{
      display: none;
  }
  
  .content{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    margin-top: -150px;
    margin-left: 40px;
    text-align: center;
    h1{
      text-transform: uppercase;
      .highlight{
        color: orange;
      }
    }
    .btn.play {
      width: 262px;
      height: 77px;
      margin: 0 auto;
    }
  }
    
  .wheel_holder{
    .assests{
      display: none;
    }
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -($wheel_width/2 + 200px);
    margin-top: -$wheel_height/2;
    text-align: center;
  }
}

.btn{
  border: none;
  text-indent: -9999;
  font-size: 0;  
  &.play{
    width: 262px;
    height: 77px;
    background: url('https://s24.postimg.org/8ub7mziqd/btn_spin_play.png');
  }
}


              
            
!

JS

              
                Raphael ->
  wheel_bg_src      = document.getElementById('wheel_bg').src
  wheel_src      = document.getElementById('wheel').src
  highlight_src  = document.getElementById('highlights').src
  pin_src        = document.getElementById('pin').src
  needle_src     = document.getElementById('needle').src
  btn_spin_src     = document.getElementById('btn_spin_me').src
  
  paper = Raphael("the_wheel", 800, 400)
  wheel_bg = paper.image(wheel_bg_src, 0, 0, 400, 400)
  wheel = paper.image(wheel_src, 0, 0, 400, 400)
  pin = paper.image(pin_src, 170, 160, 51, 58)
  highlight = paper.image(highlight_src, 0, 0, 400, 400)
  needle = paper.image(needle_src, 185, -10, 29, 64)
  btn_spin = paper.image(btn_spin_src, 500, 220, 309, 87)
  
  deg_inc = 360/12
  money_map =
    'AAA TU CASA ,MAS BIEN DEBAJO DE PUNTE YA QUE EN PARO ESTARAS UNOS 1000 AÑOS': 0
    'UNA PALMADITA EN LA ESPALADA, CON AMOR': deg_inc
    'NADA!, A QUE MOLO': deg_inc*2
    'UN PALOOOO!!!!! PARA EVITAR PENSAMIENTOS IMPUROS ETE PALO NO TIENE NI FORMA, TAMAÑO Y COLOR UN PALO NADA MAS' : deg_inc*3 
    'UN TELEFONO CON PILOTO ROJO 24H QUE EL ESTRES TE ACOMPAÑE': deg_inc*4
    'UNA PUTA COCACOLA PARA QUE CUIDES ESA VOZ DESPUES DE 4 AÑOS GRITANDO': deg_inc*5
    'OSTIA UN PESCAO!': deg_inc*6
    '- Mamá, tengo dos noticias, una buena y una mala, Primero la buena, hija,Pasé una prueba - Muy bien, ¿Y la mala?- Que era un Test de embarazo.': deg_inc*7
    'LA SILLA DEL CAU QUE NI DIOS QUIERE PARA DEJARTE EL CULO COMO UN MANDRIL': deg_inc*8
    'AS RENOVADO CON AXPE ENHORABUENA ESCLAVITO': deg_inc*9
    '10000': deg_inc*10
    '100 KILOS DE CARTAS DEL ARMARIO DE PROTECCIÓN DE DATOS PARA QUE MEMORICES CONTRASEÑAS TODO EL TIMEPO QUE ESTE EN PARO': deg_inc*11
  
  # returns the a random value b/w `from` and `to`
  randomFromInterval = (from, to) ->
    Math.floor( Math.random()*(to-from+1) + from)

  # fake server response factory for win money
  get_win_value = (money_map) ->
    val = for money, degree of money_map
      'money': money, 'degree': degree
    val[randomFromInterval(0, val.length)]

  # display result
  show_result = (win_value) ->
    btn_spin.hide()
    action_text = document.getElementById('action_text')
    action_text.parentNode.removeChild(action_text)
    document.getElementById("result_text").className = ""
    document.getElementById("prize_money").innerHTML = win_value.money + '!'
    
  # wheel spinner
  spin_the_wheel = (win_value) ->
    angle = 5*360+win_value.degree+randomFromInterval(-10, 10)
    needle.animate({transform: "0r" + -5}, 500, "<>")
    wheel.stop().animate({transform: "r" + angle}, 5000, "cubic-bezier(0.100, 0.300, 0.700, 1.050)", (e) ->
      needle.animate({transform: "0r" + 0}, 300, "<>", show_result(win_value))                       
    )
  
  btn_spin.click (e) ->
    win_value = get_win_value(money_map)
    spin_the_wheel(win_value)
    btn_spin.unclick() 
    
              
            
!
999px

Console