JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/TextPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>


<head>

  <meta charset="UTF-8">

   <link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>




</head>

<body translate="no" >
  <button class="spinBtn">CLICK 2 SPIN!</button>

<div class="wheelContainer">

  <svg class="wheelSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  text-rendering="optimizeSpeed">
<defs>
<filter id="shadow" x="-100%" y="-100%" width="550%" height="550%">
  <feOffset in="SourceAlpha" dx="0" dy="0" result="offsetOut"></feOffset>        
  <feGaussianBlur stdDeviation="9" in="offsetOut" result="drop" />
<feColorMatrix in="drop" result="color-out" type="matrix"
      values="0 0 0 0   0
              0 0 0 0   0 
              0 0 0 0   0 
              0 0 0 .3 0"/>  
 <feBlend in="SourceGraphic" in2="color-out" mode="normal" />
</filter> 
  
</defs>
  <g class="mainContainer">   
    <g class="wheel"/>    
  </g> 
  <g class="centerCircle" />
    
  <g class="wheelOutline" />
    <g class="pegContainer" >
      <path  class="peg" fill="#EEEEEE" d="M22.139,0C5.623,0-1.523,15.572,0.269,27.037c3.392,21.707,21.87,42.232,21.87,42.232	s18.478-20.525,21.87-42.232C45.801,15.572,38.623,0,22.139,0z" /> 
    </g>

<g class="valueContainer" />
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/chris_avatar_popup2.svg" width="330" height="330" x="350" y="222" />
</svg>
  <div class="toast">
    <p/>
  </div>
  
</div>
  <script type="text/javascript" >
      //load your JSON (you could jQuery if you prefer)


    
    
    </script>
</body>

CSS

.peg, .wheelSVG {
 visibility: hidden;
}
.wheelContainer, body, html {
 width: 100%;
 height: 100%;
 margin: 0 auto;
 padding: 0;
}

a:link { color:#F1DC16; }
a:visited { color:#F1DC16; }
a:hover { color:#F1DC16; }
a:active { color:#F1DC16;}

.centerCircle, .valueContainer, .wheelOutline, .wheelText {
 pointer-events: none;
}
.toast, .wheelContainer, body, html {
 text-align: center;
}
.wheelContainer, button {
 transform: translate(-50%, 0);
}
.toast, button {
 position: absolute;
 background-color: #E81D62;
}
body {
 background-color: #2d2d2d;
 overflow: hidden;
}
body, html {
 margin: 0;
 padding: 0;
}
.wheelContainer {
 position: absolute;
 max-width: 1000px;
 margin-left: auto;
 margin-right: auto;
 left: 0%;
 top: 100px;
}
.wheelSVG {
 position: absolute;
 overflow: visible;
 width: 100%;
 height: auto; 
}
.wheelText {
 text-anchor: left;
 font-family: 'Fjalla One', Arial, sans-serif;
 -webkit-user-select: none;
 user-select: none;
}
.toast {
 border-radius: 12px;
 opacity: 0;
right:-140px;
 top:33%;
}
.toast p {
 clear: both;
 font-family: 'Fjalla One', Arial, sand-serif;
 margin: 23px;
 font-size: 30px;
 color: #ededed;
 letter-spacing: 0;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 line-height: 32px;
 -webkit-transition: line-height .2s ease;
 transition: line-height .2s ease;
}
button {
 left:50%;
 width: 80%;
 top: 20px;
 max-width: 400px;
 padding: 20px;
 font-weight: 700;
 font-size: 32px;
 color: #ededed;
 border-radius: 6px;
 border: none;
 box-shadow: 0 2px 0 #D71559;
 cursor: pointer;
 font-family: "Fjalla One", Helvetica, Arial, sans-serif;
}
@media only screen and (max-width: 480px) {
 .toast p, .toast span {
  font-size: 18px;
  line-height: 18px;
 }
}
@media only screen and (min-width: 481px) and (max-width: 800px) {
 .toast p, .toast span {
  font-size: 38px;
  line-height: 38px;
 }
}
@media only screen and (min-width: 801px) {
...

JavaScript

var wheelDataObject = {
colorArray:[ "#364C62", "#F1C40F", "#E67E22", "#E74C3C", "#ECF0F1", "#95A5A6", "#16A085", "#27AE60", "#2980B9", "#8E44AD", "#2C3E50", "#F39C12", "#D35400", "#C0392B", "#BDC3C7","#1ABC9C", "#2ECC71", "#E87AC2", "#3498DB", "#9B59B6", "#7F8C8D"],

segmentValuesArray : [
  {type: "string", value : "HOLIDAY^FOR TWO", win : false, resultText : "YOU WON A HOLIDAY!", probability: "10"},
  {type: "string", value : "Test 20", win : false, resultText : "A STAR", probability: "0"},
  {type: "string", value : "Test 50", win : false, resultText : "A SQUARE", probability: "0"},
  {type: "string", value : "Test 80", win : false, resultText : "AN OCTAGON", probability: "0"},
  {type: "string", value : "Test 100", win : true, resultText : "A TRIANGLE", probability: "0"},
  {type: "string", value : "Test 300", win : false, resultText : "A CIRCLE", probability: "0"},
  {type: "string", value : "Volvo", win : false, resultText : "A HEXAGON", probability: "0"}, 
  {type: "string", value : "LOSE ALL", win : false, resultText : "LOSE ALL" , probability: "20"}
],

  svgWidth: 1024,
  svgHeight: 768,
  wheelStrokeColor: "#D0BD0C",
  wheelStrokeWidth: 18,
  wheelSize: 700,
  wheelTextOffsetY: 80,
  wheelTextColor: "#EDEDED",  
  wheelTextSize: "2.3em",
  wheelImageOffsetY: 40,
  wheelImageSize: 50,
  centerCircleSize: 360,
  centerCircleStrokeColor: "#F1DC15",
  centerCircleStrokeWidth: 12,
  centerCircleFillColor: "#EDEDED",
  segmentStrokeColor: "#E2E2E2",
  segmentStrokeWidth: 4,
  centerX: 512,
  centerY: 384,  
  hasShadows: false,
  numSpins: 5 ,
  spinDestinationArray:[],
  minSpinDuration:6,
  gameOverText:"THANK YOU FOR PLAYING SPIN2WIN WHEEL. COME AND PLAY AGAIN SOON!",
  invalidSpinText:"INVALID SPIN. PLEASE SPIN AGAIN.",
  introText:"YOU HAVE TO<br>SPIN IT <span style='color:#F282A9;'>2</span> WIN IT!",
  hasSound:true,
  gameId: "9a0232ec06bc431114e2a7f3aea03bbe2164f1aa",
  clickToSpin:true,
  spinDirection:"ccw"
}
    
    
    function init() {
   ...