Sistemas bem arquitetados. IA aplicada ao negócio.

Nestlé - Nutren Control: Desafio Glicemia Controlada

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.