Nestlé - Nutren Control: Desafio Glicemia Controlada

Descrição integral

Jogo interativo para totem touch em formato retrato criado para ativação da marca Nutren Control, da Nestlé Health Science. O desafio simula o controle da glicemia: o jogador toca na lata do produto no ritmo certo para manter o indicador na faixa central (verde) durante a partida. A experiência foi feita com HTML5, JavaScript puro e CSS com nesting nativo, sem frameworks nem etapa de build. As telas e as animações seguem o design do Figma. O jogo funciona offline via Service Worker, o que garante operação contínua em eventos sem conexão estável. Cada partida é registrada em log no servidor, com um painel de métricas para acompanhar o engajamento da ativação.

Principais funcionalidades:
- Fluxo completo de telas: início com chamada animada, instruções, contagem regressiva 3-2-1, partida e telas de resultado (vitória ou derrota).
- Mecânica física simplificada: cada toque dá um impulso para cima e a gravidade puxa para baixo, com limites de velocidade e de área.
- Estados visuais em tempo real: as faixas estável, atenção e alerta (verde, amarelo e vermelho) mudam conforme a posição do indicador.
- Rastro do indicador desenhado em SVG ao longo da partida, com opção de ligar ou desligar.
- Regra de derrota configurável: perde quem fica um tempo seguido fora da faixa verde; regra opcional de percentual mínimo no verde.
- Palco fixo de 1080×1920 escalado por JS, para validar o layout em qualquer dispositivo mantendo a proporção.
- Animações recriadas a partir do motion do Figma com CSS keyframes: halo pulsante, alternância entre lata e texto, ondas e selos de resultado.
- Funcionamento offline com Service Worker: pré-cache de todos os assets no primeiro acesso; código (HTML, CSS e JS) busca na rede primeiro e usa o cache como reserva; imagens e fontes saem do cache primeiro; versionamento de cache com limpeza automática.
- Log de partidas em PHP: cada partida registra data, hora, tempo jogado, resultado e motivo do término em um CSV compatível com Excel (separador ';' e UTF-8 com BOM), com gravação concorrente segura via flock e validação dos dados recebidos.
- Fila de log offline: sem conexão, os registros ficam guardados no navegador (localStorage) e são reenviados automaticamente quando a internet volta, mantendo a data e a hora originais.
- Painel de métricas em PHP: totais de partidas, vitórias, derrotas, taxa de vitória, tempo médio e horário de pico, com agrupamentos por dia, hora, dia da semana e motivo, barras comparativas, filtro por período e download do CSV.
- Proteção do arquivo de log: acesso direto ao CSV bloqueado via .htaccess, com download disponível apenas pelo painel.
- Recursos para uso em totem: volta automática ao início por inatividade, bloqueio de menu de contexto e zoom, toque via pointer events e barra de espaço para testes no desktop.
- Pré-visualização de cada tela por hash na URL e carregamento de CSS e JS sem cache, para facilitar a homologação.
- Todas as regras do jogo centralizadas em um objeto de configuração.