From e3fa30627d156c068c069bb64557e4a6b6b32ba5 Mon Sep 17 00:00:00 2001
From: Nathan Steel <aney.login+rpi3@gmail.com>
Date: Fri, 11 Oct 2024 11:45:35 +0100
Subject: [PATCH] Add P1-P2 article

---
 blog/index.html                            |  1 +
 blog/p1-basic-drawing-and-interaction.html | 97 ++++++++++++++++++++++
 blog/p1-the-stack-and-rooms.html           |  2 +
 main.css                                   |  3 +-
 projects.html                              |  2 -
 5 files changed, 102 insertions(+), 3 deletions(-)
 create mode 100644 blog/p1-basic-drawing-and-interaction.html
diff --git a/blog/index.html b/blog/index.html
index 6efb9be..44f53cb 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -39,6 +39,7 @@
 
 				<h2>2024</h2>
 				<ul>
+					<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>
 					<li><a href="/blog/prioritising-my-project.html">Prioritising my project</a> - 04/10/2024</li>
 					<li><a href="/blog/return-of-the-me.html">Return of the me</a> - 27/09/2024</li>
diff --git a/blog/p1-basic-drawing-and-interaction.html b/blog/p1-basic-drawing-and-interaction.html
new file mode 100644
index 0000000..d90c945
--- /dev/null
+++ b/blog/p1-basic-drawing-and-interaction.html
@@ -0,0 +1,97 @@
+<!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 Drawing and Interaction</title>
+	</head>
+
+	<body>
+		<header>
+			<a href="#main" class="vh">Jump directly to main content</a>
+			<h1 style="font-size: 2.4rem">Project 1: Basic Drawing and Interaction</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>Switching away from the server-side stuff after getting the stack setup, I've opted to the basic game 'drawn', and 'playable', if you can call it those.</p>
+
+			<h2>Drawing</h2>
+			<p>Since I'm using JS and HTML canvas I need to draw each shape onto the canvas setting each individual shapes co-ordinates and size. This sounds simple, but the more shapes you draw, and the more you don't want them to overlap, or to add zoomed in/out shapes it gets much more complicated than you'd think. This is a prime example of why a solid grasp on basic mathematics is good for developers.</p>
+
+			<h3>Shape class</h3>
+			<p>Repeating the setting of context data, and the drawing of each shape became tedious and took a big chunk of my code-base after not long, so I decided to simplify by creating a Path2D extended class.</p>
+			<pre class="pre--small"><code>class Shape extends Path2D{
+	constructor(params){
+		super();
+		this.shape = params.shape || 'rectangle';
+		this.name = params.name;
+		this.x = params.x || 0;
+		this.y = params.y || 0;
+		this.width = params.width || 0;
+		this.height = params.height || 0;
+		this.fillStyle = params.fillStyle || "#FFFFFF";
+	}
+	draw(){
+		context.fillStyle = this.fillStyle;
+		if(this.shape == 'circle'){
+			context.beginPath();
+			context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
+			context.fill();
+			context.closePath();
+		}else if(this.shape == 'semi'){
+			context.beginPath();
+			context.arc(this.x, this.y, this.width/2, Math.PI, 0);
+			context.fill();
+			context.closePath();
+		}else if (this.shape == 'rectangle'){
+			context.fillRect(this.x, this.y, this.width, this.height);
+		}
+		context.fillStyle = defaultFillStyle; // Reset back to default
+	}
+}</code></pre>
+			<p>Pretty simple, I pass the shape I want to draw, x,y co-ordinates, width and height, and the fill. Not included above, but the class also accepts, and draws the shape stroke.</p>
+			<p>I then call the draw method of the new Shape, and it sorts everything for me.</p>
+			
+			<h2>Interaction with Event Handlers</h2>
+			<p>Next up, for the game to be a game and not just some visual media, we need to be able to interact with it.</p>
+			<p>Basic interaction is simple enough, I threw in a 'click' EventListener, then take the event/click's X/Y position and subtract the canvas's offset from the HTML body (to have 0,0 set to the top-left of the canvas, and not the HTML page).</p>
+			<p>This new X/Y, which I will just call X/Y is then compared to the X/Y locations of each shape. If the event X/Y occurs in a location greater (or equal) than the shape X/Y, and less than (or equal) Shape X/Y plus the shape Width/Height I then do whatever action I require.</p>
+			<p>This is another thing I've simplified by creating a function:</p>
+			<pre class="pre--small"><code>function clickableCheck(x,y,shape){
+	if(
+		y > shape.y && y < shape.y + shape.height
+		&& x > shape.x && x < shape.x + shape.width)
+	{
+		return true;
+	}
+	return false;
+}</code></pre>
+			<p>The function above is even simpler too, as all you need to do to check for a click, is pass a Shape object, created by the Shape class earlier in this post!</p>
+			<p>Fun Fact! Shape here, is actually called clickable in my code-base, but I've changed it to make more sense without context.</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>
+
diff --git a/blog/p1-the-stack-and-rooms.html b/blog/p1-the-stack-and-rooms.html
index 829e3a6..7ce6818 100644
--- a/blog/p1-the-stack-and-rooms.html
+++ b/blog/p1-the-stack-and-rooms.html
@@ -65,6 +65,8 @@
 			<p>
 				The first two are near-final I assume, but joining a room currently just uses a numeric counter to log the players already connected, so it allows the same player to join the same, and multiple different rooms at the same time. This will be changed later down the line, but for now there's a decent proof-of-concept to show me that what I want it feasible without too much difficulty.
 			</p>
+
+			<p>Next up is <a href="/blog/p1-basic-drawing-and-interaction.html">Basic Drawing and Interation</a>.</p>
 		</main>
 
 		<footer>
diff --git a/main.css b/main.css
index 673cc13..11a6b7a 100644
--- a/main.css
+++ b/main.css
@@ -38,10 +38,11 @@ pre{
 background:#EEE;padding:1rem;
 white-space:pre-wrap;overflow-x:auto;
 border:1px solid #DDD;border-radius:6px}
+.pre--small{font-size:.9rem;line-height:1.3rem}
 code{
 background:#EEE;padding:.05rem .4rem;
 border:1px solid #DDD;border-radius:6px}
-pre code{border:none}
+pre code{border:none;padding: 0;}
 blockquote{
 margin:0 .2rem;
 border-left:2px solid;
diff --git a/projects.html b/projects.html
index 24f2cfa..df790ca 100644
--- a/projects.html
+++ b/projects.html
@@ -55,8 +55,6 @@
 					<p>Skills: <span class="tag">HTML</span> <span class="tag">CSS</span></p>
 				</section>
 				
-
-				
 			</section>
 		</main>
 
