add Rect class to make adding more shapes easier

css/counter.css

@@ -1,71 +0,0 @@
-.wrapper {
-    width: 800px;
-    height: 300px;
-    display: block;
-    margin: none;
-}
-
-.counter {
-    width: 100%;
-    height: 100%;
-    display: block;
-    perspective: 1200px; /* determines size of the overall element in the final transform */
-    backface-visibility: visible;
-    transform-style: preserve-3d;
-    perspective-origin: 50% 50%;
-    transform: translateZ(-100px) rotateX(-30deg);
-}
-
-.face {
-    width: 800px;
-    height: 300px;
-    display: block;
-    position: absolute;
-}
-
-.vert-side {
-    width: 200px;
-    height: 300px;
-    display: block;
-    position: absolute;
-    left: 300px;
-}
-
-.horiz-side {
-    width: 800px;
-    height: 200px;
-    display: block;
-    position: absolute;
-    top: 50px;
-}
-
-.top-shelf {
-    background-color: #666666;
-    transform: rotateX(90deg) translateZ(150px);
-}
-
-.bottom-shelf {
-    background-color: #666666;
-    transform: rotateX(-90deg) translateZ(150px);
-}
-
-.right-shelf {
-    background-color: #333333;
-    transform: rotateY(90deg) translateZ(400px);
-    right: 0;
-}
-
-.left-shelf {
-    background-color: #333333;
-    transform: rotateY(-90deg) translateZ(400px);
-}
-
-.front-shelf {
-    background: rgba(255,255,255,0.3);
-    transform: translateZ(100px);
-}
-
-.back-shelf {
-    background: rgba(255,255,255,0.8);
-    transform: rotateY(180deg) translateZ(100px);
-}

css/shelf.css

@@ -1,59 +0,0 @@
-.wrapper {
-    width: 300px;
-    height: 100px;
-    display: block;
-}
-
-.shelf {
-    width: 100%;
-    height: 100%;
-    display: block;
-    perspective: 400px; /* determines size of the overall element in the final transform */
-    backface-visibility: visible;
-    transform-style: preserve-3d;
-    perspective-origin: 50% 40%;
-}
-
-.face {
-    width: 300px;
-    height: 100px;
-    display: block;
-    position: absolute;
-}
-
-.small-face {
-    width: 100px;
-    height: 100px;
-    display: block;
-    position: absolute;
-    left: 100px;
-}
-.top-shelf {
-    background-color: #DAA06D;
-    transform: rotateX(90deg) translateZ(50px);
-}
-
-.bottom-shelf {
-    background-color: #DAA06D;
-    transform: rotateX(-90deg) translateZ(50px);
-}
-
-.right-shelf {
-    background-color: #6F4E37;
-    transform: rotateY(90deg) translateZ(150px);
-}
-
-.left-shelf {
-    background-color: #6F4E37;
-    transform: rotateY(-90deg) translateZ(150px);
-}
-
-.front-shelf {
-    background: rgba(255,255,255,0.1);
-    transform: translateZ(50px);
-}
-
-.back-shelf {
-    background: #6E260E;
-    transform: rotateY(180deg) translateZ(50px);
-}

js/elements.js

@@ -1,72 +1,173 @@
-class ToyShelf extends HTMLElement {
+class Rect extends HTMLElement {
     constructor() {
         super();
 
-        const shadow = this.attachShadow({mode: "open", slotAssignment: "named"});
+        this.perspective = 1200
+        this.topColor = '#666666'
+        this.botColor = this.topColor
+        this.rightColor = '#333333'
+        this.leftColor = this.rightColor
+        this.frontColor = 'rgba(255,255,255,0.3)'
+        this.backColor = this.frontColor
 
-        const wrapper = document.createElement("span");
+    }
-        wrapper.setAttribute("class", "wrapper");
-        const shelf = document.createElement("span")
-        shelf.setAttribute("class", "shelf")
 
-        const topshelf = shelf.appendChild(document.createElement("div"));
+    createRect() {
+        const wrapper = document.createElement("div")
+        wrapper.setAttribute("class", "wrapper")
+
+        const rect = document.createElement("span")
+        rect.setAttribute("class", "rect")
+
+        const topshelf = rect.appendChild(document.createElement("div"));
         topshelf.setAttribute("class", "top-shelf face");
-        const leftshelf = shelf.appendChild(document.createElement("div"));
+        const leftshelf = rect.appendChild(document.createElement("div"));
         leftshelf.setAttribute("class", "left-shelf small-face");
-        const rightshelf = shelf.appendChild(document.createElement("div"));
+        const rightshelf = rect.appendChild(document.createElement("div"));
         rightshelf.setAttribute("class", "right-shelf small-face");
-        const back = shelf.appendChild(document.createElement("div"));
+        const back = rect.appendChild(document.createElement("div"));
         back.setAttribute("class", "back-shelf face");
-        const bottomshelf = shelf.appendChild(document.createElement("div"));
+        const bottomshelf = rect.appendChild(document.createElement("div"));
         bottomshelf.setAttribute("class", "bottom-shelf face");
-        const front = shelf.appendChild(document.createElement("div"));
+        const front = rect.appendChild(document.createElement("div"));
         front.setAttribute("class", "front-shelf face");
 
-        let style = document.createElement("link");
+        let style = document.createElement("style");
-        style.setAttribute("rel", "stylesheet");
+        style.textContent = `
-        style.setAttribute("href", "css/shelf.css")
+            .wrapper {
+                width: ${this.width}px;
+                height: ${this.height}px;
+                display: block;
+                margin: none;
+            }
 
-        wrapper.appendChild(shelf);
+            .rect {
-        shadow.appendChild(wrapper);
+                width: 100%;
+                height: 100%;
+                display: block;
+                perspective: ${this.perspective}px;
+                backface-visibility: visible;
+                transform-style: preserve-3d;
+                perspective-origin: 50% 50%;
+                transform: translateZ(-${this.depth / 2}px);
+            }
+            .top-shelf, .bottom-shelf {
+                width: ${this.width}px;
+                height: ${this.depth}px;
+                display: block;
+                position: absolute;
+                top: ${(this.height - this.depth) / 2}px;
+            } 
+
+            .left-shelf, .right-shelf {
+                width: ${this.depth}px;
+                height: ${this.height}px;
+                display: block;
+                position: absolute;
+                left: ${(this.width - this.depth) / 2}px;
+            }
+
+            .front-shelf, .back-shelf {
+                width: ${this.width}px;
+                height: ${this.height}px;
+                display: block;
+                position: absolute;
+            }
+        
+            .top-shelf {
+                transform: rotateX(90deg) translateZ(${this.height / 2}px);
+                background-color: ${this.topColor};
+            }
+
+            .bottom-shelf {
+                transform: rotateX(-90deg) translateZ(${this.height / 2}px);
+                background-color: ${this.botColor};
+            }
+
+            .right-shelf {
+                transform: rotateY(90deg) translateZ(${this.width / 2}px);
+                background-color: ${this.rightColor};
+            }
+
+            .left-shelf {
+                transform: rotateY(-90deg) translateZ(${this.width / 2}px);
+                background-color: ${this.leftColor};
+            }
+
+            .front-shelf {
+                transform: translateZ(${this.depth / 2}px);
+                background-color: ${this.frontColor};
+            }
+
+            .back-shelf {
+                transform: rotateY(180deg) translateZ(${this.depth / 2}px);
+                background-color: ${this.backColor};
+            }
+        `
+
+        wrapper.appendChild(rect);
+        wrapper.appendChild(style);
+        return wrapper;
+    }
+}
+
+class ToyShelf extends Rect {
+    constructor() {
+        super();
+
+        const shadow = this.attachShadow({mode: "open", slotAssignment: "named"});
+
+        this.topColor = '#DAA06D'
+        this.botColor = this.topColor
+        this.rightColor = '#6F4E37'
+        this.leftColor = this.rightColor
+        this.frontColor = 'rgba(255, 255, 255, 0.1)'
+        this.backColor = '#6E260E'
+        this.perspective = 400
+        this.width = 300;
+        this.height = 100;
+        this.depth = 100;
+
+        let style = document.createElement("style");
+/*        style.textContent = `
+        
+            .rect {
+                transform: translateZ(-${this.depth / 2}px) rotateX(-30deg);
+            }
+        `*/
+
+        const rect = this.createRect();
+
+        shadow.appendChild(rect);
         shadow.appendChild(style);
-
     }
 }
 
-class ShopCounter extends HTMLElement {
+class ShopCounter extends Rect {
     constructor() {
         super();
         const shadow = this.attachShadow({mode: "open", slotAssignment: "named"});
 
-        let style = document.createElement("link");
+        this.width = 800;
-        style.setAttribute("rel", "stylesheet");
+        this.height = 300;
-        style.setAttribute("href", "css/counter.css")
+        this.depth = 200;
 
-        const wrapper = document.createElement("span");
+        let style = document.createElement("style");
-        wrapper.setAttribute("class", "wrapper");
+        style.textContent = `
-        const counter = document.createElement("span")
-        counter.setAttribute("class", "counter")
         
-        const topshelf = counter.appendChild(document.createElement("div"));
+            .rect {
-        topshelf.setAttribute("class", "top-shelf horiz-side");
+                transform: translateZ(-${this.depth / 2}px) rotateX(-30deg);
-        const bottomshelf = counter.appendChild(document.createElement("div"));
+            }
-        bottomshelf.setAttribute("class", "bottom-shelf horiz-side");
+        `
-        const leftshelf = counter.appendChild(document.createElement("div"));
-        leftshelf.setAttribute("class", "left-shelf vert-side");
-        const rightshelf = counter.appendChild(document.createElement("div"));
-        rightshelf.setAttribute("class", "right-shelf vert-side");
-        const back = counter.appendChild(document.createElement("div"));
-        back.setAttribute("class", "back-shelf face");
-        const front = counter.appendChild(document.createElement("div"));
-        front.setAttribute("class", "front-shelf face");
 
+        const rect = this.createRect();
 
-        wrapper.appendChild(counter);
+        shadow.appendChild(rect);
-        shadow.appendChild(wrapper);
         shadow.appendChild(style);
 
     }
 }
 
+
 customElements.define("toy-shelf", ToyShelf);
 customElements.define("shop-counter", ShopCounter);