Review 1

[tshemsedinov]

• Use prettier and eslint with my config
• No need to have classes just for structures, better define it as a objects:

  ColorMemory/game.js

  Lines 1 to 79 in bc3b820

  	class Elements {
  	constructor() {
  	this.blue = document.querySelector('.blue');
  	this.red = document.querySelector('.red');
  	this.green = document.querySelector('.green');
  	this.yellow = document.querySelector('.yellow');
  	this.pink = document.querySelector('.pink');
  	this.orange = document.querySelector('.orange');
  	this.page = document.querySelector('.noclick');
  	this.bonus = document.getElementById('bonusId');
  	this.hint = document.getElementById('hint');
  	this.tiles = [this.blue, this.red, this.green, this.yellow];
  	this.sequence = this.tiles;
  	this.sequenceToGuess = this.sequence;
  	}
  	}
  	class Interaction {
  	constructor() {
  	this.startBtn = document.getElementById('startBtn');
  	this.stopBtn = document.getElementById('stopBtn');
  	this.rangeTiles = document.getElementById('rangeTiles');
  	this.rangeSpeed = document.getElementById('rangeSpeed');
  	this.labelTiles = document.getElementById('labelTiles');
  	this.labelSpeed = document.getElementById('labelSpeed');
  	this.labelCheckboxBonus = document.getElementById('labelCheckboxBonus');
  	this.labelCheckboxSpeed = document.getElementById('labelCheckboxSpeed');
  	this.labelSpeed = document.getElementById('labelSpeed');
  	this.speedIndicator = document.getElementById('speed');
  	this.checkboxBonus = document.getElementById('checkboxBonuses');
  	this.checkboxSpeed = document.getElementById('checkboxSpeed');
  	}
  	}
  	class Visuals {
  	constructor() {
  	this.wrongSound = document.getElementById('wrongSound');
  	this.bonusSound = document.getElementById('bonusSound');
  	this.revertSound = document.getElementById('revertSound');
  	this.textStart = 'Click on the button to start the game!';
  	this.textRemember = 'Remember the sequence!';
  	this.textRepeat = 'Now repeat the sequence!';
  	this.textWrong = 'Wrong tile! Start a new game to try again!';
  	this.textBonus = 'You got an extra life!';
  	}
  	}
  	class Timers {
  	constructor() {
  	this.timeBonusLife = 10000;
  	this.timeNextSequence = 700;
  	this.timeNextTileStart = 250;
  	this.timeFlashLifeStart = 800;
  	this.timeNextTile = 250;
  	this.timeFlashLife = 800;
  	this.bonusTimer = 0;
  	}
  	}
  	const options = {
  	inPlay: false,
  	canClick: false,
  	haveExtraLife: false,
  	hadExtraLife: false,
  	isBonusEnabled: false,
  	canGetBonus: true,
  	speedMode: false,
  	score: 0,
  	scoreBest: 0,
  	maxBonusOffset: 95,
  	minBonusOffset: 12,
  	getBonusChance: 0.3,
  	speedModifier: 0.8,
  	};
  	const visuals = new Visuals();
  	const elements = new Elements();
  	const interaction = new Interaction();
  	const timers = new Timers();

• Extract function random:

  ColorMemory/game.js

  Line 82 in bc3b820

  const random = elements.tiles[parseInt(Math.random() * elements.tiles.length)];

• Use random here as well:

  ColorMemory/game.js

  Line 96 in bc3b820

  elements.bonus.style.left = Math.floor(Math.random() * (max - min + 1) + min) + '%';

• Better create pure function for this:

  ColorMemory/game.js

  Line 121 in bc3b820

  function getRandomBool() {

• Try to decompose:

  ColorMemory/game.js

  Line 167 in bc3b820

  const onTileClicked = tileClicked => {

• Try to optimimize using collections:

  ColorMemory/game.js

  Lines 208 to 242 in bc3b820

  	interaction.stopBtn.classList.remove('hidden');
  	interaction.startBtn.classList.add('hidden');
  	interaction.rangeTiles.classList.add('hidden');
  	interaction.rangeSpeed.classList.add('hidden');
  	interaction.labelTiles.classList.add('hidden');
  	interaction.labelSpeed.classList.add('hidden');
  	interaction.labelCheckboxBonus.classList.add('hidden');
  	interaction.checkboxBonus.classList.add('hidden');
  	interaction.labelCheckboxSpeed.classList.add('hidden');
  	interaction.checkboxSpeed.classList.add('hidden');
  	interaction.speedIndicator.classList.add('hidden');
  	}
  	function stopGame() {
  	options.inPlay = false;
  	options.score = 0;
  	options.haveExtraLife = false;
  	timers.timeNextTile = timers.timeNextTileStart;
  	timers.timeFlashLife = timers.timeFlashLifeStart;
  	updateScore();
  	elements.sequence.splice(0);
  	elements.hint.innerHTML = visuals.textStart;
  	elements.bonus.classList.remove('bonusOn');
  	elements.page.classList.add('noclick');
  	interaction.stopBtn.classList.add('hidden');
  	interaction.startBtn.classList.remove('hidden');
  	interaction.rangeTiles.classList.remove('hidden');
  	interaction.rangeSpeed.classList.remove('hidden');
  	interaction.labelTiles.classList.remove('hidden');
  	interaction.labelSpeed.classList.remove('hidden');
  	interaction.labelCheckboxBonus.classList.remove('hidden');
  	interaction.checkboxBonus.classList.remove('hidden');
  	interaction.labelCheckboxSpeed.classList.remove('hidden');
  	interaction.checkboxSpeed.classList.remove('hidden');
  	interaction.speedIndicator.classList.remove('hidden');

• Magic number:

  ColorMemory/game.js

  Lines 245 to 259 in bc3b820

  	function tilesSlider() {
  	const range = document.getElementById('rangeTiles').value;
  	if (range >= 5 && elements.pink.classList.contains('hidden')) {
  	elements.pink.classList.remove('hidden');
  	elements.tiles.push(elements.pink);
  	} else if (range < 5) {
  	elements.tiles.splice(4, 1);
  	elements.pink.classList.add('hidden');
  	}
  	if (range == 6) {
  	elements.orange.classList.remove('hidden');
  	elements.tiles.push(elements.orange);
  	} else {
  	elements.tiles.splice(5, 1);
  	elements.orange.classList.add('hidden');