First commit
This commit is contained in:
Jeff Hobbs
BIN
audio/click.mp3
Normal file
BIN
audio/click.mp3
Normal file
Binary file not shown.
BIN
audio/win.mp3
Normal file
BIN
audio/win.mp3
Normal file
Binary file not shown.
119
css/style.css
Normal file
119
css/style.css
Normal 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
BIN
img/wood.background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
37
index.html
Normal file
37
index.html
Normal 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
32
js/data.js
Normal 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
4
js/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
151
js/jquery.tappable.js
Normal file
151
js/jquery.tappable.js
Normal 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
106
js/script.js
Normal 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("© "+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 );
|
||||
Reference in New Issue
Block a user