-
-
Save gabehollombe/75ae61fda6bc60fd4012 to your computer and use it in GitHub Desktop.
Laksa Time - Refactored - HTML and Coffee
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Is it laksa time yet?</title> | |
<!-- | |
_____ _____ _____ _____ _____ | |
/\ \ /\ \ /\ \ /\ \ /\ \ | |
/::\____\ /::\ \ /::\____\ /::\ \ /::\ \ | |
/:::/ / /::::\ \ /:::/ / /::::\ \ /::::\ \ | |
/:::/ / /::::::\ \ /:::/ / /::::::\ \ /::::::\ \ | |
/:::/ / /:::/\:::\ \ /:::/ / /:::/\:::\ \ /:::/\:::\ \ | |
/:::/ / /:::/__\:::\ \ /:::/____/ /:::/__\:::\ \ /:::/__\:::\ \ | |
/:::/ / /::::\ \:::\ \ /::::\ \ \:::\ \:::\ \ /::::\ \:::\ \ | |
/:::/ / /::::::\ \:::\ \ /::::::\____\________ ___\:::\ \:::\ \ /::::::\ \:::\ \ | |
/:::/ / /:::/\:::\ \:::\ \ /:::/\:::::::::::\ \ /\ \:::\ \:::\ \ /:::/\:::\ \:::\ \ | |
/:::/____/ /:::/ \:::\ \:::\____\/:::/ |:::::::::::\____\/::\ \:::\ \:::\____\/:::/ \:::\ \:::\____\ | |
\:::\ \ \::/ \:::\ /:::/ /\::/ |::|~~~|~~~~~ \:::\ \:::\ \::/ /\::/ \:::\ /:::/ / | |
\:::\ \ \/____/ \:::\/:::/ / \/____|::| | \:::\ \:::\ \/____/ \/____/ \:::\/:::/ / | |
\:::\ \ \::::::/ / |::| | \:::\ \:::\ \ \::::::/ / | |
\:::\ \ \::::/ / |::| | \:::\ \:::\____\ \::::/ / | |
\:::\ \ /:::/ / |::| | \:::\ /:::/ / /:::/ / | |
\:::\ \ /:::/ / |::| | \:::\/:::/ / /:::/ / | |
\:::\ \ /:::/ / |::| | \::::::/ / /:::/ / | |
\:::\____\ /:::/ / \::| | \::::/ / /:::/ / | |
\::/ / \::/ / \:| | \::/ / \::/ / | |
\/____/ \/____/ \|___| \/____/ \/____/ | |
_____ _____ _____ _____ | |
/\ \ /\ \ /\ \ /\ \ | |
/::\ \ /::\ \ /::\____\ /::\ \ | |
\:::\ \ \:::\ \ /::::| | /::::\ \ | |
\:::\ \ \:::\ \ /:::::| | /::::::\ \ | |
\:::\ \ \:::\ \ /::::::| | /:::/\:::\ \ | |
\:::\ \ \:::\ \ /:::/|::| | /:::/__\:::\ \ | |
/::::\ \ /::::\ \ /:::/ |::| | /::::\ \:::\ \ | |
/::::::\ \ ____ /::::::\ \ /:::/ |::|___|______ /::::::\ \:::\ \ | |
/:::/\:::\ \ /\ \ /:::/\:::\ \ /:::/ |::::::::\ \ /:::/\:::\ \:::\ \ | |
/:::/ \:::\____\/::\ \/:::/ \:::\____\/:::/ |:::::::::\____\/:::/__\:::\ \:::\____\ | |
/:::/ \::/ /\:::\ /:::/ \::/ /\::/ / ~~~~~/:::/ /\:::\ \:::\ \::/ / | |
/:::/ / \/____/ \:::\/:::/ / \/____/ \/____/ /:::/ / \:::\ \:::\ \/____/ | |
/:::/ / \::::::/ / /:::/ / \:::\ \:::\ \ | |
/:::/ / \::::/____/ /:::/ / \:::\ \:::\____\ | |
\::/ / \:::\ \ /:::/ / \:::\ \::/ / | |
\/____/ \:::\ \ /:::/ / \:::\ \/____/ | |
\:::\ \ /:::/ / \:::\ \ | |
\:::\____\ /:::/ / \:::\____\ | |
\::/ / \::/ / \::/ / | |
\/____/ \/____/ \/____/ | |
--> | |
<!-- Sure it's overkill, but it's probably cached already... --> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> | |
<script type="text/javascript" src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script> | |
<script type="text/coffeescript"> | |
options = | |
target: "#isitlaksatime" | |
day: 5 #friday | |
hour: 12 #noon | |
messages: [ | |
#[less than X mins to go, more than or equal to Y mins to go, message] | |
[null, 45, "Not Yet"], | |
[45, 15, "Soon"], | |
[15, 5, "Really soon"], | |
[5, 2, "Get ready"], | |
[2, 0, "YES!"], | |
] | |
timeval = (num, type) -> | |
switch type | |
when 'seconds' then num * 1000 | |
when 'minutes' then num * timeval 60, 'seconds' | |
when 'hours' then num * timeval 60, 'minutes' | |
when 'days' then num * timeval 24, 'hours' | |
tv = (num, type) -> timeval(num, type) #shorthand for timeval | |
next_date_from_date = (from_date, day, hours) -> | |
d = new Date(from_date.valueOf()) #dates are passed by reference, so make a copy | |
#get now if it's friday, otherwise get next friday | |
d.setDate( d.getDate() + (7 + day - d.getDay()) % 7 ) | |
#make the date match the time set in options | |
d.setHours(hours) | |
d.setMinutes(0) | |
d.setSeconds(0) | |
d.setMilliseconds(0) | |
return d | |
get_message_for_date = (date) -> | |
target_date = next_date_from_date(date, options.day, options.hour) | |
time_diff = target_date - date | |
return "You missed it today. <br/> See you next Friday?" if time_diff < 0 | |
message = null | |
$(options.messages).each -> | |
[max, min, msg] = this | |
max = tv(max, 'minutes') if max != null #allow a null value for max since it's a special case where we'll only want to compare time_diff to min when it's null | |
min = tv(min, 'minutes') | |
if max > time_diff >= min or (max == null and time_diff >= min) | |
message = msg | |
return false | |
return message | |
update_message = -> | |
message = get_message_for_date(new Date()) | |
$(options.target).html(message) | |
if message.length > 10 | |
$("body").addClass("long"); | |
else | |
$("body").removeClass("long"); | |
run_tests = -> | |
#Testing next_date_from_date(from_date, day, hour) | |
test_cases = [ | |
{ | |
from_date: new Date(2011, 4, 16, 10, 0, 0) #months start at 0 | |
expected_date: new Date(2011, 4, 20, 12, 0, 0) | |
} | |
{ | |
from_date: new Date(2011, 4, 20, 10, 0, 0) | |
expected_date: new Date(2011, 4, 20, 12, 0, 0) | |
} | |
{ | |
from_date: new Date(2011, 4, 21, 10, 0, 0) | |
expected_date: new Date(2011, 4, 27, 12, 0, 0) | |
} | |
] | |
test_next_date_from_date = (from_date, expected_date) -> | |
if next_date_from_date(from_date, 5, 12).valueOf() == expected_date.valueOf() | |
console.log 'OK' | |
else | |
console.log 'NO' | |
test_next_date_from_date(test.from_date, test.expected_date) for test in test_cases | |
#Testing get_message_for_date(date) | |
test_cases = [ | |
{ | |
for_date: new Date(2011, 4, 20, 10, 0, 0) | |
expected_message: "Not Yet" | |
} | |
{ | |
for_date: new Date(2011, 4, 20, 11, 0, 0) | |
expected_message: "Not Yet" | |
} | |
{ | |
for_date: new Date(2011, 4, 20, 11, 30, 0) | |
expected_message: "Soon" | |
} | |
{ | |
for_date: new Date(2011, 4, 20, 11, 45, 0) | |
expected_message: "Soon" | |
} | |
{ | |
for_date: new Date(2011, 4, 20, 11, 46, 0) | |
expected_message: "Really soon" | |
} | |
{ | |
for_date: new Date(2011, 4, 20, 11, 56, 0) | |
expected_message: "Get ready" | |
} | |
{ | |
for_date: new Date(2011, 4, 20, 11, 58, 1) | |
expected_message: "YES!" | |
} | |
{ | |
for_date: new Date(2011, 4, 20, 12, 0, 0) | |
expected_message: "YES!" | |
} | |
{ | |
for_date: new Date(2011, 4, 20, 12, 15, 0) | |
expected_message: "You missed it today. <br/> See you next Friday?" | |
} | |
] | |
test_get_message_for_date = (for_date, expected_message) -> | |
if get_message_for_date(for_date) == expected_message | |
console.log 'OK' | |
else | |
console.log 'NO' | |
test_get_message_for_date(test.for_date, test.expected_message) for test in test_cases | |
$ -> | |
update_message() | |
timer = setInterval update_message, timeval(10, 'seconds') | |
run_tests() | |
</script> | |
<style type="text/css"> | |
body { background: white; color: black; text-align: center; font-family: sans-serif; } | |
.assistive { position: absolute; left: -5000px; width: 4000px; overflow: hidden; top: 0; height: 0; } | |
#isitlaksatime { font-size: 10em; margin: 10% 5% 0 5%; text-shadow: 3px 3px 3px #ddd; } | |
.long #isitlaksatime { font-size: 6em; } | |
</style> | |
</head> | |
<body> | |
<h1 class="assistive">is it laksa time yet?</h1> | |
<p id="isitlaksatime"> | |
<noscript><a href="http://twitter.com/home/?status=Oi%20@rioter,%20is%20it%20laksa%20time%20yet?%20http://isitlaksatimeyet.200ok.com.au/">Ask Jared</a>.</noscript> | |
</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment