stage 13

jacekkopecky · jacekkopecky · commit a6e8c59719bb · 2020-03-26T16:56:32.000Z
diff --git a/stages/.eslintrc.yml b/stages/.eslintrc.yml
@@ -0,0 +1,2 @@
+# private fields are not supported yet without babel
+parser: babel-eslint
diff --git a/stages/classes.mjs b/stages/classes.mjs
@@ -1,62 +1,91 @@
 export class Shape {
+  #x;
+  #y;
+  #col;
+
   constructor(x, y, col) {
-    this._x = x;
-    this._y = y;
-    this._col = col;
+    this.#x = x;
+    this.#y = y;
+    this.#col = col;
   }
 
   get x() {
-    return this._x;
+    return this.#x;
   }
 
   set x(val) {
     if (typeof val !== 'number') {
       throw new TypeError('x must be a number');
     }
-    this._x = val;
+    this.#x = val;
+  }
+
+  get y() {
+    return this.#y;
+  }
+
+  get col() {
+    return this.#col;
   }
 
   get area() {
     throw new Error('area is not a property of this shape');
   }
 
   moveBy(x, y) {
-    this._x += x;
-    this._y += y;
+    this.#x += x;
+    this.#y += y;
   }
 }
 
 export class Rectangle extends Shape {
+  #width;
+  #height;
+
   constructor(x, y, width, height, col) {
     super(x, y, col);
-    this._width = width;
-    this._height = height;
+    this.#width = width;
+    this.#height = height;
+  }
+
+  get width() {
+    return this.#width;
+  }
+
+  get height() {
+    return this.#height;
   }
 
   get area() {
-    return this._width * this._height;
+    return this.width * this.height;
   }
 
   draw(ctx) {
-    ctx.fillStyle = this._col;
-    ctx.fillRect(this._x, this._y, this._width, this._height);
+    ctx.fillStyle = this.col;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
   }
 }
 
 export class Circle extends Shape {
+  #r;
+
   constructor(x, y, r, col) {
     super(x, y, col);
-    this._r = r;
+    this.#r = r;
+  }
+
+  get r() {
+    return this.#r;
   }
 
   get area() {
-    return Math.PI * this._r ** 2;
+    return Math.PI * this.r ** 2;
   }
 
   draw(ctx) {
-    ctx.fillStyle = this._col;
+    ctx.fillStyle = this.col;
     ctx.beginPath();
-    ctx.arc(this._x, this._y, this._r, 0, 2 * Math.PI);
+    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
     ctx.fill();
   }
 }
diff --git a/stages/index.js b/stages/index.js
@@ -1,8 +1,7 @@
 'use strict';
 /**
- * Getters can be used for computed properties.
- *
- * Here, shapes come with `.area`.
+ * JavaScript gives us syntax for private fields;
+ * the only changes in this stage are in `classes.mjs`.
  */
 
 import { Circle, Rectangle } from './classes.mjs';

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# private fields are not supported yet without babel`
	`2`	`+parser: babel-eslint`