mattbeck/gist:7a4c95f6a7c78e619dd7

## gistfile1.html
<html>
<head>
    <!-- Written by Matt Beck. matt@couldbestudios.com -->
    <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>
	<html>
	<head>
	<!-- Written by Matt Beck. matt@couldbestudios.com -->
	<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 = " ";
	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>