Compare commits

..

5 Commits

Author SHA1 Message Date
Nick Stokoe
2cf33ba2d8 www/{countdown.js,index.html} - nominally working? 2022-12-31 01:41:29 +00:00
Nick Stokoe
1a8c50d1ee move web content to www
And rename countdown.html to index.html. Update dates to current
year (so something happens!)
2022-12-30 18:12:08 +00:00
Nick Stokoe
01abfe90ac package.json - npm init 2022-12-30 18:09:58 +00:00
Nick Stokoe
6c92b71e79 countdown.html,countdown.js - reindent 2022-12-30 18:09:43 +00:00
Nick Stokoe
d8da68595e .editorconfig - cross-platform indentation config 2022-12-30 18:09:28 +00:00
7 changed files with 372 additions and 166 deletions

22
.editorconfig Normal file
View File

@@ -0,0 +1,22 @@
# Cross-platform formatting config
# See https://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
[{*.{js,json,css,scss,html,jsx},.babelrc}]
# Set default charset
charset = utf-8
# 4 space indentation
indent_style = space
indent_size = 2
[*.{yml,yaml}]
indent_style = space
indent_size = 2

View File

@@ -1,36 +0,0 @@
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>
<style>
body {
font-family: Chango;
text-align: center;
}
div#counter {
font-size: 180pt;
text-align: left;
}
div#location {
font-size: 50pt;
}
div.hours { color: blue; }
div.minutes { color: green; }
div.seconds { color: orange; }
div.countdown { color: red; }
</style>
</head>
<body>
<div id="counter"></div>
until 1st January 2014 in
<div id="location"></div>
<div>at <span id="localtime"></span> local time</div>
<div id="map"></div>
<script src="countdown.js">
</script>
</body>
</html>

View File

@@ -1,130 +0,0 @@
var events = [
{ time: new Date("Tue 31 Dec 2013 10:00:00 GMT"), country: "Christmas Island/Kiribati and Samoa", city: "Kiritimati, Apia" },
{ time: new Date("Tue 31 Dec 2013 10:15:00 GMT"), country: "Chatham Islands/New Zealand", city: "Chatham Islands" },
{ time: new Date("Tue 31 Dec 2013 11:00:00 GMT"), country: "New Zealand with exceptions and 5 more", city: "Auckland, Suva, Wellington, Nukualofa" },
{ time: new Date("Tue 31 Dec 2013 12:00:00 GMT"), country: "small region of Russia, Marshall Islands and 5 more", city: "Anadyr, Funafuti, Yaren, Tarawa" },
{ time: new Date("Tue 31 Dec 2013 12:30:00 GMT"), country: "Norfolk Island", city: "Kingston" },
{ time: new Date("Tue 31 Dec 2013 13:00:00 GMT"), country: "much of Australia and 5 more", city: "Melbourne, Sydney, Canberra, Honiara" },
{ time: new Date("Tue 31 Dec 2013 13:30:00 GMT"), country: "small region of Australia", city: "Adelaide, Broken Hill" },
{ time: new Date("Tue 31 Dec 2013 14:00:00 GMT"), country: "Queensland/Australia and 5 more", city: "Brisbane, Port Moresby, Guam (Hagåtña), Cairns" },
{ time: new Date("Tue 31 Dec 2013 14:30:00 GMT"), country: "Northern Territory/Australia", city: "Darwin, Alice Springs, Uluru" },
{ time: new Date("Tue 31 Dec 2013 15:00:00 GMT"), country: "Japan and 6 more", city: "Tokyo, Seoul, Pyongyang, Dili" },
{ time: new Date("Tue 31 Dec 2013 15:15:00 GMT"), country: "Western Australia/Australia", city: "Eucla" },
{ time: new Date("Tue 31 Dec 2013 16:00:00 GMT"), country: "China and 12 more", city: "Beijing, Hong Kong, Manila, Singapore" },
{ time: new Date("Tue 31 Dec 2013 17:00:00 GMT"), country: "much of Indonesia, Thailand and 7 more", city: "Jakarta, Bangkok, Hanoi, Phnom Penh" },
{ time: new Date("Tue 31 Dec 2013 17:30:00 GMT"), country: "Myanmar and Cocos Islands", city: "Yangon, Naypyidaw, Mandalay, Bantam" },
{ time: new Date("Tue 31 Dec 2013 18:00:00 GMT"), country: "Bangladesh, some regions of Russia and 4 more", city: "Dhaka, Almaty, Bishkek, Thimphu" },
{ time: new Date("Tue 31 Dec 2013 18:15:00 GMT"), country: "Nepal", city: "Kathmandu, Biratnagar, Pokhara" },
{ time: new Date("Tue 31 Dec 2013 18:30:00 GMT"), country: "India and Sri Lanka", city: "New Delhi, Mumbai, Kolkata, Bangalore" },
{ time: new Date("Tue 31 Dec 2013 19:00:00 GMT"), country: "Pakistan and 8 more", city: "Tashkent, Islamabad, Lahore, Karachi" },
{ time: new Date("Tue 31 Dec 2013 19:30:00 GMT"), country: "Afghanistan", city: "Kabul, Kandahar, Mazari Sharif, Herat" },
{ time: new Date("Tue 31 Dec 2013 20:00:00 GMT"), country: "much of Russia and 8 more", city: "Moscow, Dubai, Abu Dhabi, Muscat" },
{ time: new Date("Tue 31 Dec 2013 20:30:00 GMT"), country: "Iran", city: "Tehran, Rasht, Esfahãn, Bandar-Abbas" },
{ time: new Date("Tue 31 Dec 2013 21:00:00 GMT"), country: "Iraq and 20 more", city: "Baghdad, Khartoum, Nairobi, Addis Ababa" },
{ time: new Date("Tue 31 Dec 2013 22:00:00 GMT"), country: "Greece and 30 more", city: "Cairo, Ankara, Athens, Bucharest" },
{ time: new Date("Tue 31 Dec 2013 23:00:00 GMT"), country: "Germany and 43 more", city: "Brussels, Madrid, Paris, Rome" },
{ time: new Date("Wed 1 Jan 2014 00:00:00 GMT"), country: "United Kingdom and 24 more", city: "London, Casablanca, Dublin, Lisbon" },
{ time: new Date("Wed 1 Jan 2014 1:00:00 GMT"), country: "Cape Verde, some regions of Greenland and 1 more", city: "Praia, Ponta Delgada (Azores), Ittoqqortoormiit, Mindelo" },
{ time: new Date("Wed 1 Jan 2014 2:00:00 GMT"), country: "regions of Brazil, Uruguay and 1 more", city: "Rio de Janeiro, São Paulo, Brasilia, Wed 1 Jan 2014tevideo" },
{ time: new Date("Wed 1 Jan 2014 3:00:00 GMT"), country: "regions of Brazil, Argentina and 7 more", city: "Buenos Aires, Santiago, Asuncion, Paramaribo" },
{ time: new Date("Wed 1 Jan 2014 3:30:00 GMT"), country: "Newfoundland and Labrador/Canada", city: "St. John's, Conception Bay South, Corner Brook, Gander" },
{ time: new Date("Wed 1 Jan 2014 4:00:00 GMT"), country: "some regions of Canada and 26 more", city: "La Paz, San Juan, Santo Domingo, Halifax" },
{ time: new Date("Wed 1 Jan 2014 4:30:00 GMT"), country: "Venezuela", city: "Caracas, Barquisimeto, Maracaibo, Maracay" },
{ time: new Date("Wed 1 Jan 2014 5:00:00 GMT"), country: "regions of U.S.A., regions of Canada and 12 more", city: "New York, Washington DC, Detroit, Havana" },
{ time: new Date("Wed 1 Jan 2014 6:00:00 GMT"), country: "regions of U.S.A., some regions of Canada and 8 more", city: "Mexico City, Chicago, Guatemala, Dallas" },
{ time: new Date("Wed 1 Jan 2014 7:00:00 GMT"), country: "some regions of U.S.A., some regions of Canada and 1 more", city: "Calgary, Denver, Edmonton, Phoenix" },
{ time: new Date("Wed 1 Jan 2014 8:00:00 GMT"), country: "regions of U.S.A., some regions of Canada and 2 more", city: "Los Angeles, San Francisco, Las Vegas, Seattle" },
{ time: new Date("Wed 1 Jan 2014 9:00:00 GMT"), country: "Alaska/U.S.A. and French Polynesia", city: "Anchorage, Fairbanks, Unalaska, Juneau" },
{ time: new Date("Wed 1 Jan 2014 9:30:00 GMT"), country: "Marquesas Islands/France", city: "Taiohae" },
{ time: new Date("Wed 1 Jan 2014 10:00:00 GMT"), country: "small region of U.S.A. and 2 more", city: "Honolulu, Rarotonga, Adak, Papeete" },
{ time: new Date("Wed 1 Jan 2014 11:00:00 GMT"), country: "American Samoa, Midway Atoll/U.S.A. and 1 more", city: "Alofi, Midway, Pago Pago" },
{ time: new Date("Wed 1 Jan 2014 12:00:00 GMT"), country: "small region of U.S.A.", city: "Baker Island, Howland Island" },
];
/*
var events = [
{ time: new Date("Tue 31 Dec 2013 1:00:00 GMT"), country: "Cape Verde, some regions of Greenland and 1 more", city: "Praia, Ponta Delgada (Azores), Ittoqqortoormiit, Mindelo" },
{ time: new Date("Tue 31 Dec 2013 2:00:00 GMT"), country: "regions of Brazil, Uruguay and 1 more", city: "Rio de Janeiro, São Paulo, Brasilia, Tue 31 Dec 2013tevideo" },
{ time: new Date("Tue 31 Dec 2013 2:30:00 GMT"), country: "regions of Brazil, Argentina and 7 more", city: "Buenos Aires, Santiago, Asuncion, Paramaribo" },
{ time: new Date("Tue 31 Dec 2013 2:45:00 GMT"), country: "Newfoundland and Labrador/Canada", city: "St. John's, Conception Bay South, Corner Brook, Gander" },
];
*/
var now = new Date().getTime();
var secsRemaining = 0;
var nextEvent;
var counter = document.getElementById("counter");
var loc = document.getElementById("location");
var time = document.getElementById("localtime");
var countDownSound = new Audio('get-ready.ogg');
function pad(num) {
return (num<10? "0"+num : ""+num);
}
function counterClass(millisecsRemaining) {
if (millisecsRemaining > 3600000) return "hours";
if (millisecsRemaining > 60000) return "minutes";
if (millisecsRemaining > 10000) return "seconds";
return "countdown";
}
function timeRemaining(millisecsRemaining) {
// var days = Math.floor(millisecsRemaining / millisInDay)
// millisecsRemaining -= days * millisInDay
var hours = Math.floor(millisecsRemaining / 3600000)
millisecsRemaining -= hours * 3600000
var mins = Math.floor(millisecsRemaining / 60000)
millisecsRemaining -= mins * 60000
var secs = Math.round(millisecsRemaining / 1000)
return hours+":"+pad(mins)+":"+pad(secs)
}
var playing = false;
function handleTick(now) {
console.log(now, now.getMilliseconds());
while (!nextEvent || nextEvent.time <= now) {
if (events.length == 0) return;
nextEvent = events.shift();
}
var millisecsRemaining = nextEvent.time.getTime() - now.getTime();
var excl = millisecsRemaining < 1000*5? "!" : "";
console.log("seconds",now.getSeconds());
if (millisecsRemaining < 2*60*1000) {
if (!playing) {
countDownSound.play();
playing = true;
}
}
else
// resets the announcement
playing = false;
counter.innerHTML = timeRemaining(millisecsRemaining);
loc.innerHTML = nextEvent.city;
time.innerHTML = nextEvent.time.toLocaleFormat("%I:%M %p")
counter.className = counterClass(millisecsRemaining);
}
function ticker() {
var now = new Date();
handleTick(now);
var millis = now.getMilliseconds()
var millisTilNextSecond = 1000-millis;
setTimeout(ticker, millisTilNextSecond);
}
ticker();

11
package.json Normal file
View File

@@ -0,0 +1,11 @@
{
"name": "new-year-countdown",
"version": "1.0.0",
"description": "Count down each New Year's arrival around the world",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

303
www/countdown.js Normal file
View File

@@ -0,0 +1,303 @@
// This is deliberately browser-compatible JS, so we avoid fat arrows etc.
var locale = "EN-GB";
var now = new Date();
var nextNewYearUTC = new Date(Date.UTC(now.getFullYear()+1, 0, 1));
var secsRemaining = 0;
var nextZone;
var counter = document.getElementById("counter");
var loc = document.getElementById("location");
var time = document.getElementById("localtime");
var untilDate = document.getElementById("until-date");
var countDownSound = new Audio('get-ready.ogg');
// Convert the next new year time to 'date, hours:mins:secs' in the target timezone
function zoneTime(zone, refTime) {
return refTime.toLocaleString('EN-US', {
hour: '2-digit',
hour12: false,
minute: '2-digit',
second: '2-digit',
year: 'numeric',
month: 'numeric',
day: 'numeric',
timeZone: zone,
});
}
function zoneOffsetMillis(timestr, baseDate) {
var v = timestr.split(/[/ :,]+/)
.map(function(str) { return Number(str); });
var date = new Date(v[2],v[0]-1,v[1],v[3],v[4],v[5]);
return date.valueOf() - baseDate.valueOf();
}
// Compile a list of timezones from Intl.supportedValuesOf
var zones = Intl.supportedValuesOf('timeZone')
.map(function(zone) { return {
zone: zone,
offset: zoneOffsetMillis(zoneTime(zone, nextNewYearUTC), nextNewYearUTC)
}; })
.sort(function(a,b) { return b.offset - a.offset; });
// Now concoct an index of timezone hour offsets to timezone info.
// Each zone has:
// { abbrevs, offset, hOffset, nydDate }
var zoneIndex = zones
.reduce((a, v) => {
var hOffset = v.offset/3600000;
var zoneInfo = a[hOffset];
if (zoneInfo)
zoneInfo.abbrevs.push(v.zone);
else {
a[hOffset] = {
abbrevs: [v.zone],
offset: v.offset,
hOffset: hOffset,
nydDate: new Date(nextNewYearUTC.valueOf() + v.offset),
};
}
return a;
}, {});
console.debug(nextNewYearUTC, zoneIndex);
// This info is just used to say what cities / countries are in the timezone
var zoneInfo = {
"-12": {
country: "small region of U.S.A.",
city: "Baker Island, Howland Island"
},
"-11": {
country: "American Samoa, Midway Atoll/U.S.A. and 1 more",
city: "Alofi, Midway, Pago Pago"
},
"-10": {
country: "Cook Islands, small region of U.S.A. and 2 more",
city: "Honolulu, Rarotonga, Adak, Papeete"
},
"-9.5": {
country: "French Polynesia, Marquesas Islands",
city: "Taiohae"
},
"-9": {
country: "Alaska/U.S.A. and French Polynesia",
city: "Anchorage, Fairbanks, Unalaska, Juneau"
},
"-8": {
country: "Pitcairn Islands, regions of U.S.A. Mexico, and Canada",
city: "Los Angeles, San Francisco, Las Vegas, Seattle"
},
"-7": {
country: "some regions of U.S.A., Mexico, some regions of Canada",
city: "Calgary, Denver, Edmonton, Phoenix"
},
"-6": {
country: "Belize, regions of U.S.A., Mexico, some regions of Canada and 8 more",
city: "Mexico City, Chicago, Guatemala, Dallas"
},
"-5": {
country: "regions of U.S.A., regions of Canada and 12 more",
city: "New York, Washington DC, Detroit, Havana"
},
"-4": {
country: "Venezuela",
city: "Caracas, Barquisimeto, Maracaibo, Maracay"
},
"-3.5": {
country: "Newfoundland and Labrador/Canada",
city: "St. John's, Conception Bay South, Corner Brook, Gander"
},
"-3": {
country: "regions of Brazil, Argentina and 7 more",
city: "Buenos Aires, Santiago, Asuncion, Paramaribo"
},
"-2": {
country: "South Georgia and the South Sandwich Islands",
city: "Grytviken",
},
"-1": {
country: "Cape Verde, some regions of Greenland and 1 more",
city: "Praia, Ponta Delgada (Azores), Ittoqqortoormiit, Mindelo"
},
"0": {
country: "United Kingdom and 24 more",
city: "London, Casablanca, Dublin, Lisbon"
},
"1": {
country: "Germany and 43 more",
city: "Brussels, Madrid, Paris, Rome"
},
"2": {
country: "Greece and 30 more",
city: "Cairo, Ankara, Athens, Bucharest"
},
"3": {
country: "Iraq and 20 more",
city: "Baghdad, Khartoum, Nairobi, Addis Ababa"
},
"3.5": {
country: "Iran",
city: "Tehran, Rasht, Esfahãn, Bandar-Abbas"
},
"4": {
country: "UAE, parts of Russia, Georgia, Armenia, Mauritius",
city: "Tblisi, Dubai, Abu Dhabi",
},
"4.5": {
country: "Afghanistan",
city: "Kabul, Kandahar, Mazari Sharif, Herat"
},
"5": {
country: "Pakistan and 8 more",
city: "Tashkent, Islamabad, Lahore, Karachi"
},
"5.5": {
country: "India and Sri Lanka",
city: "New Delhi, Mumbai, Kolkata, Bangalore"
},
"5.75": {
country: "Nepal",
city: "Kathmandu, Biratnagar, Pokhara"
},
"6": {
country: "Bangladesh, some regions of Russia and 4 more",
city: "Dhaka, Almaty, Bishkek, Thimphu"
},
"6.5": {
country: "Myanmar and Cocos Islands",
city: "Yangon, Naypyidaw, Mandalay, Bantam"
},
"7": {
country: "much of Indonesia, Thailand and 7 more",
city: "Jakarta, Bangkok, Hanoi, Phnom Penh"
},
"8": {
country: "China and 12 more",
city: "Beijing, Hong Kong, Manila, Singapore"
},
"8.75": {
country: "Western Australia/Australia",
city: "Eucla"
},
"9": {
country: "Japan and 6 more",
city: "Tokyo, Seoul, Pyongyang, Dili"
},
"9.5": {
country: "Northern Territory/Australia",
city: "Darwin, Alice Springs, Uluru"
},
"10": {
country: "Queensland/Australia and 5 more",
city: "Brisbane, Port Moresby, Guam (Hagåtña), Cairns"
},
"10.5": {
country: "small region of Australia",
city: "Adelaide, Broken Hill"
},
"11": {
country: "Vanuatu, Solomon Islands, much of Australia and 5 more",
city: "Melbourne, Sydney, Canberra, Honiara"
},
"12": {
country: "Kiribati, Marshall Islands, Norfolk Island, Tuvalu, Fiji",
city: "Kingston",
},
"13": {
country: "New Zealand with exceptions and 5 more",
city: "Auckland, Suva, Wellington, Nukualofa"
},
"13.75": {
country: "Chatham Islands/New Zealand",
city: "Chatham Islands"
},
};
console.debug(zoneInfo);
var zoneOrder = Object.keys(zoneIndex)
.map(Number)
.sort(function(a,b) { return a-b; });
console.debug(zoneOrder);
function pad(num) {
return (num<10? "0"+num : ""+num);
}
function counterClass(millisecsRemaining) {
if (millisecsRemaining > 3600000) return "hours";
if (millisecsRemaining > 60000) return "minutes";
if (millisecsRemaining > 10000) return "seconds";
return "countdown";
}
function timeRemaining(millisecsRemaining) {
// var days = Math.floor(millisecsRemaining / millisInDay)
// millisecsRemaining -= days * millisInDay
var hours = Math.floor(millisecsRemaining / 3600000)
millisecsRemaining -= hours * 3600000
var mins = Math.floor(millisecsRemaining / 60000)
millisecsRemaining -= mins * 60000
var secs = Math.round(millisecsRemaining / 1000)
return hours+"h "+pad(mins)+"m "+pad(secs)+"s"
}
var playing = false;
function handleTick(now) {
console.debug(now, now.getMilliseconds());
while (!nextZone || zoneIndex[nextZone].nydDate <= now) {
if (zoneOrder.length == 0) return;
nextZone = zoneOrder.shift();
console.debug("next up: zone", nextZone);
}
var millisecsRemaining = zoneIndex[nextZone].nydDate.getTime() - now.getTime();
var excl = millisecsRemaining < 1000*5? "!" : "";
console.debug("seconds",now.getSeconds());
if (millisecsRemaining < 2*60*1000) {
if (!playing) {
countDownSound.play();
playing = true;
}
}
else
// resets the announcement
playing = false;
var info = zoneInfo[nextZone];
var zone = zoneIndex[nextZone];
untilDate.innerHTML = nextNewYearUTC.toLocaleDateString(locale, {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
});
counter.innerHTML = timeRemaining(millisecsRemaining);
loc.innerHTML = info? info.city || info.country : zone.abbrev[0];
time.innerHTML = zone.nydDate.toLocaleDateString(locale, {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
counter.className = counterClass(millisecsRemaining);
}
function ticker() {
var now = new Date();
handleTick(now);
var millis = now.getMilliseconds()
var millisTilNextSecond = 1000-millis;
setTimeout(ticker, millisTilNextSecond);
}
ticker();

36
www/index.html Normal file
View File

@@ -0,0 +1,36 @@
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/7.8.0/d3.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>
<style>
body {
font-family: Chango;
text-align: center;
}
div#counter {
font-size: 100pt;
text-align: left;
}
div#location {
font-size: 50pt;
}
div.hours { color: blue; }
div.minutes { color: green; }
div.seconds { color: orange; }
div.countdown { color: red; }
</style>
</head>
<body>
<div id="counter"></div>
until <span id="until-date"></span> in
<div id="location"></div>
<div>at <span id="localtime"></span> local time</div>
<div id="map"></div>
<script src="countdown.js"></script>
<!--iframe width="645" height="363" src="https://www.youtube.com/embed/gG0yjQ47IZU" title="FREE DOWNLOAD - 10 Seconds Countdown Timer With Voice #Shorts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe-->
</body>
</html>