yequari
/
yeet.marigold.town
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add Rect class to make adding more shapes easier

This commit is contained in:
yequari 2023-09-30 12:20:27 -07:00
parent 8767cd544d
commit 1aacf5c6fe
4 changed files with 145 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
css/counter.css
View File

@ -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);
}

59
css/shelf.css
View File

@ -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);
}

2
index.html
View File

@ -77,4 +77,4 @@
</div>
</div>
</body>
</html>
</html>

187
js/elements.js
View File

@ -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);