Add button interaction

js/assets.mjs

@@ -1,6 +1,7 @@
 export const images = {
 	title: {
-		logo: 'logo.png'
+		logo: 'logo.png',
+		logoSvg: 'logo2.svg'
 	}
 };
 

js/game/events.mjs

@@ -0,0 +1,5 @@
+import * as game from './index.mjs';
+
+export function startGame() {
+	console.log('started');
+}

js/game/index.mjs

@@ -1,6 +1,7 @@
-import * as graphics from './graphics/index.mjs';
-import * as gui from './gui/index.mjs';
-import * as assets from './assets.mjs';
+import * as graphics from '../graphics/index.mjs';
+import * as gui from '../gui/index.mjs';
+import * as assets from '../assets.mjs';
+import * as input from '../input.mjs';
 
 export let game;
 
@@ -15,14 +16,17 @@ export async function init() {
 	graphics.init();
 	await assets.init();
 	gui.init();
+	input.init();
 
 	// Recursive `requestAnimationFrame` can cause problems with Parcel.
 	while(true) {
 		await tick();
-		await new Promise(res => requestAnimationFrame(()=>{}));
+		await new Promise(res => requestAnimationFrame(res));
 	}
 }
 
 async function tick() {
+	gui.tick();
 	graphics.render();
+	input.tick();
 }

js/graphics/gui.mjs

@@ -26,7 +26,12 @@ function renderImage(element) {
 }
 
 function renderButton(element) {
-	context.fillStyle = '#983';
+	if (element.mouseHeld) {
+		context.fillStyle = '#706244';
+	} else {
+		context.fillStyle = element.mouseOver ? '#ad9869' : '#917f58';
+	}
+	
 	context.fillRect(...element.shape);
 	context.strokeStyle = '#541';
 	context.strokeWidth = 4;

js/graphics/index.mjs

@@ -1,4 +1,4 @@
-import {game} from '../game.mjs';
+import {game} from '../game/index.mjs';
 import {getContainedSectors} from '../world/index.mjs';
 import * as background from './background.mjs';
 import * as gui from './gui.mjs';

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 });
 

js/index.mjs

@@ -1,3 +1,3 @@
-import { init } from './game.mjs';
+import { init } from './game/index.mjs';
 
 window.addEventListener('load', init);

js/input.mjs

@@ -0,0 +1,46 @@
+import {canvas} from './graphics/index.mjs';
+
+export const mouse = { pressed: {}, held: {}, x: 0, y: 0 };
+export const keyCode = { pressed: {}, held: {} };
+export const key = { pressed: {}, held: {} };
+export const action = {};
+
+const mapping = {};
+
+export function tick() {
+	mouse.pressed = {};
+	keyCode.pressed = {};
+	key.pressed = {};
+}
+
+export function init() {
+	window.addEventListener('keydown', event => {
+		keyCode.pressed[event.code] = !keyCode.held[event.code];
+		keyCode.held[event.code] = true;
+		key.pressed[event.key] = !keyCode.held[event.key];
+		key.held[event.key] = true;
+	});
+
+	window.addEventListener('keyup', event => {
+		keyCode.pressed[event.code] = false;
+		keyCode.held[event.code] = false;
+		key.pressed[event.key] = false;
+		key.held[event.key] = false;
+	});
+	// Ṕ͕͖ẖ̨’̖̺͓̪̹n̼͇͔̯̝̖g̙̩̭͕ͅͅl̻̰͘u͎̥͍̗ͅi̼̞̪̩͚̜͖ ̫̝̻͚͟m͎̳̙̭̩̩̕g̟̤̬̮l̫̕w̶͚͈͚̟͔’͖n͏̝͖̞̺ͅa͏̹͓̬̺f̗̬̬̬̖̫͜h͙̘̝̱̬̗͜ ̼͎͖C̱͔̱͖ṭ̬̱͖h̵̰̼̘̩ùlh̙́u̪̫ ̪̺̹̙̯R̞͓̹̞’͍͎͉͎̦͙ͅl͇̠̮y̙̪̰̪͙̖e̢̩͉͙̼h̗͔̹̳ ̶w̨̼͍̝̭̣̣ͅg̶̳̦̳a̴͉̹͙̭̟ͅh͈͎̞̜͉́’̼̜̠͞n̲a̯g̮͚͓̝l̠ ̹̹̱͙̝f̧̝͖̱h̪̟̻͖̖t͎͘aͅg̤̘͜n̶͈̻̻̝̳
+	window.addEventListener('mousedown', event => {
+		mouse.pressed[event.button] = !mouse.held[event.button];
+		mouse.held[event.button] = true;
+	});
+
+	window.addEventListener('mouseup', event => {
+		mouse.pressed[event.button] = false;
+		mouse.held[event.button] = false;
+	});
+
+	window.addEventListener('mousemove', event => {
+		let rect = canvas.getBoundingClientRect();
+		mouse.x = event.clientX - rect.left;
+		mouse.y = event.clientY - rect.top;
+	});
+}