sr2ini/js/sr2ini.js

/* Notes
- different behavior sr2/3; but I'll only implement 2e now
- Initiative could also offer to enter Ini dice (1-5) and Reaction (0-20); that way the app itself could roll their ini 
- highlight current combatant -> es ist sowieso immer der ganz oben dran (Ausnahme: mehrere mit der gleichen ini)
- how do I handle several combatants with the same ini?
- style mit bootstrap
*/



// keydown handler for editable ini elements; gets called when for every key press while editing an ini value
function handleIniKeydown (e) {
	var keycode = e.which;

	// not among the allowed keys: ignore the keystroke 
	if ( ! 
		( keycode == 8 //backspace 
		|| keycode == 9 //tab
		|| keycode == 46 //del
		|| keycode == 27 //escape
		|| keycode >= 35 && keycode <= 40 //arrows, pos1, end 
		|| keycode >= 48 && keycode <= 57 && $(this).text().length <= 1 ) ) //number key, and text length is less than 2
	{
		e.preventDefault();
	};

	// enter key: trigger blur
	// note: keycode is 13 except on safari and iphone where it's 10
	if ( keycode == 13 || keycode == 10 ) {
		$(this).trigger("blur");
	}
}


// keydown handler for editable name elements 
function handleNameKeydown (e) {
	// enter key: don't add newline, just trigger blur
	// note: keycode is 13 except on safari and iphone where it's 10
	if ( e.which == 13 || e.keycode == 10 ) {
		e.preventDefault();
		$(this).trigger("blur");
	}
}


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

	// reduce ini by 10 but not lower than 0
	let ini = parseInt($tr.find(".ini-editable").text()) - 10;
	if ( ini <= 0 ) {
		ini = 0;
		$tr.addClass("ini-zero");
	}
	$tr.find(".ini-editable").text(ini);

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


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

// Blur handler for ini fields. Sets CSS classes and repositions the combatant row 
function handleIniBlur (e) {
	// find current table row
	let $tr = $(e.target).parents("tr.combRow").clone(true);

	// add/remove class ini-zero
	if ( $tr.find(".ini-editable").text() == "0" ) {
		$tr.addClass("ini-zero");
	} else {
		$tr.removeClass("ini-zero");
	}

	//reposition 
	$(e.target).parents("tr.combRow").remove();
	insertCombRow($tr);
}

// 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(".ini-editable").text());
	let $combRows = $("tr.combRow");

	// find correct position for new row

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

	// ini is less than the lowest in table? put the new row at the end
	else if ( ini <= parseInt($combRows.last().find(".ini-editable").text() ) ) {
		$("tbody#sortable").append($tr);
	} 
	
	// compare ini with the ones in table from the top down) and put the new row in the first spot where its ini is larger  
	else {
		for ( var i = 0; i < $combRows.length; i++ ) {
			if ( ini > parseInt($combRows.eq(i).find(".ini-editable").text()) ) {
				$("tr.combRow:eq(" + i + ")").before($tr);
				break;
			}
		}
	}

	return;
}

// add new combatant 
function addCombatant (e) {
	// form not validating? return
	if ( ! ( $("#combForm")[0].checkValidity() ) ) {
console.log("form's not validating :-(");
		// do some javascript magic to trigger a form submit which will show validation messages while not actually going through
		$('<input type="submit"/>').hide().appendTo("#combForm").click().remove();
		return;
	}

	// strip ini value of leading zero 
	let ini = $("#combIni").val(); 
	if ( ini.length == 2 && ini[0] == "0" ) {
		ini = ini[1];
	}
console.log("Ini is: " + ini);
	
	// construct jQuery object for table row
	let $tr = $($.parseHTML( [
		'<tr class="combRow', ini == "0" ? ' ini-zero' : '', '">\n',
			'<td contenteditable="true" class="ini-editable" title="click to edit">', ini , '</td>',
			'<td contenteditable="true" class="name-editable" title="click to edit">', $("#combName").val(), '</td>',
			'<td>',
				'<button type="button" class="btn btn-default act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button>',
				'<button type="button" class="btn btn-default remove-button" title="Remove combatant">Remove</button>',
			'</td>',
		'</tr>'].join("") 
	));

	// add handlers to table row object
	$tr.find(".ini-editable").on("keydown", handleIniKeydown).on("blur", handleIniBlur);
	$tr.find(".name-editable").on("keydown", handleNameKeydown);
	$tr.find(".act-button").on("click", handleActButtonClick);
	$tr.find(".remove-button").on("click", handleRemoveButtonClick);

	// insert combatant row
	insertCombRow($tr);

	//reset form values
	$("#combIni, #combName").val("");
	
	return;
}


$(document).ready(function(){
	// add handlers for using the Add button or enter key in the new combatant form
	$("#combAddButton").on("click", addCombatant);
	$("#combIni, #combName").on("keydown", function (e) {
		if ( e.which == 13 || e.which == 10 ) {
			$("#combAddButton").trigger("click");
		}
	});
});