JSFiddle - React, Tailwind, and code Playground

by Steven Tang

HTML

<title>Jake's Game</title>
<link rel="icon" href="iconname.gif" type="image/gif">
<body>
    <div class="WhiteBackground">
        <div id="Input" class="center">
            <p>Player 1</p>
            <input type="text" id="Name1">
            <br>
            <p>Player 2</p>
            <input type="text" id="Name2">
            <br>
            <p>Player 3</p>
            <input type="text" id="Name3">
            <br>
            <p>Player 4</p>
            <input type="text" id="Name4">
            <br>
            <button id="StartGame">Start Game</button>
        </div>
        <div align="center">
            <p id="Turn"></p>
            <table id="Table" class="hidden">
                <tr>
                    <th></th>
                    <th id="Player1">Player 1</th>
                    <th id="Player2">Player 2</th>
                    <th id="Player3">Player 3</th>
                    <th id="Player4">Player 4</th>
                    <th>Shop</th>
                </tr>
                <tr>
                    <td>Gold</td>
                    <td id="Gold1"></td>
                    <td id="Gold2"></td>
                    <td id="Gold3"></td>
                    <td id="Gold4"></td>
                    <td>
                        <button>N/A</button>
                    </td>
                </tr>
                <tr>
                    <td>Miners</td>
                    <td id="Miners1"></td>
                    <td id="Miners2"></td>
                    <td id="Miners3"></td>
                    <td id="Miners4"></td>
                    <td>10000 Gold</td>
                </tr>
                <tr>
                    <td>Wood</td>
                    <td id="Wood1"></td>
                    <td id="Wood2"></td>
                    <td id="Wood3"></td>
                    <td id="Wood4"></td>
                    <td>
                        <button>N/A</button>
                    </td>
                </tr>
                <tr>
          ...

CSS

tr {
    border-style: inset;
}
th {
    border-style: inset;
}
td {
    border-style: inset;
}
.center {
    text-align: center;
}
body {
    background-image:url(https://5e40645a152b4544e5ed92fd4e55ac29874b4a1a.googledrive.com/host/0B9Tx83SPVgPNfktsVmEwZXVxRTd4VGFSTU5hdEtmclItUHU5RVh5NXFDb2RWR2NnY2tFUWM/Assets/Images/background.png);
    background-size: cover;
}
.WhiteBackground {
    background-color: rgba(255, 255, 255, 0.9);
    background-size: cover;
    text-align: center;
    width:auto;
    margin: auto;
}
.hidden {
    display: none;
}
.unhidden {
    display: block;
}

JavaScript

window.addEventListener('load', function () {
    document.getElementById("StartGame").addEventListener("click", StartGame);
    document.getElementById("EndTurn").addEventListener("click", EndTurn);
});

function StartGame() {
    Player1 = document.getElementById("Name1").value;
    Player2 = document.getElementById("Name2").value;
    Player3 = document.getElementById("Name3").value;
    Player4 = document.getElementById("Name4").value;
    document.getElementById("Player1").innerHTML = Player1;
    document.getElementById("Player2").innerHTML = Player2;
    document.getElementById("Player3").innerHTML = Player3;
    document.getElementById("Player4").innerHTML = Player4;
    var element = document.getElementById("Input");
    element.parentNode.removeChild(element);
    GiveDefaultResources();
    var hidden1 = document.getElementById("Table");
    var hidden2 = document.getElementById("EndTurn");
    hidden1.className = 'unhidden';
    hidden2.className = 'unhidden';
}

function GiveDefaultResources() {
    var window.Gold1 = 20000;
    var window.Gold2 = 20000;
    var window.Gold3 = 20000;
    var window.Gold4 = 20000;
    var window.Wood1 = 0;
   var window.Wood2 = 0;
   var window.Wood3 = 0;
    var window.Wood4 = 0;
    var window.Miners1 = 0;
    var window.Miners2 = 0;
    var window.Miners3 = 0;
    var window.Miners4 = 0;
    var window.Loggers1 = 1;
    var window.Loggers2 = 1;
    var window.Loggers3 = 1;
    var window.Loggers4 = 1;
    document.getElementById("Gold1").innerHTML = Gold1;
    document.getElementById("Gold2").innerHTML = Gold3;
    document.getElementById("Gold3").innerHTML = Gold2;
    document.getElementById("Gold4").innerHTML = Gold4;
    document.getElementById("Wood1").innerHTML = Wood1;
    document.getElementById("Wood2").innerHTML = Wood2;
    document.getElementById("Wood3").innerHTML = Wood3;
    document.getElementById("Wood4").innerHTML = Wood4;
    document.getElementById("Miners1").innerHTML = Miners1;
   ...