Add start of ship editing grid

js/graphics/edit.mjs

@@ -0,0 +1,16 @@
+import {context} from './index.mjs';
+import * as edit from '../game/edit.mjs';
+import * as world from '../world/index.mjs';
+
+export function render() {
+	let ship = world.playerShip;
+
+	context.save();
+	context.translate(...ship.com);
+	context.rotate(ship.r);
+	let [cx, cy] = ship.localCom;
+
+	context.translate(-cx, -cy);
+
+	context.restore();
+}

js/graphics/gui.mjs

@@ -12,8 +12,12 @@ function renderElement(element) {
 		if (element.type == 'frame') renderFrame(element);
 		if (element.type == 'image') renderImage(element);
 		if (element.type == 'button') renderButton(element);
+		if (element.type == 'edit') renderEdit(element);
+		if (element.type == 'itemButton') renderItemButton(element);
 	}
-	element.children.forEach(renderElement);
+
+	if (element.options.drawChildren)
+		element.children.forEach(renderElement);
 }
 
 function renderFrame(element) {
@@ -31,7 +35,7 @@ function renderButton(element) {
 	} else {
 		context.fillStyle = element.mouseOver ? '#ad9869' : '#917f58';
 	}
-	
+
 	context.fillRect(...element.shape);
 	context.strokeStyle = '#541';
 	context.strokeWidth = 4;
@@ -42,3 +46,40 @@ function renderButton(element) {
 	context.font = '12pt Consolas';
 	context.fillText(element.text, ...element.center);
 }
+
+function renderItemButton(element) {
+	context.globalAlpha = 0.5;
+	if (element.mouseHeld) {
+		context.fillStyle = '#080808';
+	} else {
+		context.fillStyle = element.mouseOver ? '#222' : '#0e0e0e';
+	}
+
+	context.fillRect(...element.shape);
+	context.strokeStyle = '#333';
+	context.strokeWidth = 4;
+	context.strokeRect(...element.shape);
+	context.globalAlpha = 1;
+
+	if (element.image) {
+		context.drawImage(element.image, ...element.shape);
+	}
+}
+
+function renderEdit(element) {
+	/*
+	element.tiles.forEach(t => {
+		let tile = edit.getTile(x, y);
+		let [dx, dy] = tile.drawPos;
+		context.globalAlpha = 0.5;
+		context.fillStyle = '#000';
+		context.fillRect(dx, dy, 1, 1);
+		context.globalAlpha = 1;
+
+		let module = tile.module;
+		if (module !== null) {
+			context.drawImage(module.currentImage, dx, dy, 1, 1);
+		}
+	});
+	*/
+}

js/graphics/index.mjs

@@ -3,6 +3,7 @@ import * as draw from './draw.mjs';
 import * as input from '../input.mjs';
 import {render as renderWorld} from './world.mjs';
 import {render as renderBackground} from './background.mjs';
+import {render as renderEdit} from './edit.mjs';
 import * as world from '../world/index.mjs';
 import * as consts from '../consts.mjs';
 
@@ -77,7 +78,7 @@ class Perspective {
 	}
 
 	changeRotationMode(mode) {
-		this.oldTarget = this.targetRotation;
+		this.oldTarget = this.currentRotation;
 		this.rotationMode = mode;
 	}
 
@@ -181,7 +182,7 @@ class Perspective {
 
 	transformCanvas() {
 		let [,,bw, bh] = this.bounds;
-		let [sx, sy] = this.rotateVector(...this.currentShift, -this.rotation);
+		let [sx, sy] = this.rotateVector(...this.currentShift, this.rotation);
 		let tx = -(this.x + sx) * this.zoom;
 		let ty = -(this.y + sy) * this.zoom;
 		context.translate(tx + bw / 2, ty + bh / 2);

js/graphics/world.mjs

@@ -1,6 +1,8 @@
 import {canvas, context} from './index.mjs';
 import {images as assets} from '../assets.mjs';
 import * as world from '../world/index.mjs';
+import * as edit from './edit.mjs';
+import {state} from '../game/index.mjs';
 
 export function render() {
 	world.particles.forEach(renderParticle);
@@ -20,6 +22,10 @@ function renderShip(ship) {
 	let [cx, cy] = ship.localCom;
 	context.translate(-cx, -cy);
 	ship.modules.forEach(m => {
+		let [mx, my] = [m.x, m.y];
+		if (state.editing) {
+			
+		}
 		context.drawImage(m.currentImage, m.x, m.y, 1, 1);
 	});
 	context.restore();