Version 1.5.7 in production!
Hi everyone! How are you all doing? Ready for some more updates? This time I focused on some visual improvements, but they're actually more focused on the visitor experience. So, in the search for new players, I decided to try and improve this part, which is the first contact for people who are going to play and who don't have a Hive account.
Before that, I applied these two images that 
Okay, after that, I asked Claude to review a guest's experience and what could be improved. The following points were raised:
| Impact | Effort | What it is |
|---|---|---|
| High | Low | Random username for guest |
| High | Low | localStorage instead of sessionStorage |
| High | Low | Invert visual hierarchy of the login page |
| High | Medium | Contextual conversion gates (post-victory, when clicking PvP) |
| High | High | Linear first access tutorial |
| Medium | High | Wage-free guest-vs-guest PvP |
Thus, the work was first carried out on the first three items, which are simpler and faster to implement.
1). Random Username — LoginPage.jsx
Added the randomGuestName() function that generates handles like Shadow_Mage_342, Iron_Knight_871, etc. using prefixes and classes from the game universe
The doGuest() function now uses this name instead of the fixed 'guest'
The mode: 'guest' continues to determine guest behavior throughout the code — the name is only for display, with no risk of breaking anything
2). localStorage instead of sessionStorage
session.js: getSession() now reads sessionStorage first (Hive sessions, intentional for security) and then localStorage as a fallback (guest sessions)
LobbyPage.jsx: hf_guest_formation reading and writing migrated to localStorage
LobbyPage.jsx: doLogout() now clears localStorage as well — without this, the guest would click logout and be immediately redirected back to the lobby by getSession()
3). Inverted Visual Hierarchy — LoginPage.jsx + index.css
"Play as Guest" became the primary CTA: vibrant purple gradient, font-size 15px, shimmer animation, transform on hover
"Enter with Hive Keychain" became secondary: transparent background, subtle border, muted blue text
Added hint "No account required" below the guest button
Order in JSX: Guest → "or" → form Hive
After these changes, I did some simple tests and everything went well. Therefore, I requested that the other 3 changes be implemented to differentiate the experience of a visiting user:
4). Contextual Conversion Gates
BattlePage.jsx: After a guest's first bot victory, the GuestConversionModal opens with the context 'victory' (1.5s delay to avoid cutting the animation). It appears only once via the hf_conv_victory flag in localStorage.
LobbyPage.jsx: Clicking "FIND MATCH" as a guest opens the modal with the 'pvp' context. Formation slots 2 and 3 now render a locked card (🔒) that opens the modal with the 'formation' context.
5). First Access Tutorial
- LobbyPage.jsx: useEffect detects isGuest && !hf_tutorial_done and displays the TutorialOverlay after 500ms. 3 steps: recruit heroes → assemble formation → start battle. "Skip" or "Play now!" mark hf_tutorial_done in localStorage.
6). PvP guest without wager
session.js: getSession() when reading from localStorage copies back to sessionStorage — so the legacy battle.js finds the session even after closing and reopening the tab.
battle.js: pvpInit sends {guestName} in the socket auth when the session is in 'guest' mode.
server.js: Middleware io.use() accepts guestName and sets socket.data.isGuest = true. Guests are blocked from join_queue but can use create_free_match / join_free_match. Tavern and queue do not register guests. The disconnect handler separates tavern clearing (hive only) from forfeit (all).
LobbyPage.jsx: Socket connects with {guestName} for guests. New card "Free PvP · Guest Match" with "CREATE ROOM" (generates a 6-letter code) and "JOIN" field — visible only to guests.
Now the focus of the login screen is for the visiting user to enter; they need to log in and test, play, and of course, like the game. After that, they will try to create a hive account and really get into the game.
When you join as a guest, you can now create a room so you can share a code with a friend or anyone else who joined as a guest. Of course, there are no Hive earnings or anything like that, and the experience is limited, but it's a better start to testing and attracting new people.
With this battle between two guests, the excitement is already starting to increase. Of course, there will still be new mechanics and options to be implemented to improve the overall experience, whether as a guest or as a Hive user.
That's all for today, see you next time everyone!
Versão 1.5.7 em produção!
Olá pessoal! Tudo bem com vocês? Pronto para mais algumas atualizações? Dessa vez foquei em algumas melhorias visuais, mas que na verdade são bem focadas na experiência para um visitante, sendo assim, na busca por novos jogadores, decidi tentar melhorar essa parte que é o primeiro contato para as pessoas que forem jogar e que não têm uma conta Hive.
Antes disso, apliquei essas duas imagens que o
Ok, após isso, pedi para que a Claude revisasse a experiência de um guest e o que podia ser melhorado. Com isso, foi levantado os seguintes pontos:
| Impacto | Esforço | O que é |
|---|---|---|
| Alto | Baixo | Username aleatório para guest |
| Alto | Baixo | localStorage em vez de sessionStorage |
| Alto | Baixo | Inverter hierarquia visual da login page |
| Alto | Médio | Gates de conversão contextuais (pós-vitória, ao clicar PvP) |
| Alto | Alto | Tutorial linear de primeiro acesso |
| Médio | Alto | PvP guest-vs-guest sem wager |
Dessa forma, a atuação foi primeiro realizada nos três primeiros itens, que são mais simples e rápidos de serem implementados.
1). Username aleatório — LoginPage.jsx
- Adicionado a função randomGuestName() que gera handles como Shadow_Mage_342, Iron_Knight_871, etc. usando prefixos e classes do universo do jogo
- A função doGuest() agora usa esse nome em vez de 'guest' fixo
- O mode: 'guest' continua sendo o que determina o comportamento de guest em todo o código — o nome é só display, sem risco de quebrar nada
2). localStorage em vez de sessionStorage
- session.js: getSession() agora lê sessionStorage primeiro (sessões Hive, intencional por segurança) e depois localStorage como fallback (sessões guest)
- LobbyPage.jsx: leitura e escrita de hf_guest_formation migradas para localStorage
- LobbyPage.jsx: doLogout() agora limpa localStorage também — sem isso, o guest clicaria em logout e seria imediatamente redirecionado de volta ao lobby pelo getSession()
3). Hierarquia visual invertida — LoginPage.jsx + index.css
- "Play as Guest" virou o CTA principal: gradiente roxo vibrante, font-size 15px, animação shimmer, transform no hover
- "Enter with Hive Keychain" virou secundário: fundo transparente, borda sutil, texto azul muted
- Adicionado hint "No account required" abaixo do botão guest
- Ordem no JSX: Guest → "or" → form Hive
Após essas alterações, fiz alguns testes simples e tudo correu bem. Então com isso, solicitei que fosse implementada as outras 3 alterações para que a experiência de um usuário visitante seja diferenciada:
4). Gates de conversão contextual
BattlePage.jsx: Após a 1ª vitória bot de um guest, abre o modal GuestConversionModal com contexto 'victory' (delay de 1.5s para não cortar a animação). Aparece só uma vez via flag hf_conv_victory no localStorage.
LobbyPage.jsx: Clicar em "FIND MATCH" como guest abre o modal com contexto 'pvp'. Slots 2 e 3 de formação agora renderizam um card bloqueado (🔒) que abre o modal com contexto 'formation'.
5). Tutorial de primeiro acesso
- LobbyPage.jsx: useEffect detecta isGuest && !hf_tutorial_done e exibe o TutorialOverlay após 500ms. 3 passos: recrutar heróis → montar formação → iniciar batalha. "Skip" ou "Play now!" marcam hf_tutorial_done no localStorage.
6). PvP guest sem wager
- session.js: getSession() ao ler de localStorage copia de volta para sessionStorage — assim o battle.js legado encontra a sessão mesmo após fechar e reabrir a aba.
- battle.js: pvpInit envia { guestName } no auth do socket quando a sessão é mode 'guest'.
- server.js: Middleware io.use() aceita guestName e seta socket.data.isGuest = true. Guests são bloqueados do join_queue mas podem usar create_free_match / join_free_match. Taverna e queue não registram guests. O disconnect handler separa limpeza de taverna (só hive) de forfeit (todos).
- LobbyPage.jsx: Socket conecta com { guestName } para guests. Novo card "Free PvP · Guest Match" com "CREATE ROOM" (gera código de 6 letras) e campo "JOIN" — visível só para guests.
Agora o foco da tela de login é para que o usuário visitante entre, ele precisa entrar e testar, jogar e claro, gostar do jogo, sendo assim, após isso ele fica tentando a criar a conta hive e realmente entrar de cabeça no jogo.
Quando entrar como um convidado, agora é possível criar uma sala para que você possa compartilhar um código com um amigo ou qualquer outra pessoa que entrou como convidado. Claro que não existe ganhos de Hive ou coisa do tipo e a experiência é limitada, mas de qualquer forma, já é um começo melhor para testar e atrair novas pessoas.
Com essa batalha entre 2 convidados, a emoção já começa a ficar mais frequente. Claro que ainda haverá novas mecânicas e opções a serem implementadas para melhorar a experiência geral, seja como um convidado ou como um usuário Hive.
Por hoje é isso, até a próxima pessoal!
Horizon Forge >>Discord<< | Follow on X
🔥Please, consider helping by using my reference links🔥
| Post To Earn | DePIN | Win SATS | Win SATS | Have Fun To Earn |
| Publish0x | Honeygain | Slice | ZBD | Rumble Arcade |