Skip to content

Instantly share code, notes, and snippets.

@mattbeck

mattbeck/gist:7a4c95f6a7c78e619dd7

Created January 12, 2015 21:52
Show Gist options
  • Save mattbeck/7a4c95f6a7c78e619dd7 to your computer and use it in GitHub Desktop.
Save mattbeck/7a4c95f6a7c78e619dd7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<html>
<head>
<!-- Written by Matt Beck. [email protected] -->
<title>Roll Fate Dice</title>
<style>
body{
background: #e0dfd0;
text-align: center;
font-family: helvetica;
max-width: 100%;
max-height: 100%;
padding: 0;
margin: 0;
}
h1{
font-size: 5em;
}
#set{
width: 100%;
}
.die, #total{
background: #222;
color: #fff;
text-align: center;
font-size: 36px;
max-width: 200px;
max-height: 200px;
min-width: 70px;
min-height: 70px;
width: 22%;
display: inline-block;
margin: 1%;
border-radius: 5px;
padding: 0;
}
#total{
background: #eee;
color: #222;
display: block;
margin: 0 auto;
}
button{
min-height: 70px;
max-height: 130px;
max-width: 320px;
line-height: 70px;
margin: 2% 1% 0;
border-radius: 10px;
border: 1px solid #399;
cursor: pointer;
background: #399;
color:#fff;
font-size: 36px;
}
button:hover{
background: #6cc;
}
</style>
<script src="shake.js"></script>
<script>
var dieTotal = 0;
function rollSet() {
dieTotal = 0; //reset
document.getElementById('die1').innerHTML = rollOneDie();
document.getElementById('die2').innerHTML = rollOneDie();
document.getElementById('die3').innerHTML = rollOneDie();
document.getElementById('die4').innerHTML = rollOneDie();
document.getElementById('total').innerHTML = dieTotal;
return false;
}
function rollOneDie(){
var ret = null;
var result = null;
var result = Math.floor(Math.random() * (2 - 0 + 1) + 1) -2;
dieTotal = dieTotal + result;
switch (result){
case 0:
ret = "&nbsp;";
break;
case -1:
ret = "-";
break;
case 1:
default:
ret = "+";
break;
}
return ret;
}
window.addEventListener('shake', rollSet, false);
</script>
</head>
<body>
<h1>FATE Dice</h1>
<div id="set">
<span id="die1" class="die"></span>
<span id="die2" class="die"></span>
<span id="die3" class="die"></span>
<span id="die4" class="die"></span>
</div>
<span id="total"></span>
<button id="clicker" onclick="rollSet();return false;">roll</button>
<!-- Set Up the Initial Page Load -->
<script>
var spans = document.getElementsByTagName('span');
for(i=0; i<spans.length; i++){
spans[i].style.height = spans[i].offsetWidth + 'px';
spans[i].style.fontSize = (spans[i].offsetWidth/2) + 'px';
spans[i].style.lineHeight = spans[i].offsetWidth + 'px';
}
var clicker = document.getElementById('clicker');
clicker.style.height = (spans[0].offsetWidth / 2) + 'px';
clicker.style.width = (spans[0].offsetWidth * 2) + 'px';
clicker.style.fontSize = (spans[0].offsetWidth / 3) + 'px';
rollSet();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment