Skip to content

Instantly share code, notes, and snippets.

@will-hart

will-hart/README.md

Last active January 28, 2016 03:15
Show Gist options
  • Save will-hart/6550313 to your computer and use it in GitHub Desktop.
Save will-hart/6550313 to your computer and use it in GitHub Desktop.
Download ZIP
An ember dice rolling application based on a tutorial at http://www.williamhart.info/an-emberjs-beginners-tutorial.html.
Raw
README.md
Raw
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);
}
});
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment