Arise Crossover Tools

1. L'inizio

   Un gioco scandito dall'orologio

   Arise Crossover è un gioco Roblox di CL Games costruito attorno a contenuti a tempo. Un portale dei dungeon si apre ogni 15 minuti, raid e world boss hanno i loro orari, e ogni portale estrae un rango, un'isola, una mappa e modificatori come i Red Gate e i Double Dungeon. I dettagli venivano annunciati dal bot del gioco sul suo Discord, come testo, e sepolti dal messaggio successivo pochi minuti dopo. Organizzare una partita voleva dire tenere d'occhio il canale.

2. L'obiettivo

   Una pagina da lasciare aperta

   Volevo che la community restasse informata e potesse organizzarsi senza dover sorvegliare Discord: timer in tempo reale per ogni dungeon ed evento, schede che si completano nel momento in cui arriva un annuncio, e strumenti per l'economia del gioco. Prima di tutto su telefono, perché è lì che i giocatori controllano le cose mentre giocano.

3. L'avventura

   Da un messaggio Discord a una scheda in diretta

   Ho costruito due metà che lavorano come una. Un bot Discord sta nel server ufficiale, trasforma ogni annuncio in dati strutturati e li inoltra via WebSocket. Un sito in React e TypeScript li riceve e mostra schede degli eventi in diretta, timer e un calcolatore del prezzo delle armi. Anche i server delle gilde volevano gli avvisi, così il bot è diventato multi-server, con ruoli da menzionare e canali degli annunci per ogni server. Lungo la strada ho stretto partnership con creator e guild master, che hanno portato giocatori e orientato le funzioni successive.

   

4. Le difficoltà

   Testo libero, traffico in diretta, tanti server

   Gli annunci erano testo libero con emoji, e il loro formato cambiava, quindi la lettura doveva essere robusta e fallire in modo evidente invece di mostrare una scheda sbagliata. Ogni browser aperto doveva ricevere gli aggiornamenti all'istante, anche durante gli eventi di punta, e restare aggiornato dopo ore. E funzionare in tanti server voleva dire configurazioni e permessi diversi ovunque, più i rigidi limiti di Discord quando si creano centinaia di ruoli.

5. La fine

   Capire quando cambiare strada

   La piattaforma ha tracciato in diretta oltre 1.000 dungeon ed eventi e ha servito più di 60 giocatori in contemporanea nei momenti di punta, diventando un punto di riferimento per la community. Poi sono arrivati strumenti più grandi e con più risorse, e il settore si è affollato. Invece di competere in un mercato saturo, sono entrato nel server RankBreakers e sono diventato uno dei suoi sviluppatori. È stato il mio primo bot multi-server e la mia prima pipeline in tempo reale, e mi ha insegnato tanto sul capire quando cambiare strada o collaborare quanto sui WebSocket.

• Eventi in tempo reale

  Timer per ogni dungeon ed evento, con i dettagli che arrivano via WebSocket nel momento in cui vengono annunciati.

• Direttamente dagli annunci ufficiali

  Il bot legge gli annunci del Discord del gioco e li inoltra al sito in tempo reale.

• Calcolatore del prezzo delle armi

  Calcola quanto valgono le armi e quante ne servono per un potenziamento.

• Prima di tutto su telefono

  Pensato per il telefono che controlli mentre giochi, e altrettanto completo su desktop.

• Avvisi nel tuo server

  I server delle gilde scelgono un canale per gli avvisi e ricevono ruoli da menzionare per rango, isola e portali speciali.

• Costruito con la community

  Partnership con creator e guild master, e con altri sviluppatori di bot in server da oltre 1.000 giocatori.

Il sito

React e TypeScript su Vercel, con Tailwind e pensato prima di tutto per il telefono: una colonna su telefono, due su tablet, il layout completo a più colonne su desktop e spazi più ampi sugli schermi grandi.

I portali speciali dovevano saltare all'occhio, quindi ogni modificatore cambia il colore e le etichette della scheda:

Il calcolatore del prezzo delle armi

Il calcolatore aiutava i giocatori a dare un prezzo alle armi e a pianificare i potenziamenti: stima il valore di un'arma, calcola quante armi servono per un potenziamento e avvisa quando ne hai più del necessario. Gli input vengono validati e i risultati si aggiornano all'istante.

YouTubeIl calcolatore del prezzo delle armi di Arise Crossover ToolsLoads the YouTube player

Il bot negli altri server

I server delle gilde volevano gli avvisi nei propri canali, quindi il bot gira in molti server, ognuno con la sua configurazione.

• /announce-dungeon

  Admin

  Sceglie il canale di testo dove vengono pubblicati gli avvisi dei dungeon.

• /deannounce-dungeon

  Admin

  Lo rimuove, e gli avvisi si fermano per quel server.

• /create-dungeon-roles

  Admin

  Crea in un colpo tutti i ruoli da menzionare, per rango, per isola e per i portali speciali, con nomi e colori modificabili.

• /delete-dungeon-roles

  Admin

  Li rimuove tutti, per ripartire da zero.

Ogni comando risponde con un riepilogo privato di ciò che è stato creato o rimosso, e di cosa non è riuscito, così gli admin sanno sempre a che punto sono.

Da un messaggio Discord a una scheda in diretta

1. Ascolto

   Il bot sta nel server ufficiale e osserva il canale degli annunci.

2. Lettura

   Espressioni regolari, con alternative di riserva, estraggono rango, isola, mappa, boss e i segnali Red e Double da testo libero con emoji.

3. Inoltro

   L'evento strutturato va a un server WebSocket, che lo spinge a ogni browser aperto.

4. Visualizzazione

   La scheda esiste già, perché il sito sa quando si apre ogni portale; i campi "Unknown" si completano nel momento in cui arrivano i dati.

Il numero di stanze arriva in un messaggio separato e viene abbinato al suo portale. Tutto ciò che non si riesce a leggere manda un avviso a me invece di produrre una scheda sbagliata.

Architettura

• Bot Discord

  Node.js, discord.js v14, TypeScript

  Osserva i canali ufficiali, trasforma gli annunci non strutturati in eventi strutturati, gestisce casi limite e variazioni dei messaggi, e inoltra tutto in tempo reale.

• Server WebSocket

  Node.js, ws

  Mantiene una connessione persistente con ogni client e spinge subito nuovi eventi e aggiornamenti dei timer, senza ricaricare la pagina.

• Frontend

  React, TypeScript, Tailwind

  Gestione dello stato e rendering condizionale per le schede in diretta, i timer e il calcolatore, su un design system responsive.

• Distribuzione

  Vercel

  Distribuzione rapida in tutto il mondo, con deploy automatici per iterare velocemente.

Il bot, server per server

• Architettura multi-server

  Design modulare

  I comandi slash vengono registrati per ogni server, e ogni server ha la sua configurazione in JSON.

• Gestione dei ruoli

  Limiti di richieste

  Discord permette di creare 250 ruoli ogni 48 ore, quindi la creazione è limitata, ritentata con attese esponenziali e salta i ruoli che esistono già. Ruoli separatori, per rango e per isola tengono la lista ordinata.

• Collegamento in tempo reale

  WebSocket

  I messaggi verso il sito vengono letti, gli errori gestiti e la connessione ristabilita in automatico.

• Log

  Winston

  Ogni server ha la sua cartella di log, con output colorato in console e log degli errori separati, il che ha reso sopportabile il debug delle configurazioni altrui.

Sfide

Competenze acquisite

• React e TypeScript

  Architettura di web app

  Un frontend in tempo reale manutenibile, con codice tipizzato dall'inizio alla fine.

• Node.js e WebSocket

  Backend in tempo reale

  Consegna degli eventi in diretta con connessioni persistenti, heartbeat e riconnessione.

• Bot Discord su larga scala

  discord.js v14

  Progettazione multi-server, comandi slash, gestione degli eventi e dei ruoli nei limiti di Discord.

• Trasformazione dei dati

  Lettura e mappatura

  Trasformare messaggi Discord non strutturati in eventi strutturati affidabili.

• Progettazione di algoritmi

  Calcolo dei prezzi

  La logica dietro il valore delle armi e il costo dei potenziamenti.

• Community e collaborazione

  Partnership

  Lavorare con creator, guild master e altri sviluppatori di bot, e capire quando unire le forze.