add Rect class to make adding more shapes easier
This commit is contained in:
parent
8767cd544d
commit
1aacf5c6fe
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -77,4 +77,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
187
js/elements.js
187
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");
|
||||
style.setAttribute("rel", "stylesheet");
|
||||
style.setAttribute("href", "css/shelf.css")
|
||||
|
||||
wrapper.appendChild(shelf);
|
||||
shadow.appendChild(wrapper);
|
||||
shadow.appendChild(style);
|
||||
let style = document.createElement("style");
|
||||
style.textContent = `
|
||||
.wrapper {
|
||||
width: ${this.width}px;
|
||||
height: ${this.height}px;
|
||||
display: block;
|
||||
margin: none;
|
||||
}
|
||||
|
||||
.rect {
|
||||
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 ShopCounter extends HTMLElement {
|
||||
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 Rect {
|
||||
constructor() {
|
||||
super();
|
||||
const shadow = this.attachShadow({mode: "open", slotAssignment: "named"});
|
||||
|
||||
let style = document.createElement("link");
|
||||
style.setAttribute("rel", "stylesheet");
|
||||
style.setAttribute("href", "css/counter.css")
|
||||
this.width = 800;
|
||||
this.height = 300;
|
||||
this.depth = 200;
|
||||
|
||||
let style = document.createElement("style");
|
||||
style.textContent = `
|
||||
|
||||
const wrapper = document.createElement("span");
|
||||
wrapper.setAttribute("class", "wrapper");
|
||||
const counter = document.createElement("span")
|
||||
counter.setAttribute("class", "counter")
|
||||
.rect {
|
||||
transform: translateZ(-${this.depth / 2}px) rotateX(-30deg);
|
||||
}
|
||||
`
|
||||
|
||||
const topshelf = counter.appendChild(document.createElement("div"));
|
||||
topshelf.setAttribute("class", "top-shelf horiz-side");
|
||||
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(wrapper);
|
||||
shadow.appendChild(rect);
|
||||
shadow.appendChild(style);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
customElements.define("toy-shelf", ToyShelf);
|
||||
customElements.define("shop-counter", ShopCounter);
|
||||
customElements.define("shop-counter", ShopCounter);
|
||||
|
|
|
|||
Loading…
Reference in New Issue