From c2630da9e2104ad6c92f5191a2c6cc7b1671b3a9 Mon Sep 17 00:00:00 2001 From: bignutty <3515180-bignutty@users.noreply.gitlab.com> Date: Tue, 11 Feb 2025 21:19:57 +0100 Subject: [PATCH] [nextgen] working prototype --- commands/message/dev/test.js | 23 +++++-- labscore/cardstack/DynamicCardStack.js | 86 +++++++++++++++++--------- 2 files changed, 76 insertions(+), 33 deletions(-) diff --git a/commands/message/dev/test.js b/commands/message/dev/test.js index 05b0bd9..03cc7f7 100644 --- a/commands/message/dev/test.js +++ b/commands/message/dev/test.js @@ -26,6 +26,16 @@ module.exports = { createEmbed("default", context, { description: "page 2. this has a conditional button."}) ].map((p, index)=>page(p, {}, { key: `t_${index}` })), interactive: { + always_active_button: { + label: "single sub page", + inline: true, + visible: true, + resolvePage: ()=>{ + return [ + createEmbed("success", context, "smiley") + ].map((p)=>page(p)) + } + }, conditional_button: { // Button Label label: "Conditional", @@ -36,9 +46,10 @@ module.exports = { console.log(page.getState("t_1")); return (page.getState("key") === "t_1") }, - resolvePage: (page) => { + resolvePage: (pg) => { return [ - createEmbed("default", context, { description: "this is a conditional sub page"}) + createEmbed("default", context, { description: "this is a conditional sub page"}), + createEmbed("default", context, { description: "this is a conditional sub page two"}) ].map((p)=>page(p)); } }, @@ -56,9 +67,13 @@ module.exports = { description: "-# Subpage Loading :)", }) }, - resolvePage: (page) => { + resolvePage: async (pg) => { + console.log("resolving page") return [ - createEmbed("default", context, { description: "this is a conditional sub page"}) + createEmbed("default", context, { description: "this is a dynamic sub page " + Math.random()}), + createEmbed("default", context, { description: "this is a dynamic sub page " + Math.random()}), + createEmbed("default", context, { description: "this is a dynamic sub page " + Math.random()}), + createEmbed("default", context, { description: "this is a dynamic sub page " + Math.random()}) ].map((p)=>page(p)); } } diff --git a/labscore/cardstack/DynamicCardStack.js b/labscore/cardstack/DynamicCardStack.js index fccdd58..0b5d218 100644 --- a/labscore/cardstack/DynamicCardStack.js +++ b/labscore/cardstack/DynamicCardStack.js @@ -42,10 +42,12 @@ class DynamicCardStack { this.buttons = options.buttons || ["previous","next"] this.interactive_components = options.interactive || {}; this.index = options.startingIndex || 0; + this.rootIndex = this.index; this.loopPages = options.loop || true; this.pageState = []; this.subcategoryState = SUBCATEGORY_STATE_TYPES.SINGLE_PAGE; + this.currentSelectedSubcategory = null; console.log("now spawning") this._spawn(); @@ -86,7 +88,7 @@ class DynamicCardStack { try{ this._createDynamicCardStack(this.context.client); - this.activeCardStack = Object.assign([], this.cards); + this.activeCardStack = [...this.cards]; // Resolve page state before let i = 0; @@ -99,18 +101,18 @@ class DynamicCardStack { } // Create internal component listener - const listener = new Components({ + this.listener = new Components({ timeout: this.expires, run: this._handleInteraction.bind(this), + onError: (e)=>{ + console.log(e) + } }) - //listener.components = this._renderComponents(); - - this._renderInitialComponents(listener) return this._edit({ ...this.getCurrentCard(), - components: listener + components: this.listener }, true); }catch(e){ console.log(e) @@ -127,6 +129,7 @@ class DynamicCardStack { if(this.loopPages) this.index = 0; } + if(this.currentSelectedSubcategory == null) this.rootIndex = this.index; console.log("new index: " + this.index) return Object.assign(this.getPageByIndex(this.index), { components: this._renderComponents() }); } @@ -137,6 +140,8 @@ class DynamicCardStack { if(this.loopPages) this.index = this.activeCardStack.length - 1; else this.index = 0; } + + if(this.currentSelectedSubcategory == null) this.rootIndex = this.index; return Object.assign(this.getPageByIndex(this.index), { components: this._renderComponents() }); } @@ -148,12 +153,12 @@ class DynamicCardStack { * Edits the cardstack message. * Automatically applies and rerenders components. * @param {Message} cardContent Card Content - * @param {boolean} customComponents Don't use - Meant for _spawn() */ - async _edit(cardContent, customComponents = false){ + async _edit(cardContent){ let message = Object.assign({}, cardContent); - if(!customComponents) message.components = this._renderComponents(); + this.listener.components = this._renderComponents(); + message.components = this.listener; if(message["_meta"]) delete message["_meta"]; @@ -187,40 +192,30 @@ class DynamicCardStack { * @param {String} key */ getState(key){ - if(!this.pageState[this.getPageIndex()]) return null; - return this.pageState[this.getPageIndex()][key]; + if(!this.pageState[this.rootIndex]) return null; + return this.pageState[this.rootIndex][key]; } getAllState(){ return this.pageState; } - /** - * Component Helper - * @param {Components} listener - */ - _renderInitialComponents(listener){ - // First Row always starts with built-in components - listener.components = this._renderComponents(); - - console.log(listener) - console.log(JSON.stringify(listener)) - } - /** * Renders components and button states */ - _renderComponents(){ + _renderComponents(disabled = false){ let nComponents = new ComponentActionRow({}) let nComponentsSecondary = new ComponentActionRow({}) // First Row always starts with built-in components for(const b of this.buttons){ + console.log("len: " + this.activeCardStack.length) + console.log(this.activeCardStack) let btn = { type: MessageComponentTypes.BUTTON, customId: b, style: 2, - disabled: (this.subcategoryState !== SUBCATEGORY_STATE_TYPES.SINGLE_PAGE), + disabled: this.activeCardStack.length === 1 || disabled || (this.subcategoryState !== SUBCATEGORY_STATE_TYPES.SINGLE_PAGE), emoji: iconAsEmojiObject(DEFAULT_BUTTON_ICON_MAPPINGS[b]) } @@ -238,7 +233,8 @@ class DynamicCardStack { let component = { type: MessageComponentTypes.BUTTON, customId: b, - style: button.style || 2 + style: button.style || 2, + disabled: disabled } if(button.label){ @@ -288,18 +284,50 @@ class DynamicCardStack { // interactive buttons if(this.interactive_components[ctx.data.customId]){ - if(this.currentSelectedSubcategory === ctx.data.customId) this.currentSelectedSubcategory = null; + if(this.currentSelectedSubcategory === ctx.data.customId){ + console.log("restoring state") + this.activeCardStack = [...this.cards]; + this.index = this.rootIndex; + this.currentSelectedSubcategory = null; + + return await ctx.respond({ + type: InteractionCallbackTypes.UPDATE_MESSAGE, + data: Object.assign(this.currentPage(), { components: this._renderComponents(false)}) + }) + } else this.currentSelectedSubcategory = ctx.data.customId; + this.cachedIndex = this.index; + let processingEmbed = page(createEmbed("default", ctx, { "description": "looading..." })) if(this.interactive_components[ctx.data.customId].renderLoadingState) processingEmbed = page(this.interactive_components[ctx.data.customId].renderLoadingState(this)); - return ctx.respond({ + await ctx.respond({ type: InteractionCallbackTypes.UPDATE_MESSAGE, - data: Object.assign(processingEmbed, { components: this._renderComponents()}) + data: Object.assign(processingEmbed, { components: this._renderComponents(true)}) }) + + console.log("resolve trigger") + try{ + this.activeCardStack = await this.interactive_components[ctx.data.customId].resolvePage(this); + } catch(e){ + console.log("resolve failed:") + console.log(e) + } + console.log("resolve post") + // TODO: allow overriding index + this.index = 0; + + console.log("stack resolved") + + setTimeout(()=>{ + console.log(this.activeCardStack) + return this._edit(Object.assign(this.currentPage(), {components:this.listener}), true) + }, 1500) + + return; } console.error("Unknown button was triggered on stack: " + ctx.data.customId);