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);
}

// sorts the combatants by ini value
function sortTable() {
console.log("OK let's sort");
	let $table = $("table#combatants");
	let $rows = $table.find("tr.combRow").toArray().sort(function(a, b) {
		return $(b).attr("data-ini") - $(a).attr("data-ini");
	});
	for ( var i = 0; i < $rows.length; i++ ) {
		$table.append($rows[i]);
	}
}


/*
 *	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 focus is not going to another input in the same row 
	if ( ( ! ( $(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);
		sortTable()
	}
}


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

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

	// resort table
	sortTable();
}


// 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();
	let inputElements = {
		name: $(tr).find("input[class*='combName']").get(0),
		ini: $(tr).find("input[class*='combIni']").get(0),
		dice: $(tr).find("input[class*='combDice']").get(0),
		rea: $(tr).find("input[class*='combRea']").get(0)
	};

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

	if ( ! valid ) {
		return false;
	}

	// now some custom validation
	// first get values
	let ini = inputElements["ini"].value.trim();
	let dice = inputElements["dice"].value.trim();
	let rea = inputElements["rea"].value.trim();

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

	// invalidate if dice or rea is empty but not both
	if ( ( dice == "" ) != ( rea == "" ) ) {
		inputElements["dice"].setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)");
		inputElements["dice"].reportValidity();
		inputElements["dice"].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["ini"].setCustomValidity("Impossible to reach initiative " + ini + " with " + dice + "D6+" + rea + ", please adjust ini or leave empty");
			inputElements["ini"].reportValidity();
			inputElements["ini"].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");

console.log($("tbody#sortable"));

	// find correct position for new row

	// no combatants in table => put new row below the form row
	if ( $combRows.length == 0 ) {
		$("tbody#sortable").append($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($("#addCombForm")) ) {
		return;
	}

	// get values
	let name = $("#addCombModal .combName").val().trim();
	let ini = $("#addCombModal .combIni").val().trim();
	let dice =  $("#addCombModal .combDice").val().trim();
	let rea = $("#addCombModal .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="', name, '" />\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
	$("table#combatants").append($tr);
	sortTable();

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


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

	// are there rows at all?
	let $rows = $("tr.combRow");
	if ( $rows.length == 0 ) {
		return;
	}

	// reset ini values in cloned rows
	$rows.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());
	});

	// resort table
	sortTable();
}


/*
 *	Initialize document
 */

$(document).ready(function(){
	// add event handlers to initial buttons and input elements
	$("#addCombModalButton").on("click", addCombatant);
	$("#newRoundOkButton").on("click", newRound);
	$("#addCombModal input[class*='comb']").on("keydown", function (e) {
		if ( e.which == 13 || e.which == 10 ) {
			addCombatant();
			$('#addCombModal').modal("hide");
		}
	});
	$('#addCombModal').on('shown.bs.modal', function() {
		$('.combName').focus();
	})
});