@pb33f/cowboy-components 0.7.6 → 0.7.7

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

@@ -7,6 +7,7 @@ export declare class LoginButton extends LitElement {
     title: string;
     buttonLabel: string;
     redirectUrl: string;
+    textLink: boolean;
     oauthLogin: OAuthLogin;
     private controller;
     constructor();

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

@@ -12,6 +12,7 @@ import modalCss from "../../css/modal.css";
 import loginButtonCss from "./login-button.css";
 import tooltipCss from "../../css/tooltip.css";
 import { LogoutRequested } from "../../events/doctor";
+import linksCss from "../../css/links.css";
 let LoginButton = class LoginButton extends LitElement {
     constructor() {
         super();
@@ -19,6 +20,7 @@ let LoginButton = class LoginButton extends LitElement {
         this.title = 'authenticate';
         this.buttonLabel = 'Authenticate';
         this.redirectUrl = '';
+        this.textLink = false;
     }
     updated() {
         if (this.oauthLogin) {
@@ -33,11 +35,15 @@ let LoginButton = class LoginButton extends LitElement {
         return out;
     }
     anonView() {
+        let action = html ` <sl-button @click="${this.openAuthModal}">
+            <sl-icon name="key" slot="prefix" style="font-size: 1rem"></sl-icon>
+            ${this.buttonLabel}
+        </sl-button>`;
+        if (this.textLink) {
+            action = html `<a href="#" @click="${this.openAuthModal}"><strong>${this.buttonLabel}</strong></a>`;
+        }
         return html `
-            <sl-button @click="${this.openAuthModal}">
-                <sl-icon name="key" slot="prefix" style="font-size: 1rem"></sl-icon>
-                ${this.buttonLabel}
-            </sl-button>
+            ${action}
             <sl-dialog id="auth-dialog" style="--width: 600px" no-header>
                 <div style="padding-top: 20px;">
                     <pb33f-oauth-login title="${this.title}"></pb33f-oauth-login>
@@ -84,7 +90,7 @@ let LoginButton = class LoginButton extends LitElement {
         this.authDialog.show();
     }
 };
-LoginButton.styles = [tooltipCss, buttonCss, modalCss, loginButtonCss];
+LoginButton.styles = [tooltipCss, buttonCss, modalCss, loginButtonCss, linksCss];
 __decorate([
     query('#auth-dialog')
 ], LoginButton.prototype, "authDialog", void 0);
@@ -97,6 +103,9 @@ __decorate([
 __decorate([
     property()
 ], LoginButton.prototype, "redirectUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], LoginButton.prototype, "textLink", void 0);
 __decorate([
     query('pb33f-oauth-login')
 ], LoginButton.prototype, "oauthLogin", void 0);

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

@@ -1,9 +1,10 @@
 import { LitElement } from "lit";
+import { AuthController } from "../../controllers/auth-controller";
 export declare class LoginPanel extends LitElement {
     static styles: import("lit").CSSResult[];
     title: string;
     redirect: string;
-    private controller;
+    controller: AuthController;
     constructor();
     willUpdate(): void;
     render(): import("lit-html").TemplateResult<1> | undefined;

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

@@ -6,12 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { AuthController } from "../../controllers/auth-controller";
 import loginButtonCss from "./login-button.css";
 let LoginPanel = class LoginPanel extends LitElement {
     constructor() {
         super();
-        this.controller = new AuthController(this);
         this.title = 'authenticate';
         this.redirect = '/';
     }
@@ -40,6 +38,9 @@ __decorate([
 __decorate([
     property()
 ], LoginPanel.prototype, "redirect", void 0);
+__decorate([
+    property()
+], LoginPanel.prototype, "controller", void 0);
 LoginPanel = __decorate([
     customElement('pb33f-login-panel')
 ], LoginPanel);

package/dist/components/paginator/paginator.css.js

@@ -25,7 +25,7 @@ export default css `
     
     .no-values {
         height: 600px;
-        width: 500px;
+        width: 70%;
         margin: 0 auto;
         padding-top: 50px;
         text-align: center;

package/dist/components/paginator/paginator.d.ts

@@ -21,5 +21,7 @@ export declare class Paginator extends LitElement {
     previousPage(event: CustomEvent): void;
     calcTotalPages(): number;
     protected willUpdate(): void;
+    startSparks(): void;
+    stopSparks(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/paginator/paginator.js

@@ -83,15 +83,15 @@ let Paginator = class Paginator extends LitElement {
         }
         this.renderValues = this.values?.slice(this.paginatorNavigator.getRangeStart(), this.paginatorNavigator.getRangeEnd());
     }
+    startSparks() {
+        this.sparks.startAnimation();
+    }
+    stopSparks() {
+        this.sparks.stopAnimation();
+    }
     render() {
         this.sparks.isError = this.invalid;
-        if (this.sparks.animating) {
-            this.sparks.stopAnimation();
-        }
         if (this.renderValues?.length === 0 || !this.renderValues) {
-            if (!this.sparks.animating) {
-                this.sparks.startAnimation();
-            }
             if (!this.hideSparks) {
                 return html `
                     <div class="no-values ${this.invalid ? 'error' : ''}" style="position: relative">

package/dist/components/problems-overview/problems-overview.js

@@ -73,6 +73,12 @@ let ProblemsOverview = class ProblemsOverview extends LitElement {
         this.problemOverviewGroups = this.buildProblemOverviewGroups(value);
         this.paginator.values = this.problemOverviewGroups;
         this.paginator.itemsPerPage = 10;
+        if (this.problemList.length <= 0) {
+            this.paginator.startSparks();
+        }
+        else {
+            this.paginator.stopSparks();
+        }
     }
     render() {
         if (this.unavailable) {

package/dist/components/the-doctor/sparks.d.ts

@@ -6,6 +6,7 @@ export declare class PixelSparks extends LitElement {
     private ctx;
     private canvas;
     private animationTimer;
+    private animationFrameId;
     isError: boolean;
     animating: boolean;
     static styles: import("lit").CSSResult;

package/dist/components/the-doctor/sparks.js

@@ -9,9 +9,10 @@ import { css, html, LitElement } from "lit";
 let PixelSparks = class PixelSparks extends LitElement {
     constructor() {
         super();
+        this.animationFrameId = null;
         this.sparkArray = [];
-        this.gravity = 0.0001;
-        this.spawnRate = 70;
+        this.gravity = 0.005;
+        this.spawnRate = 50;
         this.isError = false;
         this.animating = false;
     }
@@ -26,39 +27,52 @@ let PixelSparks = class PixelSparks extends LitElement {
         }
     }
     startAnimation() {
+        // Only start if not already animating
         if (!this.animating) {
             this.animationTimer = setInterval(() => this.spawnSpark(), 1000 / this.spawnRate);
-            this.animateSparks();
             this.animating = true;
+            this.animateSparks();
         }
     }
     stopAnimation() {
-        if (this.animating) {
-            clearInterval(this.animationTimer);
-            this.animating = false;
+        this.animating = false;
+        clearInterval(this.animationTimer);
+        // Cancel any pending animation frame
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+        this.sparkArray = [];
+        // Clear the canvas one last time
+        if (this.ctx && this.canvas) {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         }
     }
     getRandomBetween(min, max) {
         return Math.random() * (max - min) + min;
     }
     spawnSpark() {
-        let color = Math.random() > 0.5 ? 'rgb(248, 58, 255)' : 'rgb(98, 196, 255)';
-        if (this.isError) {
-            // create a color between
-            color = Math.random() > 0.5 ? 'rgb(255, 60, 116)' : 'rgb(157, 26, 65)';
+        if (this.animating) {
+            let color = Math.random() > 0.5 ? 'rgb(248, 58, 255)' : 'rgb(98, 196, 255)';
+            if (this.isError) {
+                // create a color between
+                color = Math.random() > 0.5 ? 'rgb(255, 60, 116)' : 'rgb(157, 26, 65)';
+            }
+            this.sparkArray.push({
+                x: Math.random() * this.canvas.width,
+                y: -2,
+                size: 1,
+                color: color,
+                velocityY: this.getRandomBetween(0.05, 0.3),
+                lifetime: 150,
+                initialLifetime: 150,
+                opacity: 1
+            });
         }
-        this.sparkArray.push({
-            x: Math.random() * this.canvas.width,
-            y: -2,
-            size: 1,
-            color: color,
-            velocityY: this.getRandomBetween(0.05, 0.3),
-            lifetime: 300,
-            initialLifetime: 300,
-            opacity: 1
-        });
     }
     animateSparks() {
+        if (!this.animating)
+            return;
         this.ctx?.clearRect(0, 0, this.canvas?.width, this.canvas?.height);
         this.sparkArray = this.sparkArray.filter(spark => spark.lifetime > 0);
         for (let spark of this.sparkArray) {
@@ -68,7 +82,8 @@ let PixelSparks = class PixelSparks extends LitElement {
             spark.lifetime--;
             spark.opacity = spark.lifetime / spark.initialLifetime;
         }
-        requestAnimationFrame(() => this.animateSparks());
+        // Store the ID so we can cancel it later
+        this.animationFrameId = requestAnimationFrame(() => this.animateSparks());
     }
     drawSpark(spark) {
         this.ctx.globalAlpha = spark.opacity; // Set transparency level

package/dist/components/the-doctor/status-bar.css.js

@@ -4,14 +4,14 @@ export default css `
         position: absolute;
         bottom: 8px;
         left: 0;
-        width: 100%;
-        height: 20px;
+        width: calc(100% - 6px);
+        height: 22px;
         background: var(--background-color);
-        border: 1px dashed var(--secondary-color);
+        border-top: 1px dashed var(--secondary-color);
         z-index: 100;
         border-bottom: none;
-        font-size: 0.8rem;
-        padding: 4px 0 0 5px;
+        font-size: 0.9rem;
+        padding: 4px 0 2px 5px;
         vertical-align: middle;
         
     }
@@ -27,18 +27,20 @@ export default css `
     }
     
     .error-icon {
-        color: var(--error-color);
+        color: var(--font-color);
         vertical-align: middle;
     }
     
     .warning {
-        border: 1px dashed var(--warn-color);
+        border-top: 1px dashed var(--warn-color);
         border-bottom: none;
     }
     
     .error {
-        border: 1px dashed var(--error-color);
+        border-top: 1px solid var(--error-color);
+        background-color: var(--error-color-dimmed);
         border-bottom: none;
+        color: var(--font-color)
     }
     
     strong {

package/dist/components/the-doctor/status-bar.d.ts

@@ -4,9 +4,11 @@ export declare class StatusBar extends LitElement {
     static styles: import("lit").CSSResult[];
     visible: boolean;
     callsRemaining: number;
+    authenticated: boolean;
     dialog: SlDialog;
     constructor();
     openDialog(): void;
     closeDialog(): void;
+    authenticate(): void;
     render(): import("lit-html").TemplateResult<1> | undefined;
 }

package/dist/components/the-doctor/status-bar.js

@@ -9,11 +9,14 @@ import { html, LitElement } from "lit";
 import buttonCss from "../../css/button.css.js";
 import statusBarCss from "./status-bar.css.js";
 import linksCss from "../../css/links.css.js";
+import dialogCss from "../../css/dialog.css";
+import { OpenAuthentication } from "../../events/doctor";
 let StatusBar = class StatusBar extends LitElement {
     constructor() {
         super();
         this.visible = false;
         this.callsRemaining = 0;
+        this.authenticated = false;
     }
     openDialog() {
         this.dialog.show();
@@ -21,6 +24,11 @@ let StatusBar = class StatusBar extends LitElement {
     closeDialog() {
         this.dialog.hide();
     }
+    authenticate() {
+        this.dispatchEvent(new Event(OpenAuthentication, {
+            bubbles: true
+        }));
+    }
     render() {
         if (this.visible) {
             let clazz = '';
@@ -41,28 +49,30 @@ let StatusBar = class StatusBar extends LitElement {
             }
             return html `
                 <div class="status-bar ${clazz}">
-                    <sl-dialog label="Credit upgrade coming soon!" class="dialog-overview">
-                        <p>To get more credit for the doctor, you will need to create an account. This feature is coming soon.</p>
-                        <p>
-                            In the meantime please wait 24 hours for your credit to be reset.
+                    <sl-dialog label="Purchase Credit" class="dialog-overview">
+                        <p>Still working on this, coming soon!
                         </p>
                         <sl-button slot="footer" variant="primary" @click="${this.closeDialog}">Close</sl-button>
                     </sl-dialog>
                     <sl-icon name="${icon}" class="${clazzIcon}"></sl-icon>
-                    <span class="status-text">Credits remaining: <strong>${this.callsRemaining}</strong></span> | 
-                    <span class="action-text">${actionText}</span>
-                    ${this.callsRemaining <= 0 ? html ` | <a href="#" @click="${this.openDialog}"><strong>Get more credit</strong></a>` : ''}
+                    <span class="status-text"><strong>Credits remaining: ${this.callsRemaining}</strong></span> | 
+                    <span class="action-text"><strong>${actionText}</strong></span>
+                    ${this.callsRemaining <= 0 && !this.authenticated ? html `| <pb33f-login-button title="Get More Credit" buttonLabel="Authenticate for more credit" textLink></pb33f-login-button>` : ''}
+                    ${this.callsRemaining <= 0 && this.authenticated ? html `| <a href="#" @click="${this.openDialog}"><strong>Purchase Credit</strong></a>` : ''}
                 </div>`;
         }
     }
 };
-StatusBar.styles = [statusBarCss, linksCss, buttonCss];
+StatusBar.styles = [statusBarCss, linksCss, buttonCss, dialogCss];
 __decorate([
     property({ type: Boolean })
 ], StatusBar.prototype, "visible", void 0);
 __decorate([
     property({ type: Number })
 ], StatusBar.prototype, "callsRemaining", void 0);
+__decorate([
+    property({ type: Boolean })
+], StatusBar.prototype, "authenticated", void 0);
 __decorate([
     query('sl-dialog')
 ], StatusBar.prototype, "dialog", void 0);

package/dist/components/the-doctor/the-doctor.d.ts

@@ -222,6 +222,7 @@ export declare class TheDoctor extends LitElement {
     updateExplorerDivider(): void;
     updateRolodexDivider(): void;
     updateRefmapBag(currentPath: string | undefined, result: Reference[]): void;
+    creditEmpty(e: CustomEvent): void;
     platformUnavailable(error: PlatformError | null): void;
     builtInRulesetSelected(): void;
     runDiagnostics(): void;

package/dist/components/the-doctor/the-doctor.js

@@ -16,7 +16,7 @@ import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { SpecEditor } from "../editor/editor.js";
-import { ActiveView, AddToast, ArchiveURLRequested, BuiltInRulesetChanged, CustomRulesetEnabled, DocumentReferenceClicked, EditorClicked, EditorUpdated, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerNodeClicked, ExportRuleset, LoadRenderedNodeIntoInspector, ModelTreeNodeClicked, NodeReferenceClicked, NukeWorkspaceEvent, OpenProblemDrawer, OpenSettings, ProblemClicked, RolodexRootFileSelected, RolodexTreeNodeClicked, RuleClicked, RulesetSaved, RuleViolationClicked, StartSessionFailed, } from "../../events/doctor.js";
+import { ActiveView, AddToast, ArchiveURLRequested, BuiltInRulesetChanged, CreditEmpty, CustomRulesetEnabled, DocumentReferenceClicked, EditorClicked, EditorUpdated, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerNodeClicked, ExportRuleset, LoadRenderedNodeIntoInspector, ModelTreeNodeClicked, NodeReferenceClicked, NukeWorkspaceEvent, OpenProblemDrawer, OpenSettings, ProblemClicked, RolodexRootFileSelected, RolodexTreeNodeClicked, RuleClicked, RulesetSaved, RuleViolationClicked, StartSessionFailed, } from "../../events/doctor.js";
 import { ProblemDetailsDrawer } from "../problem-list/details-drawer.js";
 import { CreateBagManager } from "@pb33f/saddlebag";
 import { LintingService } from "../../services/linting-service.js";
@@ -248,6 +248,8 @@ let TheDoctor = class TheDoctor extends LitElement {
         // @ts-ignore
         this.authController.addEventListener(StartSessionFailed, this.platformUnavailable.bind(this));
         this.timeVortex.historyPicker.addEventListener(OpenSettings, this.openSettings.bind(this));
+        // @ts-ignore
+        this.authController.addEventListener(CreditEmpty, this.creditEmpty.bind(this));
         //@ts-ignore
         this.addEventListener(LoadRenderedNodeIntoInspector, this.loadRenderedNodeIntoInspector.bind(this));
         // hijack navigation buttons.
@@ -398,6 +400,9 @@ let TheDoctor = class TheDoctor extends LitElement {
         }
         this.referenceMapBag?.set(ReferenceMapBag, refMap);
     }
+    creditEmpty(e) {
+        this.platformUnavailable(e.detail.error);
+    }
     platformUnavailable(error) {
         if (!this.unavailable) {
             this.loadingOverlay?.hide();
@@ -436,6 +441,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.diagnosticController.lintSpec('', urlParam);
             return;
         }
+        // todo: this needs work man. I want to see all these settimeouts gone brother.
         setTimeout(() => {
             // check for a history
             this.timeVortex.doctor = this;
@@ -694,6 +700,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             ${modelTree}
         `;
         if (this.authController.state && this.authController.state.authenticated) {
+            this.statusBar.authenticated = true;
         }
         return html `
             ${this.uploadArchive}

package/dist/controllers/auth-controller.d.ts

@@ -19,7 +19,7 @@ export declare class AuthController extends EventTarget {
     private startSession;
     associateBroker(brokerId: string): Promise<boolean>;
     authGithub(e: CustomEvent<AuthenticationMeta>): void;
-    logout(e: CustomEvent<AuthenticationMeta>): void;
+    logout(): void;
     private notifyStateChange;
     checkState(): Promise<AuthenticationState>;
 }

package/dist/controllers/auth-controller.js

@@ -1,4 +1,4 @@
-import { AuthenticationGithubRequested, AuthenticationStateChange, LogoutRequested, NukeWorkspaceEvent, StartSessionFailed } from "../events/doctor.js";
+import { AuthenticationGithubRequested, AuthenticationStateChange, CreditEmpty, LogoutRequested, NukeWorkspaceEvent, StartSessionFailed } from "../events/doctor.js";
 import { AuthService } from "../services/auth-service.js";
 import { HeaderService } from "../services/header-service";
 export class AuthController extends EventTarget {
@@ -56,8 +56,19 @@ export class AuthController extends EventTarget {
                         this.sessionCallback.call(this.hosts[this.callbackIdx], session);
                         this.hosts[this.callbackIdx].requestUpdate();
                     }
-                }).catch((err) => {
-                    console.error("something went wrong with starting session", err);
+                }).catch((e) => {
+                    // determine if this is an API failure, or a credit issue.
+                    if (e.instance == 'https://pb33f.io/errors/no-credit-remaining') {
+                        this.dispatchEvent(new CustomEvent(CreditEmpty, {
+                            bubbles: true,
+                            composed: true,
+                            detail: {
+                                error: e
+                            }
+                        }));
+                        return;
+                    }
+                    console.error("something went wrong with starting session", e);
                     this.dispatchEvent(new Event(StartSessionFailed));
                 });
             };
@@ -89,7 +100,7 @@ export class AuthController extends EventTarget {
                 });
                 const session = await sessionJSON.json();
                 if (session.type && session.title && session.status) {
-                    reject();
+                    reject(session);
                 }
                 resolve(session);
             }
@@ -125,17 +136,17 @@ export class AuthController extends EventTarget {
             window.location.href = this.doctorEndpoint + '/auth/github/start';
         }
     }
-    logout(e) {
+    logout() {
         AuthService.logout().then(() => {
-            if (e.detail.redirectURL != '') {
-                this.dispatchEvent(new CustomEvent(NukeWorkspaceEvent, {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        resetFiles: false
-                    }
-                }));
-            }
+            //if (e.detail.redirectURL != '') {
+            this.dispatchEvent(new CustomEvent(NukeWorkspaceEvent, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    resetFiles: true
+                }
+            }));
+            // }
         });
     }
     notifyStateChange(state) {

package/dist/controllers/docs-controller.js

@@ -8,6 +8,7 @@ export class DocsController extends EventTarget {
         this.doc = doc;
     }
     fetchDocs() {
+        //return;
         this.doc.activitySpinner.show();
         const url = new URL(window.location.href);
         const urlParam = url.searchParams.get('url');