Skip to main content
Code Review

Return to Answer

Bounty Awarded with 50 reputation awarded by CommunityBot
Add full example; added 13 characters in body
Source Link
sineemore
sineemore
  • 1.8k
  • 12
  • 33

Full example

var DiceGame = { dices: [], dicesInGame: 0, luckyDice: 0, drink: false, totalDrinks: 0, gameWon: false }; DiceGame.start = function(num) { this.dicesInGame = num; this.totalDrinks = 0; this.gameWon = false; }; DiceGame.roll = function(luckyDice) { this.luckyDice = luckyDice; this.dices = []; this.drink = true; var removedDices = 0; for (var i = 0; i < this.dicesInGame; i++) { var fairChoice = Math.floor(Math.random() * 6) + 1; if (fairChoice === luckyDice) { this.drink = false; removedDices++; } this.dices.push({ value: fairChoice, lucky: fairChoice === luckyDice }); } this.dicesInGame -= removedDices; if (this.drink) { this.totalDrinks++; } if (this.dicesInGame === 0) { this.gameWon = true; } }; // View var View = { // Public properties model: null, onSelectDiceNumber: function() {}, onSelectDice: function() {} }; View.start = function(el) { this.rootEl = el; this.messageEl = el.querySelector('.message'); this.viewStartEl = el.querySelector('.view-start'); this.diceNumberEl = this.viewStartEl.querySelector('.dice-number'); this.selectDiceNumberEl = this.viewStartEl.querySelector('.select-dice-number'); this.viewGameEl = el.querySelector('.view-game'); this.rollResultsEl = this.viewGameEl.querySelector('.roll-results'); this.diceEls = this.viewGameEl.querySelectorAll('.dice-guess'); this.controlsEl = this.viewGameEl.querySelector('.controls'); // Hide all views this.viewStartEl.style.display = 'none'; this.viewGameEl.style.display = 'none'; this.message(false); // Event listeners this.selectDiceNumberEl.addEventListener('click', (function(ev) { ev.preventDefault(); this.onSelectDiceNumber(this.diceNumberEl.value); }).bind(this)); for (var i = 0; i < this.diceEls.length; i++) { this.diceEls[i].addEventListener('click', (function(ev) { this.onSelectDice(+(ev.target.innerHTML)); }).bind(this)); } }; View.showStart = function() { // Toggle views this.viewStartEl.style.display = ''; this.viewGameEl.style.display = 'none'; }; View.showGame = function() { // Toggle views this.viewStartEl.style.display = 'none'; this.viewGameEl.style.display = ''; // Hide controls on game end this.controlsEl.style.display = this.model.gameWon ? 'none' : ''; // Clear last roll results while (this.rollResultsEl.firstChild) { this.rollResultsEl.removeChild(this.rollResultsEl.firstChild); } // Add new roll results for (var i = 0; i < this.model.dices.length; i++) { var dice = this.model.dices[i]; var el = document.createElement("div"); el.innerHTML = dice.value; if (dice.lucky) { el.className = 'lucky'; } this.rollResultsEl.appendChild(el); } }; // Show status message View.message = function(html) { if (html !== false) { this.messageEl.innerHTML = html; } this.messageEl.style.display = html === false ? 'none' : ''; }; // Controller View.model = DiceGame; View.onSelectDiceNumber = function(num) { num = parseInt(num, 10); if (num > 0) { View.message(false); DiceGame.start(num); View.showGame(); } else { View.message("Select number"); } }; View.onSelectDice = function(num) { DiceGame.roll(num); if (DiceGame.gameWon) { View.message("You won!"); } else { if (DiceGame.drink) { View.message("No dice, drink!"); } else { View.message("Nice guess, " + DiceGame.dicesInGame + " left."); } } View.showGame(); } View.start(document.getElementById("root")); View.showStart();
#root { font-family: sans-serif; text-align: center; margin: 0 auto; max-width: 400px; } #root * { box-sizing: border-box; margin-bottom: 0.5em; } button, input { width: 100%; } .roll-results>div { display: inline-block; background-color: #eee; width: 2em; height: 2em; line-height: 2em; margin-right: 1em; } .roll-results>div.lucky { font-weight: bold; border: 2px solid black; } .dice-guess { display: inline-block; width: 10%; } .message { background-color: #eee; color: #333; padding: 1em; margin-bottom: 1em; }
<div id="root"> <div class="message"></div> <div class="view-start"> <div>Select number of dices:</div> <input class="dice-number" /> <button class="select-dice-number">Start</button> </div> <div class="view-game"> <div class="roll-results"></div> <div class="controls"> <div>Select your lucky dice:</div> <div> <button class="dice-guess">1</button> <button class="dice-guess">2</button> <button class="dice-guess">3</button> <button class="dice-guess">4</button> <button class="dice-guess">5</button> <button class="dice-guess">6</button> </div> </div> </div>

Full example

var DiceGame = { dices: [], dicesInGame: 0, luckyDice: 0, drink: false, totalDrinks: 0, gameWon: false }; DiceGame.start = function(num) { this.dicesInGame = num; this.totalDrinks = 0; this.gameWon = false; }; DiceGame.roll = function(luckyDice) { this.luckyDice = luckyDice; this.dices = []; this.drink = true; var removedDices = 0; for (var i = 0; i < this.dicesInGame; i++) { var fairChoice = Math.floor(Math.random() * 6) + 1; if (fairChoice === luckyDice) { this.drink = false; removedDices++; } this.dices.push({ value: fairChoice, lucky: fairChoice === luckyDice }); } this.dicesInGame -= removedDices; if (this.drink) { this.totalDrinks++; } if (this.dicesInGame === 0) { this.gameWon = true; } }; // View var View = { // Public properties model: null, onSelectDiceNumber: function() {}, onSelectDice: function() {} }; View.start = function(el) { this.rootEl = el; this.messageEl = el.querySelector('.message'); this.viewStartEl = el.querySelector('.view-start'); this.diceNumberEl = this.viewStartEl.querySelector('.dice-number'); this.selectDiceNumberEl = this.viewStartEl.querySelector('.select-dice-number'); this.viewGameEl = el.querySelector('.view-game'); this.rollResultsEl = this.viewGameEl.querySelector('.roll-results'); this.diceEls = this.viewGameEl.querySelectorAll('.dice-guess'); this.controlsEl = this.viewGameEl.querySelector('.controls'); // Hide all views this.viewStartEl.style.display = 'none'; this.viewGameEl.style.display = 'none'; this.message(false); // Event listeners this.selectDiceNumberEl.addEventListener('click', (function(ev) { ev.preventDefault(); this.onSelectDiceNumber(this.diceNumberEl.value); }).bind(this)); for (var i = 0; i < this.diceEls.length; i++) { this.diceEls[i].addEventListener('click', (function(ev) { this.onSelectDice(+(ev.target.innerHTML)); }).bind(this)); } }; View.showStart = function() { // Toggle views this.viewStartEl.style.display = ''; this.viewGameEl.style.display = 'none'; }; View.showGame = function() { // Toggle views this.viewStartEl.style.display = 'none'; this.viewGameEl.style.display = ''; // Hide controls on game end this.controlsEl.style.display = this.model.gameWon ? 'none' : ''; // Clear last roll results while (this.rollResultsEl.firstChild) { this.rollResultsEl.removeChild(this.rollResultsEl.firstChild); } // Add new roll results for (var i = 0; i < this.model.dices.length; i++) { var dice = this.model.dices[i]; var el = document.createElement("div"); el.innerHTML = dice.value; if (dice.lucky) { el.className = 'lucky'; } this.rollResultsEl.appendChild(el); } }; // Show status message View.message = function(html) { if (html !== false) { this.messageEl.innerHTML = html; } this.messageEl.style.display = html === false ? 'none' : ''; }; // Controller View.model = DiceGame; View.onSelectDiceNumber = function(num) { num = parseInt(num, 10); if (num > 0) { View.message(false); DiceGame.start(num); View.showGame(); } else { View.message("Select number"); } }; View.onSelectDice = function(num) { DiceGame.roll(num); if (DiceGame.gameWon) { View.message("You won!"); } else { if (DiceGame.drink) { View.message("No dice, drink!"); } else { View.message("Nice guess, " + DiceGame.dicesInGame + " left."); } } View.showGame(); } View.start(document.getElementById("root")); View.showStart();
#root { font-family: sans-serif; text-align: center; margin: 0 auto; max-width: 400px; } #root * { box-sizing: border-box; margin-bottom: 0.5em; } button, input { width: 100%; } .roll-results>div { display: inline-block; background-color: #eee; width: 2em; height: 2em; line-height: 2em; margin-right: 1em; } .roll-results>div.lucky { font-weight: bold; border: 2px solid black; } .dice-guess { display: inline-block; width: 10%; } .message { background-color: #eee; color: #333; padding: 1em; margin-bottom: 1em; }
<div id="root"> <div class="message"></div> <div class="view-start"> <div>Select number of dices:</div> <input class="dice-number" /> <button class="select-dice-number">Start</button> </div> <div class="view-game"> <div class="roll-results"></div> <div class="controls"> <div>Select your lucky dice:</div> <div> <button class="dice-guess">1</button> <button class="dice-guess">2</button> <button class="dice-guess">3</button> <button class="dice-guess">4</button> <button class="dice-guess">5</button> <button class="dice-guess">6</button> </div> </div> </div>

correct typos/spelling
Source Link
Sᴀᴍ Onᴇᴌᴀ ♦
Sᴀᴍ Onᴇᴌᴀ ♦
  • 29.6k
  • 16
  • 46
  • 203

This is how one may rewrite your model to be movemore self-centric.

After every roll() call the properties luckyDice, dices and drink are allowed to be examedexamined by view or controller.

In provided example all input was stored in two variables and console.log() calls wherewere the only output. You may call this sort of a view. All other code from example was part of controller.

This is how one may rewrite your model to be move self-centric.

After every roll() call the properties luckyDice, dices and drink are allowed to be examed by view or controller.

In provided example all input was stored in two variables and console.log() calls where the only output. You may call this sort of a view. All other code from example was part of controller.

This is how one may rewrite your model to be more self-centric.

After every roll() call the properties luckyDice, dices and drink are allowed to be examined by view or controller.

In provided example all input was stored in two variables and console.log() calls were the only output. You may call this sort of a view. All other code from example was part of controller.

Fix code
Source Link
sineemore
sineemore
  • 1.8k
  • 12
  • 33
var DiceGame = { dices: [], dicesInGame: 0, luckyDice: 0, drink: false, totalDrinks: 0, gameWon: false }; DiceGame.start = function (num) { this.dicesInGame = num; this.totalDrinks = 0; this.gameWon = false; }; DiceGame.roll = function (luckyNumberluckyDice) { this.luckyNumberluckyDice = luckyNumber;luckyDice; this.dices = []; this.drink = true; var removedDices = 0; for (var i = 0; i < this.dicesInGame; i++) { var fairChoice = Math.floor(Math.random() * 6) + 1; if (fairChoice === luckyNumberluckyDice) { this.drink = false; this.dicesInGame--;removedDices++; } this.dices.push({ value: fairChoice, lucky: fairChoice === luckyNumberluckyDice }); } this.dicesInGame -= removedDices; if (this.drink) { this.totalDrinks++; } if (this.dicesInGame === 0) { this.gameWon = true; } }; // Example // press "Run code snippet" to see it in action var count = 7; // Seven dices var lucky = 6; // My lucky number for today DiceGame.start(count); while (!DiceGame.gameWon) { DiceGame.roll(lucky);   console.log("dices to beat: " + DiceGame.dices.length); if (DiceGame.drink) { console.log("...drinking."); } else { console.log("lucky!"); } } // I bet I am drunk already console.log("Game won! Total drinks: " + DiceGame.totalDrinks);

After every roll() call the properties luckNumberluckyDice, dices and drink properties are allowed to be examed by view or controller.

var DiceGame = { dices: [], dicesInGame: 0, luckyDice: 0, drink: false, totalDrinks: 0, gameWon: false }; DiceGame.start = function (num) { this.dicesInGame = num; this.totalDrinks = 0; this.gameWon = false; }; DiceGame.roll = function (luckyNumber) { this.luckyNumber = luckyNumber; this.dices = []; this.drink = true; for (var i = 0; i < this.dicesInGame; i++) { var fairChoice = Math.floor(Math.random() * 6) + 1; if (fairChoice === luckyNumber) { this.drink = false; this.dicesInGame--; } this.dices.push({ value: fairChoice, lucky: fairChoice === luckyNumber }); } if (this.drink) { this.totalDrinks++; } if (this.dicesInGame === 0) { this.gameWon = true; } }; // Example // press "Run code snippet" to see it in action var count = 7; // Seven dices var lucky = 6; // My lucky number for today DiceGame.start(count); while (!DiceGame.gameWon) { DiceGame.roll(lucky); if (DiceGame.drink) { console.log("...drinking."); } else { console.log("lucky!"); } } // I bet I am drunk already console.log("Game won! Total drinks: " + DiceGame.totalDrinks);

After every roll() luckNumber, dices and drink properties are allowed to be examed by view or controller.

var DiceGame = { dices: [], dicesInGame: 0, luckyDice: 0, drink: false, totalDrinks: 0, gameWon: false }; DiceGame.start = function (num) { this.dicesInGame = num; this.totalDrinks = 0; this.gameWon = false; }; DiceGame.roll = function (luckyDice) { this.luckyDice = luckyDice; this.dices = []; this.drink = true; var removedDices = 0; for (var i = 0; i < this.dicesInGame; i++) { var fairChoice = Math.floor(Math.random() * 6) + 1; if (fairChoice === luckyDice) { this.drink = false; removedDices++; } this.dices.push({ value: fairChoice, lucky: fairChoice === luckyDice }); } this.dicesInGame -= removedDices; if (this.drink) { this.totalDrinks++; } if (this.dicesInGame === 0) { this.gameWon = true; } }; // Example // press "Run code snippet" to see it in action var count = 7; // Seven dices var lucky = 6; // My lucky number for today DiceGame.start(count); while (!DiceGame.gameWon) { DiceGame.roll(lucky);   console.log("dices to beat: " + DiceGame.dices.length); if (DiceGame.drink) { console.log("...drinking."); } else { console.log("lucky!"); } } // I bet I am drunk already console.log("Game won! Total drinks: " + DiceGame.totalDrinks);

After every roll() call the properties luckyDice, dices and drink are allowed to be examed by view or controller.

Source Link
sineemore
sineemore
  • 1.8k
  • 12
  • 33