From 6223b355365bbb03e4226e9d4540dfe5b5ff4e3e Mon Sep 17 00:00:00 2001
From: asraelite <markusscully@gmail.com>
Date: Fri, 2 Mar 2018 19:56:29 +0000
Subject: [PATCH] Add non-working menu buttons

---
 js/graphics/draw.mjs |  5 +++--
 js/graphics/gui.mjs  | 15 +++++++++++++++
 js/gui/button.mjs    | 10 ++++++----
 js/gui/element.mjs   |  4 ++++
 js/gui/image.mjs     |  2 +-
 js/gui/modules.mjs   | 16 ++++++++++++++--
 6 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/js/graphics/draw.mjs b/js/graphics/draw.mjs
index 1602930..cd49753 100644
--- a/js/graphics/draw.mjs
+++ b/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);
 }
diff --git a/js/graphics/gui.mjs b/js/graphics/gui.mjs
index 2eb9976..9311133 100644
--- a/js/graphics/gui.mjs
+++ b/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);
+}
diff --git a/js/gui/button.mjs b/js/gui/button.mjs
index ce99954..2613fcb 100644
--- a/js/gui/button.mjs
+++ b/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;
 	}
 }
diff --git a/js/gui/element.mjs b/js/gui/element.mjs
index b6e62cd..4c5f4fa 100644
--- a/js/gui/element.mjs
+++ b/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);
diff --git a/js/gui/image.mjs b/js/gui/image.mjs
index 7f67a80..853da5a 100644
--- a/js/gui/image.mjs
+++ b/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;
diff --git a/js/gui/modules.mjs b/js/gui/modules.mjs
index e2164ea..8c4bd66 100644
--- a/js/gui/modules.mjs
+++ b/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;
 }