Add right click edit grid interaction

js/game/edit.mjs

@@ -2,6 +2,9 @@ import * as game from './index.mjs';
 import * as graphics from '../graphics/index.mjs';
 import * as world from '../world/index.mjs';
 import * as consts from '../consts.mjs';
+import * as events from './events.mjs';
+import {modules} from '../data.mjs';
+import {images as assets} from '../assets.mjs';
 
 export let tiles = new Map();
 export let width = 0;
@@ -33,11 +36,39 @@ export function end() {
 
 }
 
-export function getTile(x, y) {
+function trueFromVisible(x, y) {
+	let [px, py] = position;
+	return [x - px, y - py];
+}
+
+export function clickTile(x, y) {
+	if (currentModule !== null) return;
+	let current = getTile(x, y).source;
+	if (current.type !== null) {
+		events.invalidTilePlacement();
+		return;
+	}
+
 	let id = posId(x, y);
+	tiles.set(id, new Tile(x, y, currentModule));
+}
+
+export function rightClickTile(x, y) {
+	let current = getTile(x, y).source;
+	if (current === null) return;
+	let { x: tx, y: ty } = current;
+	let id = posId(tx, ty);
+	tiles.set(id, new Tile(tx, ty, null));
+}
+
+export function getTile(x, y) {
+	let [px, py] = position;
+	let [tx, ty] = [px + x, py + y];
+	let id = posId(tx, ty);
 	if (!tiles.has(id))
-		tiles.set(id, new Tile(x, y, null));
+		tiles.set(id, new Tile(tx, ty, null));
 	return tiles.get(id);
+	// TODO: Get linked tiles.
 }
 
 function posId(x, y) {
@@ -50,7 +81,14 @@ function getBoundaries() {
 
 class Tile {
 	constructor(x, y, module) {
-		this.module = module;
+		if (module === null) {
+			this.module = null;
+			this.image = null;
+		} else {
+			this.module = modules[module.type][module.id];
+			this.image = assets.modules[module.type][module.id];
+			if (module.type === 'thruster') this.image = this.image.off;
+		}
 		this.x = x;
 		this.y = y;
 	}
@@ -59,6 +97,10 @@ class Tile {
 		return true;
 	}
 
+	get source() {
+		return this;
+	}
+
 	get drawPos() {
 		let [px, py] = pos;
 		return [this.x + px, this.y + py];

js/game/events.mjs

@@ -31,3 +31,7 @@ export function endEditing() {
 	game.state.editing = false;
 	edit.end();
 }
+
+export function invalidTilePlacement() {
+	// TODO: Play some audio.
+}

js/graphics/edit.mjs

@@ -1,16 +0,0 @@
-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

@@ -49,7 +49,7 @@ function renderButton(element) {
 
 function renderItemButton(element) {
 	context.globalAlpha = 0.5;
-	if (element.mouseHeld) {
+	if (element.mouseHeld || element.rightMouseHeld) {
 		context.fillStyle = '#080808';
 	} else {
 		context.fillStyle = element.mouseOver ? '#222' : '#0e0e0e';

js/graphics/index.mjs

@@ -3,7 +3,6 @@ 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';
 

js/graphics/world.mjs

@@ -1,7 +1,6 @@
 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() {

js/gui/edit.mjs

@@ -35,7 +35,7 @@ export default class GuiEdit extends GuiElement {
 
 		for (let x = 0; x < this.tileWidth; x++)
 		for (let y = 0; y < this.tileHeight; y++) {
-			let tile = this.getTile(x, 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 [ew, eh] = [tileSize - spacing, tileSize - spacing];
@@ -44,7 +44,7 @@ export default class GuiEdit extends GuiElement {
 				this.tileClicked(x, y, button);
 			};
 
-			let el = new GuiItemButton(tile.module, onclick, ex, ey, ew, eh);
+			let el = new GuiItemButton(tile, onclick, ex, ey, ew, eh);
 			this.append(el);
 		}
 	}
@@ -64,6 +64,12 @@ export default class GuiEdit extends GuiElement {
 	}
 
 	tileClicked(x, y, button) {
-		console.log(x, y, button);
+		if (button == 'left') {
+			edit.clickTile(x, y);
+		} else if (button == 'right') {
+			edit.rightClickTile(x, y);
+		}
+
+		this.updateTiles();
 	}
 }

js/gui/item.mjs

@@ -2,9 +2,10 @@ 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) {
+	constructor(tile, onclick, x, y, w = 50, h = 50) {
 		super(null, onclick, x, y, w, h);
-		this.image = module === null ? null : module.currentImage;
+		this.module = tile.module;
+		this.image = tile.image;
 		this.type = 'itemButton';
 	}
 

js/world/module.mjs

@@ -1,3 +1,4 @@
+import {modules} from '../data.mjs';
 import {images as assets} from '../assets.mjs';
 
 export default class Module {
@@ -19,6 +20,7 @@ export default class Module {
 		this.ship = ship;
 		this.id = id;
 		this.images = assets.modules[this.type][this.id];
+		this.data = modules[this.type][this.id];
 		// Fuel
 		if (this.type == 'fuel') {
 			this.fuel = filled ? fuelCapacity : 0;