From 476a242c295fe8fb99c7bd3becd1fd6fe0855c31 Mon Sep 17 00:00:00 2001
From: Nathan <aney.login@gmail.com>
Date: Thu, 31 Oct 2024 20:11:51 +0000
Subject: [PATCH] Add p1p6 blog

---
 blog/index.html                  |   1 +
 blog/p1-front-end-debugging.html | 163 +++++++++++++++++++++++++++++++
 2 files changed, 164 insertions(+)
 create mode 100644 blog/p1-front-end-debugging.html
diff --git a/blog/index.html b/blog/index.html
index 756fa5a..a35883e 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -39,6 +39,7 @@
 
 				<h2>2024</h2>
 				<ul>
+					<li><a href="/blog/p1-front-end-debugging.html">Project 1 Part 6: Front End Debugging</a> - 01/11/2024</li>
 					<li><a href="/blog/p1-ecsey-code-restructure.html">Project 1 Part 5: ECSey Code Restructure</a> - 25/10/2024</li>
 					<li><a href="/blog/im-going-to-america.html">I'm going to America</a> - 21/10/2024</li>
 					<li><a href="/blog/p1-basic-mechanic-hack-in.html">Project 1 Part 4: Basic Mechanic Hack In</a> - 18/10/2024</li>
diff --git a/blog/p1-front-end-debugging.html b/blog/p1-front-end-debugging.html
new file mode 100644
index 0000000..3c0ff93
--- /dev/null
+++ b/blog/p1-front-end-debugging.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="">
+		<meta name="author" content="Nathan (Aney) Steel">
+		<meta name="theme-color" content="white">
+		<meta name="theme-color" content="green">
+		<link rel="stylesheet" type="text/css" href="/main.css">
+		<link rel="icon" type="image/png" href="/images/favicon.svg">
+		<title>Project 1: Front End Debugging</title>
+	</head>
+
+	<body>
+		<header>
+			<a href="#main" class="vh">Jump directly to main content</a>
+			<h1 style="font-size: 2.4rem">Project 1: Front End Debugging</h1>
+			<input id="burger-toggle" type="checkbox"/>
+			<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
+			<hr/>
+			<nav>
+				<a href="/">home</a>
+				<a href="/about.html">about</a>
+				<a href="/projects.html">projects</a>
+				<a href="/blog/">blog</a>
+				<a href="/sitemap.html">misc</a>
+				<a href="/support.html">support</a>
+			</nav>
+			<hr/>
+		</header>
+
+		<main id="main">
+
+			<p>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.</p>
+			
+			<h2>Solution</h2>
+			<p>To prevent the need to keep editing the code for basic logs, I opted to write some front-end debuging tools using the existing <a href="/blog/p1-ecsey-code-restructure.html">ECSey functions</a> I wrote prior.</p>
+			<p>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.</p>
+
+			<h3>The UI</h3>
+			<p>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.</p>
+			<hr>
+			<button onclick="alert('Never')">Untap all</button>
+			<button onclick="alert('gonna')">Print cardlist to console</button>
+			<button onclick="alert('give')" >Print cardsInDeck for player0</button>
+			<button onclick="alert('you')">Print cardsInDeck for player1</button>
+
+			<hr>
+			<div>
+				<button onclick="alert('up')">Echo cards: </button>
+
+				<select name="boardElementId" id="boardElementId">
+					<option value="">All</option>
+					<option value="realDeck">realDeck</option>
+					<option value="deck">deck</option>
+					<option value="hand">hand</option>
+					<option value="mana">mana</option>
+					<option value="shield">shield</option>
+					<option value="board">board</option>
+					<option value="grave">grave</option>
+				</select>
+
+				<select name="playerId" id="playerId">
+					<option value="">All</option>
+					<option value="0">Player0</option>
+					<option value="1">Player1/Opponent</option>
+				</select>
+
+				<input name="listPositionId" id="listPositionId" placeholder="In position 1,2,3..."></input>
+
+				<select name="cardStatusId" id="cardStatusId">
+					<option value="">All</option>
+					<option value="attacking">Attacking</option>
+					<option value="tapped">Tapped</option>
+				</select>
+
+				<select name="itemOrCardData" id="itemOrCardData">
+					<option value="item">Item Data</option>
+					<option value="card">Card Data</option>
+				</select>
+			</div>
+
+			<h3>Code examples</h3>
+			<p>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).</p>
+			<pre class="pre--small">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);
+}</code></pre>
+
+			<p>getItemsAndPrint() is called with the item/entity data from the front-end.</p>
+			<pre class="pre--small">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);
+}</code></pre>
+
+			<p>The above then calls one of printCardData() or printECSData() depending on what I need.</p>
+			<p>ECS data returns the data stored in each of the attributes/components for each of the items requested.</p>
+			<pre class="pre--small"><code>function printECSData(items){
+	for(let item = 0; item &lt; 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]
+		);
+	}
+}</code></pre>
+
+			<p>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.</p>
+			<pre class="pre--small"><code>function printCardData(items){
+	let cardArray = [];
+	for(let item = 0; item &lt; items.length; item++){
+		let itemKey = items[item];
+		cardArray.push(cardData[itemKey]);
+	}
+	console.log(cardArray);
+}</code></pre>
+
+			
+
+			<h2>Future Debugging</h2>
+			<p>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.</p>
+			<p>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.</p>
+		</main>
+
+		<footer>
+			<hr/>
+			<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
+		</footer>
+	</body>
+</html>
+
