diff --git a/staff/tere-albenca/shapes/car/Car.js b/staff/tere-albenca/shapes/car/Car.js
index 6727ec597..98ca3e439 100644
--- a/staff/tere-albenca/shapes/car/Car.js
+++ b/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);
+  }
+}
diff --git a/staff/tere-albenca/shapes/car/CarBody.js b/staff/tere-albenca/shapes/car/CarBody.js
index ac791c292..e64ad9399 100644
--- a/staff/tere-albenca/shapes/car/CarBody.js
+++ b/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;
diff --git a/staff/tere-albenca/shapes/car/CarFront.js b/staff/tere-albenca/shapes/car/CarFront.js
index ac98fb5e1..5914621dc 100644
--- a/staff/tere-albenca/shapes/car/CarFront.js
+++ b/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
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/car/Component.js b/staff/tere-albenca/shapes/car/Component.js
index 81aa4b422..2dee1c5c9 100644
--- a/staff/tere-albenca/shapes/car/Component.js
+++ b/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);
+  }
+}
diff --git a/staff/tere-albenca/shapes/car/Shape2D.js b/staff/tere-albenca/shapes/car/Shape2D.js
index 332de5153..6510a6fbe 100644
--- a/staff/tere-albenca/shapes/car/Shape2D.js
+++ b/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)
-}
\ No newline at end of file
+    this.container.style.height = this.height + "px";
+  }
+
+  getHeight() {
+    return this.height;
+  }
+
+  setDimensions(width, height) {
+    this.setWidth(width);
+    this.setHeight(height);
+  }
+}
diff --git a/staff/tere-albenca/shapes/car/SpareWheel.js b/staff/tere-albenca/shapes/car/SpareWheel.js
index cace5a0d0..1359cfbb3 100644
--- a/staff/tere-albenca/shapes/car/SpareWheel.js
+++ b/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;
diff --git a/staff/tere-albenca/shapes/car/Wheel.js b/staff/tere-albenca/shapes/car/Wheel.js
index 3ee851cb6..1155fc222 100644
--- a/staff/tere-albenca/shapes/car/Wheel.js
+++ b/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;
diff --git a/staff/tere-albenca/shapes/car/Window.js b/staff/tere-albenca/shapes/car/Window.js
index d6bdb3d43..03604bfec 100644
--- a/staff/tere-albenca/shapes/car/Window.js
+++ b/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
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/car/index.js b/staff/tere-albenca/shapes/car/index.js
index 4b6503927..fceba82d3 100644
--- a/staff/tere-albenca/shapes/car/index.js
+++ b/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);
diff --git a/staff/tere-albenca/shapes/carEs6/Car.js b/staff/tere-albenca/shapes/carEs6/Car.js
deleted file mode 100644
index 98ca3e439..000000000
--- a/staff/tere-albenca/shapes/carEs6/Car.js
+++ /dev/null
@@ -1,27 +0,0 @@
-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);
-  }
-}
diff --git a/staff/tere-albenca/shapes/carEs6/CarBody.js b/staff/tere-albenca/shapes/carEs6/CarBody.js
deleted file mode 100644
index e64ad9399..000000000
--- a/staff/tere-albenca/shapes/carEs6/CarBody.js
+++ /dev/null
@@ -1,26 +0,0 @@
-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);
-  }
-}
diff --git a/staff/tere-albenca/shapes/carEs6/CarFront.js b/staff/tere-albenca/shapes/carEs6/CarFront.js
deleted file mode 100644
index 725f3c466..000000000
--- a/staff/tere-albenca/shapes/carEs6/CarFront.js
+++ /dev/null
@@ -1,7 +0,0 @@
-class CarFront extends Shape2D {
-  constructor(width, heigth, color) {
-    super(width, heigth, color);
-
-    this.setStyle("borderRadius", "0 50px 10px 0");
-  }
-}
diff --git a/staff/tere-albenca/shapes/carEs6/Component.js b/staff/tere-albenca/shapes/carEs6/Component.js
deleted file mode 100644
index 2dee1c5c9..000000000
--- a/staff/tere-albenca/shapes/carEs6/Component.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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);
-  }
-}
diff --git a/staff/tere-albenca/shapes/carEs6/SpareWheel.js b/staff/tere-albenca/shapes/carEs6/SpareWheel.js
deleted file mode 100644
index 1359cfbb3..000000000
--- a/staff/tere-albenca/shapes/carEs6/SpareWheel.js
+++ /dev/null
@@ -1,10 +0,0 @@
-class SpareWheel extends Shape2D {
-  constructor(width, height) {
-    super(width, height, "black");
-
-    const spareWheel = width + height;
-
-    this.setStyle("border", spareWheel);
-    this.setStyle("zIndex", 0);
-  }
-}
diff --git a/staff/tere-albenca/shapes/carEs6/Wheel.js b/staff/tere-albenca/shapes/carEs6/Wheel.js
deleted file mode 100644
index 1155fc222..000000000
--- a/staff/tere-albenca/shapes/carEs6/Wheel.js
+++ /dev/null
@@ -1,12 +0,0 @@
-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);
-  }
-}
diff --git a/staff/tere-albenca/shapes/carEs6/Window.js b/staff/tere-albenca/shapes/carEs6/Window.js
deleted file mode 100644
index 03604bfec..000000000
--- a/staff/tere-albenca/shapes/carEs6/Window.js
+++ /dev/null
@@ -1,10 +0,0 @@
-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);
-  }
-}
diff --git a/staff/tere-albenca/shapes/carEs6/index.html b/staff/tere-albenca/shapes/carEs6/index.html
deleted file mode 100644
index 88170d81f..000000000
--- a/staff/tere-albenca/shapes/carEs6/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!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>
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/carEs6/index.js b/staff/tere-albenca/shapes/carEs6/index.js
deleted file mode 100644
index fceba82d3..000000000
--- a/staff/tere-albenca/shapes/carEs6/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-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);
diff --git a/staff/tere-albenca/shapes/hangmanEs6/Button.js b/staff/tere-albenca/shapes/hangman/Button.js
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs6/Button.js
rename to staff/tere-albenca/shapes/hangman/Button.js
diff --git a/staff/tere-albenca/shapes/hangmanEs6/CharBoxes.js b/staff/tere-albenca/shapes/hangman/CharBoxes.js
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs6/CharBoxes.js
rename to staff/tere-albenca/shapes/hangman/CharBoxes.js
diff --git a/staff/tere-albenca/shapes/hangmanEs6/Component.js b/staff/tere-albenca/shapes/hangman/Component.js
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs6/Component.js
rename to staff/tere-albenca/shapes/hangman/Component.js
diff --git a/staff/tere-albenca/shapes/hangmanEs6/Form.js b/staff/tere-albenca/shapes/hangman/Form.js
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs6/Form.js
rename to staff/tere-albenca/shapes/hangman/Form.js
diff --git a/staff/tere-albenca/shapes/hangmanEs6/GuessForm.js b/staff/tere-albenca/shapes/hangman/GuessForm.js
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs6/GuessForm.js
rename to staff/tere-albenca/shapes/hangman/GuessForm.js
diff --git a/staff/tere-albenca/shapes/hangmanEs6/Hangman.js b/staff/tere-albenca/shapes/hangman/Hangman.js
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs6/Hangman.js
rename to staff/tere-albenca/shapes/hangman/Hangman.js
diff --git a/staff/tere-albenca/shapes/hangmanEs6/Input.js b/staff/tere-albenca/shapes/hangman/Input.js
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs6/Input.js
rename to staff/tere-albenca/shapes/hangman/Input.js
diff --git a/staff/tere-albenca/shapes/hangmanEs6/Label.js b/staff/tere-albenca/shapes/hangman/Label.js
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs6/Label.js
rename to staff/tere-albenca/shapes/hangman/Label.js
diff --git a/staff/tere-albenca/shapes/carEs6/Shape2D.js b/staff/tere-albenca/shapes/hangman/Shape2D.js
similarity index 100%
rename from staff/tere-albenca/shapes/carEs6/Shape2D.js
rename to staff/tere-albenca/shapes/hangman/Shape2D.js
diff --git a/staff/tere-albenca/shapes/hangmanEs6/StartForm.js b/staff/tere-albenca/shapes/hangman/StartForm.js
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs6/StartForm.js
rename to staff/tere-albenca/shapes/hangman/StartForm.js
diff --git a/staff/tere-albenca/shapes/hangmanEs5/index.html b/staff/tere-albenca/shapes/hangman/index.html
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs5/index.html
rename to staff/tere-albenca/shapes/hangman/index.html
diff --git a/staff/tere-albenca/shapes/hangmanEs6/index.js b/staff/tere-albenca/shapes/hangman/index.js
similarity index 100%
rename from staff/tere-albenca/shapes/hangmanEs6/index.js
rename to staff/tere-albenca/shapes/hangman/index.js
diff --git a/staff/tere-albenca/shapes/hangmanEs5/Button.js b/staff/tere-albenca/shapes/hangmanEs5/Button.js
deleted file mode 100644
index 517c7aa6f..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/Button.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function Button() {
-  Component.call(this, "button");
-}
-
-Button.prototype = Object.create(Component.prototype);
-Button.prototype.constructor = Button;
-
-Button.prototype.setType = function (type) {
-  this.container.type = type;
-};
diff --git a/staff/tere-albenca/shapes/hangmanEs5/CharBoxes.js b/staff/tere-albenca/shapes/hangmanEs5/CharBoxes.js
deleted file mode 100644
index 6be215cdd..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/CharBoxes.js
+++ /dev/null
@@ -1,36 +0,0 @@
-function CharBoxes(words) {
-  Component.call(this, "div");
-
-  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.setText(char);
-
-    this.add(charBox);
-
-    //this.boxes.push(charBox)
-    this.boxes[i] = 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");
-};
diff --git a/staff/tere-albenca/shapes/hangmanEs5/Component.js b/staff/tere-albenca/shapes/hangmanEs5/Component.js
deleted file mode 100644
index 7524cb0d2..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/Component.js
+++ /dev/null
@@ -1,29 +0,0 @@
-function Component(tagName) {
-  this.container = document.createElement(tagName);
-}
-
-Component.prototype.setId = function (id) {
-  this.container.id = id;
-};
-
-Component.prototype.setText = function (text) {
-  this.container.innerText = text;
-};
-
-Component.prototype.add = function (component) {
-  if (!(component instanceof Component))
-    throw new TypeError("component is not a Component");
-
-  this.container.appendChild(component.container);
-};
-
-Component.prototype.remove = function (component) {
-  if (!(component instanceof Component))
-    throw new TypeError("component is not a Component");
-
-  this.container.removeChild(component.container);
-};
-
-Component.prototype.setStyle = function (property, value) {
-  this.container.style[property] = value;
-};
diff --git a/staff/tere-albenca/shapes/hangmanEs5/Form.js b/staff/tere-albenca/shapes/hangmanEs5/Form.js
deleted file mode 100644
index 4b8b51b73..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/Form.js
+++ /dev/null
@@ -1,14 +0,0 @@
-function Form() {
-  Component.call(this, "form");
-}
-
-Form.prototype = Object.create(Component.prototype);
-Form.prototype.constructor = Form;
-
-Form.prototype.onSubmit = function (callback) {
-  this.container.onsubmit = callback;
-};
-
-Form.prototype.reset = function () {
-  this.container.reset();
-};
diff --git a/staff/tere-albenca/shapes/hangmanEs5/GuessForm.js b/staff/tere-albenca/shapes/hangmanEs5/GuessForm.js
deleted file mode 100644
index afa8c6a4c..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/GuessForm.js
+++ /dev/null
@@ -1,39 +0,0 @@
-function GuessForm() {
-  Form.call(this);
-
-  this.setStyle("display", "flex");
-  this.setStyle("gap", "10px");
-
-  var charLabel = new Label();
-  charLabel.setFor("char");
-  charLabel.setText("Character");
-  this.add(charLabel);
-
-  var charInput = new Input();
-  charInput.setId("char");
-  charInput.setMaxLength(1);
-  charInput.setStyle("width", "20px");
-  this.add(charInput);
-
-  this.charInput = charInput;
-
-  var guessButton = new Button();
-  guessButton.setType("submit");
-  guessButton.setText("Guess");
-  this.add(guessButton);
-}
-
-GuessForm.prototype = Object.create(Form.prototype);
-GuessForm.prototype.constructor = GuessForm;
-
-GuessForm.prototype.onSubmit = function (callback) {
-  this.container.onsubmit = function (event) {
-    event.preventDefault();
-
-    const char = this.charInput.getValue();
-
-    this.reset();
-
-    callback(char);
-  }.bind(this);
-};
diff --git a/staff/tere-albenca/shapes/hangmanEs5/Hangman.js b/staff/tere-albenca/shapes/hangmanEs5/Hangman.js
deleted file mode 100644
index e9f81d88d..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/Hangman.js
+++ /dev/null
@@ -1,97 +0,0 @@
-function Hangman(width, height) {
-  Shape2D.call(this, width, height, "transparent");
-
-  //this.setLocation(50, 200)
-
-  var gallowBase = new Shape2D(100, 0);
-  gallowBase.setStyle("border", "1px solid blue");
-  gallowBase.setLocation(this.width - gallowBase.width - 5, this.height);
-  this.add(gallowBase);
-
-  var gallowBar1 = new Shape2D(0, 200);
-  gallowBar1.setStyle("border", "1px solid red");
-  gallowBar1.setLocation(
-    this.width - 5 - gallowBase.width / 2,
-    this.height - gallowBar1.height
-  );
-  this.add(gallowBar1);
-
-  var gallowBar2 = new Shape2D(50, 0);
-  gallowBar2.setStyle("border", "1px solid green");
-  gallowBar2.setLocation(
-    this.width - 5 - gallowBase.width / 2 - gallowBar2.width,
-    0
-  );
-  this.add(gallowBar2);
-
-  var gallowBar3 = new Shape2D(0, 50);
-  gallowBar3.setStyle("border", "1px solid orange");
-  gallowBar3.setLocation(
-    this.width - 5 - gallowBase.width / 2 - gallowBar2.width,
-    0
-  );
-  this.add(gallowBar3);
-
-  var head = new Shape2D(20, 20);
-  head.setStyle("border", "1px solid brown");
-  head.setStyle("borderRadius", "50%");
-  head.setLocation(
-    this.width - 5 - gallowBase.width / 2 - gallowBar2.width - head.width / 2,
-    gallowBar3.height
-  );
-  //this.add(head)
-
-  var body = new Shape2D(0, 50);
-  body.setStyle("border", "1px solid gray");
-  //this.add(body)
-  body.setLocation(
-    this.width - 5 - gallowBase.width / 2 - gallowBar2.width,
-    gallowBar3.height + head.height
-  );
-
-  var rightArm = new Shape2D(25, 0);
-  rightArm.setStyle("border", "1px solid pink");
-  rightArm.setLocation(
-    this.width - 5 - gallowBase.width / 2 - gallowBar2.width,
-    gallowBar3.height + head.height + body.height * 0.25
-  );
-  //this.add(rigthArm)
-
-  var leftArm = new Shape2D(25, 0);
-  leftArm.setStyle("border", "1px solid purple");
-  leftArm.setLocation(
-    this.width - 5 - gallowBase.width / 2 - gallowBar2.width - leftArm.width,
-    gallowBar3.height + head.height + body.height * 0.25
-  );
-  //this.add(leftArm)
-
-  var rightLeg = new Shape2D(0, 25);
-  rightLeg.setStyle("border", "1px solid yellowgreen");
-  rightLeg.setStyle("transform-origin", "top left");
-  rightLeg.setStyle("transform", "rotate(45deg)");
-  rightLeg.setLocation(
-    this.width - 5 - gallowBase.width / 2 - gallowBar2.width,
-    gallowBar3.height + head.height + body.height
-  );
-  //this.add(rightLeg)
-
-  var leftLeg = new Shape2D(0, 25);
-  leftLeg.setStyle("border", "1px solid magenta");
-  leftLeg.setStyle("transform-origin", "top left");
-  leftLeg.setStyle("transform", "rotate(-45deg)");
-  leftLeg.setLocation(
-    this.width - 5 - gallowBase.width / 2 - gallowBar2.width,
-    gallowBar3.height + head.height + body.height
-  );
-
-  this.parts = [head, body, rightArm, leftArm, rightLeg, leftLeg];
-}
-
-Hangman.prototype = Object.create(Shape2D.prototype);
-Hangman.prototype.constructor = Hangman;
-
-Hangman.prototype.setFails = function (count) {
-  var part = this.parts[count - 1];
-
-  this.add(part);
-};
diff --git a/staff/tere-albenca/shapes/hangmanEs5/Input.js b/staff/tere-albenca/shapes/hangmanEs5/Input.js
deleted file mode 100644
index 69c796e62..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/Input.js
+++ /dev/null
@@ -1,18 +0,0 @@
-function Input() {
-  Component.call(this, "input");
-}
-
-Input.prototype = Object.create(Component.prototype);
-Input.prototype.constructor = Input;
-
-Input.prototype.getValue = function () {
-  return this.container.value;
-};
-
-Input.prototype.setMaxLength = function (maxLength) {
-  this.container.maxLength = maxLength;
-};
-
-Input.prototype.setType = function (type) {
-  this.container.type = type;
-};
diff --git a/staff/tere-albenca/shapes/hangmanEs5/Label.js b/staff/tere-albenca/shapes/hangmanEs5/Label.js
deleted file mode 100644
index cddd4603c..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/Label.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function Label() {
-  Component.call(this, "label");
-}
-
-Label.prototype = Object.create(Component.prototype);
-Label.prototype.constructor = Label;
-
-Label.prototype.setFor = function (htmlFor) {
-  this.container.htmlFor = htmlFor;
-};
diff --git a/staff/tere-albenca/shapes/hangmanEs5/Shape2D.js b/staff/tere-albenca/shapes/hangmanEs5/Shape2D.js
deleted file mode 100644
index 8b475fa18..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/Shape2D.js
+++ /dev/null
@@ -1,74 +0,0 @@
-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;
-}
-
-Shape2D.prototype = Object.create(Component.prototype);
-Shape2D.prototype.contructor = 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);
-};
-
-// dimension
-
-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);
-};
diff --git a/staff/tere-albenca/shapes/hangmanEs5/StartForm.js b/staff/tere-albenca/shapes/hangmanEs5/StartForm.js
deleted file mode 100644
index 0a6c08ad4..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/StartForm.js
+++ /dev/null
@@ -1,38 +0,0 @@
-function StartForm() {
-  Form.call(this);
-
-  this.setStyle("display", "flex");
-  this.setStyle("gap", "10px");
-
-  var wordsLabel = new Label();
-  wordsLabel.setFor("words");
-  wordsLabel.setText("Words");
-  this.add(wordsLabel);
-
-  var wordsInput = new Input();
-  wordsInput.setId("words");
-  wordsInput.setType("password");
-  this.add(wordsInput);
-
-  this.wordsInput = wordsInput;
-
-  var startButton = new Button();
-  startButton.setType("submit");
-  startButton.setText("Start");
-  this.add(startButton);
-}
-
-StartForm.prototype = Object.create(Form.prototype);
-StartForm.prototype.constructor = StartForm;
-
-StartForm.prototype.onSubmit = function (callback) {
-  this.container.onsubmit = function (event) {
-    event.preventDefault();
-
-    const words = this.wordsInput.getValue();
-
-    this.reset();
-
-    callback(words);
-  }.bind(this);
-};
diff --git a/staff/tere-albenca/shapes/hangmanEs5/index.js b/staff/tere-albenca/shapes/hangmanEs5/index.js
deleted file mode 100644
index 772f82f6d..000000000
--- a/staff/tere-albenca/shapes/hangmanEs5/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-var body = new Component();
-body.container = document.body;
-
-var title = new Component("h1");
-title.setText("Hangman");
-body.add(title);
-
-var startForm = new StartForm();
-
-startForm.onSubmit(function (words) {
-  sessionStorage.secret = words;
-
-  body.remove(startForm);
-
-  var charBoxes = new CharBoxes(words);
-
-  body.add(charBoxes);
-
-  var guessForm = new GuessForm();
-
-  var charsUsed = [];
-  var assertionsCount = 0;
-  var failsCount = 0;
-
-  guessForm.onSubmit(function (char) {
-    if (charsUsed.includes(char)) {
-      alert("Character was already used. Try with another one.");
-
-      return;
-    }
-
-    charsUsed.push(char);
-
-    var charFound = false;
-
-    for (var i = 0; i < sessionStorage.secret.length; i++) {
-      var currentChar = sessionStorage.secret[i];
-
-      if (currentChar === char) {
-        charFound = true;
-
-        charBoxes.showChar(i);
-
-        assertionsCount++;
-      }
-    }
-
-    if (charFound) {
-      if (assertionsCount === sessionStorage.secret.length) {
-        setTimeout(function () {
-          alert("You win!");
-
-          body.remove(charBoxes);
-          body.remove(guessForm);
-          body.remove(hangman);
-
-          body.add(startForm);
-        }, 100);
-      }
-
-      return;
-    }
-
-    failsCount++;
-
-    hangman.setFails(failsCount);
-
-    if (failsCount === 6) {
-      setTimeout(function () {
-        alert("Game Over.");
-
-        body.remove(charBoxes);
-        body.remove(guessForm);
-        body.remove(hangman);
-
-        body.add(startForm);
-      }, 100);
-    }
-  });
-
-  body.add(guessForm);
-
-  var hangman = new Hangman(150, 200);
-  hangman.setLocation(100, 300);
-
-  body.add(hangman);
-});
-
-body.add(startForm);
diff --git a/staff/tere-albenca/shapes/hangmanEs6/Shape2D.js b/staff/tere-albenca/shapes/hangmanEs6/Shape2D.js
deleted file mode 100644
index 6510a6fbe..000000000
--- a/staff/tere-albenca/shapes/hangmanEs6/Shape2D.js
+++ /dev/null
@@ -1,73 +0,0 @@
-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);
-  }
-}
diff --git a/staff/tere-albenca/shapes/hangmanEs6/index.html b/staff/tere-albenca/shapes/hangmanEs6/index.html
deleted file mode 100644
index a392ab927..000000000
--- a/staff/tere-albenca/shapes/hangmanEs6/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hangman</title>
-</head>
-
-<body>
-    <!-- atomic -->
-    <script src="Component.js"></script>
-    <script src="Shape2D.js"></script>
-    <script src="Label.js"></script>
-    <script src="Input.js"></script>
-    <script src="Button.js"></script>
-    <script src="Form.js"></script>
-
-    <!-- molecular -->
-    <script src="StartForm.js"></script>
-    <script src="CharBoxes.js"></script>
-    <script src="GuessForm.js"></script>
-    <script src="Hangman.js"></script>
-
-    <script src="index.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/pixel-art-new-react/App.jsx b/staff/tere-albenca/shapes/pixel-art-new-react/App.jsx
new file mode 100644
index 000000000..32d9988ec
--- /dev/null
+++ b/staff/tere-albenca/shapes/pixel-art-new-react/App.jsx
@@ -0,0 +1,53 @@
+function App (){
+        const initBoard = new Array(10)
+
+        for (let i = 0; i < initBoard.length; i++)
+            initBoard[i] = new Array(initBoard.length).fill('gray')
+
+        const [board, setBoard] = React.useState(initBoard)
+        const [color, setColor] = React.useState('black')
+
+    function paint(row, column) {
+        const prevBoard = board
+
+        const newBoard = new Array(prevBoard.length)
+        for (let i = 0; i < prevBoard.length; i++)
+            newBoard[i] = new Array(prevBoard[0].length).fill('gray')
+
+        for (const i in prevBoard)
+            for (const j in prevBoard[i])
+                newBoard[i][j] = prevBoard[i][j]
+
+        newBoard[row][column] = color;
+        
+        setBoard(newBoard);
+    }
+
+
+    function resetGame() {
+        const prevBoard = board
+        
+        const newBoard = new Array(prevBoard.length)
+
+        for (let i = 0; i < prevBoard.length; i++)
+            newBoard[i] = new Array(prevBoard[0].length).fill('gray')
+
+        setBoard(newBoard);
+    }
+    console.debug('App render')
+
+    const colors = ['blueviolet','darkred','lightgreen','red','pink','gold','purple','deepskyblue','orange',
+        'black','yellow','coral', 'olive', 'whitesmoke','blue', 'dimgray', 'navy', 'orangered','silver' ]
+
+    return <>
+        <header><div>PIXEL ART</div></header>
+        <main className="main">
+            <ColorButtons color={color} colors={colors} onColorClick={color => setColor(color)} />
+
+            <Board board={board} onPixelClick={(row, col) => paint(row, col)} />
+        </main>
+        <footer>
+            <button onClick={() => resetGame()}>NEW PLAY</button>
+        </footer>
+    </>
+}
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/pixel-art-new-react/Board.jsx b/staff/tere-albenca/shapes/pixel-art-new-react/Board.jsx
new file mode 100644
index 000000000..0a22be53f
--- /dev/null
+++ b/staff/tere-albenca/shapes/pixel-art-new-react/Board.jsx
@@ -0,0 +1,19 @@
+function Board (props) {
+    console.debug('Board render')
+
+    return <section className="board" style={{
+        gridTemplateColumns: `repeat(${props.board.length}, 1fr)`,
+        gridTemplateRows: `repeat(${props.board.length}, 1fr)`
+    }
+    }>
+        {
+            props.board.map((row, i) => row.map((column, j) =>
+                <Pixel  
+                    key={`${i}-${j}`}  
+                    color={props.board[i][j]}
+                    onClick={() => props.onPixelClick(i, j)} 
+            />)).flat(Infinity)
+            }
+        </section>
+    //}
+}
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/pixel-art-new-react/ColorButton.jsx b/staff/tere-albenca/shapes/pixel-art-new-react/ColorButton.jsx
new file mode 100644
index 000000000..ea55f443b
--- /dev/null
+++ b/staff/tere-albenca/shapes/pixel-art-new-react/ColorButton.jsx
@@ -0,0 +1,15 @@
+function ColorButton (props) {
+    function handleClick(){
+        console.debug('colorButton handleClick')
+
+        props.onClick()
+    }
+
+    console.debug('ColorButton render')
+
+        return <button
+            className={`color-button ${props.selected ? 'color-button-selected' : ''}`}
+            style={{ backgroundColor: props.color }}
+            onClick={() => handleClick()}
+        />
+}
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/pixel-art-new-react/ColorButtons.jsx b/staff/tere-albenca/shapes/pixel-art-new-react/ColorButtons.jsx
new file mode 100644
index 000000000..827621333
--- /dev/null
+++ b/staff/tere-albenca/shapes/pixel-art-new-react/ColorButtons.jsx
@@ -0,0 +1,15 @@
+function ColorButtons (props) {
+   console.debug('ColorButtons render')
+    
+        return <ul className="colors">
+            {props.colors.map(color => <li key={color}>
+                <ColorButton
+                    selected={props.color === color}
+                    color={color}
+                    onClick={() => props.onColorClick(color)}
+                />
+            </li>)}
+        </ul>
+   
+
+}
diff --git a/staff/tere-albenca/shapes/pixel-art-new-react/Pixel.jsx b/staff/tere-albenca/shapes/pixel-art-new-react/Pixel.jsx
new file mode 100644
index 000000000..a7dd7c64f
--- /dev/null
+++ b/staff/tere-albenca/shapes/pixel-art-new-react/Pixel.jsx
@@ -0,0 +1,15 @@
+function Pixel(props) {
+    function handleClick() {
+        console.debug('Pixel handleClick')
+
+        props.onClick()
+    }
+
+    console.debug('Pixel render')
+
+    return <div
+        className="pixel"
+        style={{ backgroundColor: props.color }}
+        onClick={() => handleClick()}>
+    </div >
+}
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/pixel-art-new-react/index.css b/staff/tere-albenca/shapes/pixel-art-new-react/index.css
new file mode 100644
index 000000000..cf27e7f94
--- /dev/null
+++ b/staff/tere-albenca/shapes/pixel-art-new-react/index.css
@@ -0,0 +1,174 @@
+body{
+    display:flex;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+}
+main{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+/* .palette{
+    margin-left:5px;
+    display: flex;
+    flex-direction: column;
+    }*/
+
+
+header{
+    width: 100%;
+    background-color: lightgray;
+    padding: 1px 0 1px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color:darkblue;
+    font-size: medium;
+
+}
+.board {
+    display: grid;
+    width: 40vw;
+    height: 40vw;
+    background-color: lightgray;
+    gap: 1px;
+    border: 4px solid #34495e; 
+}
+
+.pixel {
+    background-color: gray;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color:white;
+    cursor: pointer;
+}
+
+.colors {
+    list-style-type:none;
+    display: flex;
+    justify-content: center;
+    padding: 0;
+    margin-right:1px;
+    height: 10px;
+}
+.color-button{
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+/*
+.cell {
+    transition: background-color 0.3s;
+}
+.cell:hover {
+    background-color: #2c3e50; 
+}
+*/
+footer {
+    margin-top:5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+footer button {
+    width: 60%;
+    height: 20%;
+    font-size: smaller;
+}
+/*
+.redButton{
+    background-color: red;
+    
+}
+.pinkButton{
+    background-color: pink;
+}
+.purpleButton{
+    background-color: purple;
+}
+.blueButton{
+    background-color: blue;
+}
+.greenButton{
+    background-color: green;
+}
+.yellowButton {
+    background-color: yellow;
+}
+.navyButton{
+    background-color: navy;
+}
+.fuchsiaButton{
+    background-color: fuchsia;
+}
+.limeButton{
+    background-color: lime;
+}
+.blackButton{
+    background-color: black;
+}
+.aquaButton{
+    background-color: aqua;
+}
+.maroonButton{
+    background-color: maroon;
+}
+.tealButton{
+    background-color: teal;
+}
+.oliveButton{
+    background-color: olive;
+}
+.orangeButton{
+    background-color: orangered;
+}
+.chartreuseButton{
+    background-color: chartreuse;
+}
+.coralButton{
+    background-color: coral;
+}
+.bluevioletButton{
+    background-color: blueviolet;
+}
+.orangetwoButton{
+    background-color: orange;
+}
+.darkredButton{
+    background-color: darkred;
+}
+.darkslategrayButton{
+    background-color: darkslategray;
+}
+.deepskyblueButton{
+    background-color: deepskyblue;
+}
+.darkolivegreenButton{
+    background-color: darkolivegreen;
+}
+.goldButton{
+    background-color: gold;
+}
+.dimgreyButton{
+   background-color: dimgrey;
+}
+.lightgreenButton{
+    background-color: lightgreen;
+}
+.indigoButton{
+    background-color: indigo;
+}
+.goldenrodButton{
+    background-color: goldenrod;
+}
+.firebrickButton{
+    background-color: firebrick;
+}
+.greenyellowButton{
+    background-color: greenyellow;
+}
+*/
diff --git a/staff/tere-albenca/shapes/pixel-art-new-react/index.html b/staff/tere-albenca/shapes/pixel-art-new-react/index.html
new file mode 100644
index 000000000..178c01998
--- /dev/null
+++ b/staff/tere-albenca/shapes/pixel-art-new-react/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>pixel art</title>
+
+    <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.24.3/babel.min.js"
+        integrity="sha512-ew/qzOMK7mnWiZ395TTbZ+YVD6e7dOROUcXXzSjyxPmL9oNf5gp8DJp46uarrTKch5aUhR/NS8qtCh6hnaTMCw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <script src="ColorButton.jsx" type="text/babel"></script>
+    <script src="ColorButtons.jsx" type="text/babel"></script>
+    <script src="Pixel.jsx" type="text/babel"></script>
+    <script src="Board.jsx" type="text/babel"></script>
+    <script src="App.jsx" type="text/babel"></script>
+    <script src="index.jsx" type="text/babel"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/pixel-art-new-react/index.jsx b/staff/tere-albenca/shapes/pixel-art-new-react/index.jsx
new file mode 100644
index 000000000..0ade85694
--- /dev/null
+++ b/staff/tere-albenca/shapes/pixel-art-new-react/index.jsx
@@ -0,0 +1,3 @@
+//renderizar el dom y la app
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+root.render(<App />)
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/pixelArt/index.css b/staff/tere-albenca/shapes/pixelArt/index.css
index 13cbf5b87..f687fe036 100644
--- a/staff/tere-albenca/shapes/pixelArt/index.css
+++ b/staff/tere-albenca/shapes/pixelArt/index.css
@@ -27,10 +27,10 @@ header{
 }
 .board {
     display: grid;
-    width: 40vw;
-    height: 40vw;
+    width: 80vw;
+    height: 80vw;
     background-color: lightgray;
-    gap: 3px;
+    gap: 1px;
     border: 4px solid #34495e; 
 }
 
@@ -65,9 +65,82 @@ footer {
 .yellowButton {
     background-color: yellow;
 }
+.navyButton{
+    background-color: navy;
+}
+.fuchsiaButton{
+    background-color: fuchsia;
+}
+.limeButton{
+    background-color: lime;
+}
+.blackButton{
+    background-color: black;
+}
+.aquaButton{
+    background-color: aqua;
+}
+.maroonButton{
+    background-color: maroon;
+}
+.tealButton{
+    background-color: teal;
+}
+.oliveButton{
+    background-color: olive;
+}
 .orangeButton{
     background-color: orangered;
 }
-.redButton, .pinkButton, .purpleButton, .blueButton, .greenButton, .yellowButton, .orangeButton{
-    margin-bottom:2px;
+.chartreuseButton{
+    background-color: chartreuse;
+}
+.coralButton{
+    background-color: coral;
+}
+.bluevioletButton{
+    background-color: blueviolet;
+}
+.orangetwoButton{
+    background-color: orange;
+}
+.darkredButton{
+    background-color: darkred;
 }
+.darkslategrayButton{
+    background-color: darkslategray;
+}
+.deepskyblueButton{
+    background-color: deepskyblue;
+}
+.darkolivegreenButton{
+    background-color: darkolivegreen;
+}
+.goldButton{
+    background-color: gold;
+}
+.dimgreyButton{
+   background-color: dimgrey;
+}
+.lightgreenButton{
+    background-color: lightgreen;
+}
+.indigoButton{
+    background-color: indigo;
+}
+.goldenrodButton{
+    background-color: goldenrod;
+}
+.firebrickButton{
+    background-color: firebrick;
+}
+.greenyellowButton{
+    background-color: greenyellow;
+}
+
+.pallete button{
+    margin-bottom:1px;
+    width: 8%;
+    height: 3%;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/pixelArt/index.jsx b/staff/tere-albenca/shapes/pixelArt/index.jsx
index 1a705907b..ce0c49487 100644
--- a/staff/tere-albenca/shapes/pixelArt/index.jsx
+++ b/staff/tere-albenca/shapes/pixelArt/index.jsx
@@ -45,6 +45,8 @@ class App extends React.Component {
     render() {
         const board = this.state.board;
 
+        const colorButtons = ['blueviolet','darkred','lightgreen','red','pink','gold','purple','deepskyblue','orange','black','yellow','coral', 'olive', 'whitesmoke','blue', 'dimgray', 'navy', 'orangered']
+
         return (
             <>
                 <header><div>PIXEL ART</div></header>
@@ -53,23 +55,44 @@ class App extends React.Component {
                         gridTemplateColumns: `repeat(${board.length}, 1fr)`,
                         gridTemplateRows: `repeat(${board.length}, 1fr)`
                     }}>
-                        {board.map((row, i) => row.map((color, j) =>
-                            <div
-                                key={`${i}-${j}`}
-                                className="cell"
-                                onClick={() => this.play(i, j)}
-                                style={{ backgroundColor: color }}
-                            />
+                        {board.map((row, i) => row.map((color, j) =><div key={`${i}-${j}`} className="cell" onClick={() => this.play(i, j)} style={{ backgroundColor: color }}
+                        />
                         )).flat()}
                     </section>
                     <section className="palette">
-                        <button className="redButton" onClick={() => this.selectColor('red')}>Red</button>
-                        <button className="pinkButton" onClick={() => this.selectColor('pink')}>Pink</button>
-                        <button className="purpleButton" onClick={() => this.selectColor('purple')}>Purple</button>
-                        <button className="blueButton" onClick={() => this.selectColor('blue')}>Blue</button>
-                        <button className="greenButton" onClick={() => this.selectColor('green')}>Green</button>
-                        <button className="yellowButton" onClick={() => this.selectColor('yellow')}>Yellow</button>
-                        <button className="orangeButton" onClick={() => this.selectColor('orange')}>Orange</button>
+                        {colorButtons.map(color => <button onClick={()=> this.selectColor(color)} style={{backgroundColor: color}}> </button>)}
+                        {/* <button className="redButton" onClick={() => this.selectColor('red')}></button>
+                        <button className="pinkButton" onClick={() => this.selectColor('pink')}></button>
+                        <button className="purpleButton" onClick={() => this.selectColor('purple')}></button>
+                        <button className="blueButton" onClick={() => this.selectColor('blue')}></button>
+                        <button className="greenButton" onClick={() => this.selectColor('green')}></button>
+                        <button className="yellowButton" onClick={() => this.selectColor('yellow')}></button>
+                        <button className="navyButton" onClick={() => this.selectColor('navy')}></button>
+                        <button className="fuchsiaButton" onClick={() => this.selectColor('fuchsia')}></button>
+                        <button className="limeButton" onClick={() => this.selectColor('lime')}></button>
+                        <button className="blackButton" onClick={() => this.selectColor('black')}></button>
+                        <button className="aquaButton" onClick={() => this.selectColor('aqua')}></button>
+                        <button className="maroonButton" onClick={() => this.selectColor('maroon')}></button>
+                        <button className="tealButton" onClick={() => this.selectColor('teal')}></button>
+                        <button className="oliveButton" onClick={() => this.selectColor('olive')}></button>
+                        <button className="orangeButton" onClick={() => this.selectColor('orange')}></button>
+                        <button className="chartreuseButton" onClick={() => this.selectColor('chartreuse')}></button>
+                        <button className="coralButton" onClick={() => this.selectColor('coral')}></button>
+                        <button className="bluevioletButton" onClick={() => this.selectColor('blueviolet')}></button>
+                        <button className="orangetwoButton" onClick={() => this.selectColor('orangetwo')}></button>
+                        <button className="darkredButton" onClick={() => this.selectColor('darkred')}></button>
+                        <button className="darkslategrayButton" onClick={() => this.selectColor('darkslategray')}></button>
+                        <button className="deepskyblueButton" onClick={() => this.selectColor('deepskyblue')}></button>
+                        <button className="darkolivegreenButton" onClick={() => this.selectColor('darkolivegreen')}></button>
+                        <button className="goldButton" onClick={() => this.selectColor('gold')}></button>
+                        <button className="dimgreyButton" onClick={() => this.selectColor('dimgrey')}></button>
+                        <button className="lightgreenButton" onClick={() => this.selectColor('lightgreen')}></button>
+                        <button className="indigoButton" onClick={() => this.selectColor('indigo')}></button>
+                        <button className="goldenrodButton" onClick={() => this.selectColor('goldenrod')}></button>
+                        <button className="firebrickButton" onClick={() => this.selectColor('firebrick')}></button>
+                        <button className="greenyellowButton" onClick={() => this.selectColor('greenyellow')}></button> */}
+
+
                     </section>
                 </main>
                 <footer>
diff --git a/staff/tere-albenca/shapes/tictactoe-new-react/App.jsx b/staff/tere-albenca/shapes/tictactoe-new-react/App.jsx
new file mode 100644
index 000000000..f83d7c85b
--- /dev/null
+++ b/staff/tere-albenca/shapes/tictactoe-new-react/App.jsx
@@ -0,0 +1,86 @@
+function App() {
+    const initBoard = Array.from({ length: 4 }, () => Array.from({ length: 4 }, () => 0));
+    const [board,setBoard]= React.useState(initBoard)
+    const [turn,setTurn] = React.useState('0')
+    const [winner,setWinner]= React.useState(null)
+
+    function getCellChar(value) {
+        if (value === 1) return 'X'
+        else if (value === 2) return 'O'
+        else return ''
+    }
+    
+    function play(row, column) {
+        if (winner || board[row][column]) return;
+
+        const newBoard = board.map((row) => [...row]);
+        const newTurn = parseInt(turn) + 1;
+        const nextPlayer = newTurn % 2 === 0 ? 2 : 1;
+        newBoard[row][column] = nextPlayer;
+        setBoard(newBoard);
+        setTurn(newTurn);
+
+        const winner = verifyWin(newBoard);
+        if (winner) setWinner(winner);
+    }
+    //con este metedo se pueden ver todas las opciones ganadoras
+    //para cotejarlas con el tablero
+    function verifyWin(board) {
+        const winningPatterns = [
+            // filas
+            [board[0][1], board[0][2], board[0][3]],
+            [board[0][0], board[0][1], board[0][2]],
+            [board[1][0], board[1][1], board[1][2]],
+            [board[1][1], board[1][2], board[1][3]],
+            [board[2][0], board[2][1], board[2][2]],
+            [board[2][1], board[2][2], board[2][3]],
+            [board[3][0], board[3][1], board[3][2]],
+            [board[3][1], board[3][2], board[3][3]],
+            // Columnas
+            [board[0][0], board[1][0], board[2][0]],
+            [board[1][0], board[2][0], board[3][0]],
+            [board[0][1], board[1][1], board[2][1]],
+            [board[1][1], board[2][1], board[3][1]],
+            [board[0][2], board[1][2], board[2][2]],
+            [board[1][2], board[2][2], board[3][2]],
+            [board[0][3], board[1][3], board[2][3]],
+            [board[1][3], board[2][3], board[3][3]],
+            // Diagonales
+            [board[0][0], board[1][1], board[2][2]],
+            [board[1][1], board[2][2], board[3][3]],
+            [board[0][1], board[1][2], board[2][3]],
+            [board[1][0], board[2][1], board[3][2]],
+            [board[0][3], board[1][2], board[2][1]],
+            [board[1][2], board[2][1], board[3][0]],
+            [board[0][2], board[1][1], board[2][0]],
+            [board[1][3], board[2][2], board[3][1]],
+        ];
+    
+        for (const pattern of winningPatterns) {
+            if (pattern.every(cell => cell === 1)) {
+                return 'X'; // Jugador 1 
+            } else if (pattern.every(cell => cell === 2)) {
+                return 'O'; // Jugador 2 
+            }
+        }
+        // No hay ganador
+        return null; 
+    }
+    //nuevo juego, resetear tablero
+    function resetGame() {
+        setBoard(initBoard);
+        setTurn('0');
+        setWinner(null);
+    }
+    
+        return <>
+            <header><div>TIC TAC TOE</div></header>
+            <main>
+                <Board board= {board} onClick={play} getCellChar={getCellChar}></Board>
+            </main>
+            <footer>
+                {winner ? <div>El ganador es: {winner}</div> :null}
+                <button onClick={resetGame}>New play</button>
+            </footer>
+        </>
+}
diff --git a/staff/tere-albenca/shapes/tictactoe-new-react/Board.jsx b/staff/tere-albenca/shapes/tictactoe-new-react/Board.jsx
new file mode 100644
index 000000000..b7d09ba9f
--- /dev/null
+++ b/staff/tere-albenca/shapes/tictactoe-new-react/Board.jsx
@@ -0,0 +1,12 @@
+function Board (props) {
+   
+        const board = props.board
+
+        return <section className = "board" style={{
+            gridTemplateColumns: `repeat(${board.length}, 1fr)`,
+            gridTemplateRows: `repeat(${board.length}, 1fr)`
+        }}>
+            {board.map((row, i) => row.map((column, j) => <div className="cell" onClick={() => props.onClick(i, j)}>{props.getCellChar(column)}</div>)).flat(Infinity)}
+        </section>
+    
+}
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/tictactoe/index.css b/staff/tere-albenca/shapes/tictactoe-new-react/index.css
similarity index 100%
rename from staff/tere-albenca/shapes/tictactoe/index.css
rename to staff/tere-albenca/shapes/tictactoe-new-react/index.css
diff --git a/staff/tere-albenca/shapes/tictactoe/index.html b/staff/tere-albenca/shapes/tictactoe-new-react/index.html
similarity index 87%
rename from staff/tere-albenca/shapes/tictactoe/index.html
rename to staff/tere-albenca/shapes/tictactoe-new-react/index.html
index 6494718e6..38fd5843d 100644
--- a/staff/tere-albenca/shapes/tictactoe/index.html
+++ b/staff/tere-albenca/shapes/tictactoe-new-react/index.html
@@ -18,7 +18,9 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.24.3/babel.min.js"
         integrity="sha512-ew/qzOMK7mnWiZ395TTbZ+YVD6e7dOROUcXXzSjyxPmL9oNf5gp8DJp46uarrTKch5aUhR/NS8qtCh6hnaTMCw=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
+    
+    <script src="Board.jsx" type="text/babel"></script>
+    <script src="App.jsx" type="text/babel"></script>
     <script src="index.jsx" type="text/babel"></script>
 </body>
 
diff --git a/staff/tere-albenca/shapes/tictactoe-new-react/index.jsx b/staff/tere-albenca/shapes/tictactoe-new-react/index.jsx
new file mode 100644
index 000000000..a7c85dffb
--- /dev/null
+++ b/staff/tere-albenca/shapes/tictactoe-new-react/index.jsx
@@ -0,0 +1,4 @@
+//renderizar dom y app
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+root.render(<App />)
\ No newline at end of file
diff --git a/staff/tere-albenca/shapes/tictactoe/index.jsx b/staff/tere-albenca/shapes/tictactoe/index.jsx
deleted file mode 100644
index 39639eb4d..000000000
--- a/staff/tere-albenca/shapes/tictactoe/index.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-class App extends React.Component {
-    //creamos el tablero y lo inciamos, 
-    constructor() {
-        super()
-
-        const board = new Array(4)
-
-        for (let i = 0; i < board.length; i++)
-            board[i] = new Array(4).fill(0)
-
-        this.state = {
-            board,
-            turn: 0,
-            //estado ganador
-            winner:null
-        }
-
-        this.resetGame = this.resetGame.bind(this);
-    }
-    //para pintar x o 0
-    getCellChar(value) {
-        if (value === 1) return 'X'
-        else if (value === 2) return 'O'
-        else return ''
-    }
-    //el play verifica si hay ganador, pinta el turno que se ha hecho 
-    //y vuelve a verificar si hay ganador
-    play(row, column) {
-        if (this.state.winner) return;
-
-        console.log('click')
-        const prevBoard = this.state.board
-
-        const board = []
-        for (let i = 0; i < prevBoard.length; i++)
-            board[i] = new Array(prevBoard[0].length).fill(0)
-
-        for (const i in prevBoard)
-            for (const j in prevBoard[i])
-                board[i][j] = prevBoard[i][j]
-
-        const turn = this.state.turn
-
-        if (turn % 2 === 0)
-            board[row][column] = 1
-        else
-            board[row][column] = 2
-
-        this.setState({ board, turn: turn + 1 },()=> {
-            const winner = this.verifyWin(board);
-            if(winner) this.setState({ winner });
-        })
-    }
-    //con este metedo se pueden ver todas las opciones ganadoras
-    //para cotejarlas con el tablero
-    verifyWin(board){
-        const winningPatterns = [
-            // filas
-            [board[0][1], board[0][2], board[0][3]],
-            [board[0][0], board[0][1], board[0][2]],
-            [board[1][0], board[1][1], board[1][2]],
-            [board[1][1], board[1][2], board[1][3]],
-            [board[2][0], board[2][1], board[2][2]],
-            [board[2][1], board[2][2], board[2][3]],
-            [board[3][0], board[3][1], board[3][2]],
-            [board[3][1], board[3][2], board[3][3]],
-            // Columnas
-            [board[0][0], board[1][0], board[2][0]],
-            [board[1][0], board[2][0], board[3][0]],
-            [board[0][1], board[1][1], board[2][1]],
-            [board[1][1], board[2][1], board[3][1]],
-            [board[0][2], board[1][2], board[2][2]],
-            [board[1][2], board[2][2], board[3][2]],
-            [board[0][3], board[1][3], board[2][3]],
-            [board[1][3], board[2][3], board[3][3]],
-            // Diagonales
-            [board[0][0], board[1][1], board[2][2]],
-            [board[1][1], board[2][2], board[3][3]],
-            [board[0][1], board[1][2], board[2][3]],
-            [board[1][0], board[2][1], board[3][2]],
-            [board[0][3], board[1][2], board[2][1]],
-            [board[1][2], board[2][1], board[3][0]],
-            [board[0][2], board[1][1], board[2][0]],
-            [board[1][3], board[2][2], board[3][1]],
-        ];
-    
-        for (const pattern of winningPatterns) {
-            if (pattern.every(cell => cell === 1)) {
-                return 'X'; // Jugador 1 
-            } else if (pattern.every(cell => cell === 2)) {
-                return 'O'; // Jugador 2 
-            }
-        }
-        // No hay ganador
-        return null; 
-    }
-    //nuevo juego, resetear tablero
-    resetGame() {
-        const board = new Array(4).fill(null).map(() => new Array(4).fill(0));
-        this.setState({
-            board,
-            turn: 0,
-            winner: null
-        });
-    }
-    //renderizar la interfaz del juego
-    render() {
-        const board = this.state.board
-        const winner = this.state.winner;
-
-        return <>
-            <header><div>TIC TAC TOE</div></header>
-            <main>
-                <section className = "board" style={{
-                    gridTemplateColumns: `repeat(${board.length}, 1fr)`,
-                    gridTemplateRows: `repeat(${board.length}, 1fr)`
-                }}>
-                    {board.map((row, i) => row.map((column, j) => <div className="cell" onClick={() => this.play(i, j)}>{this.getCellChar(board[i][j])}</div>)).flat(Infinity)}
-                </section>
-            </main>
-            <footer>
-                {winner && <div>El ganador es: {winner}</div>}
-                <button onClick={this.resetGame}>New play</button>
-            </footer>
-        </>
-    }
-}
-
-//renderizar dom y app
-const root = ReactDOM.createRoot(document.querySelector('#root'))
-
-root.render(<App />)
\ No newline at end of file