Skip to content

Instantly share code, notes, and snippets.

@leah

leah/index.html

Created March 17, 2014 16:20
Show Gist options
  • Save leah/9602537 to your computer and use it in GitHub Desktop.
Save leah/9602537 to your computer and use it in GitHub Desktop.
Download ZIP
Lucky Shamrock
Raw
index.html
<!doctype html>
<html>
<head>
<title>Lucky Shamrock</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://www.dropbox.com/static/api/dropbox-datastores-1.0-latest.js"></script>
</head>
<body>
<h1>Lucky Shamrock</h1>
<div id="container">
<p id="instructions">Click on the four-leaf clover.</p>
<button id="login" style="display:none">Log in with Dropbox</button>
<button id="start-game" style="display:none">Start game</button>
<table id="stats" style="display:none">
<tbody>
<tr>
<th>Best Time:</th>
<td><span id="best-time"></span> seconds</td>
</tr>
<tr>
<th>Games played:</th>
<td id="game-count"></td>
</tr>
</tbody>
</table>
</div>
<div id="shamrock-container">
<table id="shamrocks"><tbody></tbody></table>
<div id="overlay">
<div id="message">
<p id="result" style="display:none">Your time was <span id="time"></span> seconds.</p>
<button id="new-game">Play again</button>
</div>
</div>
</div>
<a id="logout" href="#" style="display:none">Log out</a>
<script>
if (window.location.href.indexOf('http://') === 0 && window.location.host.indexOf('127.0.0.1') !== 0) {
window.location = window.location.href.replace('http://', 'https://');
}
var APP_KEY = 'APP_KEY';
function setState(minTime, gameCount) {
if (minTime) {
$('#stats').show();
$('#best-time').text(minTime);
$('#game-count').text(gameCount);
} else {
$('#stats').hide();
}
}
var client = new Dropbox.Client({ key: APP_KEY });
client.authenticate({ interactive: false });
if (client.isAuthenticated()) {
loggedIn();
} else {
$('#login').show();
}
$('#login').click(function () {
client.authenticate(function (err) {
if (err) { alert('Error: ' + err); return; }
loggedIn();
});
});
function loggedIn() {
$('#login').hide();
var datastoreManager = new Dropbox.Datastore.DatastoreManager(client);
datastoreManager._flob_client._retry.backoff.max_delay_millis = 1000;
datastoreManager.openDefaultDatastore(function (err, datastore) {
if (err) { alert('Error: ' + err); return; }
var table = datastore.getTable('stats');
table.setResolutionRule('min_time', 'min');
table.setResolutionRule('game_count', 'sum');
function getRecord() {
return table.getOrInsert('stats', { game_count: 0 });
}
function updateState() {
var record = getRecord();
setState(record.get('min_time'), record.get('game_count'));
}
datastore.recordsChanged.addListener(updateState);
updateState();
var rows = 10;
var cols = 10;
function newGame() {
$('#instructions').hide();
$('#overlay').css('opacity', 0);
$('#overlay').hide();
var start = new Date();
$('#shamrocks tbody').empty();
var fourLeafPosition = Math.floor(Math.random()*rows*cols);
for (var r = 0; r < rows; r++) {
var tr = $('<tr>');
for (var c = 0; c < cols; c++) {
var rotation = 'rotate('+Math.floor(Math.random()*360)+'deg)';
var xoff = Math.floor(Math.random()*10)-5;
var yoff = Math.floor(Math.random()*10)-5;
var clover = $('<span>').css({
'-moz-transform': rotation,
'-webkit-transform': rotation,
'-o-transform': rotation,
'transform': rotation,
position: 'relative',
left: xoff + 'px',
top: yoff + 'px',
'background-image': 'url(shamrock'+(Math.floor(Math.random()*3))+'.png)',
opacity: (Math.random()*0.25 + 0.75)
});
if (r * cols + c === fourLeafPosition) {
clover.addClass('four-leaf');
}
var td = $('<td>').append(clover);
tr.append(td);
}
$('#shamrocks tbody').append(tr);
}
$('.four-leaf').click(function () {
// Update stats
var record = getRecord();
var time = Math.round((new Date() - start)/100)/10;
if (record.get('min_time') === null || time < record.get('min_time')) {
record.set('min_time', time);
}
record.set('game_count', record.get('game_count') + 1);
// Show success message!
$('#time').text(time);
$('#result').show();
$('#overlay').show();
setTimeout(function () { $('#overlay').css('opacity', 1) }, 0);
});
}
$('#start-game').show().click(function () {
newGame();
$('#start-game').hide();
});
$('#new-game').click(newGame);
$('#logout').show().click(function (e) {
e.preventDefault();
client.signOut();
$('#login').show();
$('#instructions').hide();
$('#stats').hide();
$('#overlay').hide();
$('#shamrocks tbody').empty();
$('#container').css('padding', 0);
});
});
}
</script>
</body>
</html>
Raw
style.css
html {
font-family: Arial;
color: #3d3d3d;
}
h1 {
text-align: center;
width: 300px;
margin: 25px auto;
}
p {
text-align: center;
margin: 0;
}
p#instructions {
color: #666;
}
#container {
text-align: center;
padding: 0;
}
table#stats {
margin: 16px auto;
}
table#stats th {
text-align: right;
}
table#stats td {
text-align: left;
}
table#shamrocks {
border-spacing: 0;
border-collapse: collapse;
}
table#shamrocks td {
border-spacing: 0;
padding: 0;
}
table#shamrocks td span {
width: 50px;
height: 50px;
display: block;
}
.four-leaf {
background-position: 50px 0;
}
table {
margin: 0 auto;
}
#logout {
position: fixed;
bottom: 10px;
left: 10px;
text-decoration: none;
color: #666;
}
button {
cursor: pointer;
outline: none;
color: white;
background-color: #007ee5;
border: none;
font-size: 16px;
line-height: 24px;
padding: 14px 24px;
margin: 25px auto;
-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45) 0px 2px 2px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button:active {
position: relative; top: 3px;
-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
}
button:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }
div#shamrock-container {
position: relative;
width: 500px;
margin: 0 auto;
}
div#overlay {
width: 520px;
height: 520px;
background: rgba(255, 255, 255, 0.8);
text-align: center;
position: absolute;
top: 0;
left: 0;
margin-top: -10px;
margin-left: -10px;
opacity: 0;
display: none;
transition: 200ms ease-out;
}
div#message {
background: white;
width: 300px;
padding: 40px;
margin: 100px auto;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
border-radius: 5px;
}
div#message button { margin: 25px; }
div#message button { margin-bottom: 0; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment