<!-- made with http://github.com/lume/lume -->
<script src="https://assets.codepen.io/191583/LUME.unversioned.2.js"></script>

<!-- Polyfill for Pointer Events (boo Safari) -->
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

<codepen-cube size="150"> </codepen-cube>

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(
		315deg,
		rgb(154, 183, 230) 0%,
		rgb(238, 174, 174) 100%
	);
	touch-action: none;
}
lume-node {
	background: linear-gradient(
		152deg,
		rgb(154, 183, 230) 0%,
		rgb(238, 174, 174) 100%
	);
}

// Registers the LUME HTML elements with the browser.
LUME.useDefaultNames();

const { Element, element, html, reactive, numberAttribute } = LUME;

const size = 50;

@element("codepen-cube")
class CodepenCube extends Element {
	root = this;

	@reactive @numberAttribute(100) size = 100;

	@reactive rotation = 0;

	// prettier-ignore
	template = () =>  html`
		<div Xstyle=${() => ({width: this.size+'px', height: this.size + 'px'})}>
			<lume-scene ref=${s => this.scene = s} touch-action="none">
				<lume-node rotation=${() => [1, this.rotation, 1]} align="0.5 0.5" size="0 0 0">
					<lume-node id="cube-face1" class="front"  position=${() => [0, 0, this.size/2]}  rotation="0 0 0"   size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
					<lume-node id="cube-face2" class="back"   position=${() => [0, 0, -this.size/2]} rotation="0 180 0" size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
					<lume-node id="cube-face3" class="left"   position=${() => [-this.size/2, 0, 0]} rotation="0 -90 0" size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
					<lume-node id="cube-face4" class="right"  position=${() => [this.size/2, 0, 0]}  rotation="0 90 0"  size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
					<lume-node id="cube-face5" class="top"    position=${() => [0, -this.size/2, 0]} rotation="-90 0 0" size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
					<lume-node id="cube-face6" class="bottom" position=${() => [0, this.size/2, 0]}  rotation="90 0 0"  size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
				</lume-node>
			</lume-scene>
		</div>
	`

	css = /* css */ `
		div {width: 100%; height: 100%}
    `;

	connectedCallback() {
		super.connectedCallback();

		let isDragging = false;

		this.scene.addEventListener("pointerdown", (event) => {
			isDragging = true;
		});

		this.scene.addEventListener("pointermove", (event) => {
			if (!isDragging) return;

			var delta = event.movementX;
			this.rotation += delta * 0.1;
		});

		this.scene.addEventListener("pointerup", (event) => {
			if (!isDragging) return;
			isDragging = false;
		});
	}
}