Add target and play area getters

Author: una-ada

css/main.css

@@ -43,14 +43,14 @@ gravity {
 }
 gravity > viewarea {
   border-radius: 5px;
-  border-style: solid;
-  border-width: 3px;
   position: absolute;
+  z-index: 0;
 }
 gravity > celestial {
   background-color: #333;
   border-radius: 50%;
   position: absolute;
+  z-index: 50;
 }
 
 /*----- Game Stats -----------------------------------------------------------*/
@@ -80,8 +80,8 @@ div#repo {
   z-index: 200;
 }
 span.blue {
-  color: blue;
+  color: rgba(0, 0, 255, 0.7);
 }
 span.red {
-  color: red;
+  color: rgba(255, 0, 0, 0.7);
 }

js/main.js

@@ -33,7 +33,7 @@ let saturn = new Celestial({
     size: 3.06e8,
     texture: "./img/celestial-saturn.svg",
   }),
-  target = new Area(new Point(1.0e9, -1e8), new Point(0.559e9, 2e8), {
+  target = new Area(new Point(1.0e9, -1e8), new Point(2e8, 2e8), {
     name: "Target",
   });
 model.scene.push(saturn);

js/modules/DOMRenderer.js

@@ -8,6 +8,7 @@
 import GameData from "./GameData.js";
 import Renderer from "./Renderer.js";
 import Celestial from "./Celestial.js";
+import Area from "./Area.js";
 
 /*----- Classes --------------------------------------------------------------*/
 /** @module DOMRenderer Manages the game view (DOM). */
@@ -63,8 +64,8 @@ export default class DOMRenderer extends Renderer {
           <span class="red">red</span> area into the
           <span class="blue">blue</span> area.`
         : model.condition === "WIN"
-          ? `You win! Congratulations!`
-          : `<span class="red">You lost! Oh no!</span>`;
+        ? `You win! Congratulations!`
+        : `<span class="red">You lost! Oh no!</span>`;
   }
   /**
    * Create an Element for a game object and append it to the container.
@@ -74,7 +75,6 @@ export default class DOMRenderer extends Renderer {
   generateElement(obj) {
     const type = obj instanceof Celestial ? "celestial" : "viewarea",
       element = document.createElement(type),
-      // Clean up the name for adding into a CSS class
       cleanName = obj.name.replace(/\s+/g, "-").toLowerCase();
     element.classList.add(`gravity__${type}_${cleanName}`);
     obj.texture &&
@@ -83,6 +83,11 @@ export default class DOMRenderer extends Renderer {
         element.style.borderRadius,
         element.style.backgroundImage,
       ] = [`transparent`, `0`, `url(${obj.texture})`]);
+    obj instanceof Area &&
+      (obj.name.toLowerCase() === "target"
+        ? (element.style.backgroundColor = `rgba(0, 0, 255, 0.7)`)
+        : obj.name.toLowerCase() === "play" &&
+          (element.style.backgroundColor = `rgba(255, 0, 0, 0.7)`));
     obj.element = element;
     this.container.append(obj.element);
     return element;

js/modules/Game.js

@@ -72,36 +72,37 @@ export default class Game {
     const model = this.model,
       mouse = this.model.mouse;
     // Handle player input
-    mouse.isDown
-      ? model.isCreating
-        ? mouse.change.magnitude > 18
-          // Set velocity if mouse outside threshold
-          ? (model.newborn.velocity = mouse.change
-              .copy()
-              .scale(Game.SCALE.velocity)
-              .reflectHorizontal()
-              .reflectVertical())
-          // Customize mass if mouse still in threshold
-          : model.customMassAllowed &&
-            (model.newborn.mass *= Game.SCALE.mass)
-        // Create new Celestial on mouse down
-        : model.health > 0 &&
-          (model.isCreating = true) &&
-          (model.newborn = new Celestial({
-            mass: 1.35e23,
-            position: this.view.origin
-              .copy()
-              .subtract(mouse.position)
-              .subtract(this.view.offset)
-              .scale(0 - this.view.scale),
-            size: 0.54e8,
-          })) &&
-          model.scene.push(model.newborn)
-      // Release newborn Celestial on mouse up
-      : model.isCreating &&
-        (model.newborn.physical = true) &&
-        (model.health -= 1) &&
-        (model.isCreating = false);
+    model.condition === "PLAY" &&
+      (mouse.isDown
+        ? model.isCreating
+          ? mouse.change.magnitude > 18
+            ? // Set velocity if mouse outside threshold
+              (model.newborn.velocity = mouse.change
+                .copy()
+                .scale(Game.SCALE.velocity)
+                .reflectHorizontal()
+                .reflectVertical())
+            : // Customize mass if mouse still in threshold
+              model.customMassAllowed && (model.newborn.mass *= Game.SCALE.mass)
+          : // Create new Celestial on mouse down
+            model.health > 0 &&
+            (model.isCreating = true) &&
+            (model.newborn = new Celestial({
+              name: "played",
+              mass: 1.35e23,
+              position: this.view.origin
+                .copy()
+                .subtract(mouse.position)
+                .subtract(this.view.offset)
+                .scale(0 - this.view.scale),
+              size: 0.54e8,
+            })) &&
+            model.scene.push(model.newborn)
+        : // Release newborn Celestial on mouse up
+          model.isCreating &&
+          (model.newborn.physical = true) &&
+          (model.health -= 1) &&
+          (model.isCreating = false));
     requestAnimationFrame(this.loop.bind(this));
   }
 }

js/modules/GameData.js

@@ -5,8 +5,8 @@
  */
 
 /*----- Imports --------------------------------------------------------------*/
+import Area from "./Area.js";
 import { Point, Vector } from "./Utils.js";
-import Celestial from "./Celestial.js";
 
 /*----- Classes --------------------------------------------------------------*/
 /** @module GameData Manages the game model. */
@@ -48,4 +48,18 @@ export default class GameData {
     /** @var {Celestial} newborn Newest created Celestial.  */
     this.newborn = null;
   }
+
+  /*----- Setters and Getters ------------------------------------------------*/
+  /** @var {Area} target The level target area. */
+  get target() {
+    return this.scene.find(
+      (obj) => obj instanceof Area && obj.name.toLowercase() === "target"
+    );
+  }
+  /** @var {Area} playArea The level play area. */
+  get playArea() {
+    return this.scene.find(
+      (obj) => obj instanceof Area && obj.name.toLowerCase() === "play area"
+    );
+  }
 }