Add button interaction

js/gui/element.mjs

@@ -1,13 +1,12 @@
+import {Rect} from './misc.mjs';
+
 const defaultOptions = {
 	draw: true // Whether the element itself will be rendered.
 }
 
-export default class GuiElement {
+export default class GuiElement extends Rect {
 	constructor(x, y, w, h, options = {}) {
-		this.x = x;
-		this.y = y;
-		this.w = w;
-		this.h = h;
+		super(x, y, w, h);
 		this.children = new Set();
 		this.parent = null;
 
@@ -16,6 +15,11 @@ export default class GuiElement {
 		this.options = Object.assign({}, defaultOptions, options);
 	}
 
+	tick() {
+		this.tickMouse();
+		this.children.forEach(c => c.tick());
+	}
+
 	append(element) {
 		this.children.add(element);
 		element.parent = this;
@@ -24,14 +28,8 @@ export default class GuiElement {
 	clear() {
 		this.children.clear();
 	}
-
-	get shape() {
-		return [this.x, this.y, this.w, this.h];
-	}
-
-	get center() {
-		return [this.x + this.w / 2, this.y + this.h / 2];
-	}
+	// Code should be self-describing, comments are for fucking about.
+	//   - Albert Einstein
 
 	posRelative({x = null, xc = 0, y = null, yc = 0, w = null, h = null}) {
 		if (x !== null) {

js/gui/index.mjs

@@ -10,6 +10,10 @@ export function init() {
 	changeView('title');
 }
 
+export function tick() {
+	root.tick();
+}
+
 export function changeView(view) {
 	root.clear();
 

js/gui/misc.mjs

@@ -0,0 +1,44 @@
+import * as input from '../input.mjs';
+
+export class Rect {
+	constructor(x = 0, y = 0, w = 0, h = 0) {
+		this.x = x;
+		this.y = y;
+		this.w = w;
+		this.h = h;
+
+		this.onclick = null;
+		this.mouseHeld = false;
+	}
+
+	tickMouse() {
+		if (this.mouseHeld == true && !input.mouse.held[0] && this.mouseOver)
+			if (this.onclick !== null)
+				this.onclick();
+		if (!this.mouseHeld && input.mouse.pressed[0] && this.mouseOver)
+			this.mouseHeld = true;
+		if (!input.mouse.held[0])
+			this.mouseHeld = false;
+	}
+
+	get shape() {
+		return [this.x, this.y, this.w, this.h];
+	}
+
+	get center() {
+		return [this.x + this.w / 2, this.y + this.h / 2];
+	}
+
+	get mouseOver() {
+		return this.containsPoint(input.mouse.x, input.mouse.y);
+	}
+
+	get mouseClicked() {
+		return this.mouseOver() && input.mouse.pressed[0];
+	}
+
+	containsPoint(x, y) {
+		return x > this.x && x < this.x + this.w
+			&& y > this.y && y < this.y + this.h;
+	}
+}

js/gui/modules.mjs

@@ -4,6 +4,7 @@ import {canvas} from '../graphics/index.mjs';
 import GuiFrame from './frame.mjs';
 import GuiImage from './image.mjs';
 import GuiButton from './button.mjs';
+import * as events from '../game/events.mjs';
 
 export function root() {
 	return new GuiFrame(0, 0, canvas.width, canvas.height, {
@@ -19,8 +20,8 @@ export function title() {
 	logo.posRelative({ x: 0.5, xc: 0.5, y: 0.2 });
 
 	// TODO: Implement call to change view to game.
-	let startFunction = () => {};
-	let start = new GuiButton('Start game', startFunction, 0, 0, 200);
+	let startFunction = events.startGame;
+	let start = new GuiButton('Start game', events.startGame, 0, 0, 200);
 	shadow.append(start);
 	start.posRelative({ x: 0.5, xc: 0.5, y: 0.7 });