From 43a6ae8d60f7ffcfee8da4497b6d3d15a5b544f7 Mon Sep 17 00:00:00 2001
From: asraelite <markusscully@gmail.com>
Date: Mon, 13 May 2024 19:34:23 +0200
Subject: [PATCH] Render planets in higher quality when zoomed in

---
 src/consts.ts          |  3 ++-
 src/graphics/world.ts  |  9 ++++++---
 src/world/body.ts      |  9 +++++++++
 src/world/celestial.ts | 36 +++++++++++++++++++++++-------------
 4 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/consts.ts b/src/consts.ts
index 4024c6f..0a74c54 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -39,4 +39,5 @@ export const ENTITY_SPAWN_RATE = 8;
 export const MIN_CELESTIAL_SPACING = 15;
 export const FUEL_CAN_AMOUNT = 10000;
 
-export const PLANET_IMAGE_SIZE = 250;
+export const PLANET_IMAGE_SIZE_SMALL = 256;
+export const PLANET_IMAGE_SIZE_LARGE = 1024;
diff --git a/src/graphics/world.ts b/src/graphics/world.ts
index cb3a426..21a4c58 100644
--- a/src/graphics/world.ts
+++ b/src/graphics/world.ts
@@ -3,6 +3,7 @@ import * as graphics from './index';
 import { images as assets } from '../assets';
 import * as world from '../world/index';
 import { state } from '../game/index';
+import Celestial from '../world/celestial';
 
 export function render() {
 	for (const particle of world.particles) renderParticle(particle);
@@ -78,9 +79,11 @@ const celestialImages = {
 	green: Object.values(assets.celestials.green)
 };
 
-function renderCelestial(cel) {
-	context.drawImage(cel.image, cel.x, cel.y,
-		cel.diameter, cel.diameter);
+function renderCelestial(celestial: Celestial) {
+	const isClose = graphics.perspective.currentZoom > 5;
+	const image = isClose ? celestial.imageLarge : celestial.imageSmall;
+	context.drawImage(image, celestial.x, celestial.y,
+		celestial.diameter, celestial.diameter);
 }
 
 function renderTracer(tracer) {
diff --git a/src/world/body.ts b/src/world/body.ts
index cc914a3..332294b 100644
--- a/src/world/body.ts
+++ b/src/world/body.ts
@@ -1,6 +1,15 @@
 import {GRAVITATIONAL_CONSTANT as G, TAU} from '../consts';
 
 export default class Body {
+	x: number;
+	y: number;
+	r: number;
+	xvel: number;
+	yvel: number;
+	rvel: number;
+	rfriction: number;
+	mass: number;
+	
 	constructor(x, y, mass) {
 		this.x = x;
 		this.y = y;
diff --git a/src/world/celestial.ts b/src/world/celestial.ts
index 8d377b9..e125db6 100644
--- a/src/world/celestial.ts
+++ b/src/world/celestial.ts
@@ -1,9 +1,14 @@
-import {tempCanvas, tempContext} from '../graphics/index';
-import {images as assets} from '../assets';
+import { tempCanvas, tempContext } from '../graphics/index';
+import { images as assets } from '../assets';
 import Body from './body';
-import { PLANET_IMAGE_SIZE } from '../consts';
+import { PLANET_IMAGE_SIZE_SMALL, PLANET_IMAGE_SIZE_LARGE } from '../consts';
 
 export default class Celestial extends Body {
+	radius: number;
+	imageSmall: CanvasImageSource;
+	imageLarge: CanvasImageSource;
+	type: string;
+
 	constructor(x, y, radius, {
 		density = 1,
 		type = 'rock'
@@ -15,12 +20,21 @@ export default class Celestial extends Body {
 		this.type = type;
 		const imageArr = Object.values(assets.celestials[this.type]);
 		const svgImage = imageArr[Math.random() * imageArr.length | 0];
-		tempCanvas.width = PLANET_IMAGE_SIZE;
-		tempCanvas.height = PLANET_IMAGE_SIZE;
-		tempContext.clearRect(0, 0, PLANET_IMAGE_SIZE, PLANET_IMAGE_SIZE);
-		tempContext.drawImage(svgImage, 0, 0, PLANET_IMAGE_SIZE, PLANET_IMAGE_SIZE);
-		this.image = new Image();
-    	this.image.src = tempCanvas.toDataURL();
+
+		tempCanvas.width = PLANET_IMAGE_SIZE_SMALL;
+		tempCanvas.height = PLANET_IMAGE_SIZE_SMALL;
+		tempContext.clearRect(0, 0, PLANET_IMAGE_SIZE_SMALL, PLANET_IMAGE_SIZE_SMALL);
+		tempContext.drawImage(svgImage, 0, 0, PLANET_IMAGE_SIZE_SMALL, PLANET_IMAGE_SIZE_SMALL);
+		this.imageSmall = new Image();
+		this.imageSmall.src = tempCanvas.toDataURL();
+
+		tempCanvas.width = PLANET_IMAGE_SIZE_LARGE;
+		tempCanvas.height = PLANET_IMAGE_SIZE_LARGE;
+		tempContext.clearRect(0, 0, PLANET_IMAGE_SIZE_LARGE, PLANET_IMAGE_SIZE_LARGE);
+		tempContext.drawImage(svgImage, 0, 0, PLANET_IMAGE_SIZE_LARGE, PLANET_IMAGE_SIZE_LARGE);
+		this.imageLarge = new Image();
+		this.imageLarge.src = tempCanvas.toDataURL();
+
 		// this.image = tempContext.getImageData(0, 0, PLANET_IMAGE_SIZE, PLANET_IMAGE_SIZE);
 	}
 
@@ -28,10 +42,6 @@ export default class Celestial extends Body {
 		return [this.x + this.radius, this.y + this.radius];
 	}
 
-	get escapeVelocity() {
-		
-	}
-
 	tick(delta: number) {
 
 	}