yeet.marigold.town/js/elements.js

class Rect extends HTMLElement {
    constructor() {
        super();

        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

    }

    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 = rect.appendChild(document.createElement("div"));
        leftshelf.setAttribute("class", "left-shelf small-face");
        const rightshelf = rect.appendChild(document.createElement("div"));
        rightshelf.setAttribute("class", "right-shelf small-face");
        const back = rect.appendChild(document.createElement("div"));
        back.setAttribute("class", "back-shelf face");
        const bottomshelf = rect.appendChild(document.createElement("div"));
        bottomshelf.setAttribute("class", "bottom-shelf face");
        const front = rect.appendChild(document.createElement("div"));
        front.setAttribute("class", "front-shelf face");

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

        const rect = this.createRect();

        shadow.innerHTML = `
            <div id="toy-list"><slot name="toy-list"></slot></div>
        `
        
        // TODO: change slot items to render on shelf
        shadow.firstElementChild.addEventListener('slotchange', e => {
            let slot = e.target;
            if (slot.name == 'toy-list') {
                this.items = slot.assignedElements().map(elem => elem.textContent);
                console.log("Items: " + this.items);
            }
        });      

        shadow.appendChild(rect);
    }
}

class ShopCounter extends Rect {
    constructor() {
        super();
        const shadow = this.attachShadow({mode: "open", slotAssignment: "named"});

        this.width = 800;
        this.height = 300;
        this.depth = 200;

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

    }
}


customElements.define("toy-shelf", ToyShelf);
customElements.define("shop-counter", ShopCounter);