Rock, Paper, Scissors, and the Revealing Module Pattern

After reviewing this approach:
Rock-Paper-Scissors with the revealing module pattern

I decided to write an alternative where the Revealing Module Pattern is used for the UI, model, and controller.

I am open to all feedback from style to design.



`// noprotect
var roshambo = (function() {

var UI = ( function containedUI(){

var output = document.getElementById( 'output' );

function log( message ){
output.innerHTML = message + '
' + output.innerHTML;
}

return {
log : log
};

})();

var model = ( function containedModel(){

//'Rock: 1, Paper: 2, Scissors: 3'
var gamesCount = 0,
winsCount = 0,
robotMove,
DRAW = 0,
LOSE = 1,
WIN = 2,
ROCK = 1,
PAPER = 2,
SCISSORS = 3,
moves = [ '', 'Rock', 'Paper', 'Scissors' ],
results = [ 'Draw !', 'You lose !', 'You win !' ];

function registerResult( result ){
if ( result == WIN ){
winsCount++;
}
gamesCount++;
}

function getStats(){
return {
gamesCount : gamesCount , winsCount : winsCount
};
}

function generateRobotMove(){
return Math.floor(Math.random() * 3) + 1;
}

function getMoveDescription( move ){
return moves[move];
}

function getResultDescription( result ){
return results[result];
}

function compareMoves(human, robot) {

// Tie
if (human == robot) {
return DRAW;
}

// Robot wins
if (robot == ROCK && human == SCISSORS ||
robot == PAPER && human == ROCK ||
robot == SCISSORS && human == PAPER) {
return LOSE;
}

//In all other cases, the player wins
return WIN;
}

return {
registerResult : registerResult,
generateRobotMove : generateRobotMove,
getMoveDescription : getMoveDescription,
getRe

output.innerHTML = message + '' + output.innerHTML;

// to

output.innerHTML = `${message}${output.innerHTML}`;

If on ES6, template strings for easy string construction.

return { 
  log : log 
}; 

// to

return { log };

If on ES6, assigning variables to keys with the same name, the assignment can be omitted.

DRAW = 0,
      LOSE = 1,
      WIN  = 2,
      ROCK = 1,
      PAPER = 2,
      SCISSORS = 3,

// to

const MOVE = { ROCK: 1, PAPER: 2, SCISSORS: 3 };
const RESULT = { DRAW: 0, LOSE: 1, WIN: 2 };

Move collections to something that resembles an enum. In this case, we use an object whose keys act like constants.

return {
    gamesCount : gamesCount , winsCount : winsCount
  };

Might need a newline here

doc.getElementById('Rock').addEventListener("click" , function clickRock(){
  newGame( model.ROCK );
});

doc.getElementById('Rock').addEventListener("click" , () => newGame( model.ROCK ));

Arrow functions could be of use here for shorter syntax.

StackExchange Code Review Q#134807, answer score: 2