Add start of ship editing grid

js/gui/edit.mjs

@@ -0,0 +1,69 @@
+import * as gui from './index.mjs';
+import GuiElement from './element.mjs';
+import GuiItemButton from './item.mjs';
+import {state} from '../game/index.mjs';
+import * as edit from '../game/edit.mjs';
+
+export default class GuiEdit extends GuiElement {
+	constructor(x, y, w = 100, h = 30) {
+		super(x, y, w, h);
+		this.type = 'edit';
+		this.tileWidth = 0;
+		this.tileHeight = 0;
+		this.active = false;
+	}
+
+	updateTiles() {
+		this.children.clear();
+
+		[this.tileWidth, this.tileHeight] = [edit.width, edit.height];
+
+		let tileRatio = this.tileWidth / this.tileHeight;
+		let rectRatio = this.w / this.h;
+		let tileSize;
+		let [ox, oy] = [0, 0];
+
+		if (tileRatio < rectRatio) {
+			tileSize = this.h / this.tileHeight;
+			ox = (this.w - (tileSize * this.tileWidth)) / 2;
+		} else {
+			tileSize = this.w / this.tileWidth;
+			oy = (this.h - (tileSize * this.tileHeight)) / 2;
+		}
+
+		let spacing = 0.1 * tileSize;
+
+		for (let x = 0; x < this.tileWidth; x++)
+		for (let y = 0; y < this.tileHeight; y++) {
+			let tile = this.getTile(x, y);
+			let ex = x * tileSize + spacing / 2 + ox + this.x;
+			let ey = y * tileSize + spacing / 2 + oy + this.y;
+			let [ew, eh] = [tileSize - spacing, tileSize - spacing];
+
+			let onclick = (button) => {
+				this.tileClicked(x, y, button);
+			};
+
+			let el = new GuiItemButton(tile.module, onclick, ex, ey, ew, eh);
+			this.append(el);
+		}
+	}
+
+	tick() {
+		if (state.editing && !this.active) this.updateTiles();
+		this.active = state.editing;
+		this.options.draw = this.options.drawChildren = this.active;
+		if (!this.active) return;
+
+		[this.tileWidth, this.tileHeight] = [edit.width, edit.height];
+	}
+
+	getTile(x, y) {
+		let [px, py] = edit.position;
+		return edit.getTile(x + px, y + py);
+	}
+
+	tileClicked(x, y, button) {
+		console.log(x, y, button);
+	}
+}

js/gui/item.mjs

@@ -0,0 +1,18 @@
+import * as gui from './index.mjs';
+import GuiButton from './button.mjs';
+
+export default class GuiItemButton extends GuiButton {
+	constructor(module, onclick, x, y, w = 50, h = 50) {
+		super(null, onclick, x, y, w, h);
+		this.image = module === null ? null : module.currentImage;
+		this.type = 'itemButton';
+	}
+
+	click() {
+		this.onclick('left');
+	}
+
+	rightClick() {
+		this.onclick('right');
+	}
+}

js/gui/misc.mjs

@@ -9,10 +9,15 @@ export class Rect {
 
 		this.onclick = null;
 		this.mouseHeld = false;
+
+		this.rightMouseHeld = false;
+		this.onRightClick = null;
 	}
 
 	click() {}
 
+	rightClick() {}
+
 	tickMouse() {
 		if (this.mouseHeld == true && !input.mouse.held[0] && this.mouseOver)
 			this.click();
@@ -20,6 +25,14 @@ export class Rect {
 			this.mouseHeld = true;
 		if (!input.mouse.held[0])
 			this.mouseHeld = false;
+
+		if (this.rightMouseHeld == true && !input.mouse.held[2]
+			&&this.mouseOver)
+			this.rightClick();
+		if (!this.rightMouseHeld && input.mouse.pressed[2] && this.mouseOver)
+			this.rightMouseHeld = true;
+		if (!input.mouse.held[2])
+			this.rightMouseHeld = false;
 	}
 
 	get shape() {

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 GuiEdit from './edit.mjs';
 import * as events from '../game/events.mjs';
 import {state} from '../game/index.mjs';
 
@@ -38,13 +39,19 @@ export function title() {
 export function game() {
 	let shadow = root();
 
-	let edit = new GuiButton('Edit rocket', events.editShip, 0, 0, 200);
-	shadow.append(edit);
-	edit.posRelative({ x: 0.5, xc: 0.5, y: 1 });
-	edit.y -= 45;
-	edit.tick = () => {
-		edit.options.draw = state.landed && !state.editing;
+	let editButton = new GuiButton('Edit rocket', events.editShip, 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;
 	}
 
+	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;
+
 	return shadow;
 }