aaron/bs_bingo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
Jeff Hobbs
2012-06-25 07:33:49 -04:00
commit 1a447b77d2
9 changed files with 449 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
audio/click.mp3 Normal file
View File

Binary file not shown.

BIN
audio/win.mp3 Normal file
View File

Binary file not shown.

119
css/style.css Normal file
View File

@@ -0,0 +1,119 @@
* {
margin: 0px;
padding: 0px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
background-color: #a1a1a1;
background-image: url('../img/wood.background.png');
font-family: "BodoniSvtyTwoOSITCTT-Bold", serif;
text-rendering: optimizeLegibility;
}
#container {
width: 640px;
display: block;
margin-left: auto;
margin-right: auto;
background-color: none;
}
#header, #footer {
width: 600px;
color: #8B3E2F;
opacity: 0.5;
text-shadow: 0px 1px 0px #e1e1e1, 0px -1px 0px #313131;
background-color: none;
font-size: 2.8em;
font-weight: bold;
padding: 8px 20px 8px 20px;
transition-property: background-color;
transition-duration: 1s;
/* Firefox 4 */
-moz-transition-property: background-color;
-moz-transition-duration: 1s;
/* Safari and Chrome */
-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
}
#footer {
text-align: center;
font-size: 1.4em;
padding: 3px 20px;
margin-bottom: 80px;
}
#board {
width: 640px;
background-color: #fff;
margin-bottom: 10px;
box-shadow: 0px 3px #919191;
}
.square, .freesquare {
display: inline-block;
overflow: hidden;
color: #313131;
text-align: center;
width: 126px;
height: 126px;
border: 1px solid #d1d1d1;
transition-property: background-color;
transition-duration: 1s;
/* Firefox 4 */
-moz-transition-property: background-color;
-moz-transition-duration: 1s;
/* Safari and Chrome */
-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
}
.selected {
color: #f1f1f1;
background-color: #313131;
}
.text {
font-family: "HelveticaNeue-CondensedBold", sans-serif;
vertical-align: middle;
font-size: 1.4em;
}
.win {
color: #ffffff !important;
background-color: red;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#container {
width: 640;
margin: -7px 0px 0px -7px;
}
#header {
font-size: 3.6em;
text-align: center;
padding: 20px 20px 12px 20px;
}
#footer {
padding: 16px 20px 8px 20px;
font-size: 2.0em;
}
.text {
font-size: 1.2em;
}
}

BIN
img/wood.background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 KiB

37
index.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Bingo</title>
<meta name="viewport" content="user-scalable=no, width=device-width">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.tappable.js" type="text/javascript"></script>
<script src="js/data.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="board"></div>
<div id="footer"></div>
</div>
</body>
</html>

32
js/data.js Normal file
View File

@@ -0,0 +1,32 @@
var headerText = "Bingo";
var footerText = "All Rights Reserved";
var JSONBingo = {"squares": [
{"square": "one"},
{"square": "two"},
{"square": "three"},
{"square": "four"},
{"square": "five"},
{"square": "six"},
{"square": "seven"},
{"square": "eight"},
{"square": "nine"},
{"square": "ten"},
{"square": "eleven"},
{"square": "twelve"},
{"square": "thirteen"},
{"square": "fourteen"},
{"square": "fifteen"},
{"square": "sixteen"},
{"square": "seventeen"},
{"square": "eighteen"},
{"square": "nineteen"},
{"square": "twenty"},
{"square": "twenty one"},
{"square": "twenty two"},
{"square": "twenty three"},
{"square": "twenty four"}
]
};

4
js/jquery.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

151
js/jquery.tappable.js Normal file
View File

@@ -0,0 +1,151 @@
/*
* jquery.tappable.js version 0.2
*
* More responsive (iOS-like) touch behaviour for buttons and other 'tappable' UI
* elements, instead of Mobile Safari's 300ms delay and ugly grey overlay:
*
* - A 'touched' class is added to the element as soon as it is tapped (or, in
* the case of a "long tap" - when the user keeps their finger down for a
* moment - after a specified delay).
*
* - The supplied callback is called as soon as the user lifts their finger.
*
* - The class is removed, and firing of the callback cancelled, if the user moves
* their finger (though this can be disabled).
*
* - If the browser doesn't support touch events, it falls back to click events.
*
* More detailed explanation of behaviour and background:
* http://aanandprasad.com/articles/jquery-tappable/
*
* See it in action here: http://nnnnext.com
*
* I recommend that you add a `-webkit-tap-highlight-color: rgba(0,0,0,0)`
* style rule to any elements you wish to make tappable, to hide the ugly grey
* click overlay.
*
* Tested on iOS 4.3 and some version of Android, I don't know. Leave me alone.
*
* Basic usage:
*
* $(element).tappable(function() { console.log("Hello World!") })
*
* Advanced usage:
*
* $(element).tappable({
* callback: function() { console.log("Hello World!") },
* cancelOnMove: false,
* touchDelay: 150,
* onlyIf: function(el) { return $(el).hasClass('enabled') }
* })
*
* Options:
*
* cancelOnMove: If truthy, then as soon as the user moves their finger, the
* 'touched' class is removed from the element. When they lift
* their finger, the callback will *not* be fired. Defaults to
* true.
*
* touchDelay: Time to wait (ms) before adding the 'touched' class when the
* user performs a "long tap". Best employed on elements that the
* user is likely to touch while scrolling. Around 150 will work
* well. Defaults to 0.
*
* onlyIf: Function to run as soon as the user touches the element, to
* determine whether to do anything. If it returns a falsy value,
* the 'touched' class will not be added and the callback will
* not be fired.
*
*/
;(function($) {
var touchSupported = ('ontouchstart' in window)
$.fn.tappable = function(options) {
var cancelOnMove = true,
onlyIf = function() { return true },
touchDelay = 0,
callback
switch(typeof options) {
case 'function':
callback = options
break;
case 'object':
callback = options.callback
if (typeof options.cancelOnMove != 'undefined') {
cancelOnMove = options.cancelOnMove
}
if (typeof options.onlyIf != 'undefined') {
onlyIf = options.onlyIf
}
if (typeof options.touchDelay != 'undefined') {
touchDelay = options.touchDelay
}
break;
}
var fireCallback = function(el, event) {
if (typeof callback == 'function' && onlyIf(el)) {
callback.call(el, event)
}
}
if (touchSupported) {
this.bind('touchstart', function(event) {
var el = this
if (onlyIf(this)) {
$(el).addClass('touch-started')
window.setTimeout(function() {
if ($(el).hasClass('touch-started')) {
$(el).addClass('touched')
}
}, touchDelay)
}
return true
})
this.bind('touchend', function(event) {
var el = this
if ($(el).hasClass('touch-started')) {
$(el)
.removeClass('touched')
.removeClass('touch-started')
fireCallback(el, event)
}
return true
})
this.bind('click', function(event) {
event.preventDefault()
})
if (cancelOnMove) {
this.bind('touchmove', function() {
$(this)
.removeClass('touched')
.removeClass('touch-started')
})
}
} else if (typeof callback == 'function') {
this.bind('click', function(event) {
if (onlyIf(this)) {
callback.call(this, event)
}
})
}
return this
}
})(jQuery);

106
js/script.js Normal file
View File

@@ -0,0 +1,106 @@
$(document).ready(function() {
$('body').on('touchmove', false);
$('#header').append(headerText);
var d = new Date();
var n = d.getFullYear()
$('#footer').append("&copy; "+n+" "+footerText);
var clickSnd = new Audio("audio/click.mp3");
var winSnd = new Audio("audio/win.mp3");
shuffle(JSONBingo.squares);
for (i=0; i<24; i++) {
if (i==12) {
$('#board').append("<div data-value='1' class='selected freesquare' id='sqfree'><div class='text'><br/>free space</div></div>");
$('#board').append("<div data-value='0' class='square' id='sq12'><div class='text'><br/>"+JSONBingo.squares[i].square+"</div></div>");
} else {
$('#board').append("<div data-value='0' class='square' id='sq"+i+"'><div class='text'><br/>"+JSONBingo.squares[i].square+"</div></div>");
}
}
$('div.square').tappable(function () {
$(this).toggleClass('selected');
if ($(this).data('value') == 1) {
//alert(event.target.id);
$(this).data('value', 0); }
else {
//alert(event.target.id);
$(this).data('value', 1); }
clickSnd.play();
var row1 = ($('#sq0').data('value')+$('#sq1').data('value')+$('#sq2').data('value')+$('#sq3').data('value')+$('#sq4').data('value'));
var row2 = ($('#sq5').data('value')+$('#sq6').data('value')+$('#sq7').data('value')+$('#sq8').data('value')+$('#sq9').data('value'));
var row3 = ($('#sq10').data('value')+$('#sq11').data('value')+$('#sqfree').data('value')+$('#sq12').data('value')+$('#sq13').data('value'));
var row4 = ($('#sq14').data('value')+$('#sq15').data('value')+$('#sq16').data('value')+$('#sq17').data('value')+$('#sq18').data('value'));
var row5 = ($('#sq19').data('value')+$('#sq20').data('value')+$('#sq21').data('value')+$('#sq22').data('value')+$('#sq23').data('value'));
var col1 = ($('#sq0').data('value')+$('#sq5').data('value')+$('#sq10').data('value')+$('#sq14').data('value')+$('#sq19').data('value'));
var col2 = ($('#sq1').data('value')+$('#sq6').data('value')+$('#sq11').data('value')+$('#sq15').data('value')+$('#sq20').data('value'));
var col3 = ($('#sq2').data('value')+$('#sq7').data('value')+$('#sqfree').data('value')+$('#sq16').data('value')+$('#sq21').data('value'));
var col4 = ($('#sq3').data('value')+$('#sq8').data('value')+$('#sq12').data('value')+$('#sq17').data('value')+$('#sq22').data('value'));
var col5 = ($('#sq4').data('value')+$('#sq9').data('value')+$('#sq13').data('value')+$('#sq18').data('value')+$('#sq23').data('value'));
var diag1 = ($('#sq0').data('value')+$('#sq6').data('value')+$('#sqfree').data('value')+$('#sq17').data('value')+$('#sq23').data('value'));
var diag2 = ($('#sq4').data('value')+$('#sq8').data('value')+$('#sqfree').data('value')+$('#sq15').data('value')+$('#sq19').data('value'));
if (row1 == 5 || row2 == 5 || row3 == 5 || row4 == 5 || row5 == 5 || col1 == 5 || col2 == 5 || col3 == 5 || col4 == 5 || col5 == 5 || diag1 == 5 || diag2 == 5) {
$('#header').html("Winner");
$('#header').addClass("win");
winSnd.play();
} else {
$('#header').html(headerText);
$('#header').removeClass("win");
};
});
});
shuffle = function(v){
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
return v;
};
/*! Normalized address bar hiding for iOS & Android (c) @scottjehl MIT License */
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash && win.addEventListener ){
//scroll to 1
window.scrollTo( 0, 1 );
var scrollTop = 1,
getScrollTop = function(){
return win.pageYOffset || doc.compatMode === "CSS1Compat" && doc.documentElement.scrollTop || doc.body.scrollTop || 0;
},
//reset to 0 on bodyready, if needed
bodycheck = setInterval(function(){
if( doc.body ){
clearInterval( bodycheck );
scrollTop = getScrollTop();
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
}
}, 15 );
win.addEventListener( "load", function(){
setTimeout(function(){
//at load, if user hasn't scrolled more than 20 or so...
if( getScrollTop() < 20 ){
//reset to hide addr bar at onload
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
}
}, 0);
} );
}
})( this );