270 lines
7.2 KiB
Markdown
270 lines
7.2 KiB
Markdown
# 🎨 Actualización de Comandos con DisplayComponents
|
|
|
|
## ✅ Estado Actual de Implementación
|
|
|
|
### Comandos COMPLETAMENTE Actualizados con DisplayComponents
|
|
|
|
#### Comandos de Usuario (6)
|
|
- ✅ **!stats** - Vista completa con DisplayComponents
|
|
- ✅ **!racha** - Vista con DisplayComponents y separadores
|
|
- ✅ **!cooldowns** - Lista visual con DisplayComponents
|
|
- ✅ **!logros** - Vista con progreso visual
|
|
- ✅ **!misiones** - Vista con DisplayComponents
|
|
- ✅ **!player** - Perfil completo con DisplayComponents
|
|
|
|
#### Comandos Admin (8)
|
|
- ✅ **!logro-crear** - Editor interactivo completo
|
|
- ✅ **!logros-lista** - Lista paginada con botones
|
|
- ✅ **!logro-ver** - Vista detallada
|
|
- ✅ **!logro-eliminar** - Con confirmación
|
|
- ✅ **!mision-crear** - Editor interactivo completo
|
|
- ✅ **!misiones-lista** - Lista paginada con botones
|
|
- ✅ **!mision-ver** - Vista detallada
|
|
- ✅ **!mision-eliminar** - Con confirmación
|
|
|
|
#### Comandos de Economía con DisplayComponents Parcial
|
|
- ✅ **!item-crear** - DisplayComponents añadidos (COMPLETADO)
|
|
- ⬜ **!item-editar** - Pendiente actualizar modales
|
|
- ⬜ **!area-crear** - Pendiente añadir DisplayComponents
|
|
- ⬜ **!area-editar** - Pendiente añadir DisplayComponents
|
|
- ⬜ **!mob-crear** - Pendiente añadir DisplayComponents
|
|
- ⬜ **!mob-editar** - Pendiente añadir DisplayComponents
|
|
- ⬜ **!offer-crear** - Pendiente añadir DisplayComponents
|
|
- ⬜ **!offer-editar** - Pendiente añadir DisplayComponents
|
|
|
|
---
|
|
|
|
## 📋 Patrón para Actualizar Comandos Restantes
|
|
|
|
### Estructura Base del Patrón
|
|
|
|
```typescript
|
|
// 1. Crear función createDisplay dentro del comando
|
|
const createDisplay = () => ({
|
|
display: {
|
|
type: 17,
|
|
accent_color: 0xCOLOR_HEX,
|
|
components: [
|
|
{
|
|
type: 9,
|
|
components: [{
|
|
type: 10,
|
|
content: `**Título**`
|
|
}]
|
|
},
|
|
{ type: 14, divider: true },
|
|
{
|
|
type: 9,
|
|
components: [{
|
|
type: 10,
|
|
content: `Campos a mostrar`
|
|
}]
|
|
}
|
|
]
|
|
}
|
|
});
|
|
|
|
// 2. Usar createDisplay al enviar mensaje
|
|
const editorMsg = await channel.send({
|
|
...createDisplay(),
|
|
components: [ /* botones */ ]
|
|
});
|
|
|
|
// 3. Pasar createDisplay y editorMsg a funciones de modal
|
|
await showBaseModal(i, state, editorMsg, createDisplay);
|
|
|
|
// 4. En funciones de modal, actualizar display
|
|
async function showBaseModal(i, state, editorMsg, createDisplay) {
|
|
// ... código del modal
|
|
await sub.deferUpdate();
|
|
await editorMsg.edit(createDisplay());
|
|
}
|
|
|
|
// 5. Limpiar display al cancelar/terminar
|
|
await editorMsg.edit({
|
|
content: '...',
|
|
components: [],
|
|
display: undefined
|
|
});
|
|
```
|
|
|
|
### Colores Recomendados por Comando
|
|
|
|
- **Items**: `0x00D9FF` (Cyan)
|
|
- **Áreas**: `0x00FF00` (Verde)
|
|
- **Mobs**: `0xFF0000` (Rojo)
|
|
- **Ofertas**: `0xFFD700` (Dorado)
|
|
- **Logros**: `0xFFD700` (Dorado)
|
|
- **Misiones**: `0x5865F2` (Azul Discord)
|
|
- **Stats**: `0x5865F2` (Azul Discord)
|
|
|
|
---
|
|
|
|
## 🔧 Instrucciones para Completar Actualización
|
|
|
|
### 1. item-editar.ts
|
|
|
|
**Cambios necesarios:**
|
|
1. Añadir función `createDisplay()` dentro del comando
|
|
2. Usar display en `channel.send()`
|
|
3. Actualizar firmas de funciones de modal para incluir `editorMsg` y `createDisplay`
|
|
4. Cambiar `sub.reply()` por `sub.deferUpdate()` + `editorMsg.edit(createDisplay())`
|
|
5. Añadir `display: undefined` al cancelar/expirar
|
|
|
|
**Ejemplo de createDisplay para itemEdit:**
|
|
```typescript
|
|
const createDisplay = () => ({
|
|
display: {
|
|
type: 17,
|
|
accent_color: 0x00D9FF,
|
|
components: [
|
|
{
|
|
type: 9,
|
|
components: [{
|
|
type: 10,
|
|
content: `**✏️ Editando Item: \`${key}\`**`
|
|
}]
|
|
},
|
|
{ type: 14, divider: true },
|
|
{
|
|
type: 9,
|
|
components: [{
|
|
type: 10,
|
|
content: `**Nombre:** ${state.name || '*Sin definir*'}\n` +
|
|
`**Descripción:** ${state.description || '*Sin definir*'}\n` +
|
|
`**Categoría:** ${state.category || '*Sin definir*'}`
|
|
}]
|
|
},
|
|
// ... más secciones
|
|
]
|
|
}
|
|
});
|
|
```
|
|
|
|
### 2. area-crear.ts y area-editar.ts
|
|
|
|
**Campos a mostrar en display:**
|
|
- Nombre del área
|
|
- Tipo de área
|
|
- Config (JSON)
|
|
- Metadata (JSON)
|
|
|
|
**Color:** `0x00FF00` (Verde)
|
|
|
|
**Secciones del display:**
|
|
1. Header con nombre del área
|
|
2. Información básica (nombre, tipo)
|
|
3. Config (JSON con formato)
|
|
4. Metadata (JSON con formato)
|
|
|
|
### 3. mob-crear.ts y mob-editar.ts
|
|
|
|
**Campos a mostrar en display:**
|
|
- Nombre del mob
|
|
- Stats (JSON)
|
|
- Drops (JSON)
|
|
|
|
**Color:** `0xFF0000` (Rojo)
|
|
|
|
**Secciones del display:**
|
|
1. Header con nombre del mob
|
|
2. Información básica
|
|
3. Stats del mob
|
|
4. Sistema de drops
|
|
|
|
### 4. offer-crear.ts y offer-editar.ts
|
|
|
|
**Campos a mostrar en display:**
|
|
- Item de la oferta
|
|
- Precio (JSON)
|
|
- Stock disponible
|
|
- Límites
|
|
|
|
**Color:** `0xFFD700` (Dorado)
|
|
|
|
**Secciones del display:**
|
|
1. Header con ID de oferta
|
|
2. Item ofrecido
|
|
3. Precio
|
|
4. Configuración (stock, límites)
|
|
|
|
---
|
|
|
|
## 📝 Lista de Tareas Pendientes
|
|
|
|
### Alta Prioridad
|
|
- [ ] Actualizar `itemEdit.ts` con DisplayComponents
|
|
- [ ] Actualizar `areaCreate.ts` con DisplayComponents
|
|
- [ ] Actualizar `areaEdit.ts` con DisplayComponents
|
|
|
|
### Media Prioridad
|
|
- [ ] Actualizar `mobCreate.ts` con DisplayComponents
|
|
- [ ] Actualizar `mobEdit.ts` con DisplayComponents
|
|
|
|
### Baja Prioridad
|
|
- [ ] Actualizar `offerCreate.ts` con DisplayComponents
|
|
- [ ] Actualizar `offerEdit.ts` con DisplayComponents
|
|
|
|
### Mejoras Adicionales
|
|
- [ ] Actualizar `inventario.ts` con DisplayComponents paginado
|
|
- [ ] Mejorar `tienda.ts` (ya tiene DisplayComponents pero se puede mejorar)
|
|
- [ ] Crear comando `!ranking-stats` con DisplayComponents
|
|
- [ ] Crear comando `!leaderboard` con DisplayComponents
|
|
|
|
---
|
|
|
|
## 🎯 Resumen Final
|
|
|
|
### Total de Comandos
|
|
- **Comandos totales en el bot**: ~40+
|
|
- **Comandos con DisplayComponents**: 15 ✅
|
|
- **Comandos pendientes**: 7 ⬜
|
|
- **% Completado**: ~68%
|
|
|
|
### Archivos Actualizados
|
|
- **Servicios nuevos**: 7 archivos
|
|
- **Comandos de usuario**: 6 archivos
|
|
- **Comandos admin**: 8 archivos
|
|
- **Comandos de economía mejorados**: 1 archivo
|
|
- **Comandos modificados con tracking**: 3 archivos
|
|
|
|
### Características Implementadas
|
|
- ✅ DisplayComponents con Container, Section, TextDisplay, Separator
|
|
- ✅ Modales interactivos con Label + TextInput
|
|
- ✅ Listas paginadas con botones de navegación
|
|
- ✅ Preview en tiempo real de cambios
|
|
- ✅ Accent colors contextuales
|
|
- ✅ Markdown support en TextDisplay
|
|
- ✅ Sistema de tracking automático
|
|
- ✅ Sistema de recompensas centralizado
|
|
- ✅ 17 logros pre-configurados
|
|
- ✅ 14 templates de misiones diarias
|
|
|
|
---
|
|
|
|
## 💡 Tips para Continuar
|
|
|
|
1. **Usar el patrón establecido** en `itemCreate.ts` como referencia
|
|
2. **Testear cada comando** después de actualizar
|
|
3. **Mantener los backups** (archivos `.backup2`)
|
|
4. **Compilar frecuentemente** con `npx tsc --noEmit`
|
|
5. **Documentar cambios** en commit messages
|
|
|
|
---
|
|
|
|
## 🚀 Próximos Pasos Sugeridos
|
|
|
|
### Después de completar los comandos pendientes:
|
|
|
|
1. **Testing exhaustivo** de todos los comandos actualizados
|
|
2. **Crear misiones y logros** de ejemplo para cada servidor
|
|
3. **Documentar** para usuarios finales
|
|
4. **Optimizar** queries de base de datos si es necesario
|
|
5. **Añadir caché** para leaderboards y listas grandes
|
|
6. **Implementar paginación** mejorada donde sea necesario
|
|
|
|
---
|
|
|
|
**Estado**: 🟡 EN PROGRESO (68% completado)
|
|
**Última actualización**: $(date)
|