Skip to main content
Code Review

Return to Answer

Bounty Awarded with 50 reputation awarded by Community Bot
Add full example; added 13 characters in body
Source Link
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

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
  • 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
  • 1.8k
  • 12
  • 33
Loading
default

AltStyle によって変換されたページ (->オリジナル) /