Make Celestials in view reflect model

Author: una-ada

css/main.css

@@ -1,10 +1,23 @@
+/**
+ *  Styles for DOM Rendering
+ *  by Una Ada <una@anarchy.website>
+ *  June 3, 2021
+ */
+
+/*---- Override Agent Style --------------------------------------------------*/
 body {
   margin: 0;
 }
+
+/*----- Game View ------------------------------------------------------------*/
 gravity {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
 }
+gravity > celestial {
+  background-color: black;
+  position: absolute;
+}

js/main.js

@@ -37,6 +37,7 @@ let saturn = new Celestial({
     velocity: new Vector(15.26e3, 0),
     size: 18, // not to scale
   });
+console.log(new Point(0, -389) || "Point is falsey???");
 model.scene.push(saturn);
 model.scene.push(titan);
 view.render();

js/modules/Celestial.js

@@ -1,7 +1,7 @@
 /**
  * @file    Celestial game objects.
  * @author  Una Ada <una@anarchy.website>
- * @version 2021.06.02
+ * @version 2021.06.03
  */
 
 /*----- Imports --------------------------------------------------------------*/
@@ -23,19 +23,25 @@ export default class Celestial {
    */
   constructor(options) {
     /*----- Metadata ---------------------------------------------------------*/
+    /** @var {string} name Display name. */
     this.name = options.name || "Unnamed Celestial";
     /** @var {number} birth Creation timestamp. */
     this.birth = +new Date();
 
     /*----- Physics ----------------------------------------------------------*/
-    this.position = options.positions || new Point(0, 0);
+    /** @var {Point} position Position coordinates in meters. */
+    this.position = options.position || new Point(0, 0);
+    /** @var {Vector} velocity Velocity vector in meters/second. */
     this.velocity = options.velocity || new Vector(0, 0);
+    /** @var {number} mass Mass in kilograms. */
     this.mass = options.mass || 0;
     /** @TODO Add HitBox class */
     this.hitBox = null;
 
     /*----- Rendering --------------------------------------------------------*/
+    /** @var {number} size Width or diameter in meters. */
     this.size = options.size || 0;
+    /** @var {ImageData} texture The texture for rendering. */
     this.texture = options.texture || null;
   }
 }

js/modules/DOMRenderer.js

@@ -7,6 +7,7 @@
 /*----- Imports --------------------------------------------------------------*/
 import GameData from "./GameData.js";
 import Renderer from "./Renderer.js";
+import Celestial from "./Celestial.js";
 
 /*----- Classes --------------------------------------------------------------*/
 /** @module DOMRenderer - Manages the game view (DOM). */
@@ -21,13 +22,31 @@ export default class DOMRenderer extends Renderer {
   }
 
   /*---- Methods -------------------------------------------------------------*/
-  /** Render the game scene. */
+  /**
+   * Render the game scene.
+   * @override
+   */
   render() {
-    const scene = this.model.scene;
-    scene.forEach((obj) => {
-      // Make sure each Celestial has an Element
-      const elem = obj.element || this.generateElement(obj);
-    });
+    const scene = this.model.scene,
+      bounds = this.bounds,
+      origin = {
+        x: bounds.width / 2,
+        y: bounds.height / 2,
+      };
+    scene.forEach(
+      /** @arg obj {Celestial} */
+      (obj) => {
+        // Make sure each Celestial has an Element
+        const elem = obj.element || this.generateElement(obj),
+          // Avoid repeating elem.style a whole bunch.
+          style = elem.style,
+          offset = 0 - obj.size / 2;
+        style.top = `${origin.y + obj.position.y + offset}px`;
+        style.left = `${origin.x + obj.position.x + offset}px`;
+        style.width = `${obj.size}px`;
+        style.height = `${obj.size}px`;
+      }
+    );
   }
   /**
    * Create a rendering Element for a Celestial and append it to the container.

js/modules/GameData.js

@@ -1,7 +1,7 @@
 /**
  * @file    Manages the game model.
  * @author  Una Ada <una@anarchy.website>
- * @version 2021.06.01
+ * @version 2021.06.03
  */
 
 /*----- Imports --------------------------------------------------------------*/
@@ -10,7 +10,7 @@ import Celestial from "./Celestial.js";
 
 /*----- Classes --------------------------------------------------------------*/
 /** @module GameData Manages the game model. */
-export default class {
+export default class GameData {
   /** Initialize a game model. */
   constructor() {
     /** @var {string} id Short game ID based on the current time. */

js/modules/Renderer.js

@@ -37,8 +37,11 @@ export default class Renderer {
     /** @var {HTMLElement} container - DOM Element holding all game views. */
     this.container = el;
   }
-  /** Render the game scene. */
+  /**
+   * Render the game scene.
+   * @abstract
+   */
   render() {
-    console.error("Renderer#render() has not been overwritten by subclass!");
+    throw new Error("Renderer#render() must be implemented by subclass!");
   }
 }

js/modules/Utils.js

@@ -1,7 +1,7 @@
 /**
  * @file    A collection of utility classes.
  * @author  Una Ada <una@anarchy.website>
- * @version 2021.06.02
+ * @version 2021.06.03
  */
 
 /*----- Classes --------------------------------------------------------------*/