JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<div id="dobbelsteen">0</div>
<div id="leftBtn">Left</div>
<div class="body">House</div>
<div id="rightBtn">Right</div>

CSS

div {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 30px;
    text-align: center;
    -webkit-user-select: none;
}
.body {
    width: 100px;
    height: 100px;
    background-color: blue;
}

JavaScript

var Paths = [];

var index = 0;
var rightindex = 0;
var leftindex = 0;

var canThrow = true;
var dobbelsteenvalue = 0;

var maxTurns = 4;
var turnsLeft = maxTurns;

var inHospital = false;
var turnsInHospital = 0;

var a = ["House", "School", "Work", "Church", "Hospital", "Hotel", "Prison", "Shop"];
a.forEach(function(entry) {
    var singleObj = {}
    singleObj['next'] = 1;
    singleObj['place'] = entry;
    Paths.push(singleObj);
});


function updateBody() {
    $(".body").html(Paths[index].place);
    updateBtns();
};
function onHouse()
{
    turnsLeft = maxTurns;
}
function updateBtns() {
    $("#leftBtn").html(" ");
    $("#rightBtn").html(" ");
};
function updateIndex(dobbelvalue) { 
    rightindex = index + dobbelvalue;
    rightindex = checkIndex(rightindex);
    leftindex = index - dobbelvalue;
    leftindex = checkIndex(leftindex);
    updateRight(rightindex);
    updateLeft(leftindex);
}
function checkIndex(i) {
    if (i < 0) {
        i = 0 - i;
        i = Paths.length - i;
    }
    else if (i >= Paths.length) {
        i -= Paths.length;
    }
    return i;
}
function updateLeft(li) {
    $("#leftBtn").html(Paths[li].place);
}
function updateRight(li) {
    $("#rightBtn").html(Paths[li].place);
}
function setForNextTurn(newIndex)
{
    canThrow = true;
    if (inHospital <= 0)
    {
        index = newIndex;
        turnsLeft--;
        if (Paths[index].place == "House")
        {
            onHouse();
        }
        if (turnsLeft <= 0)
        {
            alert("You ran out of food, you will be transferred to the hospital");
            inHospital = 3;
            index = 4;
            turnsLeft = maxTurns - 1;
        }
    }
    else
    {
        inHospital--;
        alert("You are in the hospital for another " + inHospital + " rounds.");
    }
    leftindex = index; 
    rightindex = index;
}
$("#dobbelsteen").click(function() { 
    if (canThrow)
    {
        if (inHospital > 0)
        {
            setForNextTurn(4);
        }
...