JSFiddle - React, Tailwind, and code Playground

by Ryan Allison

HTML

<div id="divPage1">
  Players:
  <select id="ddlPlayers">
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=4>4</option>
    <option value=5>5</option>
    <option value=6>6</option>
    <option value=7>7</option>
    <option value=8>8</option>
    <option value=9>9</option>
    <option value=10>10</option>
  </select>
  <br>
  <br>
  <div id="divNamesList">
    <input type=text id="txtName0" value="Player1">
    <br>
    <input type=text id="txtName1" value="Player2">
    <br>
  </div>
  <br>
  <button id="btnNext">Next</button>
</div>
<div id="divPage2" style="display:none;">
  <span id="spnTimer">
    <div id="divTimer0">
      <p id="pName0"></p>
      <p id="pTurn0">0</p>      
      <span id="Timer0" class="timer">0.000</span>
</div>
<div id="divTimer1">
  <p id="pName1"></p>
  <p id="pTurn1">0</p>
  <span id="Timer1" class="timer">0.000</span>
</div>
<div id="divTimer2" style="display:none;">
  <p id="pName2"></p>
  <p id="pTurn2">0</p>
  <span id="Timer2" class="timer">0.000</span>
</div>
<div id="divTimer3" style="display:none;">
  <p id="pName3"></p>
  <p id="pTurn3">0</p>
  <span id="Timer3" class="timer">0.000</span>
</div>
<div id="divTimer4" style="display:none;">
  <p id="pName4"></p>
  <p id="pTurn4">0</p>
  <span id="Timer4" class="timer">0.000</span>
</div>
<div id="divTimer5" style="display:none;">
  <p id="pName5"></p>
  <p id="pTurn5">0</p>
  <span id="Timer5" class="timer">0.000</span>
</div>
<div id="divTimer6" style="display:none;">
  <p id="pName6"></p>
  <p id="pTurn6">0</p>
  <span id="Timer6" class="timer">0.000</span>
</div>
<div id="divTimer7" style="display:none;">
  <p id="pName7"></p>
  <p id="pTurn7">0</p>
  <span id="Timer7" class="timer">0.000</span>
</div>
<div id="divTimer8" style="display:none;">
  <p id="pName8"></p>
  <p id="pTurn8">0</p>
  <span id="Timer8" class="timer">0.000</span>
</div>
<div id="divTimer9" style="display:none;">
  <p id="pName9"></p>
  <p id="pTurn9">0</p>
  <span...

JavaScript

var n = 2,
  c = 0,
  playerTurns = [],
  playerTimes = [],
  playerNames = [],
  pageOne = $("#divPage1"),
  pageTwo = $("#divPage2"),
  spnTimer = $("#spnTimer"),
  offset, interval;

$("#ddlPlayers").change(function() {
  $("#divNamesList").empty();
  n = $("#ddlPlayers").val();
  for (i = 0; i < n; i++) {
    $("#divNamesList").append("<input type=text id=\"txtName" + i + "\" value=\"Player" + (i + 1) + "\"><br>")
  }
});

/* Next button */
$("#btnNext").click(function() {
  $("#spnTimer div").hide();
  c = 0;
  for (i = 0; i < n; i++) {
    playerNames[i] = $("#txtName" + i).val();
    $("#pName"+i).text(playerNames[i]);
    playerTimes[i] = 0;
    playerTurns[i] = 0;
    $("#divTimer" + i).show();
  }
  pageOne.hide();
  pageTwo.show();
});

/* Start button */
$("#btnStart").click(function() {
  $("#btnEndTurn").attr("disabled", false);
  start($("#Timer" + c)[0], c);
});

/* Stop button */
$("#btnStop").click(function() {
  stop();
});

/* End Turn Button */
$("#btnEndTurn").click(function() {
  stop();
  playerTurns[c]++;
  //playerTimes[c] = 0;
  $("#pTurn" + c).text(playerTurns[c]);
  if (c == n - 1) {
    c = 0;
  } else {
    c++;
  }
  start($("#Timer" + (c))[0], c);

});

/* Clear button */
$("#btnClear").click(function() {
  reset();
});

/* Back Button */
$("#btnBack").click(function() {
  pageOne.show();
  pageTwo.hide();
});


function start(timer, p) {
  if (!interval) {
    offset = Date.now();
    interval = setInterval(function() {
      update(timer, p)
    }, 1);
  }
}

function stop() {
  if (interval) {
    clearInterval(interval);
    interval = null;
  }
}

function reset() {
  $("#spnTimer span").text("0.000");
  //render(0);
}

function update(timer, p) {
  playerTimes[p] += delta();
  render(timer, p);
}

function render(timer, p) {
  timer.innerHTML = playerTimes[p] / 1000;
}

function delta() {
  var now = Date.now(),
    d = now - offset;

  offset = now;
  return d;
}