@pb33f/cowboy-components 0.5.4 → 0.5.6

package/dist/components/auth/oauth-login.css.js

@@ -0,0 +1,107 @@
+import { css } from "lit";
+export default css `
+    :host {
+        height: 100%;
+        width: 100%;
+    }
+    .auth-container {
+        height: 288px;
+        width: 488px;
+    }
+    .auth-title {
+        width: 100%;
+        text-align: center;
+        font-size: 1.6rem;
+        font-family: var(--font-stack-bold),serif;
+        height: 45px;
+        padding-top: 10px;
+        vertical-align: middle;
+        border-bottom: 1px solid var(--secondary-color);
+        color: var(--secondary-color);
+        text-shadow: 0 0 10px var(--secondary-color);
+        backdrop-filter: blur(2px);
+    }
+    
+    .auth-provider-choice {
+        height: 180px;
+        text-align: center;
+        padding-top: 40px;
+    }
+    
+    .select-provider {
+        display: block;
+        font-size: 1rem;
+        margin-bottom: 30px;
+        font-family: var(--font-stack-bold),serif;
+        
+    }
+    
+    sl-button::part(base) {
+        width: 200px;
+        
+    }
+    
+    #github-button {
+        
+        /* Ensure this triggers GPU acceleration */
+        will-change: transform, opacity;
+    }
+
+    @keyframes spinFade {
+        0% {
+            transform: rotate(0deg) scale(1) skew(0deg, 0deg);
+            opacity: 1;
+        }
+        100% {
+            transform: rotate(720deg) scale(0.1) skew(40deg, -40deg);
+            opacity: 0;
+        }
+    }
+    
+    .title::after {
+        content: "";
+        -webkit-animation: cursor .8s infinite;
+        animation: cursor .8s infinite;
+        background: var(--secondary-color);
+        border-radius: 0;
+        display: inline-block;
+        height: 25px;
+        margin-left: -5px;
+        width: 3px;
+        bottom: -3px;
+        position: relative;
+    }
+
+    
+    
+    
+    
+    @-webkit-keyframes cursor {
+        0% {
+            opacity: 0;
+        }
+
+        50% {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes cursor {
+        0% {
+            opacity: 0;
+        }
+
+        50% {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+    \`
+`;

package/dist/components/auth/oauth-login.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+import '../electric-box/electric-box.js';
+import { SlAnimation, SlButton } from "@shoelace-style/shoelace";
+export declare class OAuthLogin extends LitElement {
+    static styles: import("lit").CSSResult[];
+    title: string;
+    instruction: string;
+    mintravel: number;
+    maxtravel: number;
+    spin: number;
+    orbs: boolean;
+    buttonAnimation: SlAnimation;
+    githubButton: SlButton;
+    constructor();
+    githubLogin(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/auth/oauth-login.js

@@ -0,0 +1,93 @@
+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;
+};
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import oauthLoginCss from "./oauth-login.css";
+import buttonCss from "../../css/button.css";
+import '../electric-box/electric-box.js';
+import { AuthenticationGithubRequested } from "../../events/doctor";
+let OAuthLogin = class OAuthLogin extends LitElement {
+    constructor() {
+        super();
+        this.title = 'authentication required';
+        this.instruction = 'select service provider';
+        this.mintravel = 3500;
+        this.maxtravel = 6500;
+        this.spin = 20;
+        this.orbs = true;
+    }
+    githubLogin() {
+        this.mintravel = 1000;
+        this.maxtravel = 1500;
+        this.spin = 150;
+        this.orbs = false;
+        this.githubButton.style.animation = 'spinFade 1s ease-out forwards';
+        this.githubButton.disabled = true;
+        this.instruction = 'hold on, accessing the grid...';
+        setTimeout(() => {
+            this.dispatchEvent(new Event(AuthenticationGithubRequested, {
+                bubbles: true,
+                composed: true,
+            }));
+        }, 2000);
+    }
+    render() {
+        return html `
+            <div style="width: 500px; height: 280px; margin: 0 auto;">
+                <pb33f-electric-box .orbs="${this.orbs}" 
+                                    spin spinamount="${this.spin}" 
+                                    mintraveltime="${this.mintravel}" 
+                                    maxtraveltime="${this.maxtravel}" 
+                                    height=288>
+                    <div class="auth-container">
+                        <div class="auth-title">
+                            <span class="title">${this.title}<span>
+                        </div>
+                        <div class="auth-provider-choice">
+                            <span class="select-provider">${this.instruction}</span>
+                     
+                            <sl-button @click="${this.githubLogin}" id="github-button">
+                                <sl-icon name="github" slot="prefix"></sl-icon>
+                                GitHub
+                            </sl-button>
+                          
+                        </div>
+                        
+                    </div>    
+                </pb33f-electric-box>
+            </div>`;
+    }
+};
+OAuthLogin.styles = [oauthLoginCss, buttonCss];
+__decorate([
+    property()
+], OAuthLogin.prototype, "title", void 0);
+__decorate([
+    property()
+], OAuthLogin.prototype, "instruction", void 0);
+__decorate([
+    state()
+], OAuthLogin.prototype, "mintravel", void 0);
+__decorate([
+    state()
+], OAuthLogin.prototype, "maxtravel", void 0);
+__decorate([
+    state()
+], OAuthLogin.prototype, "spin", void 0);
+__decorate([
+    state()
+], OAuthLogin.prototype, "orbs", void 0);
+__decorate([
+    query('#button-anim')
+], OAuthLogin.prototype, "buttonAnimation", void 0);
+__decorate([
+    query('#github-button')
+], OAuthLogin.prototype, "githubButton", void 0);
+OAuthLogin = __decorate([
+    customElement("pb33f-oauth-login")
+], OAuthLogin);
+export { OAuthLogin };

package/dist/components/electric-box/electric-box.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/electric-box/electric-box.css.js

@@ -0,0 +1,23 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: block;
+        height: 100%;
+        width: 100%;
+    }
+    #container {
+        height: 100%;
+        width: 100%;
+        position: relative;
+    }
+    #box-content{
+        position: absolute;
+        z-index: 10;
+        padding: 5px;
+        //width: 100%;
+        height: 100%;
+    }
+    svg {
+        z-index: 11;
+    }
+`;

package/dist/components/electric-box/electric-box.d.ts

@@ -0,0 +1,37 @@
+import { LitElement, TemplateResult } from "lit";
+import Snap from "snapsvg-cjs";
+export declare class ElectricBox extends LitElement {
+    static styles: import("lit").CSSResult[];
+    spin: boolean;
+    spinamount: number;
+    squares: boolean;
+    orbs: boolean;
+    mintraveltime: number;
+    maxtraveltime: number;
+    height: number;
+    heroView: boolean;
+    color: string;
+    private container;
+    private orbPath;
+    private orbGroup;
+    private orb;
+    private svgWidth;
+    private svgHeight;
+    private pixelConfig;
+    private activePixelCount;
+    private pixelSpawnTimer;
+    private orbTimer;
+    constructor();
+    render(): TemplateResult;
+    protected firstUpdated(): void;
+    protected willUpdate(): void;
+    disconnectedCallback(): void;
+    private getRandomBorderPosition;
+    private spawnPixel;
+    private animatePixelToCenter;
+    private spawnOrb;
+    pulseOnce(orb: Snap.Element): void;
+    private loopAroundPath;
+    private getRandomValue;
+    private renderColorStops;
+}

package/dist/components/electric-box/electric-box.js

@@ -0,0 +1,336 @@
+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;
+};
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement, svg } from "lit";
+import Snap from "snapsvg-cjs";
+import oauthModalCss from "./electric-box.css.js";
+let ElectricBox = class ElectricBox extends LitElement {
+    constructor() {
+        super();
+        this.svgWidth = 0;
+        this.svgHeight = 0;
+        this.activePixelCount = 0;
+        this.spin = false;
+        this.spinamount = 20;
+        this.squares = false;
+        this.orbs = false;
+        this.color = 'var(--secondary-color)';
+        this.mintraveltime = 1000;
+        this.maxtraveltime = 4000;
+        this.heroView = false;
+        this.height = 500;
+    }
+    render() {
+        return html `
+      <div id="container">
+          <div id="box-content">
+              <slot></slot>    
+          </div>
+          
+        <svg
+          id="electric-box"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="${this.height}px"
+          preserveAspectRatio="none"
+        >
+          <defs>
+            <radialGradient id="radial-gradient" cx="0.5" cy="0.5" r="0.5" gradientUnits="objectBoundingBox">
+              ${this.renderColorStops()}
+            </radialGradient>
+          </defs>
+
+          <g id="box-group">
+            <path id="orb-path" fill="none" stroke="${this.color}" stroke-width="5" />
+          </g>
+          <g id="orb-group">
+            <circle
+              id="orb-circle"
+              cx="100"
+              cy="100"
+              r="20"
+              style="fill: url(#radial-gradient); display: none;"
+            />
+          </g>
+        </svg>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        const containerDiv = this.shadowRoot.getElementById("container");
+        if (!containerDiv)
+            return;
+        this.pixelConfig = {
+            pixelColor: this.color,
+            pixelSize: 1,
+            spawnIntervalMs: 20,
+            minTravelMs: this.mintraveltime,
+            maxTravelMs: this.maxtraveltime,
+            maxActivePixels: 5000
+        };
+        const rect = containerDiv.getBoundingClientRect();
+        this.svgWidth = Math.floor(rect.width);
+        this.svgHeight = Math.floor(rect.height);
+        if (this.svgHeight <= 0) {
+            this.svgHeight = 280;
+        }
+        if (this.svgWidth <= 0) {
+            this.svgWidth = 500;
+        }
+        const heroPath = `M 0,0 H ${this.svgWidth} M 0,${this.svgHeight} H ${this.svgWidth}`;
+        const regularPath = `M 0,0 H ${this.svgWidth} V ${this.svgHeight} H 0 Z`;
+        const dynamicPath = this.heroView ? heroPath : regularPath;
+        this.container = Snap(this.shadowRoot.querySelector("#electric-box"));
+        this.container.attr({ viewBox: `0 0 ${this.svgWidth} ${this.svgHeight}` });
+        this.orbPath = this.container.select("#orb-path");
+        this.orbPath.attr({ d: dynamicPath });
+        this.orbGroup = this.container.select("#orb-group");
+        this.orb = this.container.select("#orb-circle");
+        this.orb.attr({ display: "none" });
+        if (this.orbs) {
+            this.orbTimer = setInterval(() => {
+                this.spawnOrb();
+            }, 500);
+        }
+        this.pixelSpawnTimer = setInterval(() => {
+            if (this.activePixelCount < this.pixelConfig.maxActivePixels) {
+                this.spawnPixel();
+            }
+        }, this.pixelConfig.spawnIntervalMs);
+    }
+    willUpdate() {
+        if (this.orbTimer && !this.orbs) {
+            clearInterval(this.orbTimer);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.pixelSpawnTimer) {
+            clearInterval(this.pixelSpawnTimer);
+        }
+        if (this.orbTimer) {
+            clearInterval(this.orbTimer);
+        }
+    }
+    getRandomBorderPosition() {
+        // If heroView is true, only spawn pixels on the top (edge 0) or bottom (edge 1)
+        if (this.heroView) {
+            const topOrBottom = Math.random() < 0.5 ? 0 : 1;
+            if (topOrBottom === 0) {
+                // Top edge
+                return { x: Math.random() * this.svgWidth, y: 0 };
+            }
+            else {
+                // Bottom edge
+                return { x: Math.random() * this.svgWidth, y: this.svgHeight };
+            }
+        }
+        const edge = Math.floor(Math.random() * 4);
+        let x = 0, y = 0;
+        switch (edge) {
+            case 0:
+                x = Math.random() * this.svgWidth;
+                y = 0;
+                break;
+            case 1:
+                x = this.svgWidth;
+                y = Math.random() * this.svgHeight;
+                break;
+            case 2:
+                x = Math.random() * this.svgWidth;
+                y = this.svgHeight;
+                break;
+            case 3:
+                x = 0;
+                y = Math.random() * this.svgHeight;
+                break;
+        }
+        return { x, y };
+    }
+    spawnPixel() {
+        const { x, y } = this.getRandomBorderPosition();
+        let newPixel;
+        if (Math.random() < 0.1) {
+            if (this.squares) {
+                newPixel = this.container.rect(x - (this.pixelConfig.pixelSize + 6) / 2, y - (this.pixelConfig.pixelSize + 6) / 2, this.pixelConfig.pixelSize + 6, this.pixelConfig.pixelSize + 6);
+                newPixel.attr({
+                    opacity: 1,
+                    fill: "url(#radial-gradient)"
+                });
+            }
+            else {
+                newPixel = this.container.circle(x, y, this.pixelConfig.pixelSize + 6);
+                newPixel.attr({
+                    opacity: 1,
+                    fill: "url(#radial-gradient)"
+                });
+            }
+        }
+        else {
+            if (this.squares) {
+                newPixel = this.container.rect(x - this.pixelConfig.pixelSize / 2, y - this.pixelConfig.pixelSize / 2, this.pixelConfig.pixelSize, this.pixelConfig.pixelSize);
+                newPixel.attr({
+                    fill: this.pixelConfig.pixelColor,
+                    opacity: 1
+                });
+            }
+            else {
+                newPixel = this.container.circle(x, y, this.pixelConfig.pixelSize);
+                newPixel.attr({
+                    fill: this.pixelConfig.pixelColor,
+                    opacity: 1
+                });
+            }
+        }
+        this.activePixelCount++;
+        this.animatePixelToCenter(newPixel);
+    }
+    animatePixelToCenter(pixel) {
+        const travelTime = this.getRandomValue(this.maxtraveltime, this.maxtraveltime);
+        const centerX = this.svgWidth / 2;
+        const centerY = this.svgHeight / 2;
+        const fadeStart = 0.2;
+        const fadeDuration = 0.4;
+        const fadeEnd = fadeStart + fadeDuration;
+        let startX = 0;
+        let startY = 0;
+        if (this.squares) {
+            startX = +pixel.attr("x") + (+pixel.attr("width") / 2);
+            startY = +pixel.attr("y") + (+pixel.attr("height") / 2);
+        }
+        else {
+            startX = +pixel.attr("cx");
+            startY = +pixel.attr("cy");
+        }
+        Snap.animate(0, 1, (t) => {
+            const x = startX + (centerX - startX) * t;
+            const y = startY + (centerY - startY) * t;
+            let opacity = 1;
+            if (t >= fadeEnd) {
+                opacity = 0;
+            }
+            else if (t >= fadeStart) {
+                opacity = 1 - ((t - fadeStart) / fadeDuration);
+            }
+            if (this.squares) {
+                const halfW = +pixel.attr("width") / 2;
+                const halfH = +pixel.attr("height") / 2;
+                pixel.attr({ x: x - halfW, y: y - halfH, opacity });
+                if (this.spin) {
+                    const angle = t * this.spinamount;
+                    pixel.transform(`r${angle},${x},${y}`);
+                }
+            }
+            else {
+                pixel.attr({ cx: x, cy: y, opacity });
+                if (this.spin) {
+                    const angle = t * this.spinamount;
+                    pixel.transform(`r${angle},${centerX},${centerY}`);
+                }
+            }
+        }, travelTime, mina.easeinout, () => {
+            pixel.remove();
+            this.activePixelCount--;
+        });
+    }
+    spawnOrb() {
+        if (!this.orb || !this.orbPath)
+            return;
+        const totalLength = this.orbPath.getTotalLength();
+        const randomDistance = Math.random() * totalLength;
+        const point = this.orbPath.getPointAtLength(randomDistance);
+        const clonedOrb = this.orb.clone();
+        this.orbGroup.add(clonedOrb);
+        clonedOrb.attr({
+            cx: point.x,
+            cy: point.y,
+            opacity: "0",
+            display: "block"
+        });
+        this.pulseOnce(clonedOrb);
+        this.loopAroundPath(clonedOrb);
+    }
+    pulseOnce(orb) {
+        orb.animate({ opacity: 1 }, this.getRandomValue(200, 800), mina.easeinout, () => {
+            orb.animate({ opacity: 0 }, this.getRandomValue(1500, 3000), mina.easeinout, () => {
+                orb.remove();
+            });
+        });
+    }
+    loopAroundPath(orb) {
+        const totalLength = this.orbPath.getTotalLength();
+        const randomStart = Math.random() * totalLength;
+        const directionIsCW = Math.random() < 0.5;
+        let lapsDone = 0;
+        const maxLaps = 2;
+        const animateOneLap = (startDistance) => {
+            const endDistance = directionIsCW
+                ? startDistance + totalLength
+                : startDistance - totalLength;
+            Snap.animate(startDistance, endDistance, (val) => {
+                const modVal = ((val % totalLength) + totalLength) % totalLength;
+                const p = this.orbPath.getPointAtLength(modVal);
+                orb.attr({ cx: p.x, cy: p.y });
+            }, this.getRandomValue(2200, 4500), mina.easeinout, () => {
+                lapsDone++;
+                if (lapsDone < maxLaps) {
+                    animateOneLap(endDistance);
+                }
+                else {
+                    orb.remove();
+                }
+            });
+        };
+        animateOneLap(randomStart);
+    }
+    getRandomValue(min, max) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min) + min);
+    }
+    renderColorStops() {
+        return svg `
+          <stop offset="0%" stop-color="#fff" stop-opacity="1"/>
+          <stop offset="20%" stop-color="${this.color}" stop-opacity="0.8"/>
+          <stop offset="50%" stop-color="${this.color}" stop-opacity="0.4"/>
+          <stop offset="40%" stop-color="${this.color}" stop-opacity="0.2"/>
+          <stop offset="100%" stop-color="${this.color}" stop-opacity="0"/>
+        `;
+    }
+};
+ElectricBox.styles = [oauthModalCss];
+__decorate([
+    property({ type: Boolean })
+], ElectricBox.prototype, "spin", void 0);
+__decorate([
+    property({ type: Number })
+], ElectricBox.prototype, "spinamount", void 0);
+__decorate([
+    property({ type: Boolean })
+], ElectricBox.prototype, "squares", void 0);
+__decorate([
+    property({ type: Boolean })
+], ElectricBox.prototype, "orbs", void 0);
+__decorate([
+    property({ type: Number })
+], ElectricBox.prototype, "mintraveltime", void 0);
+__decorate([
+    property({ type: Number })
+], ElectricBox.prototype, "maxtraveltime", void 0);
+__decorate([
+    property({ type: Number })
+], ElectricBox.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean })
+], ElectricBox.prototype, "heroView", void 0);
+__decorate([
+    property()
+], ElectricBox.prototype, "color", void 0);
+ElectricBox = __decorate([
+    customElement("pb33f-electric-box")
+], ElectricBox);
+export { ElectricBox };

package/dist/components/logo-wall/logo-wall.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/logo-wall/logo-wall.css.js

@@ -0,0 +1,57 @@
+import { css } from "lit";
+export default css `
+    
+    h2 {
+        color: var(--secondary-color);
+        text-align: center;
+        text-shadow: 0 0 20px var(--secondary-color);
+    }
+    
+    .logo-container {
+        width: calc(100% - 200px);
+        height: calc(100% - 12px);
+        margin-left: 100px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        justify-content: space-evenly;
+    }
+
+    .logo {
+        width: 200px;
+        padding: 0 40px 0 40px;
+    }
+    
+    svg {
+        overflow: visible;
+        transition: filter 300ms ease-in-out;
+       
+    }
+
+    svg:hover {
+        animation: pulse-glow 300ms infinite alternate;
+        filter: drop-shadow(0 0 20px var(--primary-color));
+    }
+
+    @keyframes pulse-glow {
+        0% {
+            filter: drop-shadow(0 0 10px var(--primary-color));
+        }
+        100% {
+            filter: drop-shadow(0 0 10px var(--primary-color-lowalpha));
+        }
+    }
+    
+    @media only screen and (max-width: 1280px) {
+        .logo {
+            width: 120px;
+        }
+
+        .logo-container {
+            width: calc(100% - 50px);
+            margin-left: 25px;
+        }
+    }
+    
+`;