Add logo to main menu

js/graphics/draw.mjs

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

js/graphics/gui.mjs

@@ -1,10 +1,24 @@
+import {canvas, context} from './index.mjs';
 import * as gui from '../gui/index.mjs';
 
 export function render() {
-	
+	renderElement(gui.root);
 }
 
-export function renderFrame(frame) {
-	context.fillStyle = '#eb9';
-	context.fillRect(frame.x, frame.y, frame.w, frame.h);
+function renderElement(element) {
+	//console.log(element.options);
+	if (element.options.draw) {
+		if (element.type == 'frame') renderFrame(element);
+		if (element.type == 'image') renderImage(element);
+	}
+	element.children.forEach(renderElement);
+}
+
+function renderFrame(element) {
+	context.fillStyle = '#eb9';
+	context.fillRect(...element.shape);
+}
+
+function renderImage(element) {
+	context.drawImage(element.image, ...element.shape);
 }

js/graphics/index.mjs

@@ -2,6 +2,7 @@ import {game} from '../game.mjs';
 import {getContainedSectors} from '../world/index.mjs';
 import * as background from './background.mjs';
 import * as gui from './gui.mjs';
+import * as draw from './draw.mjs';
 
 export let canvas, context, tempCanvas, tempContext;
 export let view;
@@ -21,10 +22,14 @@ export function init() {
 		y: 0,
 		zoom: 1
 	}
+
+	draw.text('Loading...', canvas.width / 2, canvas.height / 2,
+		{ align: 'center', valign: 'middle' });
 }
 
 export function render() {
 	context.clearRect(0, 0, canvas.width, canvas.height);
+	context.fillStyle = '#000';
 	context.fillRect(0, 0, canvas.width, canvas.height);
 	context.save();