jsglib.light.js

const dispatchEvent =(target, eventType, options = {}) => {
	const eventToDispach = new CustomEvent(eventType, {
		detail: options.detail || {},
		bubbles: !!options.bubbles,
		cancelable: !!options.cancelable,
		composed: options.composed === undefined ? !!options.bubbles : !!options.composed,
	});
	
	target.dispatchEvent(eventToDispach);
	
	return eventToDispach;
}

const random = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

const DEFAULT_DURATION_UNIT = 's';

const cleanDuration = (duration) => {
	if (typeof duration === 'number') {
		duration += DEFAULT_DURATION_UNIT;
	}
	
	return duration;
}

const getDurationUnit = (duration) => {
	if (typeof duration === 'number') {
		return DEFAULT_DURATION_UNIT;
	}
	
	if (typeof duration === 'string') {
		const stringLength = duration.length;
		
		if (!stringLength) {
			return DEFAULT_DURATION_UNIT;
		}
		
		let i = stringLength;
		
		while (i--) {
			if (/\d/.test(duration[i])) {
				return duration.slice(i + 1, stringLength) || DEFAULT_DURATION_UNIT;
			}
		}
	}
	
	return DEFAULT_DURATION_UNIT;
}

const getFromAttribute = (jsglibElement, attributeName, defaultValue) => {
	return jsglibElement.hasAttribute(attributeName) ? jsglibElement.getAttribute(attributeName) : defaultValue;
};

const getFromAttributeAsInt = (jsglibElement, attributeName, defaultValue) => {
	const value = getFromAttribute(jsglibElement, attributeName, null);
	
	if (value === null) {
		return defaultValue;
	}
	
	return parseInt(value, 10);
};

const applyIsAttribute = (jsglibObject) => {
	if (!jsglibObject.hasAttribute('is')) {
		return;
	}
		
	const callbackName = jsglibObject.getAttribute('is');
	const callback = window._jsglibCustomClasses[callbackName];
	
	const extraTemplateContent = callback(jsglibObject);
	
	if (!extraTemplateContent) {
		return;
	}
	
	const template = document.createElement('template');
	template.innerHTML = extraTemplateContent;
	
	jsglibObject.shadowRoot.querySelector('slot').parentNode.appendChild(template.content.cloneNode(true));
};

function getClosestGameFromNode(node) {
	let game = node.closest('[data-jsglib-game]');

	if (game) {
		return game;
	}

	let parentNode = node.parentNode;

	do {
		if (parentNode._jsglibGame) {
			return parentNode._jsglibGame;
		}
		parentNode = parentNode.parentNode
	} while(parentNode);

	return null;
}

const gameTemplate = document.createElement('template');
		
gameTemplate.innerHTML='<style>:host{display:block;position:relative;margin:auto;background-color:#000;overflow:hidden;box-sizing:border-box;transform-origin:top left;touch-action:manipulation;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:optimize-contrast;-ms-interpolation-mode:nearest-neighbor;}</style><slot></slot>';

class JSGLibGame extends HTMLElement {
	constructor() {
		super();
		
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.appendChild(gameTemplate.content.cloneNode(true));
		
		this.cachedBoundingClientRect = null;
	}
	
	connectedCallback() {
		this.setAttribute('data-jsglib-game', 1);
		
		this.width = getFromAttributeAsInt(this, 'width', 'auto');
		this.height = getFromAttributeAsInt(this, 'height', 'auto');
		this.zoom = getFromAttributeAsInt(this, 'zoom', 1);
		
		this.__resetCachedBoundingClientRect = () => this.cachedBoundingClientRect = null;
		
		window.addEventListener('resize', this.__resetCachedBoundingClientRect);
		window.addEventListener('scroll', this.__resetCachedBoundingClientRect);
		
		applyIsAttribute(this);
	}
	
	disconnectedCallback() {
		window.removeEventListener('resize', this.__resetCachedBoundingClientRect);
		window.removeEventListener('scroll', this.__resetCachedBoundingClientRect);
	}
	
	getBoundingClientRect() {
		if (!this.cachedBoundingClientRect) {
			const rect = super.getBoundingClientRect();
			const computedStyle = window.getComputedStyle(this);
			
            const zoom = Math.abs(this._zoom);
            this.cachedBoundingClientRect = {
                width: rect.width / zoom,
                height: rect.height / zoom,
                left: Math.floor(rect.left / zoom) + parseInt(computedStyle.borderLeftWidth, 10),
                top: Math.floor(rect.top / zoom) + parseInt(computedStyle.borderTopWidth, 10),
            };
		}
		
		return this.cachedBoundingClientRect;
	}
	
	createElement({ name, attributes, disableAppend, nextTo } = {}) {
		const isCustomElement = !!customElements.get(name);
		const elementTagName = isCustomElement ? name : 'jsglib-element';
		
		const element = document.createElement(elementTagName);
		element.game = this;
		
		if (attributes) {
			for (let [attributeName, attributeValue] of Object.entries(attributes)) {
				element.setAttribute(attributeName, attributeValue);
			}
		}
		
		if (!isCustomElement && Boolean(name)) {
			element.setAttribute('is', name);
		}
		
		if (!disableAppend) {
			if (!nextTo) {
				this.appendChild(element);
			} else {
				nextTo.parentNode.insertBefore(element, nextTo);
			}
		}
		
		return element;
	}
	
	get x() {
		return this.getBoundingClientRect().left;
	}
	
	get y() {
		return this.getBoundingClientRect().top;
	}
	
	get width() {
		return this.getBoundingClientRect().width;
	}
	
	set width(value) {
		this.cachedBoundingClientRect = null;
		this.style.width = `${value}px`;
	}
	
	get height() {
		return this.getBoundingClientRect().height;
	}
	
	set height(value) {
		this.cachedBoundingClientRect = null;
		this.style.height = `${value}px`;
	}
	
	get zoom() {
		return this._zoom;
	}
	
	set zoom(value) {
		if (this._zoom === value) {
			return;
		}
		
		this._zoom = value;
		this.style.transform = `scale(${value})`;
	}	
}

const transformTemplate = document.createElement('template');
		
transformTemplate.innerHTML='<style>:host{display: block;position: absolute;inset: 0;transform-origin: center;}</style><slot></slot>';

function get(transformElement, scope, property) {
	return transformElement[scope][property];
};

function set(transformElement, scope, property, value) {
	transformElement[scope][property] = value;
};

class JSGLibTransform extends HTMLElement {
	constructor() {
		super();
		
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.appendChild(transformTemplate.content.cloneNode(true));
		
		this._transition = {};
		this._transform = {};
	}
	
	connectedCallback() {
		this.property = this.hasAttribute('property') ? this.getAttribute('property') : 'translateX';
		this.value = 0;
		this.prevValue = this.value;
		this.duration = 0;
		this.timingFunction = 'linear';
		
		this.applyTransform();
		
		this.addEventListener('transitionend', (e) => {
			if (e.target !== this) {
				return;
			}

			dispatchEvent(e.target, 'jsglib:transformationEnd', {
				bubbles: false,
			});
		});
	}
	
	get value() {
		return get(this, '_transform', 'value');
	};
	
	set value(newValue) {
		this.prevValue = this.value;
		set(this, '_transform', 'value', newValue);
	}
	
	get property() {
		return get(this, '_transform', 'property');
	};
	
	set property(newValue) {
		set(this, '_transform', 'property', newValue);
	}
	
	get duration() {
		return get(this, '_transition', 'duration');
	};
	
	set duration(newValue) {		
		set(this, '_transition', 'duration', cleanDuration(newValue));
	}
	
	get timingFunction() {
		return get(this, '_transition', 'timingFunction');
	};
	
	set timingFunction(newValue) {
		set(this, '_transition', 'timingFunction', newValue);
	}
	
	get speed() {
		const { prevValue, value, duration } = this;
		
		let durationAsNumber = parseInt(duration, 10);
		
		if (!durationAsNumber) {
			return 0;
		}
		
		const pixels = parseInt(value, 10) - parseInt(prevValue, 10);
		const durationUnit = getDurationUnit(duration);
		
		if (durationUnit !== 's') {
			durationAsNumber /= 1000;
		}
		
		return pixels / durationAsNumber;
	}
	
	applyTransform() {
		this.style.transition = `transform ${this.duration} ${this.timingFunction}`;
		this.style.transform = `${this.property}(${this.value})`;
	}
}

const elemTemplate = document.createElement('template');
		
const getBaseTemplate = (children) => `<style>:host{display:block;position:absolute;padding:0;left 0;top:0;z-index:0;}slot, ::slotted(*){display:block;position:absolute;inset:0;transform-origin:center;}</style><jsglib-transform property="translateY"><jsglib-transform property="translateX">${children}</jsglib-transform></jsglib-transform>`;

class JSGLibElement extends HTMLElement {
	constructor() {
		super();
		
		const shadowRoot = this.attachShadow({ mode: 'open' });

		elemTemplate.innerHTML = getBaseTemplate(this.getInitialTemplate());

		shadowRoot.appendChild(elemTemplate.content.cloneNode(true));
		
		this.game = null;
		this._transformContainers = {};
		this._content = null;

		this._cachedBoundingClientRect = null;
		this.clearCachedBoundingClientRectClock = null;
		
		this._collisionCallbacks = {};
		
		this._onEndX = null;
		this._onEndY = null;
	}

	getInitialTemplate() {
		return '<slot></slot>';
	}
	
	connectedCallback() {
		this.game = getClosestGameFromNode(this);

		this.shadowRoot._game = this.game;
		
		this.setAttribute('data-jsglib-element', 1);
		
		this._transformContainers = {
			translateX: this.shadowRoot.querySelector('jsglib-transform[property="translateX"]'),
			translateY: this.shadowRoot.querySelector('jsglib-transform[property="translateY"]'),
		};
		this._content = this.shadowRoot.querySelector('slot');
		this._content._jsglibElement = this;
		
		this.width = getFromAttributeAsInt(this, 'width', 16);
		this.height = getFromAttributeAsInt(this, 'height', 16);	

		window.requestAnimationFrame(() => {
			this.x = getFromAttributeAsInt(this, 'x', 0);
			this.y = getFromAttributeAsInt(this, 'y', 0);
			this.hspeed = getFromAttributeAsInt(this, 'hspeed', 0);
			this.vspeed = getFromAttributeAsInt(this, 'vspeed', 0);

			applyIsAttribute(this);
			dispatchEvent(this, 'jsglib:ready', { bubbles: true });
		});
	}
	
	disconnectedCallback() {
		if (this.clearCachedBoundingClientRectClock) {
			window.clearTimeout(this.clearCachedBoundingClientRectClock);
		}
		
		dispatchEvent(this, 'jsglib:destroy');
	}
	
	getBoundingClientRect() {
		if (!this._cachedBoundingClientRect) {
			const rect = this._content.getBoundingClientRect();
			
			const zoom = 2;

            this._cachedBoundingClientRect = {
                width: rect.width / zoom,
                height: rect.height / zoom,
                left: Math.floor(rect.left / zoom),
                top: Math.floor(rect.top / zoom),
            };	
			
			this.clearCachedBoundingClientRectClock = window.setTimeout(() => {
				this._cachedBoundingClientRect = null;
			}, 1000 /60);
		}
		
		return this._cachedBoundingClientRect;
	}
	
	_clearOnEndX() {
		if (this._onEndX) {
			this._transformContainers.translateX.removeEventListener('jsglib:transformationEnd', this._onEndX);
			this._onEndX = null;
		}
	}
	
	_clearOnEndY() {
		if (this._onEndY) {
			this._transformContainers.translateY.removeEventListener('jsglib:transformationEnd', this._onEndY);
			this._onEndY = null;
		}
	}
	
	get x() {
		return this.getBoundingClientRect().left - this.game.x;
	}
	
	set x(value) {
		this._transformContainers.translateX.value = `${value}px`;
		this._transformContainers.translateX.applyTransform();
	}
	
	get y() {
		return this.getBoundingClientRect().top - this.game.y;
	}
	
	set y(value) {
		this._transformContainers.translateY.value = `${value}px`;
		this._transformContainers.translateY.applyTransform();
	}
	
	get width() {
		return this.getBoundingClientRect().width;
	}
	
	set width(value) {
		this.style.width = `${value}px`;
	}
	
	get height() {
		return this.getBoundingClientRect().height;
	}
	
	set height(value) {
		this.style.height = `${value}px`;
	}
	
	get hspeed() {
		return this._transformContainers.translateX.speed;
	}
	
	set hspeed(pixelByMilliseconds) {
		if (this.hspeed === pixelByMilliseconds && parseFloat(this._transformContainers.translateX.duration) === 0) {
			return;
		}
		
		if (pixelByMilliseconds === 0) {
			this._clearOnEndX();
			this._transformContainers.translateX.duration = 0;
			this.x = this.x;
		} else {
			const speedDirection = Math.sign(pixelByMilliseconds);
			this.moveX(this.x + (9999 * speedDirection), { speed: Math.abs(pixelByMilliseconds), timingFunction: 'linear', behavior: 'repeat' });
		}
	}
	
	get vspeed() {
		return this._transformContainers.translateY.speed;
	}
	
	set vspeed(pixelByMilliseconds) {
		if (this.vspeed === pixelByMilliseconds && parseFloat(this._transformContainers.translateY.duration) === 0) {
			return;
		}
		
		if (pixelByMilliseconds === 0) {
			this._clearOnEndY();
			this._transformContainers.translateY.duration = 0;
			this.y = this.y;
		} else {
			const speedDirection = Math.sign(pixelByMilliseconds);
			this.moveY(this.y + (9999 * speedDirection), { speed: Math.abs(pixelByMilliseconds), timingFunction: 'linear', behavior: 'repeat' });
		}
	}
	
	moveX(x, options = {}) {
		const prevX = this.x;
		const nextX = x;
		const deltaX = nextX - prevX;
		
		let duration = cleanDuration(Math.abs(deltaX) / options.speed);
		
		this._clearOnEndX();
			
		this._onEndX = () => {
			dispatchEvent(this, 'jsglib:afterMoveX', {
				cancelable: true,
				bubbles: true,
			});
		};
		
		this._transformContainers.translateX.addEventListener('jsglib:transformationEnd', this._onEndX, { once: true });
		
		this._transformContainers.translateX.duration = duration;
		this._transformContainers.translateX.timingFunction = 'linear';
		this.x = nextX;
	}
	
	moveY(y, options = {}) {
		const prevY = this.y;
		const nextY = y;
		const deltaY = nextY - prevY;	
		
		let duration = cleanDuration(Math.abs(deltaY) / options.speed);

		this._clearOnEndY();
			
		this._onEndY = () => {
			dispatchEvent(this, 'jsglib:afterMoveY', {
				cancelable: true,
				bubbles: true,
			});
		};
		
		this._transformContainers.translateY.addEventListener('jsglib:transformationEnd', this._onEndY, { once: true });
		
		this._transformContainers.translateY.duration = duration;
		this._transformContainers.translateY.timingFunction = 'linear';
		this.y = nextY;
	}
	
	stop() {
		this._clearOnEndX();
		this._clearOnEndY();
		this._transformContainers.translateX.duration = 0;
		this._transformContainers.translateY.duration = 0;
		this.x = this.x;
		this.y = this.y;
	}
}


window._jsglibCustomClasses = window._jsglibCustomClasses || {};

const define = (callback) => {
	window._jsglibCustomClasses[callback.name] = callback;
};

const initElements = () => {
	customElements.define('jsglib-game', JSGLibGame);
	customElements.define('jsglib-transform', JSGLibTransform);
	customElements.define('jsglib-element', JSGLibElement);
};

export default {
	define,
	initElements,
	Game: JSGLibGame,
	Element: JSGLibElement,
	Transform: JSGLibTransform,
	random,
};