feat: Implementar nuevas mejoras en Amayo Bot Editor
- Agregar selector de directorio multi-OS con validación y persistencia - Implementar preview en tiempo real del código generado en CommandCreator y EventCreator - Activar TypeScript strict mode y añadir snippets nativos para mejorar la experiencia de desarrollo - Crear documentación detallada sobre las nuevas funcionalidades y cambios realizados - Actualizar README con instrucciones de uso y solución de problemas comunes - Modificar archivos clave para integrar las nuevas características y mejorar la usabilidad
This commit is contained in:
Shni
150
README/DISCORD_RPC_SETUP.md
Normal file
150
README/DISCORD_RPC_SETUP.md
Normal file
@@ -0,0 +1,150 @@
|
||||
# 🎮 Configuración Discord Rich Presence
|
||||
|
||||
## Paso 1: Crear Aplicación en Discord
|
||||
|
||||
1. Ve a [Discord Developer Portal](https://discord.com/developers/applications)
|
||||
2. Haz clic en **"New Application"**
|
||||
3. Nombre: `Amayo Bot Editor`
|
||||
4. Acepta los términos y crea la aplicación
|
||||
|
||||
## Paso 2: Obtener Application ID
|
||||
|
||||
1. En la página de tu aplicación, ve a **"OAuth2" → "General"**
|
||||
2. Copia el **APPLICATION ID** (número largo)
|
||||
3. Pégalo en `src-tauri/src/lib.rs` línea 169:
|
||||
```rust
|
||||
let client_id = "TU_APPLICATION_ID_AQUI";
|
||||
```
|
||||
|
||||
## Paso 3: Subir Imágenes (Assets)
|
||||
|
||||
1. En tu aplicación, ve a **"Rich Presence" → "Art Assets"**
|
||||
2. Sube las siguientes imágenes:
|
||||
|
||||
### Imagen Principal: `amayo_logo`
|
||||
- Tamaño recomendado: 1024x1024 píxeles
|
||||
- Logo del editor Amayo
|
||||
- Aparecerá como imagen grande en Discord
|
||||
|
||||
### Imagen Secundaria: `code`
|
||||
- Tamaño recomendado: 512x512 píxeles
|
||||
- Icono de código </> o similar
|
||||
- Aparecerá como imagen pequeña en Discord
|
||||
|
||||
3. **IMPORTANTE**: El nombre debe ser **exactamente** `amayo_logo` y `code` (minúsculas, sin espacios)
|
||||
|
||||
## Paso 4: ¿Qué mostrará Discord?
|
||||
|
||||
### Cuando abres el editor:
|
||||
```
|
||||
🎮 Jugando a Amayo Bot Editor
|
||||
📝 Editando bot de Discord
|
||||
🕐 En el menú principal
|
||||
[Desde: hace 5 minutos]
|
||||
```
|
||||
|
||||
### Cuando editas un archivo:
|
||||
```
|
||||
🎮 Jugando a Amayo Bot Editor
|
||||
📝 Editando Comando slash
|
||||
📄 ping.ts
|
||||
[Desde: hace 10 minutos]
|
||||
```
|
||||
|
||||
### Cuando creas un comando:
|
||||
```
|
||||
🎮 Jugando a Amayo Bot Editor
|
||||
🆕 Creando comando nuevo
|
||||
🔧 En el wizard de comandos
|
||||
[Desde: hace 2 minutos]
|
||||
```
|
||||
|
||||
### Cuando editas la base de datos:
|
||||
```
|
||||
🎮 Jugando a Amayo Bot Editor
|
||||
🗄️ Editando base de datos
|
||||
📊 Visualizando schema.prisma
|
||||
[Desde: hace 15 minutos]
|
||||
```
|
||||
|
||||
## Paso 5: Estados Implementados
|
||||
|
||||
El RPC se actualiza automáticamente cuando:
|
||||
|
||||
- ✅ Abres el editor → "Editando bot de Discord"
|
||||
- ✅ Navegas el proyecto → "X comandos | Y eventos"
|
||||
- ✅ Seleccionas un archivo → "Editando [tipo]" + nombre
|
||||
- ✅ Creas comando → "Creando comando nuevo"
|
||||
- ✅ Creas evento → "Creando evento nuevo"
|
||||
- ✅ Abres database → "Visualizando schema.prisma"
|
||||
|
||||
## Paso 6: Crear Imágenes Sugeridas
|
||||
|
||||
### Para `amayo_logo`:
|
||||
Puedes usar cualquier herramienta de diseño o generador de logos:
|
||||
- [Logo.com](https://logo.com)
|
||||
- [Canva](https://canva.com)
|
||||
- [Photopea](https://photopea.com) (Photoshop gratis)
|
||||
|
||||
Sugerencia: Logo con letra "A" estilizada o nombre "Amayo" con colores modernos
|
||||
|
||||
### Para `code`:
|
||||
Busca iconos gratuitos de código:
|
||||
- [Flaticon](https://flaticon.com) → buscar "code icon"
|
||||
- [Icons8](https://icons8.com) → buscar "coding icon"
|
||||
- Emoji de código: </> o {}
|
||||
|
||||
## Paso 7: Compilar y Probar
|
||||
|
||||
```powershell
|
||||
cd AEditor
|
||||
npm run tauri dev
|
||||
```
|
||||
|
||||
Si Discord está abierto, deberías ver el Rich Presence actualizado!
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### ❌ No aparece en Discord
|
||||
- Verifica que Discord esté abierto
|
||||
- Revisa que el Application ID sea correcto
|
||||
- Asegúrate que las imágenes tengan los nombres exactos
|
||||
- En Discord → Configuración → Actividad → Habilitar "Mostrar actividad actual"
|
||||
|
||||
### ❌ Error de conexión
|
||||
```
|
||||
Error conectando a Discord: Connection refused
|
||||
```
|
||||
Solución: Reinicia Discord completamente
|
||||
|
||||
### ❌ Imágenes no aparecen
|
||||
- Las imágenes tardan 5-10 minutos en activarse después de subirlas
|
||||
- Deben llamarse **exactamente** `amayo_logo` y `code`
|
||||
- Formato: PNG, JPG o GIF
|
||||
|
||||
## Personalización Avanzada
|
||||
|
||||
Puedes modificar los mensajes en `src/App.vue`:
|
||||
|
||||
```typescript
|
||||
// Ejemplo: cambiar el mensaje al editar
|
||||
updateDiscordRPC(
|
||||
"🔥 Hackeando el mainframe", // Details
|
||||
`Archivo: ${file.name}` // State
|
||||
);
|
||||
```
|
||||
|
||||
O en `src-tauri/src/lib.rs` para cambiar las imágenes:
|
||||
|
||||
```rust
|
||||
.assets(activity::Assets::new()
|
||||
.large_image("tu_imagen_custom")
|
||||
.large_text("Tu texto custom")
|
||||
.small_image("otra_imagen")
|
||||
.small_text("Otro texto")
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
🎉 **¡Listo!** Tu editor ahora muestra lo que estás haciendo en Discord.
|
||||
Reference in New Issue
Block a user