Add non-working menu buttons

js/graphics/draw.mjs

@@ -1,10 +1,11 @@
 import {canvas, context} from './index.mjs';
 
 export function text(string, x, y,
-	{font = '52pt Arial', align = 'left', valign = 'top'}) {
+	{font = '52pt Arial', align = 'left', valign = 'top', color = null}) {
 	context.textAlign = align;
 	context.textBaseline = valign;
+	context.fillStyle = color === null ? context.fillStyle : color;
 	context.font = font;
-	
+
 	context.fillText(string, x, y);
 }

js/graphics/gui.mjs

@@ -1,5 +1,6 @@
 import {canvas, context} from './index.mjs';
 import * as gui from '../gui/index.mjs';
+import * as draw from './draw.mjs';
 
 export function render() {
 	renderElement(gui.root);
@@ -10,6 +11,7 @@ function renderElement(element) {
 	if (element.options.draw) {
 		if (element.type == 'frame') renderFrame(element);
 		if (element.type == 'image') renderImage(element);
+		if (element.type == 'button') renderButton(element);
 	}
 	element.children.forEach(renderElement);
 }
@@ -22,3 +24,16 @@ function renderFrame(element) {
 function renderImage(element) {
 	context.drawImage(element.image, ...element.shape);
 }
+
+function renderButton(element) {
+	context.fillStyle = '#983';
+	context.fillRect(...element.shape);
+	context.strokeStyle = '#541';
+	context.strokeWidth = 4;
+	context.strokeRect(...element.shape);
+	context.textAlign = 'center';
+	context.textBaseline = 'middle';
+	context.fillStyle = '#fff';
+	context.font = '12pt Consolas';
+	context.fillText(element.text, ...element.center);
+}

js/gui/button.mjs

@@ -1,9 +1,11 @@
 import * as gui from './index.mjs';
+import GuiElement from './element.mjs';
 
-export class GuiButton extends gui.GuiElement {
-	constructor(x, y, text, onclick) {
-		let textSize = gui.measureText(text, 'Arial 14pt');
-		super(x, y, ...textSize);
+export default class GuiButton extends GuiElement {
+	constructor(text, onclick, x, y, w = 100, h = 30) {
+		super(x, y, w, h);
 		this.type = 'button';
+		this.text = text;
+		this.onclick = onclick;
 	}
 }

js/gui/element.mjs

@@ -29,6 +29,10 @@ export default class GuiElement {
 		return [this.x, this.y, this.w, this.h];
 	}
 
+	get center() {
+		return [this.x + this.w / 2, this.y + this.h / 2];
+	}
+
 	posRelative({x = null, xc = 0, y = null, yc = 0, w = null, h = null}) {
 		if (x !== null) {
 			this.x = (this.parent.w * x) - (this.w * xc);

js/gui/image.mjs

@@ -1,7 +1,7 @@
 import * as gui from './index.mjs';
 import GuiElement from './element.mjs';
 
-export class GuiImage extends GuiElement {
+export default class GuiImage extends GuiElement {
 	constructor(src, x, y, w, h) {
 		w = w || src.width;
 		h = h || src.height;

js/gui/modules.mjs

@@ -2,7 +2,8 @@ import * as gui from './index.mjs';
 import {images as assets} from '../assets.mjs';
 import {canvas} from '../graphics/index.mjs';
 import GuiFrame from './frame.mjs';
-import {GuiImage} from './image.mjs';
+import GuiImage from './image.mjs';
+import GuiButton from './button.mjs';
 
 export function root() {
 	return new GuiFrame(0, 0, canvas.width, canvas.height, {
@@ -16,7 +17,18 @@ export function title() {
 	shadow.append(logo);
 	logo.scaleImage({ w: shadow.w * 0.7 });
 	logo.posRelative({ x: 0.5, xc: 0.5, y: 0.2 });
-	console.log(logo);
+
+	// TODO: Implement call to change view to game.
+	let startFunction = () => {};
+	let start = new GuiButton('Start game', startFunction, 0, 0, 200);
+	shadow.append(start);
+	start.posRelative({ x: 0.5, xc: 0.5, y: 0.7 });
+
+	let secondFunction = () => {};
+	let second = new GuiButton('Don\'t start game', secondFunction, 0, 0, 200);
+	shadow.append(second);
+	second.posRelative({ x: 0.5, xc: 0.5, y: 0.7 });
+	second.y += 60;
 
 	return shadow;
 }