Feature/shapes

staff/tere-albenca/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

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

@@ -0,0 +1,27 @@
+class Car extends Shape2D {
+  constructor(width, height, color) {
+    const wheelSize = (width / 4, height / 3);
+
+    super(width, height + wheelSize / 1);
+
+    const spareWheel = new SpareWheel(width / 9.3, height / 1.7, color);
+    spareWheel.setLocation(width / wheelSize, height * 0.2);
+    this.add(spareWheel);
+
+    const carBody = new CarBody(width - wheelSize / 2, height, color);
+    carBody.setLocation(wheelSize / 1.5, wheelSize - wheelSize);
+    this.add(carBody);
+
+    const carFront = new CarFront(width * 0.55, height * 0.52, color);
+    carFront.setLocation(width * 0.72, height * 0.48);
+    this.add(carFront);
+
+    const wheelRight = new Wheel(wheelSize, wheelSize);
+    wheelRight.setLocation(width - wheelSize / 1.5, height - wheelSize / 1.5);
+    this.add(wheelRight);
+
+    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

@@ -0,0 +1,26 @@
+class CarBody extends Shape2D {
+  constructor(width, height, color) {
+    super(width, height, color);
+
+    const windowRight = new Window(width, height);
+
+    windowRight.setLocation(
+      this.width - windowRight.width / 0.92,
+      this.height - windowRight.width / 0.63
+    );
+    windowRight.setStyle("borderTopRightRadius", "45%");
+
+    this.add(windowRight);
+
+    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);
+
+    this.setStyle("borderRadius", "10% 20% 0 10%");
+    this.setStyle("zIndex", 1);
+  }
+}

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

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

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

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

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

@@ -0,0 +1,73 @@
+class Shape2D extends Component {
+  constructor(width, height, color) {
+    super("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;
+  }
+
+  //location
+
+  setX(x) {
+    this.x = x;
+
+    this.container.style.left = this.x + "px";
+  }
+
+  getX() {
+    return this.x;
+  }
+
+  setY(y) {
+    this.y = y;
+
+    this.container.style.top = this.y + "px";
+  }
+
+  getY() {
+    return this.y;
+  }
+
+  setLocation(x, y) {
+    this.setX(x);
+    this.setY(y);
+  }
+
+  // dimension
+
+  setWidth(width) {
+    this.width = width;
+
+    this.container.style.width = this.width + " px";
+  }
+
+  getWidth() {
+    return this.width;
+  }
+
+  setHeight(height) {
+    this.height = 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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</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="SpareWheel.js"></script>
+    <script src="Car.js "></script>
+
+    <script src="index.js "></script>
+</body>
+
+</html>

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

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

staff/tere-albenca/shapes/hangman/Button.js

@@ -0,0 +1,9 @@
+class Button extends Component {
+  constructor() {
+    super("button");
+  }
+
+  setType(type) {
+    this.container.type = type;
+  }
+}

staff/tere-albenca/shapes/hangman/CharBoxes.js

@@ -0,0 +1,36 @@
+class CharBoxes extends Component {
+  constructor(words) {
+    super("div");
+
+    this.setStyle("display", "flex");
+    this.setStyle("gap", "5px");
+    this.setStyle("margin", "5px");
+
+    this.boxes = [];
+
+    //for (var i = 0; i < words.length; i++) {
+    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.setText(char);
+
+      this.add(charBox);
+
+      //this.boxes.push(charBox)
+      this.boxes[i] = charBox;
+    }
+  }
+
+  showChar(index) {
+    const charBox = this.boxes[index];
+
+    charBox.setStyle("background-color", "transparent");
+  }
+}

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

@@ -0,0 +1,31 @@
+class Component {
+  constructor(tagName) {
+    this.container = document.createElement(tagName);
+  }
+
+  setId(id) {
+    this.container.id = id;
+  }
+
+  setText(text) {
+    this.container.innerText = text;
+  }
+
+  add(component) {
+    if (!(component instanceof Component))
+      throw new TypeError("component is not a Component");
+
+    this.container.appendChild(component.container);
+  }
+
+  remove(component) {
+    if (!(component instanceof Component))
+      throw new TypeError("component is not a Component");
+
+    this.container.removeChild(component.container);
+  }
+
+  setStyle(property, value) {
+    this.container.style[property] = value;
+  }
+}

staff/tere-albenca/shapes/hangman/Form.js

@@ -0,0 +1,13 @@
+class Form extends Component {
+  constructor() {
+    super("form");
+  }
+
+  onSubmit(callback) {
+    this.container.onsubmit = callback;
+  }
+
+  reset() {
+    this.container.reset();
+  }
+}