add car to shapes, fix hangman and convert to es6 b00tc4mp#200

staff/joseramon-rodriguez/shapes/car/Car.js

@@ -0,0 +1,36 @@
+function Car(width, height, color) {
+
+    if (width > height * 3) {
+        height = width / 3
+    }
+
+    else if (height >= width * 1.1) {
+        width = height
+    }
+
+    var wheelsSize = (width * 0.8 + height * 1.3) / 2 * 0.2
+
+    Shape2D.call(this, width, height + wheelsSize / 2)
+
+    // this.setStyle('background-color', 'transparent')
+    this.setStyle('border', '1px solid black')
+
+    var carBody = new CarBody(width * 0.75, height, color)
+    carBody.setLocation(0, 0)
+    this.add(carBody)
+
+    var carFront = new CarFront(width * 0.25, height * 0.40, color)
+    carFront.setLocation(width * 0.75, carBody.getHeight() - carFront.getHeight())
+    this.add(carFront)
+
+    var wheelRight = new Wheel(wheelsSize, wheelsSize)
+    wheelRight.setLocation(wheelRight.getWidth() / 2, carBody.getHeight() - wheelRight.getHeight() / 2)
+    this.add(wheelRight)
+
+    var wheelLeft = new Wheel(wheelsSize, wheelsSize)
+    wheelLeft.setLocation(carBody.getWidth() - wheelLeft.getWidth() / 2, carBody.getHeight() - wheelLeft.getHeight() / 2)
+    this.add(wheelLeft)
+}
+
+Car.prototype = Object.create(Shape2D.prototype)
+Car.prototype.constructor = Car

staff/joseramon-rodriguez/shapes/car/CarBody.js

@@ -0,0 +1,20 @@
+function CarBody(width, height, color) {
+    Shape2D.call(this, width, height, color)
+
+    var windowRight = new Window(width, height)
+
+    windowRight.setLocation(this.width - windowRight.width, 20)
+    windowRight.setStyle('borderTopRightRadius', '20%')
+
+    this.add(windowRight)
+
+    var windowLeft = new Window(width, height)
+
+    windowLeft.setLocation(this.width - 2 * (windowLeft.width), 20)
+    this.add(windowLeft)
+
+    this.setStyle('borderRadius', '10px 10px 0 10px')
+}
+
+CarBody.prototype = Object.create(Shape2D.prototype)
+CarBody.prototype.constructor = CarBody

staff/joseramon-rodriguez/shapes/car/CarFront.js

@@ -0,0 +1,8 @@
+function CarFront(width, height, color) {
+    Shape2D.call(this, width, height, color)
+
+    this.setStyle('borderRadius', '0 10px 10px 0')
+}
+
+CarFront.prototype = Object.create(Shape2D.prototype)
+CarFront.prototype.constructor = CarFront

staff/joseramon-rodriguez/shapes/car/Component.js

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

staff/joseramon-rodriguez/shapes/car/Shape2D.js

@@ -0,0 +1,75 @@
+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.boxSizing = 'border-box'
+    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
+}
+
+Shape2D.prototype = Object.create(Component.prototype)
+Shape2D.prototype.constructor = Shape2D
+
+// location
+
+Shape2D.prototype.setX = function (x) {
+    this.x = x
+
+    this.container.style.left = this.x + 'px'
+}
+
+Shape2D.prototype.getX = function () {
+    return this.x
+}
+
+Shape2D.prototype.setY = function (y) {
+    this.y = y
+
+    this.container.style.top = this.y + 'px'
+}
+
+Shape2D.prototype.getY = function () {
+    return this.y
+}
+
+Shape2D.prototype.setLocation = function (x, y) {
+    this.setX(x)
+    this.setY(y)
+}
+
+// dimensions
+
+Shape2D.prototype.setWidth = function (width) {
+    this.width = width
+
+    this.container.style.width = this.width + 'px'
+}
+
+Shape2D.prototype.getWidth = function () {
+    return this.width
+}
+
+Shape2D.prototype.setHeight = function (height) {
+    this.height = height
+
+    this.container.style.height = this.height + 'px'
+}
+
+Shape2D.prototype.getHeight = function () {
+    return this.height
+}
+
+Shape2D.prototype.setDimensions = function (width, height) {
+    this.setWidth(width)
+    this.setHeight(height)
+}

staff/joseramon-rodriguez/shapes/car/Wheel.js

@@ -0,0 +1,13 @@
+function Wheel(width, height) {
+    Shape2D.call(this, width, height, 'gray')
+
+    this.setStyle('borderRadius', '50%')
+
+    var wheel = 'solid black ' + (width + height) * 0.1 + 'px'
+
+    this.setStyle('border', wheel)
+    this.setStyle('zIndex', 1)
+}
+
+Wheel.prototype = Object.create(Shape2D.prototype)
+Wheel.prototype.constructor = Wheel

staff/joseramon-rodriguez/shapes/car/Window.js

@@ -0,0 +1,10 @@
+function Window(width, height) {
+    Shape2D.call(this, width * 0.35, height * 0.40, 'skyblue')
+
+    var windowBorder = 'solid black ' + (width + height) * 0.02 + 'px'
+
+    this.setStyle('border', windowBorder)
+}
+
+Window.prototype = Object.create(Shape2D.prototype)
+Window.prototype.constructor = Window

staff/joseramon-rodriguez/shapes/car/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pixel Art Car</title>
+</head>
+
+<body>
+    <!-- ATOMICOS -->
+    <script src="Component.js"></script>
+    <script src="Shape2D.js"></script>
+    <script src="Wheel.js"></script>
+    <script src="Window.js"></script>
+    <script src="CarBody.js"></script>
+    <script src="CarFront.js"></script>
+    <script src="Car.js"></script>
+
+    <script src="index.js"></script>
+</body>
+
+</html>

staff/joseramon-rodriguez/shapes/car/index.js

@@ -0,0 +1,25 @@
+var body = new Component
+body.container = document.body
+
+var wheelRight = new Wheel(90, 90)
+wheelRight.setLocation(430, 380)
+body.add(wheelRight)
+
+var wheelLeft = new Wheel(90, 90)
+wheelLeft.setLocation(180, 380)
+body.add(wheelLeft)
+
+var carBody = new CarBody(350, 200, 'red')
+carBody.setLocation(150, 220)
+body.add(carBody)
+
+var carFront = new CarFront(100, 100, 'red')
+carFront.setLocation(500, 320)
+body.add(carFront)
+
+var car = new Car(100, 100, 'green')
+body.add(car)
+
+var car2 = new Car(400, 50, 'blue')
+car2.setLocation(300, 0)
+body.add(car2)

staff/joseramon-rodriguez/shapes/hangman/Button.js

@@ -1,10 +1,9 @@
-function Button() {
-    Component.call(this, 'button')
-}
+class Button extends Component {
+    constructor() {
+        super('button')
+    }
 
-Button.prototype = Object.create(Component.prototype)
-Button.prototype.constructor = Button
-
-Button.prototype.setType = function (type) {
-    this.container.type = type
+    setType(type) {
+        this.container.type = type
+    }
 }

staff/joseramon-rodriguez/shapes/hangman/CharBoxes.js

@@ -1,37 +1,35 @@
-function CharBoxes(words) {
-    Component.call(this, 'div')
-
-    this.setId('characters')
-    this.setStyle('display', 'flex')
-    this.setStyle('gap', '5px')
-    this.setStyle('margin', '5px')
-
-    this.boxes = []
-
-    for (var i = 0; i < words.length; i++) {
-        var char = words[i]
-
-        var charBox = new Component('div')
-        charBox.setStyle('border', '1px solid black')
-        charBox.setStyle('font-family', 'courier')
-        charBox.setStyle('font-size', '36px')
-        charBox.setStyle('padding', '5px')
-        charBox.setStyle('background-color', 'black')
-        charBox.setStyle('min-width', '20px')
-        charBox.setStyle('user-select', 'none')
-        charBox.setText(char)
-
-        this.add(charBox)
-        this.boxes.push(charBox)
+class CharBoxes extends Component {
+    constructor(words) {
+        super('div')
+
+        this.setId('characters')
+        this.setStyle('display', 'flex')
+        this.setStyle('gap', '5px')
+        this.setStyle('margin', '5px')
+
+        this.boxes = []
+
+        for (const i in words) {
+            const char = words[i]
+
+            const charBox = new Component('div')
+            charBox.setStyle('border', '1px solid black')
+            charBox.setStyle('font-family', 'courier')
+            charBox.setStyle('font-size', '36px')
+            charBox.setStyle('padding', '5px')
+            charBox.setStyle('background-color', 'black')
+            charBox.setStyle('min-width', '20px')
+            charBox.setStyle('user-select', 'none')
+            charBox.setText(char)
+
+            this.add(charBox)
+            this.boxes.push(charBox)
+        }
     }
-}
-
-CharBoxes.prototype = Object.create(Component.prototype)
-CharBoxes.prototype.constructor = CharBoxes
 
-CharBoxes.prototype.showChar = function (index) {
-    var charBox = this.boxes[index]
-
-    charBox.setStyle('background-color', 'transparent')
+    showChar(index) {
+        const charBox = this.boxes[index]
 
+        charBox.setStyle('background-color', 'transparent')
+    }
 }

staff/joseramon-rodriguez/shapes/hangman/Component.js

@@ -1,27 +1,29 @@
-function Component(tagName) {
-    this.container = document.createElement(tagName)
-}
+class Component {
+    constructor(tagName) {
+        this.container = document.createElement(tagName)
+    }
 
-Component.prototype.setId = function (id) {
-    this.container.id = id
-}
+    setId(id) {
+        this.container.id = id
+    }
 
-Component.prototype.setText = function (text) {
-    this.container.innerText = text
-}
+    setText(text) {
+        this.container.innerText = text
+    }
 
-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)
+    }
 
-Component.prototype.remove = function (component) {
-    if (!(component instanceof Component)) throw new TypeError('component is not a Component')
+    remove(component) {
+        if (!(component instanceof Component)) throw new TypeError('component is not a Component')
 
-    this.container.removeChild(component.container)
-}
+        this.container.removeChild(component.container)
+    }
 
-Component.prototype.setStyle = function (property, value) {
-    this.container.style[property] = value
+    setStyle(property, value) {
+        this.container.style[property] = value
+    }
 }