[nextgen] mostly implemented

This commit is contained in:
bignutty 2025-02-11 23:50:53 +01:00
parent 4e62cecf0f
commit f226d7170a
12 changed files with 194 additions and 50 deletions

View file

@ -5,6 +5,7 @@ const { MessageComponentTypes, InteractionCallbackTypes } = require("detritus-cl
const { Message } = require("detritus-client/lib/structures");
const { ComponentContext, Components, ComponentActionRow} = require("detritus-client/lib/utils");
const {createEmbed, page} = require("#utils/embed");
const {STATIC_ASSETS} = require("#utils/statics");
const activeStacks = new Map();
@ -19,6 +20,10 @@ const SUBCATEGORY_STATE_TYPES = Object.freeze({
MULTI_PAGE: 2,
});
const STACK_CACHE_KEYS = Object.freeze({
RESULT_CARDS: 0
})
/**
* DynamicCardStack represents an interactive stacks
* of cards (embeds) for the user to paginate through
@ -35,6 +40,7 @@ class DynamicCardStack {
* @param {Number} options.startingIndex Starting card index
* @param {boolean} options.loop Wrap paging
* @param {number} options.expires CardStack timeout
* @param {boolean} options.disableStackCache Allows disabling the stack result cache, meaning that every trigger will reevaluate a stack
*/
constructor(context, options){
this.context = context;
@ -49,10 +55,14 @@ class DynamicCardStack {
this.uniqueId = (Date.now()*Math.random()).toString(36);
this.stackCache = {};
this.pageState = [];
this.subcategoryState = SUBCATEGORY_STATE_TYPES.SINGLE_PAGE;
this.currentSelectedSubcategory = null;
this.lastInteraction = Date.now();
this.spawned = 0;
console.log("now spawning " + this.uniqueId)
this._spawn();
}
@ -64,6 +74,7 @@ class DynamicCardStack {
console.log("killing " + this.uniqueId)
clearTimeout(this.timeout);
this.listener.clear();
if(clearComponents) await this._edit(this.currentPage(), [])
// Remove reference to free the cardstack for GC
@ -89,6 +100,23 @@ class DynamicCardStack {
activeStacks.set(this.context.message?.id, this);
}
_createTimeout(){
return setTimeout(()=>{
/*
// This currently isn't doable with our Components listener.
if(this.spawned - this.lastInteraction <= this.expires){
clearTimeout(this.timeout)
this.spawned = Date.now();
// New expiry time is 30 seconds
this.expires = 30*1000;
this.timeout = this._createTimeout();
} else {
this.kill(true);
}*/
this.kill(true);
}, this.expires)
}
/**
* Creates a new cardstack in the given channel
*/
@ -116,10 +144,9 @@ class DynamicCardStack {
}
})
this.timeout = setTimeout(()=>{
console.log(this.uniqueId + " timed out.")
this.kill(true);
}, this.expires)
this.timeout = this._createTimeout()
this.spawned = Date.now()
return this._edit({
...this.getCurrentCard(),
@ -221,7 +248,7 @@ class DynamicCardStack {
*/
_renderComponents(disabled = false){
let nComponents = new ComponentActionRow({})
let nComponentsSecondary = new ComponentActionRow({})
let nComponentsSecondary = [new ComponentActionRow({})]
// First Row always starts with built-in components
for(const b of this.buttons){
@ -251,7 +278,7 @@ class DynamicCardStack {
disabled: disabled
}
if(button.condition && typeof(button.condition) == "function") component.disabled = !button.condition(this);
if(!disabled && button.condition && typeof(button.condition) == "function") component.disabled = !button.condition(this);
if(button.label){
if(typeof(button.label) === "function") component.label = button.label(this);
@ -263,19 +290,43 @@ class DynamicCardStack {
if(this.currentSelectedSubcategory === b) component.style = 1;
if(button.inline) nComponents.addButton(component);
else nComponentsSecondary.addButton(component);
else {
if(nComponentsSecondary[nComponentsSecondary.length - 1].components.length >= 5){
nComponentsSecondary.push(new ComponentActionRow({}))
}
nComponentsSecondary[nComponentsSecondary.length - 1].addButton(component);
}
}
if(nComponentsSecondary.components.length >= 1) return [nComponents, nComponentsSecondary]
if(nComponentsSecondary[0].components.length >= 1) return [nComponents, ...nComponentsSecondary]
return [nComponents];
}
_setCachedValue(index, componentId, key, value){
if(!this.stackCache[index]) this.stackCache[index] = {};
if(!this.stackCache[index][componentId]) this.stackCache[index][componentId] = {};
this.stackCache[index][componentId][key] = value;
}
_getCachedValue(index, componentId, key){
if(!this.stackCache[index]) return null;
if(!this.stackCache[index][componentId]) return null;
if(!this.stackCache[index][componentId][key]) return null;
return this.stackCache[index][componentId][key];
}
/**
* Handles an interaction from the attached components
* @param {ComponentContext} ctx
*/
async _handleInteraction(ctx){
if(ctx.user.id !== this.context.user.id) return ctx.respond({
type: InteractionCallbackTypes.DEFERRED_UPDATE_MESSAGE
})
this.lastInteraction = Date.now();
// should be a built-in button
if(["next","previous"].includes(ctx.data.customId)){
console.log("triggering button")
@ -311,21 +362,38 @@ class DynamicCardStack {
}
else this.currentSelectedSubcategory = ctx.data.customId;
this.cachedIndex = this.index;
console.log("new category is " + this.currentSelectedSubcategory)
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));
await ctx.respond({
type: InteractionCallbackTypes.UPDATE_MESSAGE,
data: Object.assign(processingEmbed, { components: this._renderComponents(true)})
})
// TODO: allow overriding index
this.index = 0;
try{
// TODO: cache resolved stacks
this.activeCardStack = await this.interactive_components[ctx.data.customId].resolvePage(this);
if(this._getCachedValue(this.rootIndex, ctx.data.customId, STACK_CACHE_KEYS.RESULT_CARDS) !== null){
this.activeCardStack = [...this._getCachedValue(this.rootIndex, ctx.data.customId, STACK_CACHE_KEYS.RESULT_CARDS)];
await ctx.respond({
type: InteractionCallbackTypes.UPDATE_MESSAGE,
data: Object.assign(this.currentPage(), {components:this._renderComponents(false)})
})
return;
} else {
let processingEmbed = page(createEmbed("default", ctx, {
image: {
url: STATIC_ASSETS.card_skeleton
}
}))
if(this.interactive_components[ctx.data.customId].renderLoadingState) processingEmbed = page(this.interactive_components[ctx.data.customId].renderLoadingState(this));
await ctx.respond({
type: InteractionCallbackTypes.UPDATE_MESSAGE,
data: Object.assign(processingEmbed, { components: this._renderComponents(true)})
})
this.activeCardStack = await this.interactive_components[ctx.data.customId].resolvePage(this);
if(!this.interactive_components[ctx.data.customId].disableCache){
this._setCachedValue(this.rootIndex, ctx.data.customId, STACK_CACHE_KEYS.RESULT_CARDS, [...this.activeCardStack]);
}
}
} catch(e){
this.activeCardStack = [
page(createEmbed("error", ctx, "Stack rendering failed."))
@ -333,11 +401,9 @@ class DynamicCardStack {
console.log("resolve failed:")
console.log(e)
}
// TODO: allow overriding index
this.index = 0;
setTimeout(()=>{
return this._edit(Object.assign(this.currentPage(), {components:this.listener}))
return this._edit(Object.assign(this.currentPage(), {components:this._renderComponents()}))
}, 1500)
return;