UPDATE October 7, 2019: This clock is now on the wiki by default. If you enabled the clock from these instructions you can now remove the clock from your common.css and common.js files, and also untick "Enable personal JavaScript" in your preferences.
Hi Penguins,
Recently, the Clock Tower has been having issues keeping an accurate time. It tends to be one hour off from actual Penguin Standard Time (also known as Pacific Standard Time). It's also had some bugs with its display (e.g. days being truncated or digits going off the correct position).
So I've decided to take matters in my own flippers and make a reliable PST clock that you can see on the wiki. Its design is based on the 2009 PST clock that was on the Community Page for the original Club Penguin. Here you can see a comparison:
You might be wondering why there's a target in my version. Well, this clock actually uses an alternative energy source: snowballs! Unlike the Clock Tower, throwing snowballs at the target actually does something. It can force the current time to display instantly in the rare event the clock drifts, lags, or skips. Although, 99% of the time you don't actually need to use it.
Here's some other features this clock has:
- It's super lightweight and loads instantly once the sidebar is ready to load! The CSS and JavaScript weighs at approximately 0.0028 megabytes.
- It's positioned right under the Discord widget on the sidebar. On most screens you won't even need to scroll down to check the time.
- It is not affected by daylight savings as PST is distinguished from PT (Pacific Time) and PDT (Pacific Daylight Time).
Requirements[]
- The clock depends on your system clock. If it's inaccurate due to some reason, the PST clock will also be inaccurate.
- "Enable Personal JavaScript" will need to be ticked in your wiki preferences.
- A desktop browser (not supported on mobile due to no sidebar).
Browser support[]
Tested and works correctly on:
- Google Chrome
- Opera
- Internet Explorer 11
- Mozilla Firefox
- Microsoft Edge
Version history[]
- 2.0 - Higher quality images for the penguin and target now get loaded if zoomed in
- 1.0 - Initial release
How to install[]
1. Go to your common.css page, click the EDIT or CREATE button, paste the following code, then publish:
#pst-h{font:700 14px Burbank Small,Arial,sans-serif;transform:scaleX(.9)}.rad-5{border-radius:5px}.pad-10{padding:10px}.text-ac{text-align:center}#pst-c{background:#f2f7fc;background:linear-gradient(#f2f7fc,#bedeff);border:3px solid #bbdcff;border-radius:12px;color:#0f5da1;position:relative;width:170px}#day,#time-w{background:#0078c4;box-shadow:inset 4px 4px 6px #005c91;color:#fff}#time-w{display:inline-block;font:19px Courier New,monospace;line-height:16px;width:150px}#day{font:14px Arial,sans-serif}#pst-c-w{margin:50px 0 0}#pst-c:before{background:url(https://i.imgur.com/yE4wKpM.png);top:-83px;right:5px;content:" ";position:absolute;width:87px;height:80px}#pwr-cb{background:url(https://i.imgur.com/2U7cNOd.png) no-repeat;border:0;border-radius:50px;box-sizing:border-box;cursor:pointer;float:right;width:25px;height:27px}#pwr-cb:hover{background-position:0 -27px}#pwr-cb:focus{box-shadow:0 0 0 2px #fff;outline:0}#pwr-cb::-moz-focus-inner{border:0}#pwr-cb:active{background-position:0 -54px;transform:skew(-8deg)}@media (min-resolution:99dpi){#pst-c:before{background:url(https://i.imgur.com/2hPEq63.png);background-size:cover}#pwr-cb{background:url(https://i.imgur.com/d8FHyS1.png) no-repeat;background-size:25px 81px}}
2. Go to your common.js page, click the EDIT or CREATE button, paste the following code, then publish:
mw.loader.using('mediawiki.api', function() {
var pstClockE=document.createElement("div");pstClockE.id="pst-c-w";pstClockE.innerHTML="<section class='rail-module'><h2>PST Clock</h2><div class='rad-5 pad-10'id='pst-c'><div class='text-ac' id='pst-h'>Penguin Standard Time</div><br><div><span id='time-w' class='rad-5 pad-10 text-ac'><span id='time'>NOW</span> <span id='am_pm'></span></span></div><br><div><span id='day' class='rad-5 pad-10'>TODAY</span><button aria-label='Fix date/time accuracy'id='pwr-cb' title='Fix date/time accuracy'></button></div></div></section>";
document.getElementById("WikiaRail").appendChild(pstClockE);var pwrCB=document.getElementById("pwr-cb");function getHr(a){a-=8;return 0<a&&13>a?a:13<=a?a-12:a+12}function getMin(a){return 10<=a?a:"0"+a}function g1S71(a){return 10<=a?a:"0"+a}function udTime(){var a=document.getElementById("time"),b=new Date;a.innerText=getHr(b.getUTCHours())+":"+getMin(b.getUTCMinutes())+":"+g1S71(b.getUTCSeconds())}
function udRest(){var days=["Sun","Mon","Tues","Wednes","Thurs","Fri","Satur"];var day=document.getElementById("day"),am_pm=document.getElementById("am_pm"),b=new Date;var timeout;b.setUTCHours(b.getUTCHours()-8);day.innerText=days[b.getUTCDay()]+"day";if(b.getUTCHours()<12)am_pm.innerText="AM";else am_pm.innerText="PM";if(b.getUTCHours()===23||b.getUTCHours()===11)timeout=setTimeout(udRest,1E3);else{clearTimeout(timeout);timeout=setTimeout(udRest,42E4)}}udTime();setInterval(udTime,1E3);udRest();
try{pwrCB.addEventListener("click",udTime,!1);pwrCB.addEventListener("click",udRest,!1)}catch(e){pwrCB.parentNode.removeChild(pwrCB)}
});
3. Navigate to the "My Preferences" page.
Select the "Under the Hood" tab and tick "Enable personal JavaScript".
4. Your clock should now be ready and positioned under the Discord sidebar widget. If it doesn't show up or doesn't appear correctly, you may have to hard refresh a few times (Ctrl + F5 on Windows).
Enjoy!