Transformando a escolha de lugares da turma em um jogo online - Seat Stealer

Contexto

• Um projeto paralelo que comecei no ensino médio, com vontade de transformar a escolha de lugares, algo chato e tedioso, em algo divertido
• A ideia era que os próprios alunos participassem por seus dispositivos e disputassem os lugares que quisessem
• Na época, a lista de alunos também era hardcoded e o código virou um completo espaguete, mas o resultado ficou bem convincente
• Nunca vou esquecer o primeiro dia em que apresentei isso com a autorização do professor responsável pela turma. A reação foi excelente, e o projeto acabou sendo usado durante o ano inteiro

Reconstrução

• Depois de me formar, a escola entrou em contato. O pedido era adaptar esse programa para a turma atual.
• Mas o código estava enrolado demais e, como a lista de alunos e a disposição dos lugares estavam hardcoded, decidi reconstruir tudo para criar um projeto sustentável e de fácil manutenção
• Estrutura
  • Backend: para que todos os dados dos alunos fossem processados no cliente, o backend faz apenas o papel de uma espécie de "servidor de jogo", entregando os dados.
    • Node.JS
    • Socket.IO
  • Frontend - admin: gerencia todos os dados dos alunos e coordena o andamento do jogo. Esta tela foi projetada considerando um ambiente em que ela é exibida na TV.
    • SvelteKit
    • Socket.IO
  • Frontend - aluno: conecta-se ao admin por meio do backend para trocar dados.
    • SvelteKit
    • Socket.IO
• Foi adotado um editor com UI amigável para facilitar a edição da disposição dos lugares e da lista de alunos.

Cenário

1. Na página de admin, ao iniciar a "escolha de lugares online" e fazer upload do arquivo com os dados dos alunos, uma nova "sala" é criada e aparece um QR code para os alunos acessarem.
2. Os alunos escaneiam o QR code com seus próprios dispositivos para entrar no jogo. Na página de admin, é possível verificar e gerenciar o status de conexão dos alunos.
3. Quando o admin inicia o jogo, a tela de "seleção de lugar" aparece na página dos alunos. Ao votar no lugar desejado, o registro aparece na página de admin.
4. Quando todos os alunos terminam de votar, a página de admin mostra o resultado.
5. Entre os alunos que escolheram o mesmo lugar, é feito na hora um jogo simples
   • pedra, papel e tesoura, dado, minigame etc., a critério do professor
6. O aluno que vencer o jogo fica com aquele lugar.
7. Repete-se o processo até que todos os alunos tenham seus lugares definidos

Impressões finais

• Para deixar claro, com transparência, que os dados dos alunos não são coletados nem utilizados, transformei o projeto em código aberto.
• Como ele foi pensado para ser executado em escolas, o mais difícil foi projetá-lo para lidar com todos os tipos de situações excepcionais.
  • Se um aluno perder a conexão no meio do jogo, o sistema tenta reconectar e, se falhar, ele pode continuar de onde parou ao entrar novamente.
  • Se um aluno estiver ausente, o jogo ainda pode prosseguir mesmo sem sua participação.
  • Se um aluno chegar atrasado, ele ainda pode entrar durante o jogo e continuar participando.
  • Se alguém tentar se passar por outro aluno, é possível expulsá-lo da sala.
• Para que ele possa ser usado em diferentes turmas, criei um guia de uso amigável e o publiquei no YouTube.
  • https://youtu.be/C4ezwIrIfjc
• Como ainda é período de férias, ainda não pude ver os resultados do projeto, então ele acabou me dando um motivo para esperar pelo semestre da primavera, algo que eu nunca tinha aguardado antes.
• Se você conhece algum professor, por favor compartilhe. Obrigado.

[seoulrain]

No Chrome, mesmo adicionando nomes dos alunos, a contagem não aumenta.

[2147483647]

Pode ser incômodo escrever todos os nomes, então seria bom se houvesse a opção de trocar para usar apenas números.

[joon14]

Fofo haha
Dá para ver alguns pontos pequenos a ajustar, mas vou compartilhar com professores ao meu redor

[geeksk553]

Que ideia divertida!