L'Interfaccia di SAGE

In questo capitolo

SAGE è costruito intorno a un’interfaccia a pannelli che non rimuove mai il giocatore dalla mappa galattica. Questo capitolo copre il command center: la struttura dello schermo, i moduli di gestione della barra di navigazione superiore, la tecnologia alla base del client, i tipi di pannello e la navigazione della mappa galattica.

---

1. Il principio fondamentale dell’interfaccia

La mappa galattica è sempre presente. Questo è il principio che governa ogni scelta di design in SAGE. I pannelli di gestione non sostituiscono la mappa — la sovrappongono come finestre temporanee, mantenendo sempre visibile il contesto spaziale.

L’interfaccia simula la consolle di un ammiraglio interstellare. Ogni pannello aperto è una finestra su un aspetto specifico dell’impero del giocatore: flotta, equipaggio, crafting, edifici, scansioni, galassia. La mappa è lo stato predefinito. Tutto il resto è un overlay temporaneo che si apre, si usa e si chiude per tornare alla mappa.

Questo approccio ha conseguenze operative concrete. Un giocatore può tenere aperto il pannello della flotta, notare un marcatore di flotta sulla mappa a lato del pannello, e interagire con esso senza chiudere nulla. I pannelli ancorati a destra (Leaderboard e Notifiche) coesistono con i pannelli centrali, creando layout a più livelli che massimizzano la densità informativa senza sacrificare la consapevolezza spaziale.

Fonte: Live Stream

Questa informazione proviene da trascrizioni di live stream e non è stata confermata nella documentazione ufficiale.

---

2. Tecnologia e piattaforme del client

SolidJS al posto di React

SAGE è costruito con SolidJS invece di React. La scelta è tecnica e motivata dalle prestazioni: React usa un Virtual DOM che esegue un passaggio di riconciliazione completo a ogni cambio di stato. A scala SAGE — quasi 1.000 sistemi stellari, migliaia di asset, aggiornamenti in tempo reale dalla blockchain — questo overhead diventa costoso. SolidJS risolve il problema con una reattività fine-grained (a granularità fine) che aggiorna soltanto i nodi DOM interessati dal cambiamento di stato, e nient’altro.

Il risultato visivo è simile al client precedente (Starbased), ma con prestazioni significativamente migliori nelle situazioni con grandi insiemi di dati e aggiornamenti frequenti — esattamente le condizioni operative di SAGE.

Fonte: Live Stream

Questa informazione proviene da trascrizioni di live stream e non è stata confermata nella documentazione ufficiale.

Piattaforme di distribuzione

Al lancio, SAGE sarà disponibile nel browser, come il client Starbased attuale. Questo garantisce la massima accessibilità: qualsiasi dispositivo con un browser moderno può eseguire SAGE senza installazione.

Successivamente, SAGE verrà integrato in Fleet Command, il client 3D basato su Unreal Engine 5. Questa integrazione collegherà il livello strategico (SAGE) con quello esperienziale (UE5): il giocatore potrà accedere all’intera interfaccia di gestione di SAGE dall’interno dell’ambiente UE5.

Fonte: Live Stream

Questa informazione proviene da trascrizioni di live stream e non è stata confermata nella documentazione ufficiale.

Galaxy — piattaforma dati per i builder

Galaxy è una piattaforma dati in sviluppo per l’era SAGE. Invece di interrogare la blockchain direttamente via RPC (lento, costoso e complesso), i builder si connettono a Galaxy per ottenere dati di gioco. Questo approccio centralizza e semplifica l’accesso ai dati per chi sviluppa strumenti, dashboard, bot e applicazioni companion per SAGE.

Fonte: Live Stream

Questa informazione proviene da trascrizioni di live stream e non è stata confermata nella documentazione ufficiale.

---

3. La struttura dello schermo

SAGE usa un layout a tre livelli sovrapposti che occupano lo schermo simultaneamente.

+------------------------------------------------------------------+
| STAR ATLAS  [risorse]  [==icone nav==]  [profilo][utility]       |  BARRA SUPERIORE
+------------------------------------------------------------------+
|                                                                    |
|  [SIDEBAR SX]          MAPPA GALATTICA          [PANNELLO DX]    |  AREA PRINCIPALE
|  (in vista regione/    (sempre visibile)        (leaderboard     |
|   sistema)                                       o notifiche)    |
|                                                                    |
|              [PANNELLO CENTRALE]                                   |
|              (quando un modulo                                     |
|               di gestione è aperto)                               |
|                                                                    |
+------------------------------------------------------------------+
| [breadcrumb / contesto]             [RESET VIEW]  [GO TO CSS]    |  BARRA INFERIORE
+------------------------------------------------------------------+

Livello 1 — Sfondo: La mappa galattica, sempre renderizzata e sempre interattiva nelle aree non coperte dai pannelli.

Livello 2 — Pannelli: I pannelli di gestione che fluttuano sopra la mappa, apparendo al centro o ancorati lateralmente.

Livello 3 — Chrome: La barra superiore e la barra inferiore, sempre visibili sopra ogni altro contenuto.

---

4. La barra superiore — struttura e funzioni

La barra superiore è la striscia di navigazione e stato persistente che si estende per tutta la larghezza dello schermo. È sempre visibile, indipendentemente da cosa sta facendo il giocatore. Contiene quattro sezioni funzionali disposte da sinistra a destra.

Sezione sinistra: identificatore del brand

Il wordmark “STAR ATLAS” in bianco nell’angolo sinistro. Elemento statico senza funzione interattiva.

Sezione centro-sinistra: contatori risorsa/fazione

Una riga di coppie icona-numero che mostrano metriche strategiche aggregate in tempo reale:

Icona	Colore	Significato
Cuore	Rosso	Conteggio sistemi o metrica aggregata MUD
Scudo	Verde	Metrica ONI, formato corrente/massimo (es. 1019/1029)
Cerchio	Arancione	Conteggio sistemi USTUR
Diamante	Bianco/neutro	Sistemi neutrali o metrica non affiliata

Il formato frazionario del contatore verde (1019/1029) indica una relazione corrente-versus-massimo, probabilmente capacità operativa o sistemi controllati.

Sezione centrale: barra icone di navigazione

Otto pulsanti icona in fila orizzontale. Sono i controlli di navigazione primari per accedere a tutti i moduli di gestione di SAGE.

Posizione	Modulo	Titolo pannello
1	Navigazione mappa	N/A (controlla il comportamento della mappa)
2	Gestione flotta	MY FLEETS
3	Gestione equipaggio	MY CREW
4	Crafting	MY CRAFTING EFFORTS
5	Controllo scansioni	MY SCANS
6	Edifici	MY BUILDINGS
7	Galaxy Command	MY GALAXY
8	Impostazioni	Settings

Cliccare un’icona già aperta chiude il pannello. Solo un pannello overlay centrale può essere aperto alla volta: aprirne uno nuovo sostituisce quello corrente. I pannelli ancorati a destra (Leaderboard, Notifiche) operano indipendentemente e coesistono con i pannelli centrali.

Sezione destra: profilo giocatore e utility

Widget del profilo giocatore:

• Avatar esagonale con il logo Star Atlas
• Nome giocatore in grassetto
• Rank corrente (es. “RANK 8”)
• Link “VIEW LEADERBOARD” in testo cyan/teal, cliccabile per aprire il pannello Leaderboard ancorato a destra
• Livello corrente del giocatore
• Barra XP con riempimento cyan/teal che mostra il progresso verso il livello successivo

Icone utility (4 pulsanti piccoli):

1. Icona impostazioni/aiuto
2. Toggle vista griglia/dashboard
3. Toggle vista lista
4. Icona campanella/notifiche — apre il pannello Notifiche ancorato a destra

---

5. La barra inferiore — navigazione contestuale

La barra inferiore si estende per tutta la larghezza dello schermo al bordo inferiore. Il suo contenuto cambia in base alla vista attiva.

Elementi persistenti (sempre presenti a destra):

• RESET VIEW: Riporta la mappa galattica al livello di zoom predefinito (vista galassia completa). Utile per riorientarsi dopo una navigazione profonda in un sistema specifico.
• GO TO CSS: Naviga direttamente alla Central Space Station del giocatore (la base principale). Scorciatoia in un clic alla propria starbase primaria.

Contenuto contestuale (cambia per pannello):

Contesto attivo	Contenuto barra inferiore
Nessun pannello (mappa predefinita)	Solo RESET VIEW e GO TO CSS
Gestione flotta	FLEET STATUS OVERVIEW / ACTIVE 13 / DOCKED 2 / TRANSIT 4 / MINING 2
Gestione equipaggio	CREW / CREW OVERVIEW / ALL 42 / STARBASES 19 / FLEETS 23 / HEAVY 14
Crafting	CRAFTING OVERVIEW / ALL 12 / READY 3 / ACTIVE 9 / HEAVY 7
Galaxy Command	GALAXY CO. / SYSTEMS 945 / STARBASES 945 / FAVORITES 1 / NEUTRAL 516
Edifici	BLDG. CLAIM STRIKE OVERVIEW / ALL 12 / ACTIVE 5 / DESIGN 3 / DECON 2 / DESTROYED 2
Vista sistema	Scorciatoia di navigazione alla starbase del sistema selezionato

La barra inferiore rispecchia le informazioni delle stat card del pannello attivo, fornendo un riepilogo persistente anche quando l’attenzione è concentrata sulla mappa o su un elemento specifico del pannello.

---

6. Anatomia universale dei pannelli

Ogni pannello di gestione in SAGE segue un modello strutturale identico. Capire la struttura una volta significa sapersi orientare in ogni pannello del gioco.

+------------------------------------------+
| [icona] TITOLO PANNELLO     [modifica][X]|  Riga titolo
|------------------------------------------|
| ETICHETTA SOTTOTITOLO                    |
| ## TOTALE [ELEMENTI]                     |  Riga conteggio
|                                          |
| Paragrafo descrittivo che spiega         |  Descrizione
| lo scopo del pannello.                   |
|------------------------------------------|
| [STAT] [STAT] [STAT] [STAT] [STAT]      |  Riga stat card
|  [val]  [val]  [val]  [val]  [val]      |  (filtri cliccabili)
|------------------------------------------|
| COLONNA_A          COLONNA_B             |  Intestazioni colonne
|------------------------------------------|
| > Riga elemento 1                  [-->] |  Lista scorrevole
| > Riga elemento 2                  [-->] |
| > Riga elemento 3 (selezionata)    [-->] |
| ...                                      |
|------------------------------------------|
| [breadcrumb contestuali] [filtro]        |  Barra inferiore
+------------------------------------------+

Riga titolo

• Icona pannello: Icona piccola corrispondente all’icona di navigazione usata per aprire il pannello
• Titolo: Testo in grassetto maiuscolo (es. “MY FLEETS”, “MY CREW”, “NOTIFICATIONS”)
• Pulsante modifica: Icona matita per personalizzazione del pannello o ridenominazione delle entità
• Pulsante chiusura: Icona X per chiudere il pannello

Riga conteggio

• Etichetta sottotitolo: Contesto secondario (es. “FLEET COMMAND”, “CREW ROSTER”, “COMMAND FEED”)
• Conteggio totale: Numero in formato grande seguito da un descrittore (es. “16 TOTAL FLEETS”, “13 TOTAL SIGNALS”)

Descrizione

Un paragrafo di 1-2 frasi in sentence case che spiega lo scopo del pannello e come usarlo. La descrizione funziona come documentazione inline.

Riga stat card

Da 4 a 5 card metriche in fila orizzontale (o griglia 2x2 nel caso delle Notifiche). Ogni card contiene:

• Un’etichetta in maiuscolo (es. “ACTIVE”, “DOCKED”, “PRIORITY”)
• Un valore numerico
• Un indicatore di colore (bordo sinistro, colore di sfondo, o colore del testo)

Le card sono cliccabili e funzionano come filtri per la lista sottostante. I valori riflettono sempre i totali reali, indipendentemente dal filtro attivo.

Lista scorrevole

L’area di contenuto principale, con elementi individuali (flotte, membri dell’equipaggio, risorse, segnali, ecc.). Ogni riga può essere cliccata per espandere o navigare a una vista di dettaglio. La freccia a destra (>) indica che è disponibile la navigazione in profondità.

---

7. Tipi di pannello

SAGE usa quattro tipi distinti di pannello, ciascuno adatto a diversi tipi di visualizzazione e interazione.

1. Pannello overlay centrale

Usato per: Gestione flotta, Inventario (vista completa), Gestione equipaggio, Crafting, Controllo scansioni, Edifici, Galaxy Command.

Caratteristiche visive:

• Occupa circa il 50-60% della larghezza del viewport e l’80% dell’altezza
• Posizionato orizzontalmente al centro dello schermo
• La mappa galattica è visibile su entrambi i lati e dietro il pannello attraverso uno sfondo semi-trasparente
• Ha una silhouette a scudo/pentagono — il bordo inferiore si incurva verso l’interno formando una punta, come un’insegna militare

Comportamento:

• Solo un pannello overlay centrale può essere aperto alla volta
• Aprire un nuovo pannello centrale sostituisce quello precedente
• Può coesistere con i pannelli ancorati a destra

2. Pannello ancorato a destra

Usato per: Leaderboard, Notifiche, Inventario (modalità ancorata).

Caratteristiche visive:

• Occupa circa il 30-35% della larghezza del viewport e l’intera altezza del viewport
• Ancorato al bordo destro dello schermo
• La mappa galattica è visibile sul lato sinistro
• Forma rettangolare standard (nessuna silhouette a scudo)

Comportamento:

• Può coesistere con pannelli overlay centrali e con la sidebar sinistra
• Più pannelli ancorati a destra probabilmente non si impilano — aprirne uno sostituisce l’altro

3. Sidebar sinistra

Usato per: Vista regione (lista dei sistemi all’interno di una regione), Vista sistema (lista dei corpi celesti all’interno di un sistema).

Caratteristiche:

• Occupa circa il 20% della larghezza del viewport, ancorata al bordo sinistro
• Appare automaticamente quando il giocatore naviga la mappa a livello di regione o sistema
• Scompare automaticamente al cambio di livello di zoom — non si apre o chiude manualmente

4. Vista divisa (multi-pannello simultaneo)

SAGE supporta più pannelli aperti simultaneamente per un multitasking efficiente:

• Vista sistema (sidebar sinistra) + Inventario (ancorato a destra): Sfogliare i corpi celesti di un sistema mentre si controlla la disponibilità di risorse in quella posizione.
• Gestione flotta (centrale) + Notifiche (destra): Gestire le operazioni della flotta mentre si monitora il feed dei segnali.
• Vista sistema (sinistra) + qualsiasi pannello centrale + pannello ancorato a destra: Layout a tre pannelli per la massima densità informativa.

---

8. Navigazione della mappa galattica

La mappa galattica è l’elemento centrale dell’interfaccia di SAGE. Opera a quattro livelli di zoom distinti, ciascuno che rivela progressivamente più dettaglio.

Livello 1 — Vista galassia (predefinita)

L’intera mappa galattica è visibile, mostrando tutti i territori fazione come celle Voronoi colorate:

• MUD: rosso
• ONI: verde/teal
• USTUR: arancione/ambra
• Neutro: grigio/bianco

I sistemi individuali appaiono come piccoli punti all’interno dei loro territori. Questo è lo stato predefinito al caricamento del gioco e quando si clicca “RESET VIEW”.

Livello 2 — Vista regione

Una singola regione è in focus, visualizzata con un bordo esagonale. I singoli sistemi stellari appaiono come punti etichettati. Una sidebar sinistra elenca tutti i sistemi della regione.

Livello 3 — Vista sistema (3D)

Un singolo sistema stellare è visualizzato in prospettiva 3D. La stella centrale è visibile con pianeti, lune e altri corpi celesti in orbita. I percorsi orbitali sono renderizzati come linee ellittiche. Una sidebar sinistra elenca tutti i corpi celesti del sistema. Se il sistema contiene una starbase di proprietà del giocatore, è disponibile il pulsante “ENTER STARBASE”.

Livello 4 — Vista starbase

Accessibile tramite il pulsante “ENTER STARBASE” dalla vista sistema. Transita a un’interfaccia dettagliata di gestione della starbase.

Azioni di navigazione

Azione	Risultato
Clic su una regione nella mappa galassia	Zoom nella regione
Clic su un sistema all’interno di una regione	Zoom nel sistema stellare
Clic “BACK TO REGION”	Torna dalla vista sistema alla vista regione
Clic “ENTER STARBASE”	Entra nella vista dettaglio starbase
Clic “RESET VIEW” (barra inferiore)	Torna alla vista galassia predefinita
Clic “GO TO CSS” (barra inferiore)	Naviga direttamente alla Central Space Station
Scroll del mouse	Zoom in/out sulla mappa nella posizione corrente
Clic e trascina	Sposta la mappa in qualsiasi direzione
Clic su nome sistema nella sidebar	Centra la mappa su quel sistema

---

Continua su:

• Scanning delle Risorse — meccaniche di scanning, pannello Scan Control e strategie di scansione
• Automazione e Notifiche — Galaxy Command, conquista, notifiche e automazione flotta