Is It Christmas?


Is it Christmas? NO “); legend.style.opacity = 1; legendTimeout = setTimeout(function() { legend.style.opacity = 0; }, 20000) }; } div.appendChild(flag); // without this, div adds height padding, weird div.style.height = “20px”; div.style.marginTop = “-10px”; // half of constant height 20 div.style.marginLeft = “-” + (flagWidth(country) / 2) + “px”; return div; }; // there is sadly no international standard on flag aspect ratio var flagWidth = function(country) { return ((Christmas.countries[country] && Christmas.countries[country].width) || 40); } var mouseMove = function(event) { event = event || window.event; // only show it on first movement if (me.flag._new && visible && event.clientX && event.clientY) { document.body.appendChild(me.flag); document.body.style.cursor = “none”; document.getElementById(“answer”).style.cursor = “none”; me.flag._new = false; } moveFlag(me.flag, event.clientX + window.pageXOffset, event.clientY + window.pageYOffset ); // is quick-rebroadcast, no server processing emit(‘motion’, { x: event.clientX + window.pageXOffset, y: event.clientY + window.pageYOffset, id: me.id, c: me.country // TODO: have server re-look-up country }); }; on(‘motion’, function(other) { // toss junk motion if (!(other.x && other.y)) return; if (!others[other.id] || !others[other.id].flag) showOther(other); moveFlag(others[other.id].flag, other.x, other.y); }); var moveFlag = function(flag, x, y) { // check x and y to prevent motion on 0,0 if (x && y) { flag.style.left = “” + x + “px”; flag.style.top = “” + y + “px”; } }; var mouseWheel = function(event) { event = event || window.event; // how many clicks, and in which direction var direction; if (event.wheelDelta) direction = (event.wheelDelta > 0) ? 1 : -1; else if (event.detail && (event.detail != 0)) direction = (event.detail > 0) ? -1 : 1; var increment = 15; if (direction > 0) me.angle += increment; else me.angle -= increment; setRotate(me.flag, me.angle); emit(‘scroll’, {id: me.id, angle: me.angle}); /* This is generating a warning in the Chrome console. It appears harmless, though it is making the screen scroll where it’s not intended to. This is not very cross-browser yet (Chrome and IE only?) so I’m content to just let the warning sit. More info: https://developers.google.com/web/updates/2017/01/scrolling-intervention */ if (event.preventDefault) event.preventDefault(); return false; } on(‘scroll’, function(other) { if (!others[other.id]) return; others[other.id].angle = other.angle; setRotate(others[other.id].flag, other.angle); }); // Let users use left and right arrow keys to rotate the flag. // Especially helpful to users with no scroll wheel! (Who has // those things now anyway?) // // Thanks to Brittany Rose for the idea! var keyDown = function(event) { event = event || window.event; var direction; if (event.keyCode == ’37’) // left direction = -1; else if (event.keyCode == ’39’) // right direction = 1; else return true; log.debug(“key press: ” + event.keyCode); var increment = 15; if (direction > 0) me.angle += increment; else me.angle -= increment; setRotate(me.flag, me.angle); emit(‘scroll’, {id: me.id, angle: me.angle}); if (event.preventDefault) event.preventDefault(); return false; } var mouseClick = function(event) { event = event || window.event; var button = clickMap[event.button]; var x = event.clientX + window.pageXOffset; var y = event.clientY + window.pageYOffset; clickbacks[button](me, x, y); // is quick-rebroadcast, no server processing emit(‘click’, {x: x, y: y, id: me.id, button: button}); }; on(‘click’, function(other) { clickbacks[other.button](others[other.id], other.x, other.y); }); clickbacks.left = function(person, x, y) { if (!visible) return; if (!person) return; var elem = document.createElement(“div”); var width = flagWidth(person.country) var height = 20; // constant flag height var xOff = Math.floor(width / 2); var yOff = Math.floor(height / 2); if (canNotify && me.notify && !(Notification.permission == “granted”)) notifications.permission(); elem.className = “click”; elem.style.width = “” + width + “px”; elem.style.height = “” + height + “px”; elem.style.left = “” + (x – xOff) + “px”; elem.style.top = “” + (y – yOff) + “px”; setRotate(elem, person.angle); document.body.appendChild(elem); setTimeout(function() { elem.style.width = “” + (width*2) + “px”; elem.style.height = “” + (height*2) + “px”; elem.style.borderColor = me.clickBorder; elem.style.left = “” + (x – width) + “px”; elem.style.top = “” + (y – height) + “px”; setTimeout(function() { elem.parentElement.removeChild(elem); }, 500); }, 10); }; // create a translucent ghost flag clickbacks.right = function(person, x, y) { if (!visible) return; if (!person) return; // enforce ghost cap if (person.ghosts >= user.live.ghost_max) return; var ghost = flagFor(person.country, “ghost”); setRotate(ghost, person.angle); document.body.appendChild(ghost); moveFlag(ghost, x, y); person.ghosts += 1; // exists for 1s, fades for 1s setTimeout(function() { ghost.parentElement.removeChild(ghost); if (person) person.ghosts -= 1; }, user.live.ghost_duration); }; clickbacks.middle = function(person, x, y) { person.angle = 0; setRotate(person.flag, 0); }; /**** Chat mechanics ****/ // welcome user once, then after every 10 chat messages received. // turn off when the user first uses say(). var said = false; var chatsSince = 0; var myName = function() { var hello = “%cYour name is “; hello += “%c” + me.name; hello += “%c. Hello, “; hello += “%c” + me.name; hello += “%c.”; log.system(hello, styles.system, styles.chat_my_name, styles.system, styles.chat_my_name, styles.system); var hasName = false; if (window.localStorage) { var name = window.localStorage.getItem(“me.name”, me.name); if (name) hasName = true; } if (!hasName) spam(); } var spam = function() { var msg = “%cPlease%c don’t spam and ruin the chat! 🙂 %c %c %c %c %c “; log.system(msg, styles.please, styles.spam, styles.emoji(“smiley”), styles.spam, styles.emoji(“heart”), styles.spam, styles.emoji(“christmas_tree”)); } // I’ll have to figure out a better syntax for var welcomeUser = function() { if (user.live.chat != “true”) return; log.system(“%cCommands:”, styles.help); log.system(” “); // var help1a = “%csay%c – Say a message to other people.” var help1 = “%csay(“message”)”; help1 += “%c – Say a %cmessage %cto other people. (Include the quotes and parentheses!)”; // var help2a = “%crename%c – Change to a new name.”; var help2 = “%crename(“Name”)”; help2 += “%c – Change to a new %cName%c. (Include the quotes and parentheses!)”; var helpX = “%cnotifications()%c – Enable desktop notifications for when you are mentioned.” var help3 = “%chelp()%c – See this message again.”; var help4 = “%cadvanced()%c – See menu of advanced options.”; var help5 = “%crecent()%c – See recent chat history.”; // log.system(help1a, styles.help_bold, styles.help); // log.system(help2a, styles.help_bold, styles.help); log.system(help1, styles.help_bold, styles.help, styles.help_bold, styles.help); log.system(help2, styles.help_bold, styles.help, styles.help_bold, styles.help); log.system(helpX, styles.help_bold, styles.help); log.system(help3, styles.help_bold, styles.help); log.system(help4, styles.help_bold, styles.help); log.system(help5, styles.help_bold, styles.help); // log.system(” “); // return ” “; // when used via ‘help’ }; var showAdvanced = function() { if (user.live.chat != “true”) return; var advanced1 = “%ctraffic()%c – Turn on/off messages whenever people enter/leave your room. (Currently “; advanced1 += “%c” + (user.log.join ? “on” : “off”) + “%c.)”; // var advanced2 = “%cemoji%c – How to use emoji in chat.”; var advanced3 = “%croom()%c – Stats about the room you’re in.” var advanced4 = “%cwtf()%c – How is this happening” var keys = “%cYou can use arrow keys to rotate the flag.” var api = “%cWant to make a bot? Check out the JavaScript API: https://github.com/isitchristmas/web/wiki” var credit = “%cMade by https://twitter.com/konklone, full credits at https://isitchristmas.com/humans.txt”; log.system(“%cAdvanced commands:”, styles.help); log.system(” “); log.system(advanced1, styles.help_bold, styles.help, styles.help_bold, styles.help); // log.system(advanced2, styles.help_bold, styles.help); log.system(advanced3, styles.help_bold, styles.help); log.system(advanced4, styles.help_bold, styles.help); log.system(” “); log.system(keys, styles.help); log.system(api, styles.help); log.system(” “); log.system(credit, styles.system); spam(); // return ” “; }; var showEmoji = function() { log.system(“%cYou can put :’s around some words to create emoji.”, styles.system) log.system(” “); log.system(“%cFor example, %csay(%c”I am :worried: you will :facepunch: me”%c)”, styles.system, styles.info, styles.info_bold, styles.info); log.system(“%cwill say: %cI am %c %c you will %c %c me”, styles.system, styles.info_bold, styles.emoji(“worried”), styles.info_bold, styles.emoji(“facepunch”), styles.info_bold); log.system(” “); log.system(“%cfull emoji reference (and my data source): https://www.webfx.com/tools/emoji-cheat-sheet/”, styles.system) // return ” “; }; var showRoom = function() { // re-key others by country var countries = {}; for (var id in others) { var country = others[id].country; if (!countries[country]) countries[country] = []; countries[country].push(id); } // sort by size var stats = Object.keys(countries); stats.sort(function(a, b) { return countries[a].length < countries[b].length }); log.system("%cYou're in a randomly chosen 'room' with the other flags. Stats about your room:", styles.system) log.system(" "); stats.forEach(function(country) { var name, num; if (Christmas.countries[country]) { name = Christmas.countries[country].name; num = countries[country].length; } else { name = country; num = 1; } var people = num == 1 ? "person" : "people"; log.system("%c[" + country + "]%c[" + name + "] " + num + " " + people, styles.debug, styles.info); }); log.system(" "); log.system("%c(Not all connected people are visible.)", styles.system) log.system("%c(Chat is universal and goes through every room.)", styles.system); // return " "; }; var showWtf = function() { log.system(" "); log.system("%cWhat basically is happening: https://konklone.com/post/isitchristmas-dot-com-2013-more-and-better", styles.system); log.system("%cWhat precisely is happening: https://github.com/isitchristmas", styles.system); log.system("%cHow this console works: https://konklone.com/post/how-to-hack-the-developer-console-to-be-needlessly-interactive", styles.system); log.system(" "); log.system("%cSend any fun screenshots/screencasts to %chttps://twitter.com/konklone%c or %ceric@konklone.com%c.", styles.system, styles.system_bold, styles.system, styles.system_bold, styles.system); // return " "; } var say = function(message) { if (!message) return; if (user.live.chat != "true") return; message = message.toString(); said = true; emit('chat', {message: message}); return blank(); }; // // run without parens to use a popup dialog // say.toString = function() { // say(prompt("What do you want to say?")); // return " "; // }; // convenience - handle all caps typos, and s var s = S = Say = sAy = saY = SAy = SaY = sAY = SAY = say; var rename = function(name) { if (!name) return; emit('rename', {name: name}) return blank(); }; var notifications = function(to) { if (!canNotify) { log.system("Unfortunately, your browser doesn't support HTML5 notifications."); return; } if (to === undefined) me.notify = !me.notify; else me.notify = to; if (window.localStorage) window.localStorage.setItem("me.notify", me.notify); if (me.notify) { if (Notification.permission == "granted") log.system("%cNotifications have been %cenabled%c.", styles.system, styles.system_bold, styles.system); else log.system("%cNotifications have been %cenabled%c, but you first must %cclick your flag above%c, to prompt your browser to ask permission.", styles.system, styles.system_bold, styles.system, styles.system_bold, styles.system); } else log.system("%cNotifications have been %cdisabled.", styles.system, styles.system_bold); }; // notifications.toString = function() { // notifications(); // return " "; // }; notifications.permission = function() { Notification.requestPermission(function(permission) { if (permission == "granted") { // only useful in Chrome, FF sets this automatically Notification.permission = "granted"; notifications(true); } else if (permission == "denied") { log.system("You've denied permission for notifications. To change this, you'll have to go into your browser's settings."); notifications(false); } // other option: 'default', unhandled }); }; // run without parens to use a popup dialog // rename.toString = function() { // rename(prompt("Change your name to:")); // return " "; // }; on('rename', function(data) { me.name = data.name; if (window.localStorage) window.localStorage.setItem("me.name", me.name); myName(); }); var notify = function(user, message) { if (!canNotify) return; if (Notification.permission == "granted") new Notification(user, {body: message, icon: "https://isitchristmas.com/favicon.ico"}); else log.system('Please enable notifications by clicking your flag above.'); }; // recent chat messages on('recent', function(data) { log.system("Recent chat history:"); for (var i=0; i= 10) { log.system(" "); welcomeUser(); myName(); chatsSince = 0; } } displayChat(data); }); var displayChat = function(data, disable_notify) { // hack some extra recognized symbols in there var symbols = { "<3": ":heart:", ":\)": ":smiley_cat:", "o_o": ":cat:", ";\)": ":wink:", ":\*": ":kissing_closed_eyes:", "!\?": ":interrobang:", "\^_\^": ":blush:", " 0) data.message = data.message.replace(Emoji.regexp, "%c %c"); } message += "%c " + data.message; log.chat.apply(log, [ message, styles.flag(data.country), nameStyle, styles.chat_message ].concat(emojis)); }; /**** Admin powers ***/ on('config', function(data) { log.info("= live config change: " + data.key + " [" + user.live[data.key] + " -> ” + data.value + “]”); user.live[data.key] = data.value; }); on(‘command’, function(data) { log.info(“= command: ” + data.command + ” (” + data.arguments.join(“,”) + “)”); (commands[data.command] || noop).apply(null, data.arguments); }) command(‘blast’, function(message) { log.system(“= Server message: ” + message); }) command(‘reconnect’, function() { log.system(“= Server asked us to reconnect, closing connection”); socket.close(); }); command(‘refresh’, function() { log.system(“= Server asked us to refresh, whooaaaaa”); window.location = window.location; }) /**** rate limiting utilities **/ // basic rate-limiter for a static value function ratelimit(fn, interval) { var last = (new Date()).getTime(); return (function() { var now = (new Date()).getTime(); if ((now – last) > interval) { last = now; return fn.apply(null, arguments); } }); } // special version of ratelimit that looks to live-changeable value function ratelimitLive(fn, live) { var last = (new Date()).getTime(); return (function() { var now = (new Date()).getTime(); if ((now – last) > user.live[live]) { last = now; return fn.apply(null, arguments); } }); } /** christmas midnight effect **/ // live flip when it’s Xmas, and when it’s not again var flagRule = addCSSRule(“.flag”); var clickRule = addCSSRule(“div.click”); var legendRule = addCSSRule(“div#legend”); var linksRule = addCSSRule(“div#links”); function flagFade(centerTime) { // fade out, then in setTimeout(function() { flagRule.style.opacity = 0; legendRule.style.display = “none”; linksRule.style.display = “none”; clickRule.style.display = “none”; setTimeout(function() { flagRule.style.opacity = 1; legendRule.style.display = “block”; linksRule.style.display = “block”; clickRule.style.display = “block”; }, 5000); // 2 seconds after center }, (centerTime – Date.now()) – 3000); // 3 seconds before center (fade is 1s) } function setTimers() { // the init timer to fade in the links, used at christmas time setTimeout(function() { document.getElementById(“links”).style.opacity = 1; }, 2000); links.onmouseover = function() { if (me && me.flag) me.flag.style.visibility = “hidden”; }; links.onmouseout = function() { if (me && me.flag) me.flag.style.visibility = “visible”; }; var link = document.getElementById(“console”); if (consoles[BrowserDetect.browser]) { link.style.display = “inline-block”; link.setAttribute(“href”, consoles[BrowserDetect.browser]); } var nextXmas = Christmas.thisYear(); // var nextXmas = new Date(Date.now() + (5 * 1000)); // 5 seconds from now // var nextXmas = new Date(Date.now()); // pretend we showed up a few milliseconds before nextXmas = nextXmas.getTime(); var afterXmas = nextXmas + (24 * 60 * 60 * 1000); // 1 day later // var afterXmas = nextXmas + (5 * 1000); // 10 seconds later // console.log(“Christmas set for: ” + new Date(nextXmas)); // console.log(“Christmas ends: ” + new Date(afterXmas)); if (checkedAt < nextXmas) { flagFade(nextXmas); christmasTimer = setTimeout(function() { log.system("%c" + Christmas.yes(country), styles.answer); updateChristmas(true); }, (nextXmas - Date.now())); } if (checkedAt 0) console.log.apply(console, [message].concat(args)); // otherwise, assume plain text bare message else console.log(message); } }; // generate little log.debug, log.info functions, etc. var severities = ["debug", "info", "join", "system", "life", "chat", "public"]; log.convenience = function(severity) { return function(message) { // break here too, to avoid too much computation if not needed if (!user.log[severity]) return; var args = Array.prototype.slice.call(arguments, [1]); // if no style given, default to any per-severity style if (args.length == 0 && (styles[severity])) { message = "%c" + message; args = [styles[severity]]; } log.apply(window, [severity, message].concat(args)); } } severities.forEach(function(severity) { log[severity] = log.convenience(severity); }); var colorModes = { // light mode (default) light: { system_friendly: "#336699", system_background: "#999999", plain: "#444444", life: "#ff0000", chat_name: "#006600", help: "#630053", flag_border: "#d6d6d6", answer: "black" }, // dark mode (user opt-in, OS-wide or browser-wide) dark: { system_friendly: "#4499cc", system_background: "#999999", plain: "#bbbbbb", life: "#ff3333", chat_name: "#00cc00", help: "#e35093", flag_border: "#363636", answer: "white" } }; var colors = colorModes[me.darkMode ? "dark" : "light"]; var styles = { debug: "color: " + colors.system_background, join: "color: " + colors.system_background, info: "color: " + colors.plain, info_bold: "color: " + colors.plain + "; font-weight: bold", system: "color: " + colors.system_friendly, system_bold: "color: " + colors.system_friendly + "; font-weight: bold", life: "color: " + colors.life, chat_country: "color: " + colors.system_background, chat_name: "color: " + colors.chat_name, chat_my_name: "color: " + colors.chat_name + "; font-weight: bold", chat_message: "color: " + colors.plain, spam: "color: " + colors.system_friendly, please: "color: " + colors.system_friendly + "; font-weight: bold", help: "color: " + colors.help, help_bold: "color: " + colors.help + "; font-weight: bold", // how is this possible flag: function(country) { return "background-image: url("https://isitchristmas.com/countries/" + country + ".png"); background-size: 100% 13px; border: 1px solid " + colors.flag_border; }, emoji: function(emoji) { return "background-image: url("https://isitchristmas.com/emojis/" + emoji + ".png"); background-size: 100%;"; }, answer: "color: " + colors.answer + "; font-weight: bold; font-size: 120pt; text-transform: uppercase; font-family: Arial, sans-serif;" } /**** misc and browser-specific fixes **/ var help = welcomeUser; var traffic = function() { user.log.join = !user.log.join; log.system("%cTurned traffic messages %c" + (user.log.join ? "on" : "off") + "%c.", styles.system, styles.system_bold, styles.system); // return " "; } var advanced = showAdvanced; var emoji = showEmoji; var room = showRoom; var wtf = showWtf; var recent = function() { emit('recent'); // return " "; }; // candy var candy = function() {window.location = "https://candybox2.github.io";} // convenience for functions so they don't say 'undefined' in the console var blank = function() { // IE doesn't like this method. if (window._ie) return undefined; var nothing = function() {}; nothing.toString = function() {return " "}; return nothing; } // IE fix: make console.log be okay if (!window.console) window.console = {}; if (!window.console.log) window.console.log = function() {}; // prevent click-drags from "grabbing" image document.body.onmousedown = function(event) { event = event || window.event; if (event.preventDefault) event.preventDefault(); else event.returnValue = false; }; /**** GO ****/ // setTimers(); // connect(url); ]]>

Source

We will be happy to hear your thoughts

Leave a reply

Best Reviews and Recommendations
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0
Shopping cart