General improvements

I forgot what I actually changed. It may not even be playable, I just want to get this up there.

js/graphics/background.mjs

@@ -13,10 +13,9 @@ function init() {
 
 export function render(angle) {
 	if (patterns === null) init();
-
-	renderLayer(patterns.back, 0.3, 1, angle);
-	renderLayer(patterns.middle, 0.5, 0.3, angle);
-	//renderLayer(patterns.front, 0.7, 0.3, angle);
+	// renderLayer(patterns.back, 0.3, 1, angle);
+	// renderLayer(patterns.middle, 0.5, 0.3, angle);
+	// renderLayer(patterns.front, 0.7, 0.3, angle);
 }
 
 function renderLayer(pattern, speed = 1, scale = 1, angle = 0) {

js/graphics/gui.mjs

@@ -80,7 +80,7 @@ function renderButton(element) {
 	context.textAlign = 'center';
 	context.textBaseline = 'middle';
 	context.fillStyle = '#fff';
-	context.font = '12pt Consolas';
+	context.font = '12pt Courier New';
 	context.fillText(element.text, ...element.center);
 
 	context.globalAlpha = 1;
@@ -117,7 +117,7 @@ function renderItemButton(element) {
 		context.textAlign = 'right';
 		context.textBaseline = 'bottom';
 		context.fillStyle = '#fff';
-		context.font = 'bold 10pt Consolas';
+		context.font = 'bold 10pt Courier New';
 		let [ex, ey] = element.end;
 		context.fillText('x' + element.quantity, ex - 2, ey - 2);
 	}

js/graphics/index.mjs

@@ -19,14 +19,17 @@ export function init() {
 	tempCanvas = document.querySelector('#temp');
 	tempContext = tempCanvas.getContext('2d');
 
-	canvas.width = 600;
-	canvas.height = 600;
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+
+	canvas.style.width = canvas.width + 'px';
+	canvas.style.height = canvas.height + 'px';
 
 	perspective = new Perspective();
 
 	context.fillStyle = '#000';
 	context.fillRect(0, 0, canvas.width, canvas.height);
-	context.font = '36px Consolas';
+	context.font = '36px Courier New';
 	context.textAlign = 'center';
 	context.textBaseline = 'middle';
 	context.fillStyle = '#fff';
@@ -54,7 +57,7 @@ export function render() {
 }
 
 export function getVisibleSectors() {
-	return world.getContainedSectors(...perspective.bounds);
+	// return world.getContainedSectors(...perspective.bounds);
 }
 
 export function changePerspective(rotationMode, shiftX = 0, shiftY = 0) {

js/graphics/world.mjs

@@ -1,15 +1,15 @@
-import {canvas, context} from './index.mjs';
+import { canvas, context } from './index.mjs';
 import * as graphics from './index.mjs';
-import {images as assets} from '../assets.mjs';
+import { images as assets } from '../assets.mjs';
 import * as world from '../world/index.mjs';
-import {state} from '../game/index.mjs';
+import { state } from '../game/index.mjs';
 
 export function render() {
-	world.particles.forEach(renderParticle);
-	world.celestials.forEach(renderCelestial);
-	if (graphics.trace) world.tracers.forEach(renderTracer);
-	world.ships.forEach(renderShip);
-	world.entities.forEach(renderEntity);
+	for (particle of world.particles) renderParticle(particle);
+	for (celestial of world.celestials) if (isVisible(celestial)) renderCelestial(celestial);
+	if (graphics.trace) for (tracer of world.tracers) renderTracer(tracer);
+	for (ship of world.ships) renderShip(ship);
+	for (entity of world.entities) if (isVisible(entity)) renderEntity(entity);
 
 	/*
 	if (typeof window.q === 'undefined') window.q = [];
@@ -20,6 +20,16 @@ export function render() {
 	*/
 }
 
+function isVisible(body) {
+	const [bx, by] = body.com;
+	const [px, py] = [graphics.perspective.x, graphics.perspective.y];
+	const [, , w, h] = graphics.perspective.bounds;
+	const [centerX, centerY] = [px, py];
+	const margin = 1000;
+	return bx > centerX - margin && bx < centerX + margin &&
+		by > centerY - margin && by < centerY + margin;
+}
+
 function renderParticle(particle) {
 	context.fillStyle = particle.color;
 	context.fillRect(...particle.com, particle.size, particle.size);
@@ -64,7 +74,7 @@ function renderShip(ship) {
 
 const celestialImages = {
 	green: Object.values(assets.celestials.green)
-}
+};
 
 function renderCelestial(cel) {
 	context.drawImage(cel.image, cel.x, cel.y,