[nextgen] Add DynamicCardStack

This commit is contained in:
big nutty 2025-02-13 01:41:05 +00:00
parent 048073b522
commit 4c8a9927ea
15 changed files with 874 additions and 94 deletions

View file

@ -1,7 +1,7 @@
const { prideborder } = require("#api");
const { createEmbed, page } = require("#utils/embed");
const { acknowledge } = require("#utils/interactions");
const { editOrReply } = require("#utils/message");
const { DynamicCardStack } = require("../../../labscore/cardstack/DynamicCardStack");
module.exports = {
label: "text",
@ -17,8 +17,117 @@ module.exports = {
onCancel: ()=>{},
run: async (context, args) => {
await acknowledge(context);
const a = await prideborder(context, "https://cdn.discordapp.com/emojis/1145727546747535412.png?size=4096")
editOrReply(context, "ok");
try{
// This will create a new dynamic card stack
new DynamicCardStack(context, {
cards: [
createEmbed("default", context, { description: "page 1"}),
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,
disableCache: true,
resolvePage: ()=>{
return [
createEmbed("success", context, "smiley")
].map((p)=>page(p))
}
},
conditional_button: {
// Button Label
label: "Conditional",
// Next to pagination or new row
inline: false,
visible: (page) => {
return (page.getState("key") === "t_1")
},
resolvePage: (pg) => {
return [
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));
}
},
dynamic_button: {
// Button Label
label: (page) => {
return page.getState("key");
},
// Next to pagination or new row
inline: false,
visible: true,
// Renders the loading state card
renderLoadingState: (page) => {
return createEmbed("default", context, {
description: "-# Subpage Loading :)",
})
},
resolvePage: async (pg) => {
console.log("resolving page")
return [
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));
}
},
conditional_button_2: {
// Button Label
label: "Conditional",
// Next to pagination or new row
inline: false,
visible: true,
resolvePage: (pg) => {throw "a"}
},
conditional_button_3: {
// Button Label
label: "Conditional",
// Next to pagination or new row
inline: false,
visible: true,
resolvePage: (pg) => {throw "a"}
},
conditional_button_4: {
// Button Label
label: "Conditional",
// Next to pagination or new row
inline: false,
visible: true,
resolvePage: (pg) => {throw "a"}
},
conditional_button_5: {
// Button Label
label: "Conditional",
// Next to pagination or new row
inline: false,
visible: true,
resolvePage: (pg) => {throw "a"}
},
conditional_button_6: {
// Button Label
label: "Conditional",
// Next to pagination or new row
inline: false,
visible: true,
resolvePage: (pg) => {throw "a"}
},
conditional_button_7: {
// Button Label
label: "Conditional",
// Next to pagination or new row
inline: false,
visible: true,
resolvePage: (pg) => {throw "a"}
},
}
})
}catch(e){
console.log(e)
}
}
};

View file

@ -1,11 +1,14 @@
const { anime } = require('#api');
const { paginator } = require('#client');
const { PERMISSION_GROUPS, OMNI_ANIME_FORMAT_TYPES } = require('#constants');
const { anime, animeSupplemental} = require('#api');
const { PERMISSION_GROUPS, OMNI_ANIME_FORMAT_TYPES, COLORS_HEX} = require('#constants');
const { createEmbed, formatPaginationEmbeds, page, hexToEmbedColor } = require('#utils/embed');
const { createDynamicCardStack } = require("#cardstack");
const { hexToDecimalColor } = require("#utils/color");
const { createEmbed, formatPaginationEmbeds, page } = require('#utils/embed');
const { acknowledge } = require('#utils/interactions');
const { smallPill, link, pill, stringwrap, stringwrapPreserveWords} = require('#utils/markdown');
const { smallPill, link, pill, stringwrapPreserveWords, timestamp, TIMESTAMP_FLAGS} = require('#utils/markdown');
const { editOrReply } = require('#utils/message');
const { STATIC_ASSETS } = require("#utils/statics");
function renderAnimeResultsPage(context, res){
let result = createEmbed("default", context, {
@ -37,7 +40,7 @@ function renderAnimeResultsPage(context, res){
if(res.image) result.image = { url: res.image };
// Render Color
if(res.color) result.color = hexToEmbedColor(res.color);
if(res.color) result.color = hexToDecimalColor(res.color);
// Render Episode Metadata
if(res.episodes) {
@ -57,7 +60,13 @@ function renderAnimeResultsPage(context, res){
}
return page(result, {}, {
episodes_key: res.supplemental.episodes
// Supplemental keys are provided by the backend,
// allow for fetching extra data related to results.
episodes_key: res.supplemental.episodes,
characters_key: res.supplemental.characters,
name: res.title,
color: hexToDecimalColor(res.color || COLORS_HEX.embed),
cover: res.cover
});
}
@ -85,7 +94,7 @@ module.exports = {
let search = await anime(context, args.query, context.channel.nsfw)
search = search.response
if(search.body.status == 2) return editOrReply(context, createEmbed("error", context, search.body.message))
if(search.body.status === 2) return editOrReply(context, createEmbed("error", context, search.body.message))
let pages = []
for(const res of search.body.results){
@ -94,57 +103,102 @@ module.exports = {
if(!pages.length) return editOrReply(context, createEmbed("warning", context, `No results found.`))
await paginator.createPaginator({
context,
pages: formatPaginationEmbeds(pages),
createDynamicCardStack(context, {
cards: formatPaginationEmbeds(pages),
interactive: {
episodes_button: {
// Button Label
label: "Episodes",
// Next to pagination or new row
inline: false,
visible: true,
condition: (page)=>{
condition: (page) => {
return (page.getState("episodes_key") !== null)
},
// Will resolve all conditions at paginator creation time
precompute_conditions: true,
resolvePage: (page)=>{
// If an interactive button for this index hasn't been
// resolved yet, run this code
page.getState("episodes_key"); // -> supplemental key
renderLoadingState: (pg) => {
return createEmbed("default", context, {
description: `-# ${pg.getState("name")} **Episodes**`,
image: {
url: STATIC_ASSETS.card_skeleton
},
color: pg.getState("color")
})
},
resolvePage: async (pg) => {
let episodes = await animeSupplemental(context, pg.getState("episodes_key"));
/* Resolve supplemental key via api */
let cards = episodes.response.body.episodes.map((e) => {
let card = createEmbed("default", context, {
color: pg.getState("color"),
description: `-# ${pg.getState("name")} **Episodes**\n## `,
fields: []
})
return [...cards];
// Render episode number if available
if (e.episode) card.description += `${e.episode}: `
card.description += e.title;
if (e.description) card.description += `\n\n\n${stringwrapPreserveWords(e.description, 600)}`;
if (e.image) card.image = {url: e.image};
if (pg.getState("cover")) card.thumbnail = {url: pg.getState("cover")};
if (e.duration) card.fields.push({name: "Length", value: e.duration + " min", inline: true})
if (e.date) card.fields.push({
name: "Aired",
value: timestamp(e.date, TIMESTAMP_FLAGS.LONG_DATE),
inline: true
})
return page(card)
})
return formatPaginationEmbeds(cards);
}
},
characters_button: {
// Button Label
label: "Characters",
// Next to pagination or new row
inline: false,
condition: (page)=>{
visible: true,
condition: (page) => {
return (page.getState("characters_key") !== null)
},
resolvePage: (page)=>{
// If an interactive button for this index hasn't been
// resolved yet, run this code
page.getState("characters_key"); // -> supplemental key
renderLoadingState: (pg) => {
return createEmbed("default", context, {
description: `-# ${pg.getState("name")} **Characters**`,
image: {
url: STATIC_ASSETS.card_skeleton
},
color: pg.getState("color")
})
},
resolvePage: async (pg) => {
let characters = await animeSupplemental(context, pg.getState("characters_key"));
/* Resolve supplemental key via api */
let cards = characters.response.body.characters.map((c) => {
let card = createEmbed("default", context, {
color: pg.getState("color"),
description: `-# ${pg.getState("name")} **Characters**\n## ${link(c.url, c.name.full)}`,
fields: []
})
return [...cards];
if (c.description) card.description += `\n\n\n${stringwrapPreserveWords(c.description, 600)}`;
if (c.image) card.image = {url: c.image};
if (pg.getState("cover")) card.thumbnail = {url: pg.getState("cover")};
if (c.age) card.fields.push({name: "Age", value: c.age, inline: true})
return page(card)
})
return formatPaginationEmbeds(cards);
}
}
}
});
}catch(e){
if(e.response?.body?.status == 1) return editOrReply(context, createEmbed("warning", context, e.response?.body?.message))
if(e.response?.body?.status == 2) return editOrReply(context, createEmbed("warning", context, e.response?.body?.message))
if(e.response?.body?.status === 1) return editOrReply(context, createEmbed("warning", context, e.response?.body?.message))
if(e.response?.body?.status === 2) return editOrReply(context, createEmbed("warning", context, e.response?.body?.message))
console.log(e)
return editOrReply(context, createEmbed("error", context, `Unable to perform anime search.`))
}
},
}
};

View file

@ -1,7 +1,8 @@
const { maps, mapsSupplemental } = require('#api');
const { PERMISSION_GROUPS } = require('#constants');
const { createEmbed, hexToEmbedColor } = require('#utils/embed');
const { hexToDecimalColor } = require("#utils/color");
const { createEmbed } = require('#utils/embed');
const { acknowledge } = require('#utils/interactions');
const { link, icon, iconAsEmojiObject, citation, stringwrap } = require('#utils/markdown');
const { editOrReply } = require('#utils/message')
@ -18,7 +19,7 @@ function renderPlaceCard(context, place) {
},
description: `${place.address.full}`,
url: place.url,
color: hexToEmbedColor(place.style.color)
color: hexToDecimalColor(place.style.color)
})]
if (place.display_type) {

View file

@ -2,7 +2,8 @@ const { movie } = require('#api');
const { paginator } = require('#client');
const { PERMISSION_GROUPS, OMNI_ANIME_FORMAT_TYPES, OMNI_MOVIE_TYPES } = require('#constants');
const { createEmbed, formatPaginationEmbeds, page, hexToEmbedColor } = require('#utils/embed');
const { hexToDecimalColor } = require("#utils/color");
const { createEmbed, formatPaginationEmbeds, page } = require('#utils/embed');
const { acknowledge } = require('#utils/interactions');
const { smallPill, pill } = require('#utils/markdown');
const { editOrReply } = require('#utils/message');
@ -28,7 +29,7 @@ function renderMovieResultsPage(context, res){
if(res.image) result.image = { url: res.image };
// Render Color
if(res.color) result.color = hexToEmbedColor(res.color);
if(res.color) result.color = hexToDecimalColor(res.color);
return page(result);
}