JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<div id="console"></div>
JavaScript
function log(input) {
$("#console").append(input + "<br />");
}
//Define the Game's Time Frame
var Game = new Object(); // Object that holds all game data
var end = { // what time does the game end?
"moment": moment().days(6).hour(0).minute(0).second(0)
};
var beginning = { // what time does the game start?
"moment": moment().days(1).hour(0).minute(0).second(0)
};
function endInning(x){
log('alert! inning '+x+' ended!');
}
// I'm going to over-do the commenting here for debugging:
function generateInnings() { // assign start and end times to each of 10 innings
Game.innings = new Array(); // create array to assign each of 10 inning objects to
var gameHours = 120; // shortcut for calculating game time span
var inningHours = gameHours / 10; // ten innings in a game. how many hours each?
log("Inning Durations: <br> ---------------------------------------");
for (var x = 0; x < 10; x++) { // for 10 intervals of x, generate each inning
var inning = new Object(); // create an inning object to assign start and end to
inning.start = moment(beginning.moment).add("hours", (inningHours * x)); //inning start?
inning.end = moment(inning.start).add("hours", inningHours); // inning end?
Game.innings[x] = inning; // attach inning object to Game.innings array
log("Inning " + x + " Starts: " + inning.start.format("dddd, hh:mm A")); // JSFiddle Output
log("Inning " + x + " Ends: " + inning.end.format("dddd, hh:mm A")); // JSFiddle Output
}
}
generateInnings();
log("<br> Inning End Delays: <br> ---------------------------------------");
function endInningFunc(x){
return (function () {
endInning(x);
});
}
function popBoard() {
for (var x = 0; x < 10; x++) {
// skipping handler for passed innings
// generating time until inning x should be ended
timeTillEnd = moment(Game.innings[x].start).diff(moment(),...