Add Renderer#render (check Celestials have Element)

js/main.js

@@ -9,6 +9,8 @@ import Game from "./modules/Game.js";
 import DOMRenderer from "./modules/DOMRenderer.js";
 import Physics from "./modules/Physics.js";
 import GameData from "./modules/GameData.js";
+import Celestial from "./modules/Celestial.js";
+import { Point, Vector } from "./modules/Utils.js";
 
 /*----- Initialize -----------------------------------------------------------*/
 const model = new GameData(),
@@ -21,3 +23,21 @@ document.body.append(view.container);
 document.addEventListener("mousedown", game.handleMouseDown.bind(game));
 document.addEventListener("mouseup", game.handleMouseUp.bind(game));
 document.addEventListener("mousemove", game.handleMouseMove.bind(game));
+
+/*---- Temporary Level -------------------------------------------------------*/
+let saturn = new Celestial({
+    name: "Saturn",
+    mass: 5.683e26,
+    size: 102, // not to scale
+  }),
+  titan = new Celestial({
+    name: "Titan",
+    mass: 1.35e23,
+    position: new Point(0, -389), // not to scale
+    velocity: new Vector(15.26e3, 0),
+    size: 18, // not to scale
+  });
+model.scene.push(saturn);
+model.scene.push(titan);
+view.render();
+console.log(model);

js/modules/DOMRenderer.js

@@ -1,7 +1,7 @@
 /**
  * @file    Manages the game view (DOM).
  * @author  Una Ada <una@anarchy.website>
- * @version 2021.06.01
+ * @version 2021.06.03
  */
 
 /*----- Imports --------------------------------------------------------------*/
@@ -10,7 +10,7 @@ import Renderer from "./Renderer.js";
 
 /*----- Classes --------------------------------------------------------------*/
 /** @module DOMRenderer - Manages the game view (DOM). */
-export default class extends Renderer {
+export default class DOMRenderer extends Renderer {
   /**
    * Initialize a DOM-based renderer.
    * @arg {GameData} model - A game model instance.
@@ -19,4 +19,13 @@ export default class extends Renderer {
     super(model);
     this.setContainer(document.createElement("div"));
   }
+
+  /*---- Methods -------------------------------------------------------------*/
+  /** Render the game scene. */
+  render() {
+    const scene = this.model.scene;
+    scene.forEach(
+      (obj) => obj.element || (obj.element = document.createElement("div"))
+    );
+  }
 }

js/modules/Renderer.js

@@ -1,15 +1,15 @@
 /**
  * @file    Superclass for managing game view.
  * @author  Una Ada <una@anarchy.website>
- * @version 2021.06.01
+ * @version 2021.06.03
  */
 
 /*----- Imports --------------------------------------------------------------*/
 import GameData from "./GameData.js";
 
 /*----- Classes --------------------------------------------------------------*/
 /** @module Renderer - Superclass for managing game view. */
-export default class {
+export default class Renderer {
   /**
    * Initialize base rendering functions.
    * @arg {GameData} model - A game model instance.
@@ -18,6 +18,15 @@ export default class {
     /** @var {GameData} model - Reference to the game's model. */
     this.model = model;
   }
+
+  /*---- Setters and getters -------------------------------------------------*/
+  /** @type {number[]} */
+  get bounds() {
+    const { top, left, height, width } = this.container.getBoundingClientRect();
+    return { top, left, height, width };
+  }
+
+  /*----- Methods ------------------------------------------------------------*/
   /**
    * Sets the view container
    * @arg {HTMLElement} el - Element to set as view container.
@@ -28,9 +37,8 @@ export default class {
     /** @var {HTMLElement} container - DOM Element holding all game views. */
     this.container = el;
   }
-  /** @type {number[]} */
-  get bounds() {
-    const { top, left, height, width } = this.container.getBoundingClientRect();
-    return { top, left, height, width };
+  /** Render the game scene. */
+  render() {
+    console.error("Renderer#render() has not been overwritten by subclass!");
   }
 }

js/modules/Utils.js

@@ -19,8 +19,6 @@ export class Point {
     this.y = y;
   }
 
-
-
   /*----- Methods ------------------------------------------------------------*/
   /**
    * Create a point of the point.