@needle-tools/engine/src/engine/webcomponents/logo-element.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

import { madeWithNeedleSVG, needleLogoOnlySVG, needleLogoSVG } from "../assets/index.js";

const elementName = "needle-logo-element";

export class NeedleLogoElement extends HTMLElement {

    static get elementName() { return elementName; }

    static create(): NeedleLogoElement {
        return document.createElement(elementName) as NeedleLogoElement;
    }

    constructor() {
        super();
        this._root = this.attachShadow({ mode: 'closed' });
        const template = document.createElement('template');
        template.innerHTML = `<style>
        :host {
            position: relative;
            min-width: fit-content;
            /* height: 100%; can not have height 100% because of align-items: stretch; in the parent */
            display: flex;
        }

        .wrapper {
            position: relative;
            display: grid;
            grid-template-columns: auto auto;
            padding: .1rem;
        }
        .wrapper:hover {
            cursor: pointer;
        }
        img {
            width: 95px;
            height: 100%;
            align-self: end;
            margin-left: 0.6rem;
        }
        span {
            font-size: 1rem;
            white-space: nowrap;
        }
        </style>
        <div class="wrapper">
            <img class="logo" src=${needleLogoSVG} />
        </div>
        `;
        this._root.appendChild(template.content.cloneNode(true));
        this.wrapper = this._root.querySelector(".wrapper") as HTMLDivElement;
        this._root.appendChild(this.wrapper);
        // this.wrapper.classList.add("wrapper");

        // this.wrapper.appendChild(this.logoElement);
        // this.logoElement.src = logoSVG;

        // this.textElement.textContent = "Needle Engine";
        // this.wrapper.appendChild(this.textElement);

        this.addEventListener("click", () => {
            globalThis.open("https://needle.tools", "_blank");
        });

        // set title
        this.wrapper.setAttribute("title", "Made with Needle Engine");
    }

    private readonly _root: ShadowRoot;
    private readonly wrapper: HTMLDivElement;
    private readonly logoElement: HTMLImageElement = document.createElement("img");
    private readonly textElement: HTMLSpanElement = document.createElement("span");

    setLogoVisible(val: boolean) {
        this.logoElement.style.display = val ? "block" : "none";
    }

}
if (!customElements.get(elementName))
    customElements.define(elementName, NeedleLogoElement);