Criar dev.env.js e production.env.js para carregar as chaves de segurança dependendo do ambiente esperado. Utilizar o .js é justamente para ajudar na leitura das chaves (exportando as variáveis como módulos e importando no config do webpack).

• Botão de remover da playlist: ao clicá-lo, ativar a remoção. Entretanto, ela só será feita quando a notificação sumir, permitindo que o usuário possa desativar caso tenha removido sem querer.
• Teleporte na porta: colocar o mobi Teleporte (o de porta) na porta do quarto, para que, quando clicar 2x, abrir o menu de navegação de músicas.
• Centralização do quarto: quando todos os menus estiverem fechados, centralizar o quarto no centro da tela.
• Animações de música: quando uma música estiver sendo reproduzida, ativar animações do Trax, do chão e também do avatar dançando. Possivelmente, "descer" um globo de balada (animado) em cima do avatar, com efeitos dos reflexos pelas paredes.
• Controles de reprodução: bolar alguma UI para permitir o controle de play/pause, anterior/próximo, volume e talvez posição da música. Talvez reutilizar o player da Habbo Home

Mudar a forma que é calculado a posição dos elementos dentro do Televisor pois utilizando vw, ao abrir em telas de largura baixa, o posicionamento não fica adequado.

Descrição do bug
Ao abrir o Traxômetro pelo celular, o elemento <Televisor /> fica centralizado, porém inacessível seu lado esquerdo, o que pode ocorrer com futuras cenas também. Outro problema, semelhante, é que o zoon da transição está ocorrendo em um ponto diferente do que deveria.

Para reproduzir
Apenas abra o Traxômetro pelo celular e o verá.

Comportamento esperado
É de se esperar que o componente <Televisor /> fique centralizado horizontalmente e verticalmente, porém com suas partes acessíveis. E também que o zoon não seja afetado pela largura/altura do viewport.

Capturas de tela
Ao abrir, o <Televisor /> já está centralizado, mas é impossível navegar para o lado esquerdo:

O mesmo acontece na posição paisagem:

O zoon-out da cena "login" desalinhado:

O zoon-in da cena "principal" desalinhado:

Celular:

• Dispositivo: Motorola Moto G5 Plus
• SO: Android 7.0
• Navegador: Google Chrome
• Versão: 68.0.3440.71

Adicionar o adicionar o atributo text-rendering à todo o componente Traxometro com o valor geometricPrecision para que as fontes, que são pixeladas, se mantenham pixeladas ao invés de sofrerem leves borrões a fim de melhorar a legibilidade, o que é feito por padrão. Como o projeto é todo em pixel art, há a necessidade de que a geometria dos pixels seja mantida.

Utilizar bibliotecas de i18n como react-intl, i18next e react-intl-universal, como bem descrito em The Best Libraries for React i18n, para que a expansão para outros hoteis aconteça sem maiores problemas.

Atual:

Meta:

O fundo do elemento Box fica desalinhado da borda, ficando 1 pixel menor em baixo e do lado direito. Com isso, existe um burato entre o fundo e a borda. Encontrado utilizando mobile.

(o fundo não deverá ser escuro)

Como descrito em: P5-wrapper/react#25
Esperando por respostas...

• Com "auto destroy"

Cadastro

Como na seção de cadastro é necessário que o usuário confirme que ele é dono do nickname no hotel e o objetivo é de não ser exclusivo ao hotel br/pt, é necessário que o usuário define o hotel do qual ele faz parte para que seja verificado a missão do usuário no hotel correto. Aproveitando isso, pode existir uma opção descrita como "Derivado", representando um hotel derivado do Habbo Hotel. Neste caso, não haverá código para inserção na missão, visto que não há API em hotéis derivados.

Exibição do nickname

Com o fato que possivelmente teremos um mesmo nickname para usuários de hotéis diferentes, é necessário uma diferenciação ao exibir nicknames. Até o momento penso em duas opções que podem ser inseridas antes ou depois do nickname:

• Inserir uma tag com a sigla do hotel, e.g.: [BRA] (Brasil), [POR] (Portugal), [DER] (Derivado);
• Exibir uma bandeira do hotel (necessário bolar uma para o hotel derivado).

Para conversão de PNG para SVG com total fidelidade, pode-se usar Pixels.svg. Para otimizar o arquivo SVG, pode-se usar SVGOMG.

Algumas issues podem ser resolvidas:

• #2 Fundo do Box desalinhado

• #3 Fonte Pixelada

• Conversão das imagens rasterizadas em imagens vetoriais de alta resolução

• Pesquisar como usar SVG para criar bordas