feat: add color and damage color properties to car [#1]

d3p1 · Nov 10, 2024 · eaa48f9 · eaa48f9
1 parent e21c25e
commit eaa48f9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/docs/js/app.js b/docs/js/app.js
@@ -151,6 +151,8 @@ export default class App {
       this.canvas.height - this.canvas.height * 0.2,
       50,
       100,
+      'hsl(10,100%,50%)',
+      'hsl(0,0%,30%)',
       200,
       this.carControl,
     )

diff --git a/docs/js/core/car.js b/docs/js/core/car.js
@@ -60,6 +60,16 @@ export default class Car {
    */
   height
 
+  /**
+   * @type {string}
+   */
+  color
+
+  /**
+   * @type {string}
+   */
+  damageColor
+
   /**
    * @type {Control}
    */
@@ -77,15 +87,19 @@ export default class Car {
    * @param {number}  centerY
    * @param {number}  width
    * @param {number}  height
+   * @param {string}  color
+   * @param {string}  damageColor
    * @param {number}  force
    * @param {Control} control
    * @param {Sensor}  sensor
    */
   constructor(
     centerX,
     centerY,
-    width,
-    height,
+    width = 50,
+    height = 100,
+    color = 'hsl(200,100%,50%)',
+    damageColor = 'hsl(0,0%,30%)',
     force = 200,
     control = new Control(),
     sensor = new Sensor(),
@@ -94,6 +108,8 @@ export default class Car {
     this.centerY = centerY
     this.width = width
     this.height = height
+    this.color = color
+    this.damageColor = damageColor
     this.force = force
     this.control = control
     this.sensor = sensor
@@ -106,7 +122,7 @@ export default class Car {
    * @param   {{x: number, y: number}[][]} roadBorders Road borders
    * @returns {void}
    */
-  update(t, roadBorders) {
+  update(t, roadBorders = []) {
     if (!this.isDamage) {
       this.control.update(t)
 
@@ -129,13 +145,12 @@ export default class Car {
    *
    * @param   {CanvasRenderingContext2D} context
    * @returns {void}
-   * @todo    Define car color normal and damage fill style as property
    */
   draw(context) {
     context.save()
-    context.fillStyle = 'hsl(0,0%,0%)'
+    context.fillStyle = this.color
     if (this.isDamage) {
-      context.fillStyle = 'hsl(0,0%,30%)'
+      context.fillStyle = this.damageColor
     }
     this.#draw(context)
     context.restore()