feat: show Copy Scarabs button for Fragments stash tab

shonya3 · Aug 10, 2024 · ce51b47 · ce51b47
1 parent df3b926
commit ce51b47
Show file tree

Hide file tree

Showing 3 changed files with 3,617 additions and 19 deletions.
diff --git a/packages/wc/src/wc/stashes/e-stash-tab-container.stories.ts b/packages/wc/src/wc/stashes/e-stash-tab-container.stories.ts
@@ -2,7 +2,9 @@ import { Meta } from '@storybook/web-components';
 import './e-stash-tab-container';
 import { html } from 'lit';
 import { StashTabContainerElement } from './e-stash-tab-container';
-import stash from './json/QuadStashStd.json';
+import quadStash from './json/QuadStashStd.json';
+import fragmentsTab from './json/fragmentsTab.json';
+import { NoItemsTab, TabWithItems } from 'poe-custom-elements/types.js';
 
 export default {
 	title: 'Elements/stashes/e-stash-tab-container',
@@ -21,9 +23,29 @@ const noItemsTab = {
 export const Default = {
 	render() {
 		return html`<e-stash-tab-container
-			.badge=${noItemsTab}
+			.badge=${noItemsTab as NoItemsTab}
 			status="complete"
-			.tab=${stash}
+			.tab=${quadStash as TabWithItems}
+		></e-stash-tab-container>`;
+	},
+};
+
+export const Fragments = {
+	render() {
+		const badge: NoItemsTab = {
+			id: '',
+			index: 0,
+			metadata: {
+				colour: 'ff',
+			},
+			name: 'F',
+			type: 'FragmentStash',
+		};
+
+		return html`<e-stash-tab-container
+			.badge=${badge}
+			status="complete"
+			.tab=${fragmentsTab as TabWithItems}
 		></e-stash-tab-container>`;
 	},
 };
diff --git a/packages/wc/src/wc/stashes/e-stash-tab-container.ts b/packages/wc/src/wc/stashes/e-stash-tab-container.ts
@@ -5,10 +5,12 @@ import '@shoelace-style/shoelace/dist/components/button/button.js';
 import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
 import '@shoelace-style/shoelace/dist/components/copy-button/copy-button.js';
 import { TabBadgeElement } from './tab-badge';
+import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 
 import { LitElement, html, css, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { NoItemsTab, TabWithItems } from 'poe-custom-elements/types.js';
+import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.js';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -28,36 +30,66 @@ export class StashTabContainerElement extends LitElement {
 	@property() status: 'pending' | 'complete' = 'pending';
 	@property({ type: Object }) badge: NoItemsTab | null = null;
 
+	@query('sl-alert') scarabsSuccessAlert!: SlAlert;
+
 	constructor() {
 		super();
 		TabBadgeElement.define();
 	}
 
 	protected render(): TemplateResult {
 		return html`<header class="header">
-				<div class="badge-and-copy">
-					${this.badge ? html`<wc-tab-badge as="button" .tab=${this.badge}></wc-tab-badge>` : null}
-					${this.tab
-						? html`<sl-copy-button
-								.value=${JSON.stringify(this.tab, null, 4)}
-								.copyLabel=${`Click to copy JSON of the tab`}
-								.successLabel=${`You copied JSON of the tab`}
-								.errorLabel=${`Whoops, your browser doesn't support this!`}
-						  ></sl-copy-button>`
+				<div class="header-main">
+					<div class="badge-and-copy">
+						${this.badge ? html`<wc-tab-badge as="button" .tab=${this.badge}></wc-tab-badge>` : null}
+						${this.tab
+							? html`<sl-copy-button
+									.value=${JSON.stringify(this.tab, null, 4)}
+									.copyLabel=${`Click to copy JSON of the tab`}
+									.successLabel=${`You copied JSON of the tab`}
+									.errorLabel=${`Whoops, your browser doesn't support this!`}
+							  ></sl-copy-button>`
+							: null}
+					</div>
+					${this.status === 'complete' && this.tab
+						? this.tab.type === 'FragmentStash'
+							? html`<div>
+									<sl-button @click=${this.#onExtractScarabs}>Copy Scarabs</sl-button>
+							  </div>`
+							: html`<sl-button @click=${this.#emitExtractCards}>Extract cards sample</sl-button>`
 						: null}
+					<sl-icon-button name="x-lg" @click=${this.#emitClose} class="btn-close">X</sl-icon-button>
+				</div>
+				<div class="alerts">
+					<sl-alert variant="success" duration="2000" closable>
+						<sl-icon slot="icon" name="info-circle"></sl-icon>
+						Scarabs copied to your cliboard!
+					</sl-alert>
 				</div>
-				${this.status === 'complete'
-					? html`<sl-button @click=${this.#emitExtractCards}>Extract cards sample</sl-button>`
-					: null}
-				<sl-icon-button name="x-lg" @click=${this.#emitClose} class="btn-close">X</sl-icon-button>
 			</header>
 			<div class="tab-box">
 				${this.tab && this.status === 'complete'
 					? html`<poe-stash-tab .tab=${this.tab}></poe-stash-tab>`
 					: html`<sl-spinner></sl-spinner>`}
-			</div>`;
+			</div> `;
 	}
 
+	#onExtractScarabs() {
+		if (!this.tab) {
+			console.error('Cannot extract scarabs because there is no tab data');
+			return;
+		}
+		const s = this.tab.items
+			.filter(item => item.baseType.includes('Scarab'))
+			.sort((a, b) => (b.stackSize ?? 0) - (a.stackSize ?? 0))
+			.map(scarab => {
+				return `${scarab.baseType},${scarab.stackSize}`;
+			})
+			.join('\n');
+		navigator.clipboard.writeText(s).then(() => {
+			this.scarabsSuccessAlert.show();
+		});
+	}
 	#emitExtractCards() {
 		this.dispatchEvent(new Event('extract-cards'));
 	}
@@ -88,7 +120,7 @@ export class StashTabContainerElement extends LitElement {
 			justify-content: center;
 		}
 
-		.header {
+		.header-main {
 			padding: 1rem;
 			display: flex;
 			background-color: var(--sl-color-gray-50);