poe-custom-elements/dist/elements/poe-item-socket.js

Path of Exile custom elements

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { basePath } from '../lib/base_path.js';
import { capitalize } from '../lib/internal.js';
/**
 * @cssprop --cell-size - Size of one tab cell in pixels.
 */
let PoeItemSocketElement = class PoeItemSocketElement extends LitElement {
    willUpdate() {
        this.style.setProperty('--background-image', this.gemImageSrc());
    }
    render() {
        return html ` <div class="highlight-ring"></div> `;
    }
    gemImageSrc() {
        const name = (kind) => {
            const skillOrSupport = this.socketedItem?.support ? 'Support' : 'Skill';
            switch (kind) {
                case 'A':
                    return this.socketedItem ? 'socketAbyss' : 'socketAbyssFull';
                case 'B':
                    return this.socketedItem ? `intFull${skillOrSupport}` : 'int';
                case 'G':
                    return this.socketedItem ? `dexFull${skillOrSupport}` : 'dex';
                case 'R':
                    return this.socketedItem ? `strFull${skillOrSupport}` : 'str';
                case 'W': {
                    const color = this.socketedItem?.colour;
                    const whiteName = (gemColor) => {
                        return `gen${capitalize(name(gemColor))}`;
                    };
                    if (!this.socketedItem) {
                        return 'gen';
                    }
                    if (!color) {
                        return whiteName('B');
                    }
                    switch (color) {
                        case 'R':
                        case 'G':
                        case 'B':
                            return whiteName(color);
                        default:
                            return whiteName('B');
                    }
                }
            }
        };
        return `url('${basePath()}/poe-images/${name(this.kind)}.png')`;
    }
    static { this.styles = css `
		:host {
			--background-image: '(computed) Image of empty or full socket';
			display: inline-block;
			width: var(--cell-size);
			height: var(--cell-size);
			position: relative;
			background: var(--background-image);
			background-size: 100%;
		}

		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		.highlight-ring {
			display: none;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			position: absolute;
			content: '';
			width: calc(var(--cell-size) / var(--default-cell-size) * 31);
			height: calc(var(--cell-size) / var(--default-cell-size) * 31);
			border-radius: 50%;

			box-shadow: 0px 0px 4px 2px #fff;
		}

		:host(:hover) .highlight-ring {
			display: initial;
		}

		img {
			width: 100%;
			display: block;
			height: var(--cell-size);
		}
	`; }
};
__decorate([
    property({ reflect: true }),
    __metadata("design:type", String)
], PoeItemSocketElement.prototype, "kind", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], PoeItemSocketElement.prototype, "socketedItem", void 0);
PoeItemSocketElement = __decorate([
    customElement('poe-item-socket')
], PoeItemSocketElement);
export { PoeItemSocketElement };
//# sourceMappingURL=poe-item-socket.js.map