will-hart/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is a simple dice rolling application built as part of an ember.js tutorial by William Hart.  See the tutorial at http://www.williamhart.info/an-emberjs-beginners-tutorial.html.
This software is free to use and released in the public domain.

  
## app.js
var Roller = Ember.Application.create({
    LOG_TRANSITIONS: true,
    LOG_BINDINGS: true,
    LOG_VIEW_LOOKUPS: true,
    LOG_STACKTRACE_ON_DEPRECATION: true,
    LOG_VERSION: true,
    debugMode: true
});


Roller.Roll = Ember.Object.extend({
    diceNumber: 0,
    totalRolls: 0,
    numberOfRolls: 0,

    proportion: function() {
        var width = 20 + parseInt(400 * this.get("numberOfRolls") /
            this.get("totalRolls"));
        return "width: " + width + "px;";
    }.property("totalRolls", "numberOfRolls")
});


Roller.Router.map(function () {
    this.resource("roll");
});


Roller.IndexRoute = Ember.Route.extend({
    redirect: function () {
        this.transitionTo("roll");
    }
});


Roller.RollRoute = Ember.Route.extend({
    model: function () {
        // in a data driven application this could be used
        // to get information from a server.  Here we just
        // declare an empty array in memory
        return [];
    },

    setupController: function(controller, model) {
        controller.set("content", model);
    }
});

Roller.RollController = Ember.Controller.extend({
    rollDice: function () {
        var roll = this.get("rollString"),
            content = [],
            rolls = 0,
            sides = 0,
            errors = "",
            i, rnd, roll_parts;

        // check if anything was provided
        if (roll === undefined) {
            this.set("errors", "Please fill out the text box!");
            return
        }

        // split up the string around the 'd'
        roll_parts = roll.split("d");

        if (roll_parts.length !== 2) {
            // check if we had a "d" in our text (i.e. its correctly formatted)
            errors += "You need to enter a value in the format 'xdy'.  ";
        } else {
            // then split up and parse the required numbers
            rolls = parseInt(roll_parts[0]);
            sides = parseInt(roll_parts[1]);

            if (isNaN(rolls) || isNaN(sides)) {
                errors += "Rolls and sides must be numbers.  ";
            }

            // generate the dice rolls if we haven't found any errors
            if (errors.length === 0) {
                // generate all the models
                for (i = 0; i < sides; i++) {
                    content.push(Roller.Roll.create({
                        diceNumber: i + 1,
                        totalRolls: rolls
                    }));
                }

                // now roll all the dice
                for (i = 0; i < rolls; i++) {
                    // roll a dice
                    rnd = Math.floor(Math.random() * sides);

                    // increment the required model
                    content[rnd].incrementProperty("numberOfRolls");
                }
            }
        }

        // update the content
        this.set("content", content);

        // display any errors
        this.set("errors", errors);
    }
});

Roller.DiceInputField = Ember.TextField.extend({
    keyDown: function (event) {
        var controller, action;

        // check if we pressed the enter key
        if (event.keyCode !== 13) {
            return;
        }

        // call the controllers 'rollDice' function
        controller = this.get("controller");
        action = this.get("action");
        controller.send(action, this.get("rollString"), this);
    }
});

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>An ember dice roller</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>

    <body>
        <script type="text/x-handlebars" id="application">
            <h1>Dice Roller</h1>
            {{outlet}}
        </script>

        <script type="text/x-handlebars" id="index">
            <p>
                {{#linkTo "roll"}}Start rolling dice!{{/linkTo}}
            </p>
        </script>

        <script type="text/x-handlebars" id="roll">
            <p>
                Enter your required dice roll below, for instance "3d6" will roll three six sided dice.
            </p>

            {{view Roller.DiceInputField valueBinding="rollString" action="rollDice" placeholder="Enter your dice roll, e.g. '3d6' here"}}
            <button {{action "rollDice"}}>Roll Dice</button>

            {{#if errors}}
                <div class="errors">
                    {{errors}}
                </div>
            {{/if}}

            <hr>

            <h2>Results</h2>
            {{#each roll in content}}
                <div class="roll">
                    <span class="roll-number">{{roll.diceNumber}}</span>
                    <span class="roll-result" {{bindAttr style="roll.proportion"}}>{{roll.numberOfRolls}}</span>
                </div>
            {{else}}
                No results yet
            {{/each}}
        </script>

        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0/ember.prod.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>

## styles.css
.errors {
    margin: 2em;
    padding: 1em;
    border: 1px solid #A22;
    color: #A22;
    background: #FDD;
}

.roll-result, .roll-number {
    display: inline-block;
    margin: 0.2em;
    padding: 0.5em;
}

.roll-number {
    font-weight: bolder;
    min-width: 50px;
}

.roll-result {
    background: #03C;
    color: white;
    text-align: right;
}

input, button {
    padding: 0.5em;
    font-size: 1.1em;
    border: none;
    outline: none;
}

input {
    background: #EEE;
    min-width: 350px;
}

button {
    cursor:pointer;
    background: #03C;
    color: white;
}
	var Roller = Ember.Application.create({
	LOG_TRANSITIONS: true,
	LOG_BINDINGS: true,
	LOG_VIEW_LOOKUPS: true,
	LOG_STACKTRACE_ON_DEPRECATION: true,
	LOG_VERSION: true,
	debugMode: true
	});


	Roller.Roll = Ember.Object.extend({
	diceNumber: 0,
	totalRolls: 0,
	numberOfRolls: 0,

	proportion: function() {
	var width = 20 + parseInt(400 * this.get("numberOfRolls") /
	this.get("totalRolls"));
	return "width: " + width + "px;";
	}.property("totalRolls", "numberOfRolls")
	});


	Roller.Router.map(function () {
	this.resource("roll");
	});


	Roller.IndexRoute = Ember.Route.extend({
	redirect: function () {
	this.transitionTo("roll");
	}
	});


	Roller.RollRoute = Ember.Route.extend({
	model: function () {
	// in a data driven application this could be used
	// to get information from a server. Here we just
	// declare an empty array in memory
	return [];
	},

	setupController: function(controller, model) {
	controller.set("content", model);
	}
	});

	Roller.RollController = Ember.Controller.extend({
	rollDice: function () {
	var roll = this.get("rollString"),
	content = [],
	rolls = 0,
	sides = 0,
	errors = "",
	i, rnd, roll_parts;

	// check if anything was provided
	if (roll === undefined) {
	this.set("errors", "Please fill out the text box!");
	return
	}

	// split up the string around the 'd'
	roll_parts = roll.split("d");

	if (roll_parts.length !== 2) {
	// check if we had a "d" in our text (i.e. its correctly formatted)
	errors += "You need to enter a value in the format 'xdy'. ";
	} else {
	// then split up and parse the required numbers
	rolls = parseInt(roll_parts[0]);
	sides = parseInt(roll_parts[1]);

	if (isNaN(rolls) \|\| isNaN(sides)) {
	errors += "Rolls and sides must be numbers. ";
	}

	// generate the dice rolls if we haven't found any errors
	if (errors.length === 0) {
	// generate all the models
	for (i = 0; i < sides; i++) {
	content.push(Roller.Roll.create({
	diceNumber: i + 1,
	totalRolls: rolls
	}));
	}

	// now roll all the dice
	for (i = 0; i < rolls; i++) {
	// roll a dice
	rnd = Math.floor(Math.random() * sides);

	// increment the required model
	content[rnd].incrementProperty("numberOfRolls");
	}
	}
	}

	// update the content
	this.set("content", content);

	// display any errors
	this.set("errors", errors);
	}
	});

	Roller.DiceInputField = Ember.TextField.extend({
	keyDown: function (event) {
	var controller, action;

	// check if we pressed the enter key
	if (event.keyCode !== 13) {
	return;
	}

	// call the controllers 'rollDice' function
	controller = this.get("controller");
	action = this.get("action");
	controller.send(action, this.get("rollString"), this);
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>An ember dice roller</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>

	<body>
	<script type="text/x-handlebars" id="application">
	<h1>Dice Roller</h1>
	{{outlet}}
	</script>

	<script type="text/x-handlebars" id="index">
	<p>
	{{#linkTo "roll"}}Start rolling dice!{{/linkTo}}
	</p>
	</script>

	<script type="text/x-handlebars" id="roll">
	<p>
	Enter your required dice roll below, for instance "3d6" will roll three six sided dice.
	</p>

	{{view Roller.DiceInputField valueBinding="rollString" action="rollDice" placeholder="Enter your dice roll, e.g. '3d6' here"}}
	<button {{action "rollDice"}}>Roll Dice</button>

	{{#if errors}}
	<div class="errors">
	{{errors}}
	</div>
	{{/if}}

	<hr>

	<h2>Results</h2>
	{{#each roll in content}}
	<div class="roll">
	<span class="roll-number">{{roll.diceNumber}}</span>
	<span class="roll-result" {{bindAttr style="roll.proportion"}}>{{roll.numberOfRolls}}</span>
	</div>
	{{else}}
	No results yet
	{{/each}}
	</script>

	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0/ember.prod.js"></script>
	<script type="text/javascript" src="app.js"></script>
	</body>
	</html>
	.errors {
	margin: 2em;
	padding: 1em;
	border: 1px solid #A22;
	color: #A22;
	background: #FDD;
	}

	.roll-result, .roll-number {
	display: inline-block;
	margin: 0.2em;
	padding: 0.5em;
	}

	.roll-number {
	font-weight: bolder;
	min-width: 50px;
	}

	.roll-result {
	background: #03C;
	color: white;
	text-align: right;
	}

	input, button {
	padding: 0.5em;
	font-size: 1.1em;
	border: none;
	outline: none;
	}

	input {
	background: #EEE;
	min-width: 350px;
	}

	button {
	cursor:pointer;
	background: #03C;
	color: white;
	}