Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

654 lines (569 sloc) 18.538 kB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>y!jeopardy</title>
<link type="text/css" href="s/desktop.css" rel="stylesheet" media="screen, projection" />
<script type="text/javascript" src="a/prototype.js"></script>
<script type="text/javascript" src="a/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript" src="a/livepipe/livepipe.js"></script>
<script type="text/javascript" src="a/livepipe/scrollbar.js"></script>
<script type="text/javascript" src="a/jst/util.js"></script>
<script type="text/javascript" src="a/jst/jsevalcontext.js"></script>
<script type="text/javascript" src="a/jst/jstemplate.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var questioning,
questioningInstance,
questioningPE,
choosing,
choosingCategory,
choosingPE,
time,
timer,
stopTimer,
updateTimer,
timerPE,
timerDots,
blinking,
blinkingPE,
lastShowing,
CANBUZZ = false,
STATE = 'INIT',
PLAYER = '',
LOGGED = false,
SCROLL = null,
TIME = null,
questioningStep = 0;
Event.observe(document, 'dom:loaded', function()
{
// functions
questioning = function()
{
this.className = 'question step' + questioningStep;
if (++questioningStep > 11) questioningStep = 0;
}
updateStatus = function(message)
{
// $('status').update(message);
}
// add eye-candies
$('main').on('mouseover', YJ.Tools.hoverableOver.bind($('main')));
$('main').on('mouseout', YJ.Tools.hoverableOut.bind($('main')));
$('board').on('click', 'div.question', function(e, el)
{
if (el.hasClassName('empty')) return false;
YJ.Tools.request('pick_question', {id: el.id.replace('question_', '')}, function(response)
{
if (response.responseJSON.status != 'ok')
{
alert(response.responseJSON.data);
}
});
});
// buzzer handler
// buzz!
$('buzz_submit').observe('click', function(el)
{
if (!$('buzz_submit').hasClassName('enabled')) return false;
YJ.Tools.request('buzz', {}, function(response)
{
if (response.responseJSON.status = 'ok')
{
if (!response.responseJSON.data.buzzed)
alert('Somebody buzzed first');
}
else
{
alert(response.responseJSON.data);
}
});
$('buzz_submit').removeClassName('enabled');
}).hide().removeClassName('hidden');
// {{{ Live updating
// get categories
YJ.Tools.liveUpdate('get_categories', 1, function(response)
{
if (response.responseJSON.status == 'ok')
{
// update board
jstProcess(new JsEvalContext(response.responseJSON.data), $('board'));
}
});
// get player + state
YJ.Tools.liveUpdate('get_player', 0.5, function(response)
{
if (response.responseJSON.status == 'ok')
{
if (STATE != response.responseJSON.data.state)
{
var oldState = STATE;
STATE = response.responseJSON.data.state;
// run teardown if so
if (oldState in YJ.States && Object.isFunction(YJ.States[oldState].stop)) YJ.States[oldState].stop(STATE);
// run init if so
if (STATE in YJ.States && Object.isFunction(YJ.States[STATE].start)) YJ.States[STATE].start(oldState);
}
if (['PICK_QUESTION'].include(STATE))
{
if (!response.responseJSON.data.active)
{
$('screen').addClassName('paused').down('div').update('Wait for your turn');
}
else
{
$('screen').removeClassName('paused').down('div').update();
}
}
if (['ANSWER'].include(STATE))
{
if (response.responseJSON.data.active)
{
$('screen').addClassName('paused').down('div').update('Now you can answer');
}
else
{
$('screen').addClassName('paused').down('div').update('Wait for your turn');
}
}
if (!LOGGED)
{
LOGGED = response.responseJSON.data;
if ($('screen').hasClassName('signin'))
{
$('screen').removeClassName('signin').down('div').update();
$('screen').removeClassName('active');
}
}
// update board
jstProcess(new JsEvalContext(response.responseJSON.data), $('badge'));
}
else
{
LOGGED = false;
if ($('screen').hasClassName('signin')) return;
$('screen').down('div').update('Enter your name');
$('screen').addClassName('signin').down('div').insert('<input id="player_signin" type="text" name="player" value="" />');
$('screen').addClassName('active');
$('player_signin').observe('keyup', function(e)
{
if (e.keyCode == Event.KEY_RETURN)
{
YJ.Tools.request('new_player', {name: $F('player_signin')}, function(response)
{
if (response.responseJSON.status != 'ok')
{
alert(response.responseJSON.data);
$('player_signin').clear().focus();
}
});
$('player_signin').blur();
}
}).focus();
}
});
// }}}
});
YJ =
{
defaults:
{
requestBase: 'Request.php'
}
};
YJ.States =
{
INIT:
{
stop: function()
{
}
},
PICK_QUESTION:
{
start: function()
{
$$('#board .qcontainer').invoke('fade', 0.5);
$$('#board .qcontainer').invoke('remove');
},
stop: function()
{
}
},
DISPLAY_QUESTION:
{
start: function()
{
YJ.Tools.request('get_question', function(response)
{
if (response.responseJSON.status == 'ok')
{
YJ.Tools.showQuestion(response.responseJSON.data);
}
});
$('screen').removeClassName('paused').down('div').update();
},
stop: function()
{
}
},
_BUZZING: function()
{
if (CANBUZZ)
{
$('buzz_submit').addClassName('enabled');
}
else
{
$('buzz_submit').removeClassName('enabled');
// add waiting for the buzz
YJ.Tools.request('wait_buzz', function(response)
{
if (response.responseJSON.status == 'ok')
{
if (response.responseJSON.data.can_buzz)
{
CANBUZZ = true;
if (STATE != 'BUZZ_IN')
YJ.States['BUZZ_IN'].start();
else
YJ.States._BUZZING();
}
else
{
CANBUZZ = false;
// try again
if (['BUZZ_IN', 'ANSWER', 'DISPLAY_QUESTION'].include(STATE))
YJ.States._BUZZING();
}
}
else
{
alert(response.responseJSON.data);
}
});
}
},
BUZZ_IN:
{
start: function(oldState)
{
// if just loaded
// show question
if (oldState == 'INIT')
{
YJ.Tools.request('get_question', function(response)
{
if (response.responseJSON.status == 'ok')
{
YJ.Tools.showQuestion(response.responseJSON.data);
}
});
}
// show button
$('screen').addClassName('covered').down('div').update();
$('buzz_submit').appear();
YJ.States._BUZZING();
},
stop: function()
{
CANBUZZ = false;
$('screen').removeClassName('covered').down('div').update();
$('buzz_submit').fade();
}
},
ANSWER:
{
start: function(oldState)
{
// if just loaded
// show question
if (oldState == 'INIT')
{
YJ.Tools.request('get_question', function(response)
{
if (response.responseJSON.status == 'ok')
{
YJ.Tools.showQuestion(response.responseJSON.data);
}
});
}
},
stop: function()
{
$('screen').removeClassName('paused').down('div').update();
}
},
GAME_OVER:
{
start: function(oldState)
{
var player;
$$('#board .qcontainer').invoke('fade', 0.5);
$$('#board .qcontainer').invoke('remove');
if ((player = $('players').select('li.player').first())
&& player.down('.score')
&& player.down('.score').innerHTML > 0)
{
$('screen').down('div').update($('players').select('li.player').first().down('.name').innerHTML + ' won the game!');
}
else
{
$('screen').down('div').update('Are you game?');
}
$('screen').addClassName('active');
},
stop: function()
{
$('screen').removeClassName('active');
}
},
PAUSED:
{
start: function(oldState)
{
$('screen').down('div').update('Paused');
$('screen').addClassName('active');
},
stop: function()
{
$('screen').removeClassName('active');
}
},
ROUND_OVER:
{
start: function(oldState)
{
$$('#board .qcontainer').invoke('fade', 0.5);
$$('#board .qcontainer').invoke('remove');
$('screen').down('div').update('Round over');
$('screen').addClassName('active');
},
stop: function()
{
setTimeout(function(){location.reload(true);}, 500);
}
}
};
YJ.Tools =
{
showQuestion: function(data)
{
var question = $('question_'+data.id);
if (data.question)
{
// highlight the question
if (questioningPE)
{
lastShowing.className = 'question';
questioningPE.stop();
}
lastShowing = question.insert({top: new Element('div',
{
'class': 'qcontainer'+((data.dd) ? ' doubles' : '')
}).insert(new Element('div',
{
'class': 'data'
}).update(data.question)
)
});
new Effect.Move(question.down('.qbox .container'), { x: 0, y: -100, mode: 'relative', duration: 0.5 });
questioningInstance = questioning.bind(question);
questioningPE = new PeriodicalExecuter(questioningInstance, 0.12);
questioningInstance(); // run it right away
// after effects
setTimeout(function()
{
// remove points
lastShowing.down('.qbox').remove();
// start expansion
var container = lastShowing.down('.qcontainer').setStyle({zIndex: 101});
var offset = container.viewportOffset().relativeTo($('board').viewportOffset());
new Effect.Parallel(
[
new Effect.Morph(container,
{
style:
{
width: '740px',
height: '578px',
left: '-'+offset.left+'px',
top: '-'+offset.top+'px',
padding: '30px 50px'
},
}
),
new Effect.Morph(container.down('.data'),
{
style:
{
width: '740px',
height: '538px',
fontSize: '60px'
},
}
)
],
{
duration: 0.6,
afterFinish: function()
{
// cleanup hidden stuff
if (questioningPE)
{
lastShowing.className = 'question';
questioningPE.stop();
questioningPE = null;
}
}
}
);
}, 600);
}
},
liveUpdate: function(method, timeout, callback)
{
options = Object.deepExtend(
{
method: 'get',
parameters:
{
method: method
},
timeout: timeout,
onSuccess: Object.isFunction(callback) ? callback : Prototype.emptyFunction
}, (Object.isFunction(callback) ? {} : callback) || {});
return new YJ.LiveUpdater(YJ.defaults.requestBase, options);
},
request: function(method, callback)
{
var parameters;
// wierd thing, but I want to support old format,
// and I want to have meaning arguments order for new format
// and I don't want to have two functions
if (arguments.length > 2)
{
parameters = arguments[1];
callback = arguments[2];
}
parameters = Object.extend(
{
method: method
}, parameters || {});
options = Object.deepExtend(
{
method: 'get',
parameters: parameters,
onSuccess: Object.isFunction(callback) ? callback : Prototype.emptyFunction
}, (Object.isFunction(callback) ? {} : callback) || {});
return new Ajax.Request(YJ.defaults.requestBase, options);
},
// hoverable mouseover
hoverableOver: function(e)
{
var receiver = e.element();
receiver.addClassName('hover');
if (receiver != this)
{
receiver.ancestors().find(function(i)
{
i.addClassName('hover');
if (i == this)
{
return true;
}
}, this);
}
},
// hoverable mouseoout
hoverableOut: function(e)
{
var receiver = e.element();
receiver.removeClassName('hover');
if (receiver != this)
{
receiver.ancestors().find(function(i)
{
i.removeClassName('hover');
if (i == this)
{
return true;
}
}, this);
}
}
};
YJ.LiveUpdater = Class.create(Ajax.Base,
{
initialize: function($super, url, options)
{
$super(options);
this.timeout = (this.options.timeout || 1);
this.updater = { };
this.url = url;
this.start();
},
start: function()
{
this.options.onComplete = this.updateComplete.bind(this);
this.onTimerEvent();
},
stop: function()
{
this.updater.options.onComplete = undefined;
clearTimeout(this.timer);
(this.onComplete || Prototype.emptyFunction).apply(this, arguments);
},
updateComplete: function(response)
{
this.timer = this.onTimerEvent.bind(this).delay(this.timeout);
},
onTimerEvent: function()
{
this.updater = new Ajax.Request(this.url, this.options);
}
});
// Borrowed from S2, in case it's not included
if (!Object.deepExtend)
Object.deepExtend = function(destination, source) {
for (var property in source) {
if (source[property] && source[property].constructor &&
source[property].constructor === Object) {
destination[property] = destination[property] || {};
arguments.callee(destination[property], source[property]);
} else {
destination[property] = source[property];
}
}
return destination;
};
/* ]]> */
</script>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="main">
<div id="badge" jseval="($this.active)?this.addClassName('active'):this.removeClassName('active');">
<span jscontent="$this.name" class="name"></span>
<span jscontent="$this.score" class="score"></span>
</div>
<div id="board">
<div jsselect="$this" jsvalues=".id:$this.id" class="category">
<div class="head">
<div jscontent="$this.name" class="content"></div>
</div>
<div jsselect="$this.questions" jsvalues=".id:'question_'+$this.id" jseval="($this.played)?this.addClassName('empty'):this.removeClassName('empty');" class="question">
<div jsdisplay="!$this.played" class="qbox">
<div class="container">
<div jscontent="$this.points" class="points"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="screen"><div></div></div>
<div id="dummy"><div></div></div>
<div id="buzz_submit" class="submit hidden">Buzz</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.