Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Team RoomNew to Visual Studio Code? Get it now.
Team Room

Team Room

aandrelouiis

|
3 installs
| (0) | Free
Mostra um personagem animado para cada colega de equipe que estiver com o VS Code aberto, todos juntos na mesma sala. Multiplayer via Supabase Realtime Presence.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Team Room

Mostra um personagem animado para cada colega de equipe que estiver com o VS Code aberto, todos juntos na mesma "sala". Quando um colega abre o VS Code, o bichinho dele aparece andando pela floresta encantada; quando fecha, some. O multiplayer usa Supabase Realtime Presence.

A sala aparece como uma caixinha acoplada no Explorer (igual ao vscode-pets), com um cenário noturno (estrelas, lua, vaga-lumes) onde os personagens caminham.


✨ Já vem pronto pra usar — não precisa configurar nada

A extensão já vem com um servidor Supabase embutido. Assim que você instala e abre o VS Code, você já entra online na sala padrão e enxerga qualquer colega que também esteja usando a extensão. Zero configuração.

As credenciais embutidas usam a anon key do Supabase, que é pública por design — pode ficar embutida sem risco. O Presence é efêmero (não usa banco de dados nenhum), então ninguém precisa criar tabelas nem contas.

Se quiser usar o seu próprio projeto Supabase (opcional), basta preencher teamRoom.supabaseUrl e teamRoom.supabaseAnonKey nas Settings — esses valores sobrescrevem os embutidos.


🚀 Como usar

  1. Instale a extensão (veja "Instalar" abaixo).
  2. Abra o Explorer (Ctrl+Shift+E) e expanda a seção Team Room. Você já aparece na sala padrão, online.
  3. Clique na engrenagem ⚙ (canto superior direito da caixinha) para:
    • Trocar seu nome e escolher seu bicho (pintinho, galinha ou dragão);
    • Criar uma sala nova (gera um código fofo, ex.: LOBO-4F2A);
    • Entrar numa sala digitando o código;
    • Copiar o código da sala atual para mandar aos colegas;
    • Voltar a salas recentes com um clique.

Todos com o mesmo código de sala se veem. Mande o código para os colegas e todos caem na mesma floresta.


⚙️ Configurações (Settings → busque "Team Room")

Tudo é opcional — a extensão funciona sem mexer em nada.

Configuração O que é Padrão
teamRoom.roomCode Código da sala. Todos com o mesmo código se veem. default-room
teamRoom.displayName Nome que aparece acima do seu personagem. Anônimo
teamRoom.avatarCreature Bicho que representa você: pintinho, galinha ou dragao. dragao
teamRoom.supabaseUrl (opcional) URL de um Supabase seu, se não quiser o embutido. (embutido)
teamRoom.supabaseAnonKey (opcional) Anon key do seu Supabase. (embutido)

Você não precisa abrir as Settings: nome, bicho e sala dá pra configurar direto pela engrenagem ⚙ da caixinha.


📦 Instalar

A partir do .vsix (distribuição privada — mais simples)

A forma mais fácil de mandar para os colegas, sem loja e sem conta:

Extensions → ⋯ (menu) → Install from VSIX… e escolha o arquivo team-room-x.y.z.vsix.

Depois de instalar, faça Developer: Reload Window (ou reinicie o VS Code). Pronto — você já está online.

Gerar um novo .vsix você mesmo

npm install
npm run compile
npx @vscode/vsce package

Isso gera team-room-<versão>.vsix na raiz do projeto.


🧪 Testar com 2 janelas na sua máquina

A pasta test-rooms/ tem duas pastas prontas (colega-A = Ana, colega-B = Bruno), ambas na sala sala-teste.

  1. Developer: Reload Window (ou reinicie o VS Code) para carregar a extensão.
  2. Janela 1: File → Open Folder… → test-rooms/colega-A.
  3. Janela 2 (File → New Window): Open Folder… → test-rooms/colega-B.
  4. Abra o Explorer (Ctrl+Shift+E) e expanda Team Room em cada janela. Os dois personagens aparecem juntos. Feche uma janela e o personagem some na outra.

A barra no topo da caixinha mostra Sala: X · Você: Y — confira se as duas janelas estão na mesma sala.


🎭 Personagens

Cada bicho é uma tira de sprite (8 quadros de caminhada) em media/:

Bicho Arquivo
Pintinho media/pintinho.png
Galinha media/galinha.png
Dragão turquesa media/dragon_walk.png

O movimento (andar, virar, pular) é calculado por JS a partir do relógio (Date.now()), então fica sincronizado entre todas as telas sem combinar nada pela rede.

Para adicionar um bicho novo: coloque a tira de sprite em media/, registre-o no mapa CREATURES em src/extension.ts (arquivo, nº de quadros e escala) e adicione-o ao enum de teamRoom.avatarCreature no package.json.


🛠️ Rodar em modo desenvolvimento (F5)

  1. npm install
  2. Aperte F5 → abre a janela [Extension Development Host] com a extensão.
  3. Abra uma pasta de teste e expanda a seção Team Room no Explorer.

Use npm run watch para recompilar automaticamente ao salvar.


🌐 Publicar na loja oficial (VS Code Marketplace) — opcional

Tudo gratuito. Você só precisa de uma conta Microsoft. Só publique se quiser que a extensão fique pública para qualquer pessoa baixar.

  1. Criar publisher: acesse https://marketplace.visualstudio.com/manage, entre com sua conta Microsoft e Create publisher (escolha um ID único). Coloque esse ID no campo "publisher" do package.json.
  2. Gerar token (PAT): em https://dev.azure.com (mesma conta) → Personal access tokens → New Token → Organization: All accessible organizations, Scopes: Show all scopes → Marketplace → Manage. Copie o token (aparece só uma vez).
  3. Publicar:
    npx @vscode/vsce login SEU-PUBLISHER-ID   # cole o token (PAT)
    npx @vscode/vsce publish
    
  4. Para atualizações: npx @vscode/vsce publish patch (0.1.1 → 0.1.2).

Cursor / VSCodium usam a Open VSX: npx ovsx publish (também grátis).


Resumo rápido

  • Funciona sozinho — Supabase já vem embutido, sem configurar nada.
  • Mesma sala = mesmo roomCode (crie/compartilhe pela engrenagem ⚙).
  • Distribuir fácil = mandar o .vsix.
  • Personalizar = engrenagem ⚙ → nome + bicho.
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft