camelo003 / semaforoblockly Goto Github PK

No bloco de semáforo o menu dropdown dá a opção de escolher qual luz alterar: vermelha, amarela ou verde, mostrando um emoji de círculo com a respectiva cor. Porém alguns navegadores não renderizam corretamente os emojis verde e amarelo. A solução por ora vai ser escrever o nome da cor por extenso.

A definição das opções no menuzinho dropdown estão no arquivo trafficLight.js.

Navegador

Firefox

Passos de reproducao

1. Colocar um semaforo no ambiente
   
   
2. Apertar Play!

Detalhes

Uncaught SyntaxError: expected expression, got ';'

Linha 1 de script.js:

var myTrafficLights = [];

O site razoavelmente responde bem no mobile. Isso é, é possível manipular os blocos com touch, deslizar para realizar um movimento panorâmico e gesto de pinça para zoom (apesar de invertido). Mas idealmente os blocos deveriam aparecer maiores quando no celular e não dividir espaço com o canvas do cruzamento.

Sugestão de solução: quando no mobile blocos aparecem em tela cheia junto de um botão "alternar", que leva pra o canvas com a simulação do cruzamento.

https://p5js.org/reference/#/p5/disableFriendlyErrors

A biblioteca Blockly fornece meios pra salvar a sessão, isso é, a disposição dos blocos e recuperá-la. Mas esse feature não foi implementado. Isso pode ser bem frustrante para um aluno que ficou muito tempo trabalhando em sua lógica dos blocos e depois, por qualquer razão, teve a página recarregada.

Segue link para serialização, salvar e resgatar a disposição dos blocos na documentação do Google.

Fazer com que os carros comecem a passar junto com o início da execução da lógica dos blocos.

A lógica que faz os carros aparecerem está escrita no arquivo script.js, assim como a alteração da variável de controle, spawn. Isso foi feito para fins de facilitar os testes, mas convém que os carros iniciem junto da lógica dos blocos (o que hoje acontece no callback do botão play).

Atualmente todos os gráficos são feitos com funções de desenho da própria p5.j5. Mas podem ficar mais legais. Para fins de referência:

• Os carros estão contidos em um retângulo de 40x60px;
• O cruzamento inteiro está num elemento canvas de 500x500px, tendo cada pista 150px de largura.

Sugestão: fazer novos gráficos em cima de um print atual, para manter as áreas de faixa de pedestre, cruzamento...

Para que o bloco de reloginho funcionasse da maneira correta foi feito uma loucurinha de javascript uso de funções assíncronas. Basicamente toda a configuração de blocos gera uma string que será avaliada na hora do botão Play!. O bloco do reloginho em particular gera a string do código que chama uma função assíncrona que espera por uma função síncrona (vide clock.js:6). Funcionou como o esperado, mas esse código roda concorrencialmente ao javascript da simulação, o que é o esperado, mas também concorrente à uma nova execução dos blocos após eventual clique repetido no botão Play!. Como esse código pode muito bem ser um loop infinito (lógica dos semáforos compreendida pelo bloco enquanto verdadeiro) isso leva a comportamentos inesperados (!!!).

Pelo o que li, talvez seja possível cancelar a execução assíncrona através do objeto retornado pela Promisse, mas honestamente não achei como fazer.

O que precisa acontecer: a cada vez que o botão Play! for apertado ele precisa cancelar qualquer lógica dos blocos que estiver rodando e iniciar uma nova. Taaaalvez será preciso reescrever a forma como os blocos de relógio funcionam 😮.

But hey, not a js expert here...

É necessário algum parâmetro para garantir que o aluno completou o exercício. Esse parâmetro deve ser algo como "em X minutos Y carros passaram sem que houvesse nenhuma batida". Para isso é necessário implementar as seguintes tarefas:

• Testes. Testar uma lógica ideal e verificar bons valores para X e Y (tempo mínimo e qtde. de carros);
• Implementar um contador de carros que atravessam a tela em segurança;
• Implementar um timer;
• Implementar condição de vitória (baseada nos valores levantados nos testes).

Hoje a "caixa de ferramentas" do workspace do Blockly está dividida em categorias, mas na verdade isso não é necessário. Os blocos podem estar disponíveis diretamente, isso é, sem organização por categorias. Os únicos blocos necessários são:

• Variável verdadeiro/falso, hoje na categoria Lógica;
• Bloco repita enquanto, hoje na categoria Loops;
• Variável número, categoria Matemática;
• Bloco emoji semáforo, categoria Cruzamento;
• Bloco emoji reloginho, também categoria Cruzamento.

As definições da caixa de ferramentas acontecem no objeto toolbox, conforme visto na referência oficial.