micalevisk/pw-2018-1

:mortar_board: :books: Programação para Web (ICC007) :house: :octocat: :white_check_mark:

ICC007 ~ Programação para a Web ~ 2018/1

---

Curso: Ciência da Computação
Professor: David Fernandes de Oliveira
Aluno: Micael Levi ― 21554923

---

Exercícios Resolvidos

HTML5	CSS3	JS	PHP	trabalho final
1 ~ slide 65	1 ~ slide 71	1 ~ slide 47	1 ~ slide 47	Skifree
2 ~ slide 104	2 ~ slide 95	2 ~ slide 64	2 ~ slide 79	Yii
	3 ~ slide 129	3 ~ slide 90	3 ~ slide 105
		4 ~ slide 120
		5 ~ slide 133

pw-2018-1's Issues

[skifree] Otimizar para consumir menos recursos

Adicionar em:

PW-2018-1/skifree/js/skifree.js

Line 157 in dc33a57

function initEventListeners() {

adicionar trecho abaixo para reduzir consumo desnecessários quando a página (a aba) não está aberta

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // suspend all expensive operations:
    // setInverval()
    // animations
    // non-urgent network request
  } else {
    // continue!
  }
})

fonte (vídeo): dotJS 2018 - Felix Rieseberg - JavaScript on the Desktop, Fast and Slow

Implementar regras 06 e 07

06

Alterar a imagem do skier ao colidir caso ele ainda tenha vida. A imagem é a da classe caido-frente

07

Alterar a imagem do skier quando der Game Over. A imagem é a da classe caido-soterrado

[skifree] Implementar limite/fim do jogo

Quando o usuário andar até um valor fixo(?) "máximo", o jogo termina (a placa "finish" indicará a linha que ele deve passar). Assim, o placar será mostrado e skier comemorará o fim do jogo.

[skifree] Alterar lógica do respawn do monstro

Como ele deve aparecer a cada 2 mil metros, trocar cálculo de
https://github.com/micalevisk/ProgWeb/blob/5a3499ddd2da3ade2a36f486b2a57514f41a3ee7/skifree/js/skifree.js#L192

para

(infoBox.andado || 1) % 2000

// ou
(infoBox.andado + 1) % 2001

[Yii] UserSearch não realiza o filtro do curso pelo nome dele

Na action user/index, o campo de busca do curso é dado pelo id_curso, ou seja, um inteiro. Mas deveria (por questões de UX) ser pelo nome (completo ou não) do curso.

Talvez tenha que remover a regra que define o id_curso como integer, para permitir a inserção de strings nesse campo
https://github.com/micalevisk/ProgWeb/blob/935c590b23c7ad8974e06c1fe6ba3e4aa754e1f8/Yii/advanced/common/models/UserSearch.php#L21

Talvez tenha que realizar a busca dos cursos como array que mapeia o id dele para o seu nome, usando o \common\models\Curso::cursos()

Usar abordagem de reuso de instâncias que, atualmente, estão sendo descartadas

Dado o reuso de nós da DOM, não salvar apenas a referência para o elemento, mas também a referência completa da instância (Arvore, a priori) que foi descartada quando retirada do array de obstáculos (arvores, a priori)

O objetivo dessa abordagem é evitar alocações desnecessárias na Heap e reduzir o trabalho do garbage collector ~ que é executado quando faz-se instancia = null

Uma tentativa que usar a mesma instância e atualizar seus atributos, seria chamando o método .constructor que recebe os mesmos tipos de argumentos definidos quando foi instanciado

Criar modelo para representar um "obstáculo" (estático e animado) [associado com a regra 05]

Substituir o modelo Arvore por um genérico que representará qualquer objeto (visto como um elemento no jogo), que pode ser um obstáculo ou não

Incrementar caixa de informação (painel) com informações requisitadas

regra 02

Deverá ser criado uma espécie de painel ao lado do tabuleiro, indicando a quantidade de metros já percorridos pelo jogador e seu número de vidas.
A quantidade metros percorridos definirá a pontuação do jogador, e permitirá sua comparação com outros jogadores.

---

Adicionar um contador de vidas do Skier que, de acordo com a regra 06, deve inicar com 3.
E ter uma interface para adicionar um valor para essa quantia.
Algo como

vidas: 3/3

Posteriormente, alterar o texto "vidas:" para uma representação mais agradável, tipo um símbolo de coração feito em SVG ou usando emoji (vide Using Emojis in HTML, CSS, and JavaScript)

• implementar lógica da contagem de vidas do Skier

[skifree] Utilizar currying

Em vez de forçar o retorno de uma função, deixar que a decisão seja tomada quando a função isNumberBetween for chamada

PW-2018-1/skifree/js/lib/utils.js

Line 2 in 4313770

isNumberBetween: (min, max) => x => x > min == x < max,

Algo como:

isNumberBetween: (min, max, x) => x > min == x < max

// usos:
_.isNumberBetween(0, 3, 1); // true

// antigo "topEstaEntre"
const topEstaNoLimite = _.isNumberBetween.bind(undefined, minTop, maxTop);
topEstaNoLimite( targetTop - parseInt(this.element.style.top) );

Definir classe para cada sprite quer serão utilizado de /img

da especificação, retirar os seguintes obstáculos:
(i) arbusto em chamas; (ii) rocha; (iii) toco de árvore; (iv) árvore grande; (v) cachorro

asda

asdad

[skifree] Realizar otimizações básicas (diretas; sem afetar lógicas) & reduzir custos/consumo

Usar o for normal no lugar de .forEach

• https://jsperf.com/for-in-vs-for-of-vs-foreach
• https://jsperf.com/fast-array-foreach
• http://jsben.ch/Q9oD5
  exemplo:

// trocar
arr.forEach(x => {
  void x;
});

// por
for (let index = 0; index < arr.length; ++index) {
  let x = arr[index]
  void x;
}

Alterar chamadas de funções nativas para as suas equivalentes operações primitivas

exemplo:

// trocar
A.push(v);
// por
A[ A.length ] = v;

vide outros casos de uso em Performance with JavaScript String Objects

para possíveis usos de TypedArray https://stackoverflow.com/questions/24853686/javascript-typedarray-performance ~ guardar informações/números de tamanho fixos em um único número com x bits(?)

Usar abordagem de reuso de nós "perdidos" da DOM

Para evitar a construção constante on the fly de nós na DOM (.createElement), é viável aproveitar os nós que não estão sendo utilizados (por que já "sumiram" da visão do jogador) em vez de criar um novo elemento.
Usando uma espécie de "lost objects pool" para armazenar as instâncias que não estão mais dispostas no display.
Assim, caso uma delas seja reaproveitada, bastará descartar (por exemplo) o trecho de código abaixo:

this.element = document.createElement('div');

ps: essa abordagem só dará certo se os nós "invisíveis" ainda estiverem referenciados.
ps2: pode ser usada já que esses nós não estão sendo removidos da DOM
https://github.com/micalevisk/ProgWeb/blob/05833675540e5f9fddfdcdd35f937fbbae397887/skifree/js/skifree.js#L77

Implementar modularização para evitar o "vazamento" de objetos (no console)

Com a remoção do ESM no commit a44d4f2 cada "módulo" (JS externo) foi importado através da tag script diretamente no HTML. Essa abordagem deixa todo o código implementado nesses módulos, visíveis. Para evitar essa exposição, pode-se usar injeção dinâmica de códigos JS junto com um modelo que representará uma versão básica (necessária) do module.exports e require do CommonJS ~ minha versão aqui

[skifree] Usar o EventEmitter do Node.JS (?)

vide:

• A very simple EventEmitter in pure JavaScript (suitable for both node.js and browsers).
• https://gist.github.com/micalevisk/588f13b11bde5855e02345cb55b41d13
• EventEmitter

e.on('x', function foo(){
// ...
})

// ...

e.emit('x'); // invocar o evento