From 6f5dc06207132331ff75579c98e6f134da019cec Mon Sep 17 00:00:00 2001
From: Nathan Steel <aney.login+rpi3@gmail.com>
Date: Fri, 18 Oct 2024 12:49:46 +0100
Subject: [PATCH] Add P1-P4 Article

---
 blog/index.html                     |   1 +
 blog/p1-basic-mechanic-hack-in.html | 184 ++++++++++++++++++++++++++++
 2 files changed, 185 insertions(+)
 create mode 100644 blog/p1-basic-mechanic-hack-in.html
diff --git a/blog/index.html b/blog/index.html
index 84fd604..aca19e2 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -39,6 +39,7 @@
 
 				<h2>2024</h2>
 				<ul>
+					<li><a href="/blog/p1-basic-mechanic-hack-in.html">Project 1 Part 4: Basic Mechanic Hack In</a> - 18/10/2024</li>
 					<li><a href="/blog/p1-spreadsheet-gdd.html">Project 1 Part 3: Spreadsheet GDD</a> - 14/10/2024</li>
 					<li><a href="/blog/p1-basic-drawing-and-interaction.html">Project 1 Part 2: Basic Drawing and Interaction</a> - 11/10/2024</li>
 					<li><a href="/blog/p1-the-stack-and-rooms.html">Project 1 Part 1: The Stack, and Rooms</a> - 07/10/2024</li>
diff --git a/blog/p1-basic-mechanic-hack-in.html b/blog/p1-basic-mechanic-hack-in.html
new file mode 100644
index 0000000..55cd7a7
--- /dev/null
+++ b/blog/p1-basic-mechanic-hack-in.html
@@ -0,0 +1,184 @@
+<!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: Basic Mechanic Hack In</title>
+	</head>
+
+	<body>
+		<header>
+			<a href="#main" class="vh">Jump directly to main content</a>
+			<h1 style="font-size: 2.4rem">Project 1: Basic Mechanic Hack In</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>With the basic mechanics now thought of thanks to my research, and constantly evolving <a href="/blog/p1-spreadsheet-gdd.html">Spreadsheet GDD</a>, I can now add them (in their most basic sense) into my game!</p>
+			<p>Disclaimer! Anything written in this article is not indicative of how the mechanic will work in it's final stages. The code examples here are also specifically examples of the hackyness of this stage, and extremely far from what the codebase will be.</p>
+
+			<h2>Still developing on front-end</h2>
+			<p>For ease, and speed of development I opted to continue the development work front-end to benefit from console logs, and alert pop-ups when a condition that shouldn't get hit, gets hit. I also don't have to think about any data to be sent, so can happily hack away changing everything at a whim.</p>
+
+			<h2>'Basic' Mechanics?</h2>
+			<p>My game has a number of mechanics, each with more complexity than is 'needed' to have a playable game, this complexity is what will allow me to balance, and create distinctions between similar items.</p>
+			<p>Keeping this in mind, I just need a somewhat playable experience that uses the absolute basics of my core/fundamental mechanics so I can get a big boost in progress of making the game itself. The complexity will be added later on, once the codebase exists, has been tidied up, and made a bit more efficient (foreshadowing for a future article, how does he do it).</p>
+
+			<h2>The Hack-in</h2>
+			<p>Since my only concern at this point was to get the mechanics in, and make each of the most basic 'playable' moves I added very basics.</p>
+			<ul>
+				<li>Summoning units</li>
+				<li>Adding shield, and 'resource'</li>
+				<li>Attacking with units</li>
+				<li>Inspecting oppossing units</li>
+				<li>Basic one-dimensional win condition</li>
+				<li>Preventing interaction during 'special events', such as during an attack</li>
+			</ul>
+			<p>These are my current mechanics (still attempting to be vague), which I believe I'm mostly settled on, likely with only minor changes to the limits and conditions for each field location. When the game's closer to a testing phase I'll do a full writeup of each.</p>
+			
+			<h2>Summon a unit</h2>
+			<p>Once a unit is available to be played a check is done to see if there is enough 'resource' to add it to the field, for the hack-in I've only done a requirement of one per unit, but it does need to be of the same 'alliedType'.</p>
+<pre class="pre--small"><code>playCardToField(index){
+	let UnitPlayed	= availableUnits[index];
+
+	// Check if there's space to add unit
+	if(unitArea.length >= maxUnits){
+		return 0;
+	}
+
+	if(UnitPlayed.cost > playerResource.length){
+		return 0;
+	}else{
+		let canPlay = false;
+		let needsResource = 1;
+		let usedResource = 0;
+		playerResource.forEach(function(ResourceUnit, key){
+			if(UnitPlayed.alliedType == ResourceUnit.alliedType && ResourceUnit.cantAttack == false && needsResource > usedResource)
+			{
+				ResourceUsed.push(key);
+				usedResource++;
+				canPlay = true;
+			}
+		});
+
+		if(!canPlay){
+			return 0;
+		}
+	}
+
+	// Mark resource as used (so they can't be used for another unit)
+	ResourceUsed.forEach(function(UnitKey, key){
+		playerResource[UnitKey].used = true;
+	});
+
+	// Remove from playable units
+	availableUnits.splice(index, 1);
+	// Add unit to field
+	unitArea.push(UnitPlayed);
+}</code></pre>
+
+
+			<p>This code is essentially the same for adding shields, and 'resource' too, just with a few minor changes, as the hack-in mode in me let me just straight copy-and-paste functions.</p>
+
+			<h2>Special Events +  Check</h2>
+			<p>A Special event, is what I ended up naming events that have specific options to progress/end such as 'Attacking' and 'Inspecting' which I used for testing in the hack-in.</p>
+			<p>If the game has been won, or there is a unit being inspected, or attacking a variable within the eventListeners is set.</p>
+<pre class="pre--small"><code>let specialEvent = false;
+if(inspectUnit !== null || attackingUnit !== null || gameWin){
+	specialEvent = true;
+}
+</code></pre>
+
+			<p>This variable is then checked when a certain target is selected, and depending on if specialEvent is true (if so it typically will check for the correct event, i.e. attacking as below) it'll trigger a different function call, or if false just prevent a function call.</p>
+<pre class="pre--small"><code>playerField.forEach(function(item, index){
+	let clickable = item.clickable;
+
+	if(clickableCheck(x,y,clickable)){
+		if(attackingUnit !== null && item == attackingUnit[0]){
+			endAttack();
+		}
+		if(!specialEvent && item.cantAttack != true){
+			startAttack(index);
+		}
+	}
+});</code></pre>
+			<p>The attacking/inspectingUnit, event data is set when one is triggered, explained in the text below.</p>
+
+
+			<h2>Attacking</h2>
+			<p>Attacking is split into three phases.</p>
+			<p>When an available unit is selected, it sets that unit in the 'attacking' variable in startAttack().</p>
+<pre class="pre--small"><code>startAttack(index){
+	attackingUnit = [playerField[index], index];
+}</code></pre>
+
+			<p>If player then selects an opposing shield or unit, while an 'attacking' unit is set, the makeAttack() function passes the (jank incoming) array, arrayName, and the targets array index to perform checks.</p>
+			<p>If a shield is destroyed, the opposing player gets whatever unit was used as a shield added to their 'availableUnits', as a catch-up mechanic.</p>
+			<p>If units are of equal power, they are both unalived, if one is stronger they get to live, while the other, not so much.</p>
+<pre class="pre--small"><code>makeAttack(index, array = null, name = null){
+	if(array == null){ array = opponentField; name = 'opponentField' }
+	let defendingUnit = array[index];
+
+	// If hitting shield, don't calc combat damage
+	if(name == 'opponentShield'){
+		if(array[index].tapped){
+			array[index].tapped = false;
+			opponentAvailableUnits.push(array[index]);
+			array.splice(index, 1);
+		}else{
+			array[index].tapped = true;
+		}
+
+		playerField[attackingUnit[1]].tapped = true;
+		this.endAttack();
+		return 1;
+	}
+
+	// Do calc combat damage for each unit if unit vs unit fight
+	if(defendingUnit.atk &lt;= attackingUnit[0].atk){
+		array.splice(index, 1);
+	}
+	if(attackingUnit[0].atk &lt;= defendingUnit.atk){
+		playerField.splice(attackingUnit[1], 1);
+	}else{
+		playerField[attackingUnit[1]].tapped = true;
+	}
+	this.endAttack();
+}</code></pre>
+
+
+			<p>Once the makeAttack() has completed, it then calls endAttack(), which sets the 'attacking' variable to null that will allow non-specific interactions again, then checks the opposing player's shield, if it's destroyed the gameWin state is set. endAttack() can also be called by reselecting the 'attacking' unit, as a means to not force players into combat.</p>
+<pre class="pre--small"><code>endAttack(){
+	attackingUnit = null;
+	if(opponentShield.length &lt;= 0){
+		gameWin = 1;
+	}
+}</code></pre>
+
+			<p>That's all. My vagueness remains for the time being (inc. in the code examples, as I've changed variable names for example), I only hope that I'm not getting people excited for a gametype that isn't what I'm making. I need to keep the vagueness thoguh, as once I annouce what it is I will feel a mix of pressure, and pre-success that I believe will detriment my development, and potentially get me to quit before completion.</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>
+
