[nextgen] working prototype

This commit is contained in:
bignutty 2025-02-11 21:19:57 +01:00
parent 043c65a36c
commit c2630da9e2
2 changed files with 76 additions and 33 deletions

View file

@ -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));
}
}

View file

@ -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);