Add item markers

js/assets.mjs

@@ -37,7 +37,8 @@ export const images = {
 export const audio = {
 	itemPickup: 'up1.mp3',
 	fuelPickup: 'blip2.mp3',
-	endEdit: 'release1.mp3'
+	endEdit: 'release1.mp3',
+	newPlanet: 'up2.mp3'
 };
 
 export async function init() {

js/consts.mjs

@@ -33,7 +33,7 @@ export const EDIT_MARGIN = 2;
 // Floating items.
 export const ENTITY_ROTATION_RATE = 0.01;
 // World generation.
-export const PLANET_SPAWN_RATE = 3;
+export const PLANET_SPAWN_RATE = 50;
 export const ENTITY_SPAWN_RATE = 8;
 export const MIN_CELESTIAL_SPACING = 15;
 export const FUEL_CAN_AMOUNT = 4;

js/game/control.mjs

@@ -12,7 +12,8 @@ export const mapping = {
 	exitEdit: 'Escape',
 	inventory: 'KeyE',
 	cycleRotation: 'KeyC',
-	toggleTrace: 'KeyT'
+	toggleTrace: 'KeyT',
+	toggleMarkers: 'KeyR'
 };
 
 let held, pressed;
@@ -59,14 +60,16 @@ function tickPlaying() {
 		events.toggleTrace();
 	}
 
+	if (pressed[mapping.toggleMarkers]) {
+		events.toggleMarkers();
+	}
+
 	// For debugging.
-	if (pressed['KeyR']) events.startGame();
+	if (pressed['KeyZ']) events.startGame();
 }
 
 function tickEditing() {
 	if (pressed[mapping.exitEdit]) {
 		events.endEditing();
 	}
-	
-	if (pressed['KeyX']) throw new Error();
 }

js/game/events.mjs

@@ -15,10 +15,10 @@ let notLife = 0;
 
 let landedPlanets = new Set();
 
-function notify(message) {
+function notify(message, time = 80) {
 	if (notification === null) return;
 	notification.text = message;
-	notLife = 80;
+	notLife = time;
 }
 
 export function tick() {
@@ -47,6 +47,7 @@ export function landShip(planet) {
 function newPlanet(planet) {
 	let value = (planet.radius + 30) | 0;
 	landedPlanets.add(planet);
+	audio.play('newPlanet');
 	score += value;
 	notify('Landed on new planet: +' + value);
 }
@@ -71,6 +72,11 @@ export function toggleTrace() {
 	notify('Path prediction: ' + (trace ? 'on' : 'off'));
 }
 
+export function toggleMarkers() {
+	let markers = graphics.toggleMarkers();
+	notify('Item markers: ' + (markers ? 'on' : 'off'));
+}
+
 export function cycleRotationMode() {
 	let message = {
 		parent: 'planet',
@@ -105,7 +111,7 @@ export function tossItem() {
 	particle.createItemToss(world.playerShip);
 }
 
-export function collectItem(type, id) {
+export function collectItem(type, id, name) {
 	if (type === 'fuelcan') {
 		world.playerShip.addFuel(consts.FUEL_CAN_AMOUNT);
 		audio.play('fuelPickup');
@@ -116,7 +122,7 @@ export function collectItem(type, id) {
 		inventory.addItem(type, id);
 		audio.play('itemPickup');
 		score += 20;
-		notify('Collected module: +20');
+		notify(`Collected "${name}" module: +20`, 150);
 		return true;
 	}
 }

js/game/index.mjs

@@ -24,7 +24,7 @@ export async function init() {
 	gui.init();
 	input.init();
 
-	//events.startGame();
+	events.startGame();
 
 	//tick(); return;
 

js/graphics/index.mjs

@@ -11,6 +11,7 @@ const TAU = consts.TAU;
 export let canvas, context, tempCanvas, tempContext;
 export let perspective;
 export let trace = false;
+export let markers = false;
 
 export function init() {
 	canvas = document.querySelector('#main');
@@ -74,6 +75,11 @@ export function toggleTrace() {
 	return trace;
 }
 
+export function toggleMarkers() {
+	markers = !markers;
+	return markers;
+}
+
 export function changeZoom(delta) {
 	perspective.zoomDelta(delta);
 }

js/graphics/world.mjs

@@ -28,6 +28,17 @@ function renderParticle(particle) {
 function renderEntity(entity) {
 	context.save();
 	context.translate(...entity.com);
+	if (graphics.perspective.zoom < 2 && graphics.markers) {
+		context.globalAlpha = 0.7 / graphics.perspective.zoom;
+		context.beginPath();
+		context.arc(0, 0, 4, 0, 2 * Math.PI);
+		context.lineWidth = 1;
+		context.strokeStyle = '#31911b';
+		if (entity.type === 'fuelcan')
+			context.strokeStyle = '#af4021';
+		context.stroke();
+		context.globalAlpha = 1;
+	}
 	context.rotate(entity.r);
 	context.drawImage(entity.image, -0.5, -0.5, 1, 1);
 	context.restore();

js/world/entity.mjs

@@ -23,8 +23,10 @@ export default class Entity extends Body {
 		this.id = id;
 		if (this.type === 'fuelcan') {
 			this.image = assets.modules.fuelcan;
+			this.name = 'Fuel Can';
 		} else {
 			this.image = assets.modules[type][id];
+			this.name = modules[type][id].name;
 			if (this.type === 'thruster')
 				this.image = this.image.off;
 		}
@@ -55,7 +57,7 @@ export default class Entity extends Body {
 		if (playerShip.colliding(this.com, this.radius)) {
 			if (this.touched) return;
 			this.touched = true;
-			let success = events.collectItem(this.type, this.id);
+			let success = events.collectItem(this.type, this.id, this.name);
 			if (!success) return;
 			particle.createPickupBurst(playerShip, this.com);
 			this.remove();