sr2ini/js/sr2ini.js

/*
 *	helper functions
 */

// roll for initiative with the given reaction and number of ini dice  
function rollForInitiative(dice, rea) {
	let ini = 0;
	for ( let i = 0; i < parseInt(dice); i++ ) {
		roll = Math.floor(Math.random() * 6) + 1;
		console.log(roll);	
		ini += roll;
	}
	return ini + parseInt(rea);
}


/*
 *	Event handler functions
 */

// blur handler for input elements (blur is triggered when an element loses focus) that checks if validation is required
function handleBlur (e) {
	let $tr = $(e.target).parents("tr");

	// trigger validation check only if the blurred input element is not in #newCombRow and focus is not going to another input in the same row 
	if ( ( ! $tr.is("#newCombRow") ) && ( ! ( $(e.relatedTarget).is("input") && $(e.relatedTarget).parents("tr") == $tr ) ) ) {
			
		// validation check 
		if ( ! validateCombRowValues($tr) )  { 
			e.preventDefault();
			return false;
		}

		// did Ini value stay the same? do nothing then  
		if ( $tr.find(".combIni")[0].value == $tr.attr("data-ini") ) {
			return true;
		}
					
		// Ini value changed => reposition row
		$tr.attr("data-ini", $tr.find(".combIni")[0].value);
		let $trc = $tr.clone(true);
		$tr.remove();
		insertCombRow($trc);
	}
}


// click handler for act buttons
function handleActButtonClick (e) {
	// find current table row
	let $tr = $(e.target).parents("tr.combRow").clone(true);
	let input = $tr.find(".combIni")[0];

	// reduce ini by 10 but not lower than 0
	input.value = Math.max(parseInt(input.value) - 10, 0);
	$(input).parents("tr").attr("data-ini", input.value);

	// remove original current table row and insert clone at newly calculated position 
	$(e.target).parents("tr.combRow").remove();
	insertCombRow($tr);

	return;
}


// click handler for remove buttons
function handleRemoveButtonClick (e) {
	// remove table row
	$(e.target).parents("tr.combRow").remove();
}


/*
 *	Validation functions
 */

// validate a combatant row form by checking for all conditions, including regular HTML5 validation
function validateCombRowValues($tr) {

	let inputElements = $($tr).find("input[class*='comb']").toArray();

	// do standard HTML5 form validation first (validates that name is not empty and that all other values are numbers within their individual ranges) 
	let valid = true;
	for (let input of inputElements) {
		if ( ! input.reportValidity() ) {
			valid = false;
			break
		}
	}
	if ( ! valid ) {
		return false;
	}

	// now some custom validation
	// first get values
	let ini = inputElements[1].value.trim();
	let dice = inputElements[2].value.trim();
	let rea = inputElements[3].value.trim();
console.log("I/D/R: " + ini + "/" + dice + "/" + rea);

	// invalidate if ini, dice and rea are all empty
	if ( ini == "" && ( dice == "" || rea == "" ) ) {
		inputElements[1].setCustomValidity("Requiring values for initiative, ini dice and reaction, or all three");
		inputElements[1].reportValidity();
		inputElements[1].setCustomValidity("");
		return false;
	}

	// invalidate if dice or rea is empty but not both
	if ( ( dice == "" ) != ( rea == "" ) ) {
		inputElements[2].setCustomValidity("Values required for both dice and reaction, or none (if ini is given)");
		inputElements[2].reportValidity();
		inputElements[2].setCustomValidity("");
		return false;
	}

	// invalidate if value for ini doesn't align with values for dice+rea
/*	if ( ini != "" && dice != "" && rea != "" ) {
		let d = parseInt(dice);
		let r = parseInt(rea);
		if ( ini < d+r || ini > d*6+r ) {
			inputElements[1].setCustomValidity("Impossible to reach initiative " + ini + " with " + dice + "D6+" + rea + ", please adjust ini or leave empty");
			inputElements[1].reportValidity();
			inputElements[1].setCustomValidity("");
			return false;
		}	
	}*/

	// ok fine
	return true;
}


/*
 *	Main functions
 */

// inserts a combatant table row (in form of a jQuery object) at the correct position in the table 
function insertCombRow($tr) {

	let ini = parseInt($tr.find(".combIni").val());
	let $combRows = $("tr.combRow:not(#newCombRow)");

	// find correct position for new row

	// no combatants in table => put new row below the form row
	if ( $combRows.length == 0 ) {
		$("tr#newCombRow").after($tr);
	} 

	// ini is less than the lowest in table => put new row at the end
	else if ( ini < parseInt($combRows.last().find(".combIni").val() ) ) {
		$combRows.last().after($tr);
	} 

	// ok, compare ini with the ones in table (top to bottom)
	else {
		for ( let i = 0; i < $combRows.length; i++ ) {
			let currentRowIni = parseInt($combRows.eq(i).find(".combIni").val());

			// ini larger than the one already in table? insert before that row
			if ( ini > currentRowIni ) {
				$combRows.eq(i).before($tr);
				break;		
			}

			// ini equal to the one already in table => compare rea
			else if ( ini == currentRowIni ) {
				let rea = parseInt($tr.find(".combRea").val());
				let currentRowRea = parseInt($combRows.eq(i).find(".combRea").val());
console.log("rea is " + rea + " and currentRowRea is " + currentRowRea); 

				// one or two values for rea missing, or new row rea larger than current row rea => insert before
				if ( rea != NaN && currentRowRea != NaN && rea > currentRowRea ) {
					$combRows.eq(i).before($tr);
					break;		
				}

				// we're already at the last row => insert after
				if ( i + 1 == $combRows.length ) {
					$combRows.eq(i).after($tr);
				}
			}
		}
	}
}


// add new combatant 
function addCombatant (e) {
	if ( ! validateCombRowValues($("#newCombRow")) ) {
		return;
	}

	// get values
	let ini = $("#newCombRow .combIni").val().trim();
	let dice =  $("#newCombRow .combDice").val().trim();
	let rea = $("#newCombRow .combRea").val().trim();

	// roll for initiative if ini is empty
	ini = (ini != "") ? ini : rollForInitiative(dice, rea);

	// construct jQuery object for table row
	let $tr = $($.parseHTML( [
		'<tr class="combRow" data-ini="', ini, '">\n',
			'<form name="combForm" class="combForm needs-validation" onsubmit="return false;">\n',
				'<td>\n',
					'<input type="text" required="" maxlength="40" class="form-control combName" title="click to edit" value="', $("#newCombRow .combName").val().trim(), '" />\n',
				'</td>\n',
				'<td class="col-sm-2">\n',
					'<input type="number" min="0" max="50" class="form-control combIni" title="click to edit" value="', ini, '" />\n',
				'</td>\n',
				'<td class="col-sm-3">\n',
					'<div class="input-group">\n',
						'<input type="number" min="1" max="5" class="form-control combDice" title="click to edit" value="', dice, '" />\n',
						'<span class="input-group-text">D+</span>\n',
						'<input type="number" min="1" max="20" class="form-control combRea" title="click to edit" value="', rea, '" />\n',
					'</div>\n',
				'</td>\n',
				'<td>\n',
					'<div class="btn-group d-flex">\n',
						'<button type="button" class="btn btn-warning w-50 act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button>&nbsp;\n',
						'<button type="button" class="btn btn-danger w-50 remove-button" title="Remove combatant">X</button>\n',
					'</div>\n',
				'</td>\n',
			'</form>\n',
		'</tr>'].join("")
	));

	// add handlers to table row object
	$tr.find("input[class*='comb']").on("blur", handleBlur);
	$tr.find("input[type='number']").bind('keyup input change', handleBlur);
	$tr.find("button.act-button").on("click", handleActButtonClick);
	$tr.find("button.remove-button").on("click", handleRemoveButtonClick);

	// insert combatant row
	insertCombRow($tr);

	//reset form values
	$("#newCombRow input[class*='comb']").val("");
	
	return;
}


// start a new combat round
function newRound() {

	// are there rows at all?
	let $oldRows = $("tr.combRow:not('#newCombRow')");
	if ( $oldRows.length == 0 ) {
		return;
	}

	// clone existing rows 
	let $newRows = $oldRows.clone(true);

	// reset ini values in cloned rows
	$newRows.each( function() {
		let $input = $(this).find(".combIni");
		let dice = $(this).find(".combDice").val();
		if ( dice == "" ) {
			$input.val(0);
		} else {
			$input.val(rollForInitiative(dice, $(this).find(".combRea").val()));
		}
		$(this).attr("data-ini", $input.val());
	});

	// remove old rows
	$oldRows.remove();

	// insert cloned rows
	$newRows.each( function() {
		insertCombRow($(this));
	});
}


/*
 *	Initialize document
 */

$(document).ready(function(){
	// add event handlers to initial buttons and input elements
	$("#newCombAddButton").on("click", addCombatant);
	$("#newRoundOkButton").on("click", newRound);
	$("#newCombRow input[class*='comb']").on("blur", handleBlur).on("keydown", function (e) {
		if ( e.which == 13 || e.which == 10 ) {
			addCombatant();
		}
	});
});