I did a simple dice game using what I learned about separating the 'view', 'model', and 'control'. I am quite clear on what the model is (it's the data and state). But I'm a bit confused on the difference between the View and Controller.
This is the revised Codepen (following some suggestions)
var model = (function() {
var diceSet = [];
var diceToRemove = 0;
var totalDiceRemoved = 0;
var selectedDiceVal = 0;
var permDiceLength = 0;
return {
diceSet: diceSet,
diceToRemove: diceToRemove,
totalDiceRemoved: totalDiceRemoved,
selectedDiceVal: selectedDiceVal
}
})();
var view = (function() {
var domElements = {
genDiceDOM: document.getElementById("trigger-gen-dice"),
rollDiceDOM: document.getElementById("trigger-roll-dice"),
diceContainerDOM: document.getElementById("dice-container"),
messageDOM: document.getElementById("message"),
genDiceContDOM: document.getElementById("container-init"),
mainGameDOM: document.getElementById("container-main-game"),
valueSelector: document.getElementById('choose-dice'),
gameControllerDOM: document.getElementById('game-controller'),
inputNumDice: document.getElementById("input-num-dice"),
diceRollingDOM: document.getElementById("rolling-dice-anim")
}
var diceImages = {
dice1: "https://image.ibb.co/mARW6J/dice_1.png",
dice2: "https://image.ibb.co/ckY00d/dice_2.png",
dice3: "https://image.ibb.co/gJ0DLd/dice_3.png",
dice4: "https://image.ibb.co/drDpty/dice_4.png",
dice5: "https://image.ibb.co/kqChDy/dice_5.png",
dice6: "https://image.ibb.co/duJ00d/dice_6.png"
}
return {
domElements: domElements,
displayDiceSet: function(dataSet) {
domElements.diceContainerDOM.innerHTML = "";
dataSet.forEach(function(dice) {
var diceDOM = document.createElement("div");
var diceNumDOM = document.createElement("span");
diceDOM.className = "dice";
domElements.diceContainerDOM.appendChild(diceDOM);
diceDOM.appendChild(diceNumDOM);
// console.log("DICE: " + diceImages.dice1);
// diceNumDOM.innerHTML = dice.value;
diceNumDOM.innerHTML = `<img src="${diceImages["dice" + dice.value]}" width="50">`;
if(dice.selected == true) {
diceDOM.className += " selected";
}
});
}
}
})();
var controller = (function(viewCont, modelCont) {
// Event Handlers
viewCont.domElements.genDiceDOM.addEventListener("click", genNumDice);
viewCont.domElements.rollDiceDOM.addEventListener("click", rollDice);
viewCont.domElements.valueSelector.onclick = getSelectedVal;
function Dice(name, value, selected, diceImage) {
this.name = name;
this.value = value;
this.selected = selected;
this.diceImage = diceImage;
}
function getSelectedVal(e) {
var target = e.target;
for (var i = 0; i < viewCont.domElements.valueSelector.children.length; i++) {
// console.log("TEST");
viewCont.domElements.valueSelector.children[i].className = "";
}
target.className = "dice-selected";
modelCont.selectedDiceVal = e.target.innerHTML;
}
function genNumDice() {
viewCont.domElements.messageDOM.style.display = "block";
if(viewCont.domElements.inputNumDice.value === "") {
viewCont.domElements.messageDOM.innerHTML = `Please enter a number!`;
} else {
var diceNumDOM = parseInt((view.domElements.inputNumDice).value);
viewCont.domElements.messageDOM.innerHTML = `Okay, I've generated ${diceNumDOM} pieces of dice!`;
for(i = 0; i < diceNumDOM; i++) {
modelCont.diceSet[i] = new Dice("dice" + parseInt(i+1), null, false, null);
}
modelCont.permDiceLength = modelCont.diceSet.length;
viewCont.domElements.genDiceContDOM.style.display = "none";
viewCont.domElements.mainGameDOM.style.display = "block";
}
}
function rollDice() {
viewCont.domElements.messageDOM.style.display = "block";
viewCont.domElements.diceContainerDOM.style.display = "none";
viewCont.domElements.messageDOM.innerHTML = "Rolling the dice...";
viewCont.domElements.diceRollingDOM.style.display = "block";
setTimeout(function(){
viewCont.domElements.diceRollingDOM.style.display = "none";
viewCont.domElements.diceContainerDOM.style.display = "block";
viewCont.domElements.messageDOM.style.display = "block";
modelCont.diceSet.splice(0, modelCont.diceToRemove);
modelCont.diceToRemove = 0;
var diceValueDOM = parseInt(modelCont.selectedDiceVal);
modelCont.diceSet.forEach(function(dice, index) {
var randomNum = Math.floor((Math.random() * 6) + 1);
dice.value = randomNum;
// dice.diceImage = viewCont.diceImages.dice[randomNum].value;
if(diceValueDOM === dice.value) {
modelCont.diceToRemove++;
modelCont.totalDiceRemoved++;
dice.selected = true;
} else {
dice.selected = false;
}
});
if(modelCont.diceToRemove > 0) {
if(modelCont.totalDiceRemoved === modelCont.permDiceLength) {
viewCont.domElements.messageDOM.innerHTML = `I bet you drank a ton! No worries, you got it! Game has ended.`;
viewCont.domElements.gameControllerDOM.style.display = "none";
} else {
viewCont.domElements.messageDOM.innerHTML = `Good guess! There's a "${ diceValueDOM }" in the set!`;
}
} else {
viewCont.domElements.messageDOM.innerHTML = `There's no "${ diceValueDOM }" in the set. Drink, drink, drink!`;
}
viewCont.displayDiceSet(model.diceSet);
}, 1000);
}
})(view, model);