Improve edit screen

js/gui/button.mjs

@@ -10,7 +10,7 @@ export default class GuiButton extends GuiElement {
 	}
 
 	click() {
-		if (this.options.draw)
+		if (this.options.draw && !this.options.disabled)
 			this.onclick();
 	}
 }

js/gui/edit.mjs

@@ -38,8 +38,8 @@ export default class GuiEdit extends GuiElement {
 		for (let x = 0; x < this.tileWidth; x++)
 		for (let y = 0; y < this.tileHeight; y++) {
 			let tile = edit.getTile(x, y);
-			let ex = x * tileSize + spacing / 2 + ox + this.x;
-			let ey = y * tileSize + spacing / 2 + oy + this.y;
+			let ex = x * tileSize + spacing / 2 + ox;
+			let ey = y * tileSize + spacing / 2 + oy;
 			let [ew, eh] = [tileSize - spacing, tileSize - spacing];
 
 			let onclick = (button) => {
@@ -54,9 +54,11 @@ export default class GuiEdit extends GuiElement {
 	tick() {
 		if (state.editing && !this.active) this.updateTiles();
 		this.active = state.editing;
-		this.options.draw = this.options.drawChildren = this.active;
+		this.parent.options.drawChildren = this.active;
 		if (!this.active) return;
 
+		this.textElements.info.text = edit.message;
+
 		[this.tileWidth, this.tileHeight] = [edit.width, edit.height];
 	}
 

js/gui/element.mjs

@@ -29,6 +29,8 @@ export default class GuiElement extends Rect {
 	append(element) {
 		this.children.add(element);
 		element.parent = this;
+		element.x += this.x;
+		element.y += this.y;
 	}
 
 	clear() {
@@ -39,10 +41,10 @@ export default class GuiElement extends Rect {
 
 	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);
+			this.x = (this.parent.w * x) - (this.w * xc) + this.parent.x;
 		}
 		if (y !== null)
-			this.y = (this.parent.h * y) - (this.h * yc);
+			this.y = (this.parent.h * y) - (this.h * yc) + this.parent.y;
 		if (w !== null)
 			this.w = this.parent.w * w;
 		if (h !== null)

js/gui/modules.mjs

@@ -1,10 +1,12 @@
 import * as gui from './index.mjs';
+import {message as editMessage} from '../game/edit.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 GuiButton from './button.mjs';
 import GuiEdit from './edit.mjs';
+import GuiText from './text.mjs';
 import GuiInventory from './inventory.mjs';
 import * as events from '../game/events.mjs';
 import {state} from '../game/index.mjs';
@@ -40,19 +42,52 @@ export function title() {
 export function game() {
 	let shadow = root();
 
-	let editButton = new GuiButton('Edit rocket', events.editShip, 0, 0, 200);
+	let editButton = new GuiButton('Edit rocket', events.toggleEdit, 0, 0, 200);
 	shadow.append(editButton);
 	editButton.posRelative({ x: 0.5, xc: 0.5, y: 1 });
 	editButton.y -= 45;
 	editButton.tick = () => {
-		editButton.options.draw = state.landed && !state.editing;
+		editButton.options.draw = state.landed;
+		editButton.options.disabled = state.editing && editMessage !== '';
+		if (state.editing) {
+			editButton.text = 'Finish';
+		} else {
+			editButton.text = 'Edit rocket';
+		}
 	}
 
+
+	let editShadow = root();
+	shadow.append(editShadow);
+	editShadow.posRelative({x: 0.45, y: 0, w: 0.55, h: 0.6});
+	editShadow.x -= 10;
+	editShadow.y += 10;
+
 	let edit = new GuiEdit(0, 0, 0, 0);
-	shadow.append(edit);
-	edit.posRelative({x: 0.45, y: 0, w: 0.55, h: 0.6});
-	edit.x -= 10;
-	edit.y += 10;
+	editShadow.append(edit);
+	edit.posRelative({w: 1, h: 1});
+
+	let editInfoText = new GuiText('', 0, 0, 0, 0, {
+		size: 10,
+		align: 'center'
+	});
+	editShadow.append(editInfoText);
+	editInfoText.posRelative({x: 0.5, y: 1});
+	editInfoText.y += 5;
+
+	let editWarnText = new GuiText('', 0, 0, 0, 0, {
+		size: 10,
+		align: 'center'
+	});
+	editShadow.append(editWarnText);
+	editWarnText.posRelative({x: 0.5, y: 1});
+	editWarnText.y += 20;
+
+	edit.textElements = {
+		info: editInfoText,
+		warn: editWarnText
+	};
+
 
 	let inventory = new GuiInventory(0, 0, 0, 0);
 	shadow.append(inventory);

js/gui/text.mjs

@@ -0,0 +1,21 @@
+import * as gui from './index.mjs';
+import GuiElement from './element.mjs';
+
+export default class GuiText extends GuiElement {
+	constructor(text = '', x, y, w, h, {
+		size = 10,
+		align = 'left',
+		valign = 'top',
+		color = '#fff'
+	} = {}) {
+		w = w;
+		h = h;
+		super(x, y, w, h);
+		this.type = 'text';
+		this.color = color;
+		this.text = text;
+		this.font = size + 'pt Consolas';
+		this.align = align;
+		this.valign = valign;
+	}
+}