JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="lane1">1</div>
<div id="lane2">2</div>
<div id="lane3">3</div>
<div id="lane4">4</div>
================
<div id="win1">1</div>
<div id="win2">2</div>
<div id="win3">3</div>
<div id="win4">4</div>

<p><a href="#" onclick="roll1();">Check</a></p>
<p><a href="#" onclick="reset();">Reset</a></p>

================

<table class="lineup" cellspacing="2" cellpadding="2">
  <tbody>
    <tr>
      <td>Snail 1<div>img</div><span id="sn1"></span>/1</td>
      <td>Snail 2<div>img</div><span id="sn2"></span>/1</td>
      <td>Snail 3<div>img</div><span id="sn3"></span>/1</td>
      <td>Snail 4<div>img</div><span id="sn4"></span>/1</td>
    </tr>
  </tbody>
</table>


<p>
	  <label>
	    <input type="radio" name="snails" value="1" id="s1">
	    s1</label>

	  <label>
	    <input type="radio" name="snails" value="2" id="s2">
	    s2</label>

	  <label>
	    <input type="radio" name="snails" value="3" id="s3" checked >
	    s3</label>

	  <label>
	    <input type="radio" name="snails" value="4" id="s4">
	    s4</label>

</p>
	<p>
	  <label>
	    <input type="radio" name="place" value="1" id="p1">
	    1st</label>

	  <label>
	    <input type="radio" name="place" value="2" id="p2" checked>
	    2nd</label>

	  <label>
	    <input type="radio" name="place" value="3" id="p3">
	    3rd</label>

</p>
<p>
	  <label>
	    <input type="radio" name="bet" value="10" id="b10">
	    10</label>

	  <label>
	    <input type="radio" name="bet" value="20" id="b20" checked>
	    20</label>

	  <label>
	    <input type="radio" name="bet" value="50" id="b50">
	    50</label>

</p>


<p>Snail: <span id="result">none</span></p>
<p>Place: <span id="result2">none</span></p>
<p>Bet: <span id="result3">none</span></p>
<div id="win">none</div>
<p>£<span id="wallet">100</span></p>

<p><span id="def">?</span></p>

CSS

/*
.col1 {background-color:red;}
.col2 {background-color:green;}
.col3 {background-color:blue;}
.col4 {background-color:yellow;}

*/

.lineup td {text-align:center;}

JavaScript

var ranodds = function() {

// Random Odds

var array = [2, 4, 5, 20];
var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

var newodd = array;

var snail1Odds = array[0];
var snail2Odds = array[1];
var snail3Odds = array[2];
var snail4Odds = array[3];

return [snail1Odds, snail2Odds, snail3Odds, snail4Odds];
};


var codes = ranodds();
var snail1Odds = codes[0];
var snail2Odds = codes[1];
var snail3Odds = codes[2];
var snail4Odds = codes[3];

var sn1 = document.getElementById("sn1");
var sn2 = document.getElementById("sn2");
var sn3 = document.getElementById("sn3");
var sn4 = document.getElementById("sn4");

sn1.innerHTML = snail1Odds;
sn2.innerHTML = snail2Odds;
sn3.innerHTML = snail3Odds;
sn4.innerHTML = snail4Odds;

// Roll Dice

function roll1() {
var winner1;
var roll = Math.floor((Math.random() * 100) + 1);
if (roll < 101) {winner1 = 4;}

if (roll < 96) {winner1 = 3;}

if (roll < 76) {winner1 = 2;}

if (roll < 51) {winner1 = 1;}

var win1 = document.getElementById("win1");
win1.innerHTML = winner1;
roll2(winner1);
}


function roll2(el) {
var winner1 = el;
var winner2;
var roll = Math.floor((Math.random() * 100) + 1);

if (roll < 101) {winner2 = 4;}

if (roll < 96) {winner2 = 3;}

if (roll < 76) {winner2 = 2;}

if (roll < 51) {winner2 = 1;}

if (winner2 == winner1) {roll2(winner1);}
else {
var win2 = document.getElementById("win2");
win2.innerHTML = winner2;
roll3(winner1,winner2);}
}


function roll3(el1,el2) {
var winner1 = el1;
var winner2 = el2;
var winner3;
var roll = Math.floor((Math.random() * 100) + 1);

if (roll < 101) {winner3 = 4;}

if (roll < 96) {winner3 = 3;}

if...