Project 1: Front End Debugging

Whilst working on the codebase I found that I had to repeatedly go back into the code, and add console logs just to verify basic things like if the correct card had been moved to the correct listPosition and boardElement.

Solution

To prevent the need to keep editing the code for basic logs, I opted to write some front-end debuging tools using the existing ECSey functions I wrote prior.

I gave a quick thought of what I regularly need to check, and add some buttons with related function calls dedicated to console logging the results. getItemsAndPrintFrontEnd() is the start of the debugging process.

The UI

I've removed the onClick events from the buttons, but the only one you need to know is the second row's button calls getItemsAndPrintFrontEnd(). Those in the first row are remnants of the most basic debugging that I soon realised I needed/wanted better. Well besides 'Untap all' that well, guess what that does.

Code examples

The UI (on the second row) then triggers the code below, and console logs the data requested based on the component/attributes set in the front-end UI (above).

function getItemsAndPrintFrontEnd(){

	let boardElementId = document.getElementById("boardElementId").value;
	if(boardElementId == ""){ boardElementId = null; }

	let playerId = document.getElementById("playerId").value;
	if(playerId == ""){ playerId = null; }

	let cardStatusId = document.getElementById("cardStatusId").value;
	if(cardStatusId == ""){ cardStatusId = null; }

	let listPositionId = document.getElementById("listPositionId").value;
	if(listPositionId == ""){ listPositionId = null; }

	let itemOrCard = document.getElementById("itemOrCardData").value;
	
	getItemsAndPrint(boardElementId, playerId, cardStatusId, listPositionId, itemOrCard);
}

getItemsAndPrint() is called with the item/entity data from the front-end.

function getItemsAndPrint(boardElementId = null, playerId = null, cardStatusId = null, listPositionId = null, itemOrCard = 'item'){

	let items = board.getItems(boardElementId, playerId, cardStatusId, listPositionId);

	if(itemOrCard == 'card'){
		console.log('----- CardData -----');
		printCardData(items);
	}else{
		console.log('----- ItemData -----');
		printECSData(items);
	}
	
	console.log('Items array length: '+items.length);
}

The above then calls one of printCardData() or printECSData() depending on what I need.

ECS data returns the data stored in each of the attributes/components for each of the items requested.

function printECSData(items){
	for(let item = 0; item < items.length; item++){
		let itemKey = items[item];
		console.log(
			'itemId: '+itemKey+"\n"+
			'boardElement: '+boardElement[itemKey]+"\n"+
			'cardData: '+cardData[itemKey]+"\n"+
			'position: '+position[itemKey]+"\n"+
			'size: '+size[itemKey]+"\n"+
			'cardStatus: '+cardStatus[itemKey]+"\n"+
			'player: '+player[itemKey]+"\n"+
			'listPosition: '+listPosition[itemKey]+"\n"+
			'cardFace: '+cardFace[itemKey]
		);
	}
}

And Card data returns an easier to read array of the cardData for each item requested. This will be the 'base' cardData, as all the elements within the card will eventually be changed into components/attributes so they can be easily altered without changing anything directly in the cardData.

function printCardData(items){
	let cardArray = [];
	for(let item = 0; item < items.length; item++){
		let itemKey = items[item];
		cardArray.push(cardData[itemKey]);
	}
	console.log(cardArray);
}

Future Debugging

When I decide it's needed I will be adding more debugging functions, that will be used to trigger events, switch turns, play cards, view opponents hand/deck, etc. All of these will be to make development and testing easier, but for now I'd rather spend the time fleshing out the game itself.

There will be DB debug tools, and a toggleable option for me to return logs from each server call in the future, when the code finally gets migrated from front-end to back-end so that I can continue to debug as-if I was working front-end, just with a little more overhead.