151 lines
3.9 KiB
Markdown
151 lines
3.9 KiB
Markdown
|
# 🎮 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.
|