separete components and translate to new react tictactoe and pixel art …

…b00tc4mp#204

staff/tere-albenca/shapes/car/Car.js

@@ -1,27 +1,27 @@
-function Car(width, height, color) {
-  var wheelSize = (width / 4, height / 3);
+class Car extends Shape2D {
+  constructor(width, height, color) {
+    const wheelSize = (width / 4, height / 3);
 
-  Shape2D.call(this, width, height + wheelSize / 1);
-  var spareWheel = new SpareWheel(width / 9.3, height / 1.7, color);
-  spareWheel.setLocation(width / wheelSize, height * 0.2);
-  this.add(spareWheel);
+    super(width, height + wheelSize / 1);
 
-  var carBody = new CarBody(width - wheelSize / 2, height, color);
-  carBody.setLocation(wheelSize / 1.5, wheelSize - wheelSize);
-  this.add(carBody);
+    const spareWheel = new SpareWheel(width / 9.3, height / 1.7, color);
+    spareWheel.setLocation(width / wheelSize, height * 0.2);
+    this.add(spareWheel);
 
-  var carFront = new CarFront(width * 0.55, height * 0.52, color);
-  carFront.setLocation(width * 0.72, height * 0.48);
-  this.add(carFront);
+    const carBody = new CarBody(width - wheelSize / 2, height, color);
+    carBody.setLocation(wheelSize / 1.5, wheelSize - wheelSize);
+    this.add(carBody);
 
-  var wheelRight = new Wheel(wheelSize, wheelSize);
-  wheelRight.setLocation(width - wheelSize / 1.5, height - wheelSize / 1.5);
-  this.add(wheelRight);
+    const carFront = new CarFront(width * 0.55, height * 0.52, color);
+    carFront.setLocation(width * 0.72, height * 0.48);
+    this.add(carFront);
 
-  var wheelLeft = new Wheel(wheelSize, wheelSize);
-  wheelLeft.setLocation(width - wheelSize * 4, height - wheelSize / 1.5);
-  this.add(wheelLeft);
-}
+    const wheelRight = new Wheel(wheelSize, wheelSize);
+    wheelRight.setLocation(width - wheelSize / 1.5, height - wheelSize / 1.5);
+    this.add(wheelRight);
 
-Car.prototype = Object.create(Shape2D.prototype);
-Car.prototype.constructor = Car;
+    const wheelLeft = new Wheel(wheelSize, wheelSize);
+    wheelLeft.setLocation(width - wheelSize * 4, height - wheelSize / 1.5);
+    this.add(wheelLeft);
+  }
+}

staff/tere-albenca/shapes/car/CarBody.js

@@ -1,27 +1,26 @@
-function CarBody(width, height, color) {
-  Shape2D.call(this, width, height, color);
+class CarBody extends Shape2D {
+  constructor(width, height, color) {
+    super(width, height, color);
 
-  var windowRight = new Window(width, height);
+    const windowRight = new Window(width, height);
 
-  windowRight.setLocation(
-    this.width - windowRight.width / 0.92,
-    this.height - windowRight.width / 0.63
-  );
-  windowRight.setStyle("borderTopRightRadius", "45%");
+    windowRight.setLocation(
+      this.width - windowRight.width / 0.92,
+      this.height - windowRight.width / 0.63
+    );
+    windowRight.setStyle("borderTopRightRadius", "45%");
 
-  this.add(windowRight);
+    this.add(windowRight);
 
-  var windowLeft = new Window(width, height);
+    const windowLeft = new Window(width, height);
 
-  windowLeft.setLocation(
-    this.width - windowRight.width - windowLeft.width / 0.8,
-    this.height - windowRight.width / 0.63
-  );
-  this.add(windowLeft);
+    windowLeft.setLocation(
+      this.width - windowRight.width - windowLeft.width / 0.8,
+      this.height - windowRight.width / 0.63
+    );
+    this.add(windowLeft);
 
-  this.setStyle("borderRadius", "10% 20% 0 10%");
-  this.setStyle("zIndex", 1);
+    this.setStyle("borderRadius", "10% 20% 0 10%");
+    this.setStyle("zIndex", 1);
+  }
 }
-
-CarBody.prototype = Object.create(Shape2D.prototype);
-CarBody.prototype.constructor = CarBody;

staff/tere-albenca/shapes/car/CarFront.js

@@ -1,8 +1,8 @@
-function CarFront(width, heigth, color) {
-    Shape2D.call(this, width, heigth, color)
+class CarFront extends Shape2D {
+  constructor(width, heigth, color) {
+    super(width, heigth, color);
 
-    this.setStyle('borderRadius', '0 50px 10px 0')
+    this.setStyle("borderRadius", "0 50px 10px 0");
+    //to do (medidas relativas en el border radius)
+  }
 }
-
-CarFront.prototype = Object.create(Shape2D.prototype)
-CarFront.prototype.constructor = CarFront

staff/tere-albenca/shapes/car/Component.js

@@ -1,14 +1,16 @@
-function Component(tagName) {
-  this.container = document.createElement(tagName);
-}
+class Component {
+  constructor(tagName) {
+    this.container = document.createElement(tagName);
+  }
 
-Component.prototype.setStyle = function (property, value) {
-  this.container.style[property] = value;
-};
+  setStyle(property, value) {
+    this.container.style[property] = value;
+  }
 
-Component.prototype.add = function (component) {
-  if (!(component instanceof Component))
-    throw new TypeError("component is not a Component");
+  add(component) {
+    if (!(component instanceof Component))
+      throw new TypeError("component is not a Component");
 
-  this.container.appendChild(component.container);
-};
+    this.container.appendChild(component.container);
+  }
+}

staff/tere-albenca/shapes/car/Shape2D.js

@@ -1,74 +1,73 @@
-function Shape2D(width,height,color){
-    Component.call(this,'div')
-
-    this.width = width
-    this.height = height
-    this.color = color
-
-    this.x = 0
-    this.y = 0
-
-    this.container.style.position = 'absolute'
-    this.container.style.left = this.x + 'px'
-    this.container.style.top = this.y + 'px'
-    this.container.style.width = this.width + 'px'
-    this.container.style.height = this.height + 'px'
-    this.container.style.backgroundColor = this.color
-}
+class Shape2D extends Component {
+  constructor(width, height, color) {
+    super("div");
 
-Shape2D.prototype = Object.create(Component.prototype)
-Shape2D.prototype.contructor = Shape2D
+    this.width = width;
+    this.height = height;
+    this.color = color;
 
-//location
+    this.x = 0;
+    this.y = 0;
 
-Shape2D.prototype.setX = function (x){
-    this.x = x
+    this.container.style.position = "absolute";
+    this.container.style.left = this.x + "px";
+    this.container.style.top = this.y + "px";
+    this.container.style.width = this.width + "px";
+    this.container.style.height = this.height + "px";
+    this.container.style.backgroundColor = this.color;
+  }
 
-    this.container.style.left = this.x + 'px'
-}
+  //location
 
-Shape2D.prototype.getX = function (){
-    return this.x
-}
+  setX(x) {
+    this.x = x;
 
-Shape2D.prototype.setY = function (y){
-    this.y = y
+    this.container.style.left = this.x + "px";
+  }
 
-    this.container.style.top = this.y + 'px'
-}
+  getX() {
+    return this.x;
+  }
 
-Shape2D.prototype.getY = function() {
-    return this.y
-}
+  setY(y) {
+    this.y = y;
 
-Shape2D.prototype.setLocation = function (x,y){
-    this.setX(x)
-    this.setY(y)
-}
+    this.container.style.top = this.y + "px";
+  }
 
-// dimension
+  getY() {
+    return this.y;
+  }
 
-Shape2D.prototype.setWidth = function (width){
-    this.width = width
+  setLocation(x, y) {
+    this.setX(x);
+    this.setY(y);
+  }
 
-    this.container.style.width = this.width + ' px'
-}
+  // dimension
 
-Shape2D.prototype.getWidth = function (){
-    return this.width
-}
+  setWidth(width) {
+    this.width = width;
 
-Shape2D.prototype.setHeight = function (height){
-    this.height = height
+    this.container.style.width = this.width + " px";
+  }
 
-    this.container.style.height = this.height + 'px'
-}
+  getWidth() {
+    return this.width;
+  }
 
-Shape2D.prototype.getHeight = function(){
-    return this.height
-}
+  setHeight(height) {
+    this.height = height;
 
-Shape2D.prototype.setDimensions = function (width, height) {
-    this.setWidth(width)
-    this.setHeight(height)
-}
+    this.container.style.height = this.height + "px";
+  }
+
+  getHeight() {
+    return this.height;
+  }
+
+  setDimensions(width, height) {
+    this.setWidth(width);
+    this.setHeight(height);
+  }
+}

staff/tere-albenca/shapes/car/SpareWheel.js

@@ -1,11 +1,10 @@
-function SpareWheel(width, height) {
-  Shape2D.call(this, width, height, "black");
+class SpareWheel extends Shape2D {
+  constructor(width, height) {
+    super(width, height, "black");
 
-  var spareWheel = width + height;
+    const spareWheel = width + height;
 
-  this.setStyle("border", spareWheel);
-  this.setStyle("zIndex", 0);
+    this.setStyle("border", spareWheel);
+    this.setStyle("zIndex", 0);
+  }
 }
-
-SpareWheel.prototype = Object.create(Shape2D.prototype);
-SpareWheel.prototype.constructor = SpareWheel;

staff/tere-albenca/shapes/car/Wheel.js

@@ -1,13 +1,12 @@
-function Wheel(width, height) {
-  Shape2D.call(this, width, height, "gray");
+class Wheel extends Shape2D {
+  constructor(width, height) {
+    super(width, height, "gray");
 
-  this.setStyle("borderRadius", "50%");
+    this.setStyle("borderRadius", "50%");
 
-  var wheel = "solid black " + (width + height) * 0.15 + "px";
+    const wheel = "solid black " + (width + height) * 0.15 + "px";
 
-  this.setStyle("border", wheel);
-  this.setStyle("zIndex", 2);
+    this.setStyle("border", wheel);
+    this.setStyle("zIndex", 2);
+  }
 }
-
-Wheel.prototype = Object.create(Shape2D.prototype);
-Wheel.prototype.constructor = Wheel;

staff/tere-albenca/shapes/car/Window.js

@@ -1,11 +1,10 @@
-function Window(width, height) {
-    Shape2D.call(this, width * 0.35, height * 0.35, 'skyblue')
+class Window extends Shape2D {
+  constructor(width, height) {
+    super(width * 0.35, height * 0.35, "skyblue");
 
-    var windowBorder = 'solid black ' + (width + height) * 0.01 + 'px'
+    const windowBorder = "solid black " + (width + height) * 0.01 + "px";
 
-    this.setStyle('border', windowBorder)
-    this.setStyle('zIndex', 3)
+    this.setStyle("border", windowBorder);
+    this.setStyle("zIndex", 3);
+  }
 }
-
-Window.prototype = Object.create(Shape2D.prototype)
-Window.prototype.constructor = Window

staff/tere-albenca/shapes/car/index.js

@@ -1,30 +1,30 @@
-var body = new Component();
+const body = new Component();
 body.container = document.body;
 
-var wheelRight = new Wheel(90, 90);
+const wheelRight = new Wheel(90, 90);
 wheelRight.setLocation(800, 380);
 body.add(wheelRight);
 
-var wheelLeft = new Wheel(90, 90);
+const wheelLeft = new Wheel(90, 90);
 wheelLeft.setLocation(580, 380);
 body.add(wheelLeft);
 
-var carBody = new CarBody(350, 210, "red");
+const carBody = new CarBody(350, 210, "red");
 carBody.setLocation(540, 220);
 body.add(carBody);
 
-var carFront = new CarFront(100, 110, "red");
+const carFront = new CarFront(100, 110, "red");
 carFront.setLocation(880, 320);
 body.add(carFront);
 
-var spareWheel = new SpareWheel(40, 130);
+const spareWheel = new SpareWheel(40, 130);
 spareWheel.setLocation(500, 260);
 body.add(spareWheel);
 
-var car = new Car(380, 210, "purple");
+const car = new Car(380, 210, "purple");
 car.setLocation(10, 20);
 body.add(car);
 
-var carTwo = new Car(110, 60, "orange");
+const carTwo = new Car(110, 60, "orange");
 car.setLocation(10, 100);
 body.add(carTwo);