Initial commit
This commit is contained in:
Russell Beattie
566
app.js
Normal file
566
app.js
Normal file
@@ -0,0 +1,566 @@
|
||||
'use strict';
|
||||
|
||||
var App = {};
|
||||
|
||||
App.init = function(){
|
||||
|
||||
App.name = 'Flip.io';
|
||||
$('.title').text(App.name);
|
||||
|
||||
App.touch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
|
||||
|
||||
if(window['Audio']){
|
||||
var audio = new Audio();
|
||||
var ext = '.wav';
|
||||
if(audio.canPlayType('audio/mp3')){
|
||||
ext = '.mp3';
|
||||
}
|
||||
App.sounds = {};
|
||||
|
||||
var ding = new Audio();
|
||||
ding.src = './media/ding' + ext;
|
||||
ding.volume = 0.5;
|
||||
|
||||
var sweep = new Audio();
|
||||
sweep.src = './media/sweep' + ext;
|
||||
sweep.volume = 0.3;
|
||||
|
||||
App.sounds['sweep'] = sweep;
|
||||
App.sounds['ding'] = ding;
|
||||
}
|
||||
|
||||
$('body').on('touchmove', function(e){
|
||||
|
||||
if(e.target.style = 'clues'){
|
||||
|
||||
} else {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
this.homeView = new App.HomeView();
|
||||
this.puzzleView = new App.PuzzleView();
|
||||
this.router = new App.Router();
|
||||
|
||||
Backbone.history.start();
|
||||
|
||||
}
|
||||
|
||||
App.play = function(sound){
|
||||
if(App.sounds){
|
||||
var snd = App.sounds[sound];
|
||||
try{
|
||||
snd.pause();
|
||||
snd.currentTime = 0;
|
||||
} catch (err){}
|
||||
snd.play();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
App.addWin = function(puzNum){
|
||||
if(window['localStorage']){
|
||||
var wins = localStorage.setItem['wins'];
|
||||
if(!wins){
|
||||
wins = [];
|
||||
}
|
||||
wins.push(puzNum);
|
||||
localStorage.setItem['wins'] = wins;
|
||||
}
|
||||
}
|
||||
|
||||
App.getWins = function(){
|
||||
if(window['localStorage']){
|
||||
var wins = localStorage.setItem['wins'];
|
||||
if(!wins){
|
||||
wins = [];
|
||||
}
|
||||
return wins;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
App.Router = Backbone.Router.extend({
|
||||
|
||||
currentView: null,
|
||||
|
||||
routes: {
|
||||
'': 'showHome',
|
||||
':number': 'showPuzzle',
|
||||
},
|
||||
|
||||
clearCurrent: function(){
|
||||
if(this.currentView){
|
||||
this.currentView.$el.html('');
|
||||
this.currentView.remove();
|
||||
}
|
||||
},
|
||||
|
||||
showHome: function() {
|
||||
|
||||
$('.content').fadeOut(function(){
|
||||
|
||||
App.router.clearCurrent();
|
||||
|
||||
document.title = App.name;
|
||||
$('.titlenum').text('');
|
||||
|
||||
App.homeView.render();
|
||||
|
||||
$('.content').html(App.homeView.$el);
|
||||
|
||||
App.router.currentView = App.homeView;
|
||||
|
||||
$('.puznum').focus();
|
||||
|
||||
$('.content').fadeIn();
|
||||
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
showPuzzle: function(puzNum) {
|
||||
|
||||
$('.content').fadeOut(function(){
|
||||
|
||||
App.router.clearCurrent();
|
||||
|
||||
document.title = App.name + ' / Puzzle ' + puzNum;
|
||||
$('.titlenum').text('#' + puzNum);
|
||||
|
||||
App.puzzleView.render(puzNum);
|
||||
|
||||
$('.content').html(App.puzzleView.$el);
|
||||
|
||||
App.router.currentView = App.puzzleView;
|
||||
|
||||
$('.content').fadeIn();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
App.HomeView = Backbone.View.extend({
|
||||
|
||||
tagName: 'div',
|
||||
className: 'home',
|
||||
|
||||
events: function() {
|
||||
|
||||
var events;
|
||||
|
||||
if(App.touch){
|
||||
events = {
|
||||
'keypress .puznum': 'checkField',
|
||||
'update .puznum': 'checkField',
|
||||
'submit .puz-form': 'loadPuzzle',
|
||||
'touchend .go-btn': 'loadPuzzle',
|
||||
'touchend .random-btn': 'randomPuzzle'
|
||||
}
|
||||
} else {
|
||||
events = {
|
||||
'keypress .puznum': 'checkField',
|
||||
'submit .puz-form': 'loadPuzzle',
|
||||
'click .go-btn': 'loadPuzzle',
|
||||
'click .random-btn': 'randomPuzzle'
|
||||
|
||||
}
|
||||
}
|
||||
return events;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
|
||||
this.delegateEvents();
|
||||
|
||||
var tpl = $('.homeTemplate').text();
|
||||
var html = _.template(tpl, {});
|
||||
|
||||
this.$el.html(html);
|
||||
|
||||
$('.puznum').focus();
|
||||
|
||||
},
|
||||
|
||||
checkField: function(e){
|
||||
|
||||
var keyCode = e.keyCode || e.charCode;
|
||||
|
||||
//console.log(keyCode);
|
||||
|
||||
if(keyCode == 13 || keyCode == 8 || keyCode == 46 || keyCode == 92 || keyCode == 39 || keyCode == 37){
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
if(keyCode < 48 || keyCode > 57){
|
||||
return false;
|
||||
}
|
||||
|
||||
var val = $('.puznum').val();
|
||||
|
||||
if(val.length >= 3){
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
loadPuzzle: function(e){
|
||||
if(e){
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
var puzNum = parseInt($('.puznum').val());
|
||||
|
||||
if(isNaN(puzNum) || puzNum < 1 || puzNum > 1000){
|
||||
|
||||
$('.puznum').val('');
|
||||
|
||||
} else {
|
||||
|
||||
App.router.navigate(puzNum+'', {trigger: true});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
randomPuzzle: function(){
|
||||
|
||||
var puzNum = Math.floor( Math.random() * ( 1001) );
|
||||
|
||||
$('.puznum').val(puzNum);
|
||||
|
||||
// App.router.navigate(puzNum + "", {trigger: true});
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
App.PuzzleView = Backbone.View.extend({
|
||||
|
||||
tagName: 'div',
|
||||
className: 'puzzle',
|
||||
|
||||
secs: 0,
|
||||
stop: false,
|
||||
intervalID: null,
|
||||
guessing: false,
|
||||
count: 0,
|
||||
total: 7,
|
||||
puzNum: 0,
|
||||
data: null,
|
||||
|
||||
events: function(){
|
||||
|
||||
var events;
|
||||
|
||||
if(App.touch){
|
||||
events = {
|
||||
'touchend .shuffle' : 'doShuffle',
|
||||
'touchend .hint' : 'doHint',
|
||||
'touchend .square' : 'doSquare',
|
||||
'touchend .reset': 'doReset',
|
||||
'touchend .restart': 'doRestart',
|
||||
'touchend .gohome': 'doHome',
|
||||
'touchend .next': 'doNext'
|
||||
}
|
||||
} else {
|
||||
events = {
|
||||
'click .shuffle' : 'doShuffle',
|
||||
'click .hint' : 'doHint',
|
||||
'click .square' : 'doSquare',
|
||||
'click .reset': 'doReset',
|
||||
'click .restart': 'doRestart',
|
||||
'click .gohome': 'doHome',
|
||||
'click .next': 'doNext'
|
||||
}
|
||||
}
|
||||
return events;
|
||||
|
||||
},
|
||||
|
||||
render: function(puzNum) {
|
||||
|
||||
this.delegateEvents();
|
||||
|
||||
this.guessing = false;
|
||||
this.count = 0;
|
||||
|
||||
this.puzNum = parseInt(puzNum);
|
||||
|
||||
if(isNaN(puzNum) || puzNum < 1 || puzNum > 1000){
|
||||
App.router.navigate('', {trigger: true});
|
||||
}
|
||||
|
||||
this.start = new Date();
|
||||
this.secs = 0;
|
||||
|
||||
this.data = puzzles[puzNum];
|
||||
|
||||
var tpl = $('.puzzleTemplate').text();
|
||||
var html = _.template(tpl, this.data);
|
||||
|
||||
this.$el.html(html);
|
||||
|
||||
this.startTimer();
|
||||
|
||||
|
||||
},
|
||||
|
||||
doHome: function(e){
|
||||
|
||||
this.stopTimer();
|
||||
|
||||
App.router.navigate('', {trigger: true});
|
||||
|
||||
},
|
||||
|
||||
doNext: function(e){
|
||||
App.router.navigate((App.puzzleView.puzNum +1)+'', {trigger: true});
|
||||
},
|
||||
|
||||
doShuffle: function(e){
|
||||
shuffleItems('tr');
|
||||
shuffleItems('tbody');
|
||||
},
|
||||
|
||||
doHint: function(e){
|
||||
|
||||
var active = [];
|
||||
|
||||
$('.clues li').each(function(index){
|
||||
|
||||
if($(this).data('answer') !== ''){
|
||||
active.push($(this));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var rand = Math.floor(Math.random() * active.length);
|
||||
var $clue = active[rand];
|
||||
|
||||
var b = rot13($clue.data('answer'));
|
||||
|
||||
b = b.substr(0,3);
|
||||
|
||||
$('.square').each(function(index){
|
||||
|
||||
if($(this).data('guessed') !== 'true'){
|
||||
|
||||
var s = $(this).text();
|
||||
|
||||
if(b.indexOf(s) == 0){
|
||||
$clue.fadeOut('slow', function(){
|
||||
$clue.fadeIn();
|
||||
});
|
||||
$(this).fadeOut('slow', function(){
|
||||
$(this).fadeIn();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
doSquare: function(e){
|
||||
|
||||
if(App.puzzleView.guessing == false){
|
||||
var sq = e.target;
|
||||
|
||||
$(sq).data('guessed','true');
|
||||
|
||||
$(sq).hide();
|
||||
|
||||
var a = $('.answertext').text();
|
||||
|
||||
a = a + $(sq).text();
|
||||
|
||||
$('.answertext').html(a);
|
||||
|
||||
if(a.length > 9){
|
||||
App.puzzleView.doReset(e);
|
||||
} else {
|
||||
App.puzzleView.doGuess(a);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
doGuess: function(a){
|
||||
|
||||
if(a == ''){
|
||||
return;
|
||||
}
|
||||
|
||||
var $clues = $('.clues li');
|
||||
|
||||
App.puzzleView.guessing = true;
|
||||
|
||||
for(var i = 0; i < $clues.length; i++){
|
||||
|
||||
var $clue = $clues.eq(i);
|
||||
|
||||
var b = rot13($clue.data('answer'));
|
||||
|
||||
if( a.toLowerCase() == b.toLowerCase()){
|
||||
|
||||
App.play('ding');
|
||||
|
||||
$clue.data('answer','');
|
||||
|
||||
$('.answertext').fadeOut('fast',function(){
|
||||
$('.answertext').html('');
|
||||
$('.answertext').show();
|
||||
});
|
||||
|
||||
$clue.find('.word').fadeOut(function(){
|
||||
$(this).html(b).addClass('correct');
|
||||
$(this).fadeIn();
|
||||
});
|
||||
|
||||
$clue.find('.def').fadeOut(function(){
|
||||
$(this).css({'text-decoration':'line-through','font-style':'italic'});
|
||||
$(this).fadeIn();
|
||||
});
|
||||
|
||||
$('.square').each(function(index){
|
||||
$(this).data('guessed','');
|
||||
});
|
||||
|
||||
App.puzzleView.count++;
|
||||
|
||||
if(App.puzzleView.count == App.puzzleView.total){
|
||||
App.puzzleView.doWin();
|
||||
return;
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
App.puzzleView.guessing = false;
|
||||
|
||||
|
||||
},
|
||||
|
||||
doWin: function(){
|
||||
|
||||
App.puzzleView.stopTimer();
|
||||
|
||||
App.addWin(App.puzzleView.puzNum);
|
||||
|
||||
App.play('sweep');
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
$('.squares table').fadeOut();
|
||||
$('.hint').hide();
|
||||
$('.shuffle').hide();
|
||||
|
||||
var tpl = $('.winTemplate').text();
|
||||
var html = _.template(tpl, {});
|
||||
|
||||
$('.squares').html(html);
|
||||
|
||||
}, 1000);
|
||||
|
||||
},
|
||||
|
||||
doRestart: function(e){
|
||||
|
||||
App.puzzleView.secs = 0;
|
||||
|
||||
App.puzzleView.render(App.puzzleView.puzNum);
|
||||
|
||||
|
||||
},
|
||||
|
||||
doReset: function(e){
|
||||
|
||||
$('.answertext').html('');
|
||||
//$('.answertext').css('color','');
|
||||
|
||||
$('.square').each(function(index){
|
||||
|
||||
if($(this).data('guessed') == 'true'){
|
||||
$(this).data('guessed','');
|
||||
$(this).fadeIn();
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
stopTimer: function(){
|
||||
clearInterval(App.puzzleView.intervalID);
|
||||
App.puzzleView.intervalID = null;
|
||||
},
|
||||
|
||||
startTimer: function(){
|
||||
if(App.puzzleView.intervalID == null){
|
||||
App.puzzleView.intervalID = setInterval('App.puzzleView.timer()', 1000);
|
||||
}
|
||||
},
|
||||
|
||||
timer: function(){
|
||||
App.puzzleView.secs = Math.floor(((new Date()) - App.puzzleView.start)/1000) ;
|
||||
|
||||
$('.timer').text(formatTime(App.puzzleView.secs));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// ----- misc functions
|
||||
|
||||
function formatTime(sec){
|
||||
|
||||
var hr = Math.floor(sec / 3600);
|
||||
var min = Math.floor((sec - (hr * 3600))/60);
|
||||
sec -= ((hr * 3600) + (min * 60));
|
||||
sec += ''; min += '';
|
||||
while (min.length < 2) {min = '0' + min;}
|
||||
while (sec.length < 2) {sec = '0' + sec;}
|
||||
hr = (hr)?':'+hr:'';
|
||||
|
||||
return hr + min + ':' + sec;
|
||||
|
||||
}
|
||||
|
||||
function rot13(str) {
|
||||
return str.replace(/[a-zA-Z]/g, function(c) {
|
||||
return String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function shuffleItems(sel) {
|
||||
var $el = $(sel);
|
||||
$el.each(function(){
|
||||
var items = $(this).children().clone(true);
|
||||
var ret = (items.length) ? $(this).html(shuffle(items)) : this;
|
||||
$el.replaceWith(ret);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function shuffle(arr) {
|
||||
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
|
||||
return arr;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user