This post is dedicated to testing out the newly announced Stack Snippets feature. Feel free to answer with your own Stack Snippets, and have some fun!
108 Answers
Doh!
People can do this... and I can't even center a <div>
#homer *{position:absolute;box-sizing:content-box;-moz-box-sizing:content-box}#homer{position:relative;width:94px;height:133px;margin:0 auto}#homer .head *{border:1px solid #110b00}#homer .head .no-border{border:none}#homer .head .body{background:#fbd800}#homer .head .hair1{top:14px;left:0;height:13px;width:22px;border-radius:22px 22px 0 0;-moz-border-radius:22px 22px 0 0;-webkit-border-radius:22px 22px 0 0;background:0 0;-webkit-transform:rotate(-44deg);-ms-transform:rotate(-44deg);transform:rotate(-44deg);border-bottom:none}#homer .head .hair2{top:8px;left:9px;height:16px;width:26px;border-radius:32px 32px 0 0;-moz-border-radius:32px 32px 0 0;-webkit-border-radius:32px 32px 0 0;background:0 0;-webkit-transform:rotate(-27deg);-ms-transform:rotate(-27deg);transform:rotate(-27deg);border-bottom:none}#homer .head .head-top{top:15px;left:2px;width:65px;height:62px;border-bottom:none;-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg);-moz-border-radius:43% 44% 0 0;-webkit-border-radius:43% 44% 0 0;border-radius:43% 44% 0 0;-webkit-box-shadow:inset 8px 12px 0 -12px rgba(247,254,140,1),inset 13px 3px 0 -11px rgba(247,254,140,1),inset -2px 0 0 0 rgba(229,158,4,1);-moz-box-shadow:inset 8px 12px 0 -12px rgba(247,254,140,1),inset 13px 3px 0 -11px rgba(247,254,140,1),inset -2px 0 0 0 rgba(229,158,4,1);box-shadow:inset 8px 12px 0 -12px rgba(247,254,140,1),inset 13px 3px 0 -11px rgba(247,254,140,1),inset -2px 0 0 0 rgba(229,158,4,1)}#homer .head .head-main{top:40px;left:17px;width:48px;height:62px;-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}#homer .head .m1,#homer .head .m2,#homer .head .m3,#homer .head .m4{width:1px;height:14px;background:#110b00}#homer .head .m1{top:77px;left:9px;-webkit-transform:rotate(-13deg);-ms-transform:rotate(-13deg);transform:rotate(-13deg)}#homer .head .m2{top:76px;left:12px;height:12px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}#homer .head .m3{top:71px;left:16px;height:15px;-webkit-transform:rotate(1deg);-ms-transform:rotate(1deg);transform:rotate(1deg)}#homer .head .m4{top:70px;left:21px;-webkit-transform:rotate(-39deg);-ms-transform:rotate(-39deg);transform:rotate(-39deg)}#homer .head .ear{top:90px;left:14px;width:11px;height:13px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%}#homer .head .ear .inner1{top:3px;left:2px;width:7px;height:5px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;border-top:1px solid #110b00;-webkit-transform:rotate(-21deg);-ms-transform:rotate(-21deg);transform:rotate(-21deg)}#homer .head .ear .inner2{top:3px;left:4px;width:7px;height:5px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;border-top:1px solid #110b00;-webkit-transform:rotate(-109deg);-ms-transform:rotate(-109deg);transform:rotate(-109deg)}#homer .head .ear .clip{top:1px;left:8px;width:5px;height:10px}#homer .head .right-eye{top:48px;left:48px;width:31px;height:31px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background:#fff;box-shadow:-2px -1px 0 0 rgba(247,254,140,1);overflow:hidden}#homer .head .right-eye .right-eye-pupil{top:11px;left:20px;width:4px;height:4px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background:#110b00}#homer .head .left-eye{top:51px;left:23px;width:31px;height:31px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background:#fff;box-shadow:-1px -1px 0 0 rgba(247,254,140,1);overflow:hidden}#homer .head .left-eye .left-eye-pupil{top:13px;left:11px;width:4px;height:4px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background:#110b00}#homer .head .left-eye .eyelid-top{top:-21px;left:0;width:30px;height:20px;border-bottom:1px solid #110b00;border-radius:50% 50% 0 0;-webkit-animation-name:homerlefteyelidtop;-webkit-animation-duration:10s;-webkit-animation-timing-function:linear;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-name:homerlefteyelidtop;animation-duration:10s;animation-timing-function:linear;animation-delay:1s;animation-iteration-count:infinite;animation-play-state:running}#homer .head .left-eye .eyelid-bottom{bottom:-11px;left:0;width:30px;height:10px;border-top:1px solid #110b00;border-radius:0 0 50% 50%;-webkit-animation-name:homerlefteyelidbottom;-webkit-animation-duration:10s;-webkit-animation-timing-function:linear;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-name:homerlefteyelidbottom;animation-duration:10s;animation-timing-function:linear;animation-delay:1s;animation-iteration-count:infinite;animation-play-state:running}@-webkit-keyframes homerlefteyelidtop{0%{top:-21px}2%{top:0}100%,4%{top:-21px}}@keyframes homerlefteyelidtop{0%{top:-21px}2%{top:0}100%,4%{top:-21px}}@-webkit-keyframes homerlefteyelidbottom{0%{bottom:-11px}2%{bottom:0}100%,4%{bottom:-11px}}@keyframes homerlefteyelidbottom{0%{bottom:-11px}2%{bottom:0}100%,4%{bottom:-11px}}#homer .head .right-eye .eyelid-top{top:-18px;left:0;width:30px;height:17px;border-bottom:1px solid #110b00;border-radius:50% 50% 0 0;-webkit-animation-name:homerrighteyelidtop;-webkit-animation-duration:10s;-webkit-animation-timing-function:linear;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-name:homerrighteyelidtop;animation-duration:10s;animation-timing-function:linear;animation-delay:1s;animation-iteration-count:infinite;animation-play-state:running}#homer .head .right-eye .eyelid-bottom{bottom:-11px;left:0;width:30px;height:10px;border-top:1px solid #110b00;border-radius:0 0 50% 50%;-webkit-animation-name:homerrighteyelidbottom;-webkit-animation-duration:10s;-webkit-animation-timing-function:linear;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-name:homerrighteyelidbottom;animation-duration:10s;animation-timing-function:linear;animation-delay:1s;animation-iteration-count:infinite;animation-play-state:running}@-webkit-keyframes homerrighteyelidtop{0%{top:-18px}2%{top:0}100%,4%{top:-18px}}@keyframes homerrighteyelidtop{0%{top:-18px}2%{top:0}100%,4%{top:-18px}}@-webkit-keyframes homerrighteyelidbottom{0%{bottom:-11px}2%{bottom:0}100%,4%{bottom:-11px}}@keyframes homerrighteyelidbottom{0%{bottom:-11px}2%{bottom:0}100%,4%{bottom:-11px}}#homer .head .nose{top:71px;left:50px;width:18px;height:12px;border-left:none;border-right:none;-webkit-transform:rotate(-13deg);-ms-transform:rotate(-13deg);transform:rotate(-13deg)}#homer .head .nose-tip{top:69px;left:60px;width:14px;height:12px;border-left:none;-moz-border-radius:0 50% 50% 0;-webkit-border-radius:0 50% 50% 0;border-radius:0 50% 50% 0;-webkit-transform:rotate(-13deg);-ms-transform:rotate(-13deg);transform:rotate(-13deg)}#homer .head .neck1{top:85px;left:16px;width:6px;height:31px;background:0 0;border-right:1px solid #110b00;border-radius:50% 50% 25%;-webkit-transform:rotate(-14deg);-ms-transform:rotate(-14deg);transform:rotate(-14deg);-webkit-box-shadow:2px 0 0 0 rgba(247,254,140,1),5px 0 0 0 rgba(251,216,0,1);-moz-box-shadow:2px 0 0 0 rgba(247,254,140,1),5px 0 0 0 rgba(251,216,0,1);box-shadow:2px 0 0 0 rgba(247,254,140,1),5px 0 0 0 rgba(251,216,0,1)}#homer .head .neck2{top:114px;left:25px;width:45px;height:19px;border-top:none;border-bottom:none;-webkit-box-shadow:inset 2px 0 0 0 rgba(247,254,140,1);-moz-box-shadow:inset 2px 0 0 0 rgba(247,254,140,1);box-shadow:inset 2px 0 0 0 rgba(247,254,140,1)}#homer .head .mouth1{top:86px;left:28px;width:48px;height:44px;background:#cfae67;-moz-border-radius:46% 52% 44% 50%;-webkit-border-radius:46% 52% 44% 50%;border-radius:46% 52% 44% 50%;-webkit-box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1);-moz-box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1);box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1)}#homer .head .mouth2{top:101px;left:43px;width:48px;height:12px;background:#cfae67;-moz-border-radius:46% 52% 44% 50%;-webkit-border-radius:46% 52% 44% 50%;border-radius:46% 52% 44% 50%;-webkit-transform:rotate(-15deg);-ms-transform:rotate(-15deg);transform:rotate(-15deg);-webkit-box-shadow:inset -1px 0 0 0 rgba(152,110,36,1);-moz-box-shadow:inset -1px 0 0 0 rgba(152,110,36,1);box-shadow:inset -1px 0 0 0 rgba(152,110,36,1)}#homer .head .mouth3{top:102px;left:35px;width:48px;height:12px;background:0 0;-moz-border-radius:46% 52% 44% 50%;-webkit-border-radius:46% 52% 44% 50%;border-radius:46% 52% 44% 50%;border-bottom:1px solid #110b00;-webkit-transform:rotate(-4deg);-ms-transform:rotate(-4deg);transform:rotate(-4deg)}#homer .head .mouth4{top:110px;left:38px;width:7px;height:5px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;border-top:1px solid #110b00;-webkit-transform:rotate(-81deg);-ms-transform:rotate(-81deg);transform:rotate(-81deg)}#homer .head .mouth5{top:84px;left:64px;width:27px;height:13px;background:0 0;-moz-border-radius:46% 52% 44% 50%;-webkit-border-radius:46% 52% 44% 50%;border-radius:46% 52% 44% 50%;-webkit-transform:rotate(-131deg);-ms-transform:rotate(-131deg);transform:rotate(-131deg);border-top:none;-webkit-box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1);-moz-box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1);box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1)}#homer .head .mouth6{top:84px;left:46px;width:32px;height:31px;background:#cfae67;-webkit-transform:rotate(-18deg);-ms-transform:rotate(-18deg);transform:rotate(-18deg);-moz-border-radius:0 0 0 22px;-webkit-border-radius:0 0 0 22px;border-radius:0 0 0 22px}#homer .head .mouth7{top:104px;left:62px;width:17px;height:12px;background:#cfae67;-moz-border-radius:46% 52% 44% 50%;-webkit-border-radius:46% 52% 44% 50%;border-radius:46% 52% 44% 50%;border-left:none;border-bottom:none;-webkit-transform:rotate(6deg);-ms-transform:rotate(6deg);transform:rotate(6deg)}#homer .head .mouth8{top:79px;left:71px;width:15px;height:30px;background:#cfae67;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;-webkit-transform:rotate(-30deg);-ms-transform:rotate(-30deg);transform:rotate(-30deg)}
<div id="homer"><div class="head"><div class="hair1"></div><div class="hair2"></div><div class="body head-top"></div><div class="no-border body head-main"></div><div class="no-border m1"></div><div class="no-border m2"></div><div class="no-border m3"></div><div class="no-border m4"></div><div class="no-border neck1"></div><div class="body neck2"></div><div class="body ear"><div class="no-border inner1"></div><div class="no-border inner2"></div><div class="no-border body clip"></div></div><div class="mouth"><div class="mouth5"></div><div class="mouth2"></div><div class="mouth1"></div><div class="mouth7"></div><div class="no-border mouth3"></div><div class="no-border mouth4"></div><div class="no-border mouth6"></div><div class="no-border mouth8"></div></div><div class="right-eye"><div class="no-border right-eye-pupil"></div><div class="no-border body eyelid-top"></div><div class="no-border body eyelid-bottom"></div></div><div class="body nose"></div><div class="body nose-tip"></div><div class="left-eye"><div class="no-border left-eye-pupil"></div><div class="no-border body eyelid-top"></div><div class="no-border body eyelid-bottom"></div></div></div></div>
-
Love it, although probably easier to use illustrator and SVG Commented Sep 1, 2014 at 21:35
-
14I can't get over that 2x2 px square in the top left conrner Commented Sep 10, 2014 at 21:13
-
It needs
#homer > .head > .mouth{border:none}
or something like that.– OriolCommented Feb 8, 2015 at 0:18
Bouncing balls
var B0=null,B1=null,MAXV=3.0,TWOPI=2.0*Math.PI;
function Ball(b)
{
this.b=b;
this.vy=3.0 + MAXV*Math.sqrt(Math.random());
var temp=Math.random()*TWOPI;
this.vx=this.vy*Math.cos(temp);
this.vy*=Math.sin(temp);
this.x=this.y=null;
return this;
}
function anyColor()
{
var r=Math.floor(Math.random()*256.0);
var g=Math.floor(Math.random()*256.0);
var b=Math.floor(Math.random()*256.0);
return "rgb(" + r + "," + g + "," + b + ")";
}
function moveBalls()
{
var temp=B0.x + B0.vx;
if ( 10<temp && temp<140 ) B0.x=temp;
else {
B0.vx=(-B0.vx);
B0.b.style.backgroundColor=anyColor();
}
temp=B0.y + B0.vy;
if ( 10<temp && temp<140 ) B0.y=temp;
else {
B0.vy=(-B0.vy);
B0.b.style.backgroundColor=anyColor();
}
temp=B1.x + B1.vx;
if ( 10<temp && temp<140 ) B1.x=temp;
else {
B1.vx=(-B1.vx);
B1.b.style.backgroundColor=anyColor();
}
temp=B1.y + B1.vy;
if ( 10<temp && temp<140 ) B1.y=temp;
else {
B1.vy=(-B1.vy);
B1.b.style.backgroundColor=anyColor();
}
if ( Math.sqrt(Math.pow(B0.x - B1.x,2) + Math.pow(B0.y - B1.y,2))<=20 ) {
(temp=B0.vx),(B0.vx=B1.vx),(B1.vx=temp);
(temp=B0.vy),(B0.vy=B1.vy),(B1.vy=temp);
}
B0.b.style.left=Math.round(B0.x) - 10 + "px";
B0.b.style.top=Math.round(B0.y) - 10 + "px";
B1.b.style.left=Math.round(B1.x) - 10 + "px";
B1.b.style.top=Math.round(B1.y) -10 + "px";
setTimeout(moveBalls,46);
}
window.onload
=function ()
{
B0=document.getElementsByTagName("p");
B1=new Ball(B0[0]);
B0=new Ball(B0[1]);
B0.b.style.backgroundColor="#f00";
B0.x=25;
B0.b.style.left=B0.x + "px";
B0.y=75;
B0.b.style.top=B0.y + "px";
B1.b.style.backgroundColor="#00f";
B1.x=110;
B1.b.style.left=B1.x + "px";
B1.y=75;
B1.b.style.top=B1.y + "px";
moveBalls();
};
div, p
{
border:0;
margin:0;
padding:0;
}
div
{
position:relative;
width:150px;
height:150px;
margin:0 auto;
border:1px solid #000;
background-color:#ffe;
}
div p
{
position:absolute;
width:20px;
height:20px;
border-radius:10px;
}
<div><p></p><p></p></div>
var password = window.prompt("What is your password?");
//TODO: save password to my website
alert("Thanks!");
-
9
-
-
2@MartinCapodici by running
rm -rf /*
on your server to set up the hacker toolkit. Commented May 30, 2015 at 2:03 -
-
@MartinCapodici A
%0|%0
inside a batch file also works wonders.– AStopherCommented Sep 22, 2015 at 21:48 -
2Typed a fake password. My password is so elegant no one can crack it! Who would guess it is 1234.... uh... no it isn't... It is 4321... yeah...– Zoe - Save the data dump ModCommented Jul 17, 2017 at 14:37
-
1@Zoe The saddest part is how many people actually think like that...– NH.Commented Oct 3, 2018 at 19:56
2D Solar System Simulator
const G = 6.674e-11,
MAX_RND_VEL = 5,
MAX_RND_MASS = 5e12,
MIN_RND_MASS = 50,
MAX_RND_SIZE = 8,
PI = Math.PI,
TWOPI = Math.PI * 2,
FADE_RATE = 4,
CURSOR_LINE_COLOR = "cyan",
OBJECT_BORDER_COLOR = "white",
CANVAS_BACKGROUND = "black",
GRAVITY_FIELD_MARKER_COLOR = "rgb(150,200,150)",
GRAVITY_FIELD_MARKER_RADIUS = 0.5,
TRACK_GRADIENT_FADE_RATE = 0.015,
TIMESTEP = 0.5,
MAX_FIELD_DISTANCE = 900,
canvas = document.getElementById("canvas"),
chkShowFabric = document.getElementById("ShowFabric"),
chkTrackObjects = document.getElementById("chkTrack"),
ddlFabricGranularity = document.getElementById("FabricGranularity"),
ddlRestitution = document.getElementById("Restitution"),
ddlBorderBehavior = document.getElementById("BorderBehavior"),
ddlObjectSize = document.getElementById("ObjectSize"),
ddlObjectColor = document.getElementById("ObjectColor"),
chkHandleCollisions = document.getElementById("chkCollisions"),
btnNextStep = document.getElementById("NextStep"),
btnAutoStep = document.getElementById("AutoStep"),
txtDelay = document.getElementById("Delay");
const WIDTH = canvas.width,
HEIGHT = canvas.height,
DOUBLE_SIZE = MAX_RND_SIZE * 2,
SCALE = MAX_RND_SIZE / Math.pow(3 * MAX_RND_MASS / 4 / PI, 1/3),
ctx = canvas.getContext("2d");
let numObjects = 0,
cellSize = ddlFabricGranularity.value,
borderBehavior = ddlBorderBehavior.value,
objectSize = +(ddlObjectSize.value),
objectColor = ddlObjectColor.value,
showFabric = chkShowFabric.checked,
shouldHandleCollisions = chkHandleCollisions.checked,
trackObjects = chkTrackObjects.checked,
Cr = ddlRestitution.value, // coefficient of restitution
delay = txtDelay.value,
time = 0,
stellarObjects,
isRunning = false,
isPlanting = false,
plantX, plantY, mouseX, mouseY,
gField = [],
gHeight, gWidth;
let fadeMultiplier = cellSize / FADE_RATE;
ddlRestitution.addEventListener("change", changeCoefficientOfRestitution);
chkHandleCollisions.addEventListener("change", changeHandleCollisions);
chkTrackObjects.addEventListener("change",changeTrackObjects);
canvas.addEventListener("mousedown", touchDown);
canvas.addEventListener("mousemove", touchMove);
canvas.addEventListener("mouseup", touchUp);
canvas.addEventListener("mouseout", stopPlanting);
ddlBorderBehavior.addEventListener("change", changeBorderBehavior);
ddlObjectSize.addEventListener("change",changeObjectSize);
ddlObjectColor.addEventListener("change",changeObjectColor);
document.getElementById("Reset").addEventListener("click",reset);
document.getElementById("NextStep").addEventListener("click", step);
ddlFabricGranularity.addEventListener("change",changeFabricGranularity);
chkShowFabric.addEventListener("change",changeShowFabric);
btnAutoStep.addEventListener("click", toggleAutoStep);
txtDelay.addEventListener("change", changeDelay);
reset();
toggleAutoStep();
function changeCoefficientOfRestitution() {
Cr = ddlRestitution.value;
}
function changeHandleCollisions() {
shouldHandleCollisions = chkHandleCollisions.checked;
}
function changeTrackObjects(){
trackObjects = chkTrackObjects.checked;
}
function stopPlanting() {
isPlanting = false;
if (!isRunning) {
drawFieldAndObjects();
}
}
function changeBorderBehavior() {
borderBehavior = ddlBorderBehavior.value;
}
function changeObjectSize(){
objectSize = +(ddlObjectSize.value);
}
function changeObjectColor(){
objectColor = ddlObjectColor.value;
}
function changeFabricGranularity() {
cellSize = ddlFabricGranularity.value;
fadeMultiplier = cellSize / FADE_RATE;
reinitializeGravityField();
recalculateGravityField();
drawFieldAndObjects();
}
function changeShowFabric() {
showFabric = chkShowFabric.checked;
}
function toggleAutoStep() {
if (isRunning) {
clearTimeout(isRunning);
btnNextStep.disabled = false;
isRunning = null;
btnAutoStep.value = "Auto";
} else {
btnNextStep.disabled = true;
btnAutoStep.value = "Stop";
isRunning = setTimeout(loopStep, delay);
}
}
function changeDelay () {
delay = +(txtDelay.value);
}
function touchDown(event) {
if (event.which === 3 || event.button === 2) {
event.preventDefault();
return false;
} else {
isPlanting = true;
plantX = event.pageX - canvas.offsetLeft;
plantY = event.pageY - canvas.offsetTop;
mouseX = plantX;
mouseY = plantY;
}
event.preventDefault();
}
function touchMove(event) {
if (isPlanting) {
mouseX = event.pageX - canvas.offsetLeft;
mouseY = event.pageY - canvas.offsetTop;
if (!isRunning) {
drawFieldAndObjects();
}
drawCursorLine();
}
event.preventDefault();
}
function touchUp(event) {
if (event.which === 3 || event.button === 2) {
removeObjectAt(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
event.preventDefault();
return false;
} else {
if (isPlanting) {
let thing = getRandomStellarObject(),
upX = event.pageX - canvas.offsetLeft,
upY = event.pageY - canvas.offsetTop;
if (typeof plantX === "undefined") {
plantX = upX;
plantY = upY;
}
thing.x = upX;
thing.y = upY;
thing.velocity.x = MAX_RND_VEL * MAX_RND_VEL * (plantX - upX) / WIDTH;
thing.velocity.y = MAX_RND_VEL * MAX_RND_VEL * (plantY - upY) / HEIGHT;
stellarObjects.push(thing);
numObjects++;
isPlanting = false;
applyObjectGravityToFabric(upX, upY, thing.mass * G);
drawFieldAndObjects();
}
}
event.preventDefault();
}
function reset() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
reinitializeGravityField();
stellarObjects = [
getStellarObject( "orange", 1.2, WIDTH/2, HEIGHT/2, 0, 0.002),
getStellarObject( "magenta", .001, WIDTH*6.7/8, HEIGHT/2, 0, 2.4),
getStellarObject( "green", .07, WIDTH*1.8/5, HEIGHT/2, 0.00, -2.2),
getStellarObject( "red", .1, WIDTH*4/5, HEIGHT/2, 0.00, 1.5)
];
numObjects = stellarObjects.length;
step();
}
function loopStep() {
let startTime = +new Date,
delta;
step();
if (delay === 0 || (delta = +new Date - startTime) >= delay) {
isRunning = setTimeout(loopStep, 0);
} else {
isRunning = setTimeout(loopStep, delay - delta);
}
}
function step() {
if(!trackObjects){
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}else{
ctx.fillStyle = CANVAS_BACKGROUND;
ctx.globalAlpha = TRACK_GRADIENT_FADE_RATE;
ctx.fillRect(0,0,WIDTH,HEIGHT);
ctx.globalAlpha = 1;
}
if(showFabric){
resetGravityFieldInPlace();
moveObjects();
drawGravityField();
}else{
moveObjects();
}
drawObjects();
}
function removeObjectAt(x, y) {
for (let i = stellarObjects.length - 1; i >= 0; i--) {
let obj = stellarObjects[i];
if (getDistance(obj.x - x, obj.y - y) <= obj.size) {
stellarObjects.splice(i, 1);
}
}
let newLength = stellarObjects.length;
if (newLength != numObjects) {
numObjects = newLength;
ctx.clearRect(0, 0, WIDTH, HEIGHT);
if (showFabric) {
resetGravityFieldInPlace();
recalculateGravityField();
drawGravityField();
}
drawObjects();
}
}
function moveObjects() {
time += TIMESTEP;
if (shouldHandleCollisions) {
for (let i = 0; i < numObjects; i++) {
let o = stellarObjects[i];
let ov = o.velocity, oa = o.acc;
checkCollision(o, TIMESTEP*(ov.x + TIMESTEP*oa.x/2), TIMESTEP*(ov.y + TIMESTEP*oa.y/2), []);
}
}
for (let i = 0; i < numObjects; i++) {
let o = stellarObjects[i];
let ov = o.velocity, oa = o.acc, ooa = o.oldAcc;
let ovx = ov.x,ovy = ov.y, oax = oa.x, oay = oa.y;
o.x += TIMESTEP*(ovx + TIMESTEP * oa.x/2);
o.y += TIMESTEP*(ovy + TIMESTEP * oa.y/2);
ooa.x = oax, ooa.y = oay;
oa.x = 0, oa.y = 0;
let ox = o.x,
oy = o.y;
if (borderBehavior !== "Unbounded") {
if (borderBehavior === "Loop") {
if (ox > WIDTH) {
o.x = 0;
} else if (ox < 0) {
o.x = WIDTH;
}
if (oy > HEIGHT) {
o.y = 0;
} else if (oy < 0) {
o.y = HEIGHT;
}
} else if (borderBehavior === "Ricochet") {
if (ox > WIDTH || ox < 0) {
o.velocity.x = ovx * -1;
}
if (oy > HEIGHT || oy < 0) {
o.velocity.y = -1 * ovy;
}
} else if (borderBehavior === "HalfRicochet") {
if (ox > WIDTH || ox < 0) {
o.velocity.x = ovx * (-0.5);
if (ox > WIDTH) {
o.x = WIDTH;
} else if (ox < 0) {
o.x = 0;
}
}
if (oy > HEIGHT || oy < 0) {
o.velocity.y = (-0.5) * ovy;
if (oy > HEIGHT) {
o.y = HEIGHT;
} else if (oy < 0) {
o.y = 0;
}
}
} else if (borderBehavior === "Annihilate") {
if (ox > WIDTH || oy > HEIGHT || ox < 0 || oy < 0) {
removeObjectAt(ox, oy);
}
}
}
}
applyObjectsGravity();
for (let i = 0; i < numObjects; i++) {
let o = stellarObjects[i];
o.velocity.x += TIMESTEP * (o.acc.x + o.oldAcc.x) / 2;
o.velocity.y += TIMESTEP * (o.acc.y + o.oldAcc.y) / 2;
}
}
function checkCollision(obj, ovx, ovy, objectsToIgnore) {
for (let i = 0; i < numObjects; i++) {
let test = stellarObjects[i],
shortCircuit = false;
if (test === obj) {
continue;
}
for (let j = 0, len = objectsToIgnore.length; j < len; j++) {
if (test === objectsToIgnore[j]) {
shortCircuit = true;
break;
}
}
if (shortCircuit) {
continue;
}
let oa = obj.acc, ta = test.acc;
let ox = obj.x + TIMESTEP*(ovx + TIMESTEP * oa.x/2),
oy = obj.y + TIMESTEP*(ovy + TIMESTEP * oa.y/2),
tv = test.velocity;
let tvx = tv.x,
tvy = tv.y;
let tx = test.x + TIMESTEP*(tvx + TIMESTEP * ta.x/2),
ty = test.y + TIMESTEP*(tvy + TIMESTEP * ta.y/2);
let difx = tx - ox,
dify = ty - oy;
if (difx === 0 && dify === 0){
continue;
}
let aSize = obj.size,
bSize = test.size;
let cumulativeSize = aSize + bSize;
let distance = getDistance(difx, dify);
if (distance < cumulativeSize) {
handleCollision(obj, test, cumulativeSize, difx, dify, distance, ox, oy, tx, ty);
checkCollision(test, tvx, tvy, [obj].concat(objectsToIgnore)); // objectsToIgnore prevents a "Night at the Roxbury" collision loop // [obj].concat(objectsToIgnore)
checkCollision(obj, ovx, ovy, [test].concat(objectsToIgnore));
}
}
}
function handleCollision(first, second, cumulativeSize, difX, difY, distance, x1, y1, x2, y2) {
let mass1 = first.mass,
mass2 = second.mass;
let cumulativeMass = mass1 + mass2;
let v1x = first.velocity.x,
v1y = first.velocity.y,
v2x = second.velocity.x,
v2y = second.velocity.y;
let v1 = Math.sqrt(v1x * v1x + v1y * v1y),
v2 = Math.sqrt(v2x * v2x + v2y * v2y);
let collisionAngle = Math.atan2(difY, difX);
let dir1 = Math.atan2(v1y, v1x),
dir2 = Math.atan2(v2y, v2x);
let d1cA = dir1 - collisionAngle,
d2cA = dir2 - collisionAngle;
let newXv1 = v1 * Math.cos(d1cA),
newYv1 = v1 * Math.sin(d1cA),
newXv2 = v2 * Math.cos(d2cA),
newYv2 = v2 * Math.sin(d2cA);
let massVCalc = mass1 * newXv1 + mass2 * newXv2;
let finalXv1 = (massVCalc + mass2 * Cr * (newXv2 - newXv1)) / cumulativeMass,
finalXv2 = (massVCalc + mass1 * Cr * (newXv1 - newXv2)) / cumulativeMass,
finalYv1 = newYv1,
finalYv2 = newYv2;
let cosAngle = Math.cos(collisionAngle),
sinAngle = Math.sin(collisionAngle);
first.velocity = {
x: cosAngle * finalXv1 - sinAngle * finalYv1,
y: sinAngle * finalXv1 + cosAngle * finalYv1
};
second.velocity = {
x: cosAngle * finalXv2 - sinAngle * finalYv2,
y: sinAngle * finalXv2 + cosAngle * finalYv2
};
let dx = first.x - second.x,
dy = first.y - second.y;
if(dx === 0 && dy === 0){ // special case for shared centers of gravity, offsets objects in random directions before continuing
let xOffset = (Math.random()*1);
let yOffset = (1 - xOffset)*(Math.random()*2 > 1 ? -1 : 1 );
xOffset *= (Math.random()*2 > 1 ? -1 : 1 );
first.x += xOffset / mass1;
first.y += yOffset / mass1;
second.x -= xOffset / mass2;
second.y -= yOffset / mass2;
dx = first.x - second.x;
dy = first.y - second.y;
}
let d_squared = (dx * dx + dy * dy);
if (d_squared <= cumulativeSize*cumulativeSize) {
let d = Math.sqrt(d_squared);
let mtd_multiplier = ((first.size + second.size - d) / d);
let mtd_x = mtd_multiplier * dx;
let mtd_y = mtd_multiplier * dy;
let im1 = 1 / mass1,
im2 = 1 / mass2;
let cumIm = im1 + im2;
let imCalc1 = (im1 / (cumIm)),
imCalc2 = (im2 / (cumIm));
first.x += mtd_x * imCalc1;
first.y += mtd_y * imCalc1;
second.x -= mtd_x * imCalc2;
second.y -= mtd_y * imCalc2;
first.acc = {x:0,y:0};
first.oldAcc = {x:0,y:0};
second.acc = {x:0,y:0};
second.oldAcc = {x:0,y:0};
}
}
function applyObjectsGravity() {
for (let i = numObjects-1; i >= 0; i--) {
let o = stellarObjects[i];
let ox = o.x,
oy = o.y,
om = o.massEffect;
applyObjectGravityToObjects(o, ox, oy, om, i);
if (showFabric) {
applyObjectGravityToFabric(ox, oy, om);
}
}
}
function applyObjectGravityToObjects(stellarObject, x, y, massEffect, init) {
let objAcc = stellarObject.acc, objOldAcc = stellarObject.oldAcc;
for (let i = init; i >= 0; i--) {
let currentTarget = stellarObjects[i];
if (currentTarget !== stellarObject) {
let targetX = currentTarget.x,
targetY = currentTarget.y,
targetME = currentTarget.massEffect,
targetAcc = currentTarget.acc, targetOldAcc = currentTarget.oldAcc;
let difY = y - targetY,
difX = x - targetX;
let distance = getDistance(difY, difX);
if (distance !== 0) {
let distSqr = distance * distance;
let accelTarg = massEffect / distSqr,
accelObj = targetME / distSqr;
let yIsNegative = difY < 0;
let theta = Math.atan(difX / difY);
targetAcc.x += difX === 0 ? 0 : ((yIsNegative ? -1 : 1) * accelTarg * Math.sin(theta));
targetAcc.y += difY === 0 ? 0 : ((yIsNegative ? -1 : 1) * accelTarg * Math.cos(theta));
objAcc.x -= difX === 0 ? 0 : ((yIsNegative ? -1 : 1) * accelObj * Math.sin(theta));
objAcc.y -= difY === 0 ? 0 : ((yIsNegative ? -1 : 1) * accelObj * Math.cos(theta));
}
}
}
}
function applyObjectGravityToFabric(x, y, massEffect) {
let xMeasure = x/cellSize, yMeasure = y/cellSize;
for (let i = 0; i < gHeight; i++) {
let row = gField[i];
for (let j = 0; j < gWidth; j++) {
let currentVector = row[j];
let oX = currentVector[0],
oY = currentVector[1],
difX = xMeasure - j,
difY = yMeasure - i;
if(difX*difX + difY*difY < MAX_FIELD_DISTANCE ){
let distance = getDistance(difX, difY);
if ( distance !== 0) {
let force = (massEffect) / (distance * distance);
let xIsNegative = difX < 0,
yIsNegative = difY < 0;
let theta = Math.atan(difX / difY);
currentVector[0] += difX === 0 ? 0 : ((yIsNegative ? -1 : 1) * force * Math.sin(theta));
currentVector[1] += difY === 0 ? 0 : ((yIsNegative ? -1 : 1) * force * Math.cos(theta));
}
}
}
}
}
function recalculateGravityField() {
for (let i = 0; i < numObjects; i++) {
let o = stellarObjects[i];
applyObjectGravityToFabric(o.x, o.y, o.massEffect);
}
}
function resetGravityFieldInPlace() {
for (let i = 0; i < gHeight; i++) {
let row = gField[i];
for (let w = 0; w < gWidth; w++) {
row[w] = [0,0];
}
}
}
function reinitializeGravityField() {
gField = [];
let maxH = HEIGHT / cellSize,
maxW = WIDTH / cellSize;
for (let h = 0; h <= maxH; h++) {
let row = [];
for (let w = 0; w <= maxW; w++) {
row.push([0,0]);
}
gField.push(row);
}
gHeight = gField.length;
gWidth = gField[0].length
}
function drawFieldAndObjects(){
ctx.clearRect(0, 0, WIDTH, HEIGHT);
if (showFabric) {
drawGravityField();
}
drawObjects();
}
function drawObjects() {
for (let i = 0; i < numObjects; i++) {
drawObject(stellarObjects[i]);
}
if (isPlanting) {
drawCursorLine();
}
}
function drawCursorLine() {
ctx.beginPath();
ctx.strokeStyle = CURSOR_LINE_COLOR;
ctx.moveTo(plantX, plantY);
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
ctx.closePath();
let dist = getDistance(mouseX-plantX,mouseY-plantY);
ctx.fillStyle = CURSOR_LINE_COLOR;
ctx.fillText(dist,mouseX+10, mouseY-10);
}
function drawObject(o) {
let x = o.x,
y = o.y,
radius = o.size;
ctx.beginPath();
ctx.arc(x, y, radius, 0, TWOPI);
ctx.fillStyle = o.color;
ctx.fill();
ctx.globalAlpha = 0.2;
ctx.strokeStyle = OBJECT_BORDER_COLOR;
ctx.arc(x, y, radius, 0, TWOPI);
ctx.stroke();
ctx.globalAlpha = 1;
ctx.closePath();
}
function drawGravityField() {
ctx.strokeStyle = GRAVITY_FIELD_MARKER_COLOR;
for (let i = 0; i < gHeight; i++) {
let row = gField[i], iMeasure = i * cellSize;
for (let j = 0; j < gWidth; j++) {
drawVectorDot(j * cellSize, iMeasure, row[j]);
}
}
}
function drawVectorDot(x, y, vector) {
let vx = vector[0],
vy = vector[1];
ctx.globalAlpha = fadeMultiplier / Math.sqrt(vx*vx + vy*vy); // the farther the marker is pulled, the more it fades from view
ctx.beginPath();
ctx.arc(x + vx, y + vy, GRAVITY_FIELD_MARKER_RADIUS, 0, TWOPI);
ctx.stroke();
ctx.globalAlpha = 1;
}
function getRandomStellarObject() {
let multiplier = objectSize === 0 ? Math.random() : objectSize;
let randomMass = MIN_RND_MASS + multiplier * (MAX_RND_MASS - MIN_RND_MASS);
let randomSize = Math.pow(3 * randomMass / 4 / PI, 1 / 3) * SCALE, // size formula based on volume of a sphere
randomColor = objectColor === "" ? getRandomColor() : objectColor;
let velocity = Math.random() * MAX_RND_VEL;
let xComponent = Math.random() * velocity;
return {
color: randomColor,
size: randomSize,
mass: randomMass,
x: WIDTH / 6 + (2 * WIDTH / 3 * Math.random()),
y: HEIGHT / 6 + (2 * HEIGHT / 3 * Math.random()),
velocity: {
x: (Math.random() * 2 > 1 ? -1 : 1) * Math.sqrt(xComponent),
y: (Math.random() * 2 > 1 ? -1 : 1) * Math.sqrt(velocity - xComponent)
},
acc:{
x:0,y:0,xh:0,yh:0
},
oldAcc: {
x:0,y:0
},
massEffect: randomMass * G
}
}
function getStellarObject(color,multiplier,x,y, xv, yv){
let mass = MIN_RND_MASS + multiplier * (MAX_RND_MASS - MIN_RND_MASS);
let size = Math.pow(3 * mass / 4 / PI, 1 / 3) * SCALE;
return {color:color, size:size, mass:mass, x: x, y:y, velocity:{x:xv,y:yv},acc:{x:0,y:0,xh:0,yh:0}, oldAcc:{x:0,y:0},massEffect:mass*G};
}
function getDistance(difX, difY) {
return Math.sqrt(difX * difX + difY * difY);
}
function getRandomColor() {
return "rgb(" + (Math.random() * 256 >>> 0) + "," + (Math.random() * 256 >>> 0) + "," + (Math.random() * 256 >>> 0) + ")";
}
#AutoStep {
font-weight: bold;
}
canvas {
cursor: crosshair;
background-color: black;
border: 1px solid black;
vertical-align: text-top;
-ms-touch-action: none;
}
input,
.controls {
font-size: 12pt;
font-family: Calibri;
}
input {
padding: 2px;
}
.controls {
text-align: center;
background-color: #bfbfbf;
display: inline-block;
vertical-align: text-top;
border: 1px solid black;
}
label {
cursor: pointer;
}
.container {
display: inline-block;
width: 552px;
}
.controls .inner {
display: inline-block;
}
.controls .section {
text-align: left;
background-color: #dfdfdf;
border: 1px solid #9f9f9f;
padding: 2px;
margin: 1px;
display: inline-block;
vertical-align: text-top;
}
<div class="container">
<div class="controls">
<div class="section">
<input type="button" id="Reset" value="Reset" />
</div>
<div class="section">
<div class="inner">
<input type="button" id="NextStep" value="Next" />
<input type="button" id="AutoStep" value="Auto" />
</div>
<div class="inner">Delay:
<select id="Delay">
<options>
<option value=0 selected="selected">none</option>
<option value=10>10 ms</option>
<option value=15>15 ms</option>
<option value=30>30 ms</option>
<option value=60>60 ms</option>
<option value=500>500ms</option>
<option value=1000>1 sec</option>
</options>
</select>
</div>
</div>
<div class="section">Border:
<select id="BorderBehavior">
<options>
<option value="Annihilate">Annihilate</option>
<option selected="selected" value="Unbounded">Unbounded</option>
<option value="Loop">Loop</option>
<option value="Ricochet">Ricochet</option>
<option value="HalfRicochet">50% Ricochet</option>
</options>
</select>
</div>
<div class="section">
Object Size:
<select id="ObjectSize">
<options>
<option value=0>Random</option>
<option value=1>100%</option>
<option value=.9>90%</option>
<option value=.75>75%</option>
<option value=.5>50%</option>
<option value=.25>25%</option>
<option value=.1>10%</option>
<option value=.05>5%</option>
<option value=.01>1%</option>
<option value=.009>0.90%</option>
<option value=.005>0.50%</option>
<option value=.0025>0.25%</option>
<option value=.001>0.10%</option>
<option value=.0001 selected="selected">0.01%</option>
</options>
</select>
<br/>
Object Color:
<select id="ObjectColor">
<options>
<option value="">Random</option>
<option value="red">Red</option>
<option value="magenta">Magenta</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="lightgreen">Light Green</option>
<option value="blue">Blue</option>
<option value="cyan">Cyan</option>
<option value="indigo">Indigo</option>
<option value="violet">Violet</option>
<option value="brown">Brown</option>
<option value="gray">Gray</option>
<option value="white" selected="selected">White</option>
</options>
</select>
</div>
<div class="section">
<label>
<input type="checkbox" id="ShowFabric"/>Show Fabric</label>
<div>Granularity:
<select id="FabricGranularity">
<options>
<option value="5">5</option>
<option value="7">7</option>
<option value="10">10</option>
<option value="13">13</option>
<option value="15">15</option>
<option value="20" selected="selected">20</option>
<option value="30">30</option>
</options>
</select>
</div>
</div>
<div class="section">
<div class="inner">
<label for="chkTrack"><input type="checkbox" id="chkTrack" checked="checked"/>Track</label>
</div>
</div>
<div class="section">
<div class="inner">
<label for="chkCollisions">
<input type="checkbox" checked="checked" id="chkCollisions" />Handle Collisions</label>
</div>
<div>Restitution:
<select id="Restitution">
<options>
<option value=1>1.0</option>
<option value=0.95 selected="selected">0.95</option>
<option value=0.9>0.9</option>
<option value=0.8>0.8</option>
<option value=0.7>0.7</option>
<option value=0.6>0.6</option>
<option value=0.5>0.5</option>
<option value=0.4>0.4</option>
<option value=0.3>0.3</option>
<option value=0.2>0.2</option>
<option value=0.1>0.1</option>
<option value=0.0>0.0</option>
</options>
</select>
</div>
</div>
</div>
<canvas id="canvas" height="550" oncontextmenu="return false;" width="550">no canvas available</canvas>
</div>
Mouse tracking
window.onload
=
function ()
{
/* Original Image: 55 X 75 */
var DOSPI=2.0*Math.PI,DPH=Math.PI/30.0,IMG=document.getElementById("MSO_MIA");
var HALFW=Math.round(55.0/2.0),HALFH=Math.round(75.0/2.0);
var P=document.getElementById("point");
var R=Math.round(1.5*(( HALFW<HALFH ) ? HALFH:HALFW));
var ph=0,x=null,y=null;
document.onmousemove
=
function (evento)
{
if ( !evento ) evento=window.event;
x=evento.clientX;
y=evento.clientY;
P.style.left=x + "px";
P.style.top=y + "px";
IMG.style.left=Math.round(x - HALFW + R*Math.cos(ph)) + "px";
IMG.style.top=Math.round(y - HALFH + R*Math.sin(ph)) + "px";
if ( (ph+=DPH)>DOSPI ) ph=0;
};
};
#elDiv { position:relative; }
#elDiv img, #elDiv p { position:absolute; }
#elDiv p
{
width:6px;
height:6px;
border-radius:3px;
background-color:#f00;
}
<div id="elDiv">
<p id="point"></p>
<img id ="MSO_MIA" src="https://dl.dropboxusercontent.com/u/17123168/MSO.png">
</div>
-
7I feel this is a metaphor for MSO as a whole. You are the red dot, and MSO revolves around you. You are not the center of the universe, because you have to move for it to function. You also have no control over how MSO moves. You can't ask it to go backwards, it only moves forward. And consistently, for a brief instance, MSO will completely cover you up so that you are inconsequential. In the end, you are trying to move in a line, and MSO will be running circles around you.– gunr2171Commented Aug 29, 2014 at 19:32
-
@gunr2171 I didn't think about it. However, it's your free interpretation. Thanks. Commented Aug 29, 2014 at 21:46
-
It was all meant as a joke, trying to find a "deep" meaning in something like that.– gunr2171Commented Aug 29, 2014 at 21:56
I still want to add JSFiddles, I'm practicing recursion. Can I?
<iframe width="100%" height="300" src="https://jsfiddle.net/bigood/g7bv12as/5/embedded/result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
Yes, but no.
It breaks with an error:
Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.
Multiplayer Websocket test! Hack you fellow Stackians to bits! I hope you know your HJKL Nethack key controls... (I'm afraid you'll need to fullscreen this one to make it actually playable.)
ROT.RNG.setSeed(12345);
ROT.DEFAULT_WIDTH = 83;
ROT.DEFAULT_HEIGHT = 32;
var id, level = 1;
var mapData = [];
var inventory = [];
var inventoryUp = false;
var health = 10;
var entities = [];
var display = new ROT.Display({fontSize:11});
document.getElementById("canvasContainer").appendChild(display.getContainer());
var socket = io.connect('https://taggem-apsillers.rhcloud.com:8443');
socket.emit("player");
socket.on("map+pos", function(updates) { redraw(updates.map, updates.pos); });
socket.on("map", function(mapUpdates) { redraw(mapUpdates, {}); });
socket.on("pos", function(pos) { redraw({}, pos); });
socket.on("id", function(myid) {
id = myid;
display.clear();
level = 1;
mapData = [];
inventory = [];
inventoryUp = false;
health = 10;
entities = [];
entities[1] = {};
messages = [];
initMapLevel(1);
});
socket.on("inventory", function(data) {
if(data.change == "add") {
inventory[data.slot] = data.item;
} else if(data.change == "remove") {
delete inventory[data.slot];
}
});
socket.on("health", function(data) { health = data.value; drawHealth(data.value); });
function drawHealth(value) {
for(var i=0; i < value; ++i) {
display.draw(82, 10-i, "o", "#F00", "#000");
}
for(;i<10; ++i) {
display.draw(82, 10-i, "-", "#F00", "#000");
}
}
function initMapLevel(level) {
mapData[level] = [];
for(var i=0; i < ROT.DEFAULT_WIDTH; ++i) {
for(var j=0; j < ROT.DEFAULT_HEIGHT; ++j) {
if(mapData[level][i] == null) { mapData[level][i] = []; }
mapData[level][i][j] = -1;
}
}
}
var dirToVector = {};
dirToVector[ROT.VK_H] = { x:-1, y:0};
dirToVector[ROT.VK_L] = { x:1, y:0};
dirToVector[ROT.VK_K] = { x:0, y:-1};
dirToVector[ROT.VK_J] = { x:0, y:1};
dirToVector[ROT.VK_LEFT] = { x:-1, y:0};
dirToVector[ROT.VK_RIGHT] = { x:1, y:0};
dirToVector[ROT.VK_UP] = { x:0, y:-1};
dirToVector[ROT.VK_DOWN] = { x:0, y:1};
dirToVector[ROT.VK_Y] = { x:-1, y:-1};
dirToVector[ROT.VK_U] = { x:1, y:-1};
dirToVector[ROT.VK_B] = { x:-1, y:1};
dirToVector[ROT.VK_N] = { x:1, y:1};
var keyToItem = {};
for (i = 0; i < 10; i++) {
keyToItem[i + "0".charCodeAt(0)] = i;
}
var interpreters = {};
interpreters[ROT.VK_I] =
function () {
showInventory();
interpCallback = function (key) {
hideInventory();
interpCallback = defaultInterpreter;
if (key != ROT.VK_I) {
defaultInterpreter(key);
}
};
};
interpreters[ROT.VK_Z] = DirCommand("zap");
interpreters[ROT.VK_A] = DirCommand("mine");
interpreters[ROT.VK_S] = ItemDirCommand("shoot");
interpreters[ROT.VK_O] = DirCommand("open");
interpreters[ROT.VK_C] = DirCommand("close");
interpreters[ROT.VK_COMMA] = Command("pickup");
interpreters[ROT.VK_D] = ItemCommand("drop");
for (moveKey in dirToVector) {
interpreters[moveKey] = (function (key) {
return function () { socket.emit("move", dirToVector[key]); }
})(moveKey);
}
interpreters[ROT.VK_ESCAPE] = function () {
hideInventory();
interpCallback = defaultInterpreter;
};
var defaultInterpreter = function (key) {
if (key in interpreters) {
interpreters[key]();
}
};
var interpCallback = defaultInterpreter;
function makeCB(f) {
return function (k) {
if (!f(k)) {
interpCallback = defaultInterpreter;
}
}
};
function Command (action) {
return function () {
socket.emit(action);
}
}
function DirCommand (action) {
return function () {
interpCallback = makeCB( function (key) {
vec = dirToVector[key];
if (vec) {
socket.emit(action, vec);
}
});
}
}
function ItemCommand (action) {
return function () {
interpCallback = makeCB( function (key) {
item = keyToItem[key];
if (item <= 9 && item >= 0) {
socket.emit(action, {"itemNum":item});
}
});
}
}
function ItemDirCommand (action) {
return function () {
interpCallback = makeCB( function (key) {
item = keyToItem[key];
if (item == undefined) {
item = defaultItemForAction(action);
vec = dirToVector[key];
if (vec) {
vec.itemNum = item;
socket.emit(action, vec);
}
}
else if (item <= 9 && item >= 0) {
interpCallback = makeCB( function (key) {
vec = dirToVector[key];
if (vec) {
vec.itemNum = item;
socket.emit(action, vec);
}
});
return true;
}
});
}
}
window.addEventListener("keydown", function (e) {
var code = e.keyCode;
interpCallback(code);
});
function drawMap(mapUpdates) {
if(typeof mapData[level] == 'undefined') { initMapLevel(level); }
for(i in mapUpdates) {
var coords = i.split(',');
mapData[level][coords[0]][coords[1]] = mapUpdates[i];
}
for(i=0; i < ROT.DEFAULT_WIDTH; ++i) {
for(j=0; j < ROT.DEFAULT_HEIGHT; ++j) {
drawMapChar(i, j, mapData[level][i][j]==0?".":" ", "#fff", ["#000", "#777"][mapData[level][i][j]]);
}
}
}
function updateEntities(posData) {
var i;
if(posData.clear) { entities[level] = {}; }
if(posData["add"]) {
for(i in posData["add"]) {
entities[level][i] = posData["add"][i];
}
}
if(posData["remove"]) {
for(i=0; i<posData["remove"].length; ++i) {
delete entities[level][posData["remove"][i]];
}
}
}
function drawEntities() {
for(i in entities[level]) {
var pos = entities[level][i];
if(pos.blocking) { drawMapChar(pos.x, pos.y, pos.symbol, pos.color); }
else {
var hasBlocking = false;
for(var j in entities[level]) {
if(entities[level][j].blocking && entities[level][j].x == pos.x && entities[level][j].y == pos.y) {
hasBlocking = true;
break;
}
}
if(!hasBlocking) { drawMapChar(pos.x, pos.y, pos.symbol, pos.color); }
}
}
}
function redraw(map, posData) {
if(posData["add"] && posData["add"][id] != undefined) {
level = posData["add"][id].z;
if(entities[level] == undefined) { entities[level] = {}; }
}
updateEntities(posData);
drawMap(map);
drawEntities();
drawHealth(health);
}
function drawMapChar(x,y,ch,fg,bg) {
if(!inventoryUp || ((x < 2 || x > 36) && (y < 4 || y > 14))) {
display.draw(x, y+2, ch, fg, bg);
}
}
function showInventory() {
inventoryUp = true;
var thirtySpaces = "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0";
display.drawText(2, 3, "--------------------------------");
display.drawText(2, 4, ("| Inventory" + thirtySpaces).substr(0,30) + " |");
var invCount = 0;
for(var i=0; i<10; ++i) {
if(inventory[i]) {
display.drawText(2, invCount+5, ("| " + i + ": " + inventory[i].name + thirtySpaces).substr(0,30) + " |", 34);
invCount++;
}
}
for(i=0; i<10 - invCount; ++i) {
display.drawText(2, invCount+i+5, "| " + thirtySpaces + " |", 34);
}
display.drawText(2, invCount+i+5, "--------------------------------");
}
function hideInventory() {
inventoryUp = false;
redraw({}, {});
}
function defaultItemForAction(actionName) {
if(actionName == "shoot") {
for(var i=0; i<inventory.length; ++i) {
if(inventory[i] && inventory[i].shootable) return i;
}
}
return null;
}
function showMessage(m) {
display.drawText(0, 0, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0", "#000", "#000");
display.drawText(0, 1, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0", "#000", "#000");
display.drawText(0, 0, m);
}
socket.on("output", function(m) {
showMessage(m);
});
<div id="canvasContainer" style="float:left; border: thick solid black;"></div>l
<div style="float:left;">
<div style="width:400px; padding: 10px;">
<ul>
<li><b>arrow keys</b>: movement</li>
<li><b>h,j,k,l</b>: left, down, up, right</li>
<li><b>i</b>: show inventory</li>
<li><b>,</b> (comma): pick up items</li>
<li><b>o</b> <i>[direction]</i>: open door in [direction]</li>
<li><b>c</b> <i>[direction]</i>: close door in [direction]</li>
<li><b>d</b> <i>[number]</i>: drop item in slot [number]</li>
<li><b>s</b> <i>[number] [direction]</i>: shoot item [number] in [direction] (e.g., <b>s2h</b> shoots item in slot 5 to the left)</li>
<li><b>s</b> <i>[direction]</i>: shoot the first shootable item in your inventory in [direction]</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script src="https://ondras.github.io/rot.js/rot.js"></script>
-
Argh - I can't move with
hjkl
. Can you add support forWASD
and/or the arrow keys?– BergiCommented Aug 28, 2014 at 11:13 -
1
-
Wow awesome game, but I can walk through walls, is it right that way? O.o Commented Sep 10, 2014 at 18:28
-
@modiX Of course you can't wall though wall -- you can dig through walls!
:P :)
(But seriously, the difference is that you must step once to dig and then step again to move into the space you dug, so you move at half-speed through walls.) At some point, I'll add a pickaxe item and make it so you can only dig when you're holding one. Commented Sep 10, 2014 at 18:42 -
@apsillers That's awesome. A really funny nerdy game! :) Commented Sep 10, 2014 at 18:48
After all, who doesn't love pong :)
Commands:
Control left paddle with w and s
Control right paddle with ↑ and ↓
Hit enter to restart
Hit space to pause
Hit a to turn on the automatic mode for the left paddle
<!DOCTYPE html>
<html>
<body>
<div id="gameArea">
<canvas id="canvas"></canvas>
<div id="statsPanel"></div>
</div>
<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
html, body {
background: #171700;
}
canvas {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background: #171700;
}
</style>
<script>
var ar=new Array(32, 33,34,35,36,37,38,39,40);
$(document).keydown(function(e) {
var key = e.which;
//console.log(key);
//if(key==35 || key == 36 || key == 37 || key == 39)
if($.inArray(key,ar) > -1) {
e.preventDefault();
return false;
}
return true;
});
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight-50;
rectw = 6.333;
recth = 50;
var player1 = {
x: 50,
y: canvas.height/2-recth/2,
velY: 0,
velX: 0,
color: getRandomColor(),
},
player2 = {
x: canvas.width-(50+rectw),
y: canvas.height/2-recth/2,
velY: 0,
velX: 0,
color: getRandomColor(),
};
multiply = [-1, 1];
var choice = multiply[Math.floor(Math.random() * multiply.length)];
temp = getRandomInt(0.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-Math.pow(temp, 2));
temp*=-1;
circle = {
x: canvas.width/2-rectw/2,
y: canvas.height/2-recth/2,
velY: temp,
velX: temp2,
color: getRandomColor(),
}
var x = 150,
y = 150,
velY = 0,
velX = 0,
speed = 2,
friction = 0.98,
keys = [];
auto = false;
score1 = score2 = 0;
var atime = ptime = getTime();
function getTime(){
return(new Date().getTime() / 1000);
}
col1 = getRandomColor();
col2 = getRandomColor();
col3 = getRandomColor();
tempX = 0
tempY = 0
paused = false;
function update() {
if (keys[38]) {
if (player2.velY > -speed) {
player2.velY--;
}
}
if (keys[40]) {
if (player2.velY < speed) {
player2.velY++;
}
}
if (keys[65]) {
if(getTime()-atime > 0.75){
if (auto == false){
auto = true;
}else{
auto = false;
}
atime = getTime();
}
}
if (keys[32]) {
if(getTime()-ptime > 0.75){
if(paused == false){
tempX = circle.velX;
tempY = circle.velY;
circle.velX = circle.velY = 0;
paused = true;
}else{
circle.velX = tempX;
circle.velY = tempY;
paused = false;
}
ptime = getTime();
}
}
if (keys[13]){
multiply = [-1, 1];
var choice = multiply[Math.floor(Math.random() * multiply.length)];
temp = getRandomInt(0.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-Math.pow(temp, 2));
temp*=-1;
circle.x = canvas.width/2-rectw/2;
circle.y = canvas.height/2-recth/2;
circle.velX = circle.velY = 0;
setTimeout(function(){
score1=score2=0;
circle = {
x: canvas.width/2-rectw/2,
y: canvas.height/2-recth/2,
velY: temp,
velX: temp2,
color: getRandomColor(),
}
}
, 3000);
}
if (keys[67]){
col1 = getRandomColor();
col2 = getRandomColor();
col3 = getRandomColor();
player1.color = getRandomColor();
player2.color = getRandomColor();
circle.color = getRandomColor();
}
if (auto == false){
if (keys[87]) {
if (player1.velY > -speed) {
player1.velY--;
}
}
if (keys[83]) {
if (player1.velY < speed) {
player1.velY++;
}
}
}else{
player1.y = circle.y-recth/2;
player1.velY = 0;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop("0", col1);
gradient.addColorStop("0.5", col2);
gradient.addColorStop("1.0", col3);
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText(score1, 100, 90);
ctx.fillText(score2, canvas.width-160, 90);
updatePlayer(player1);
updatePlayer(player2);
updateCircle(circle, player1, player2);
setTimeout(update, 10);
document.title = score1+", "+score2;
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var audio = new Audio('http://www.mediacollege.com/downloads/sound-effects/alien/alien-noise-01.ogg');
function updateCircle(player, play1, play2) {
player.y += player.velY;
player.x += player.velX;
if (player.x >= canvas.width-(50+rectw)) {
if (play2.y <= player.y && player.y <= play2.y+recth){
player.x = canvas.width-(50+rectw);
player.velX*=-1;
play2.color = getRandomColor();
player.color = getRandomColor();
col1 = getRandomColor();
col2 = getRandomColor();
col3 = getRandomColor();
audio.play();
}else{
player.x = canvas.width/2-rectw/2;
player.y = canvas.height/2-recth/2;
multiply = [-1, 1];
var choice = multiply[Math.floor(Math.random() * multiply.length)];
temp = getRandomInt(0.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-Math.pow(temp, 2));
temp*=-1;
player.velY = temp;
player.velX = temp2;
score1++;
}
} else if (player.x <= 60) {
if (play1.y <= player.y && player.y <= play1.y+recth){
player.x = 60;
player.velX*=-1
play1.color = getRandomColor();
player.color = getRandomColor();
col1 = getRandomColor();
col2 = getRandomColor();
col3 = getRandomColor();
audio.play();
}else{
player.x = canvas.width/2-rectw/2;
player.y = canvas.height/2-recth/2;
multiply = [-1, 1];
var choice = multiply[Math.floor(Math.random() * multiply.length)];
temp = getRandomInt(0.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-Math.pow(temp, 2));
temp*=-1;
player.velY = temp;
player.velX = temp2;
score2++;
}
}
if (player.y > canvas.height-5) {
player.y = canvas.height-5;
player.velY*=-1
} else if (player.y <= 5) {
player.y = 5;
player.velY*=-1
}
ctx.fillStyle = player.color;
ctx.beginPath();
ctx.arc(player.x, player.y, 5, 0, Math.PI * 2);
ctx.fill();
}
function getRandomColor() {
/* var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;*/
return "whiteSmoke";
}
function updatePlayer(player) {
player.velY *= friction;
player.y += player.velY;
if (player.y > canvas.height-recth) {
player.y = canvas.height-recth;
} else if (player.y <= 0) {
player.y = 0;
}
ctx.fillStyle = player.color;
ctx.beginPath();
ctx.fillRect(player.x, player.y, 10, recth);
// ctx.arc(player.x, player.y, 5, 0, Math.PI * 2);
ctx.fill();
}
update();
document.body.addEventListener("keydown", function (e) {
keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
keys[e.keyCode] = false;
});
</script>
</body>
</html>
Youtube?
No autoplay:<br />
<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
<br />
?autoplay=1:<br />
<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" frameborder="0" allowfullscreen></iframe>
Youtube!
-
3Damn I hate
autoplay
. Never gonna give you up, never gonna let you dooown... Commented Aug 26, 2014 at 8:37 -
2@Goodzilla: Did autoplay work for you? I got "undefined" in Chrome.– CerbrusCommented Aug 26, 2014 at 9:06
-
Actually it didn't, but that's due to my company computer blocking all embedded videos. I can see the black boxes where the videos would be. Commented Aug 26, 2014 at 9:26
-
-
4
-
1Wow, this crashed my browser. But maybe because it's Firefox Nighly. I can't make it crash again, though. Maybe because when I restarted it, an update was installed.– OriolCommented Feb 8, 2015 at 0:04
3D Button Test
button {
position: absolute;
top: 50px;
left: 50;
height: 100px;
width: 400px;
transform: perspective(600px) rotateX(10deg) rotateY(10deg);
transition: transform 0.2s;
}
button:hover {
transform: perspective(600px) rotateX(-10deg) rotateY(10deg);
transition: transform 0.2s;
}
button:active {
transform: rotateX(45deg) rotateY(240deg) translateZ(0px);
transition: 0.2s;
}
body {
overflow: hidden;
}
<button>Test</button>
Demo for Display a phone number based on the timezone on SO:
var date = new Date();
var offset = date.getTimezoneOffset();
function timezone ()
{
var Phone, dest = document.getElementById('date_dependent');
if (offset == 240) {
Phone = "1-877-219-8830";
} else if (offset == 300) {
Phone = "1-866-878-7814";
} else {
Phone = "1-877-868-8121";
}
dest.innerHTML = Phone;
}
timezone();
<div id="date_dependent">Who's calling?</div>
-
-
1Nah, the OP only has 3 telephone numbers. All other zones are bound to (local) Office Hours only. Ever tried to register as an Apple Dev? You need to send a fax, during their PDT office hours.– JongwareCommented Sep 9, 2014 at 15:11
#ejm17
{
position:relative;
width:200px;
height:200px;
border-radius:100px;
background-color:#000;
margin:0 auto;
}
#ejm17 p
{
transition:all 4s ease-in-out;
transition-property:top, left;
transition-delay:1s, 0s;
position:absolute;
left:90px;
top:90px;
width:20px;
height:20px;
border-radius:10px;
}
#ejm17 p + p + p { transition-delay:0s, 1s; }
#ejm17:hover p { left:180px; top:90px; }
#ejm17:hover p + p { left:90px; top:0; }
#ejm17:hover p + p + p { left:0; top:90px; }
#ejm17:hover p + p + p + p { left:90px; top:180px; }
Move the mouse over the picture.
<div id="ejm17">
<p style="background-color:#fff;"></p>
<p style="background-color:#f00;"></p>
<p style="background-color:#0ff;"></p>
<p style="background-color:#ff0;"></p>
</div>
JavaScript art! (Warning: You want a better GPU if it looks laggy).
!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",1.0),c:o(v,"color","255,255,0"),n:o(v,"count",40)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillStyle="rgba("+s.c+","+s.o+")",e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="background-color:#000;position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();
Real-time Virtual Reality Simulation
This is really old. Don't judge.
var ball;
var rpad;
var lpad;
function makeBall(x,y,speedx,speedy)
{
var ball = document.getElementById("ball");
ball.x = x;
ball.y = y;
ball.speedX = speedx;
ball.speedY = speedy;
ball.width = ball.offsetWidth - 4;
ball.height = Math.ceil(ball.width * 8 / 9);
ball.yOffset = Math.round((ball.offsetHeight - ball.height) * 4 / 7 );
//TODO: tweak this
if(navigator.appName != "Internet Explorer")
ball.yOffset += 9;
ball.step = function()
{
// new position
this.x += this.speedX;
this.y += this.speedY;
// check bounds
if(this.speedX >= 0) {
if((this.x + this.width) > rpad.offsetLeft) {
this.speedX = -this.speedX;
this.x = rpad.offsetLeft - this.width;
}
}
if(this.speedX <= 0) {
if(this.x < (lpad.offsetLeft + lpad.offsetWidth)) {
this.speedX = -this.speedX;
this.x = lpad.offsetLeft + lpad.offsetWidth;
}
}
if(this.speedY >= 0) {
if((this.y + this.height) > document.documentElement.offsetHeight) {
this.speedY = -this.speedY;
this.y = document.documentElement.offsetHeight - this.height;
}
}
if(this.speedY <= 0) {
if(this.y < 0) {
this.speedY = -this.speedY;
this.y = 0;
}
}
// set new ball position
this.style.left = (this.x - 2) + "px";
this.style.top = (this.y - this.yOffset) + "px";
}
return ball;
}
function makePad(pad, step, y, maxmojo)
{
pad.y = y;
pad.mojo = 0;
pad.step = step;
pad.yOffset = (pad.offsetHeight / 2) + (ball.height / 2);
pad.maxmojo = maxmojo;
pad.move = function(y)
{
var ny = y - this.yOffset;
if(ny + this.offsetHeight > document.documentElement.offsetHeight)
ny = document.documentElement.offsetHeight - this.offsetHeight;
if(ny < 0) ny = 0;
this.mojo = ny + this.yOffset - this.y;
if(this.mojo > this.maxmojo) {
ny -= (this.mojo - this.maxmojo);
this.mojo = ny + this.yOffset - this.y;
}
if(this.mojo < -this.maxmojo) {
ny += (-this.mojo - this.maxmojo);
this.mojo = ny + this.yOffset - this.y;
}
this.y = ny + this.yOffset;
this.style.top = ny + "px";
}
pad.mojomove = function(y)
{
if( this.mojo >= 0) {
if (this.y + this.mojo + 5 < y) {
this.move(this.y + this.mojo + 5);
} else if(this.y + this.mojo - 6 > y) {
this.move(this.y + this.mojo - 6);
} else {
this.move(y);
}
} else {
if (this.y + this.mojo - 5 > y) {
this.move(this.y + this.mojo - 5);
} else if(this.y + this.mojo - 6 < y) {
this.move(this.y + this.mojo + 6);
} else {
this.move(y);
}
}
}
return pad;
}
function leftStep()
{
if(ball.speedX <= 0) {
this.mojomove(ball.y);
} else {
this.move(this.y + this.mojo);
if(this.mojo < 0) { this.mojo++; }
if(this.mojo > 0) { this.mojo--; }
}
}
function rightStep()
{
if(ball.speedX >= 0) {
this.mojomove(ball.y);
} else {
this.move(this.y + this.mojo);
if(this.mojo < 0) { this.mojo++; }
if(this.mojo > 0) { this.mojo--; }
}
}
function step()
{
ball.step();
rpad.step();
lpad.step();
window.setTimeout(step,35);
}
window.onload = function()
{
ball = makeBall(30,50,14,10);
lpad = makePad(document.getElementById("leftPad"), leftStep, 30, 25);
rpad = makePad(document.getElementById("rightPad"), rightStep, 30, 25);
step();
}
html, body {
height:100%;
padding: 0px;
margin: 0px;
background-color: black;
}
html {
overflow: hidden;
border:none;
}
body {
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0px 0px;
}
a {
font:8pt/11pt Verdana,Arial,Helvetica,sans-serif;
}
#ball {
position:absolute;
width:10px;
height:7px;
top:82px;
left:30px;
color:red;
font-family:Tahoma;
font-size:16pt;
cursor:default;
}
#leftPad, #rightPad {
position:absolute;
background-color:yellow;
width:4px;
height:20px;
border:1px solid black;
}
#leftPad {
left:2px;
top:50px;
}
#rightPad {
right:2px;
top:50px;
}
<div id="leftPad"></div>
<div id="rightPad"></div>
<div id="ball">•</div>
I already reported Hidden Stack Snippets gets the code formatting when inserted next to code, but I want to check if this happens to snippets that are not hidden as well.
var code_block = null;
<p>Ta Da!</p>
Yup!
jsfiddle vs stack-snippets
var comments = [],
i = document.createElement("i"),
n = 0,
ln;
function loopComments() {
if (n >= ln) n = 0;
var comment = comments[n++];
i.innerHTML = comment.body;
console.log("%s: %s", comment.owner.display_name, i.textContent);
setTimeout(loopComments, Math.max(Math.random() * 3000, 100));
};
var questionCommentsXHR = new XMLHttpRequest();
questionCommentsXHR.open("get", "http://api.stackexchange.com/2.2/questions/302280/comments?order=asc&sort=creation&site=meta.stackoverflow.com&filter=withbody");
questionCommentsXHR.onreadystatechange = function() {
if (questionCommentsXHR.readyState !== 4) return;
Array.prototype.push.apply(comments, JSON.parse(questionCommentsXHR.response).items);
var questionAnswersXHR = new XMLHttpRequest();
questionAnswersXHR.open("get", "https://api.stackexchange.com/2.2/questions/302280/answers?order=desc&sort=activity&site=meta.stackoverflow.com");
questionAnswersXHR.onreadystatechange = function() {
if (questionAnswersXHR.readyState !== 4) return;
var answerIds = JSON.parse(questionAnswersXHR.response).items.map(function(item) {
return item.answer_id;
});
if (!answerIds.length) {
ln = comments.length;
loopComments();
} else {
var answerCommentsXHR = new XMLHttpRequest();
answerCommentsXHR.open("get", "https://api.stackexchange.com/2.2/answers/" + answerIds + "/comments?order=desc&sort=creation&site=meta.stackoverflow.com&filter=withbody");
answerCommentsXHR.onreadystatechange = function() {
if (answerCommentsXHR.readyState !== 4) return;
Array.prototype.push.apply(comments, JSON.parse(answerCommentsXHR.response).items);
ln = comments.length;
loopComments();
};
answerCommentsXHR.send();
}
};
questionAnswersXHR.send();
};
questionCommentsXHR.send();
<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
Get live active StackExchange posts using StackExchange websockets.
Note: you need to wait a bit for an active question.
var ws = new WebSocket("wss://qa.sockets.stackexchange.com/")
ws.onmessage = (function(data){
let data1 = JSON.parse(data.data)
let data12 = JSON.parse(data1.data)
document.getElementById("title").innerHTML = "<a href=\'" + data12.url + "\'>" + data12.titleEncodedFancy + "</a>"
document.getElementById("askedBy").innerHTML = "Asked by: <a href=\'" + data12.ownerUrl + "\'>" + data12.ownerDisplayName + "</a>"
document.getElementById("askedBy").innerHTML = "Site: <a href=\'https://" + data12.siteBaseHostAddress + "\'>" + data12.apiSiteParameter + " (" + data12.siteBaseHostAddress + ")</a>"
document.getElementById("content").innerHTML = data12.bodySummary
document.getElementById("tags").innerHTML = "Tags: " + data12.tags
})
ws.onopen = (function(){
ws.send("155-questions-active")
})
h1, h2, span, p {font-family: sans-serif}
<h1>StackExchange Active Questions</h1>
<div id="feed"><h2 id="title"></h2>
<span id="askedBy"></span><br>
<span id="site"></span><br>
<span id="tags"></span>
<p id="content"></p></div>
An attempt to alert insane zalgo text. Click edit below to see the full mess!
alert('ψ ψ̶̨̨̢̡̢̧̢̨̨̛̛͈̟̲̪̮̲͍͉͖̝̼̝̲̫̤̙̰̯͍͕̼̳̟̹̬̬̼̻̣͕̹̳̰̝̭͎̫̳̻̼̜̟̖̻̣̠̼̹͖͓̼̤̩͈̗̦͉̺͇̻̌͐͛̈́̈́͛̊̓͊̀͋́̊͗̄͑̽͂̌̈̿̽͛̓̚̚̕͜͝͝͝͝͝͝͠͝ ̵̨̢̡̡̨̧̡̧̨̢̡̧̧̢̨̛̖͔͈̠̟̘̦̗̠̦̭̤̞̭̰͈̲͇͈͙̗̬̫̪̟̠͚̥̖̳͔̟̯͉̫̩̟̪͔̣̭̗̙̞̭͈̭̥͉̩̯͈̮͖̱͙̳̠̯̭̳̪̟̝̯̻̘͍͚͇̜͕̼̝̦̻͔̩̙̬͖̯͉̼̭̺͙̳̜̖̣̹̳̜͕̰̮̦̞̹̲̙̝͔̱̘͖̥̺̙̙͖͎̺̜̭̺̫͚̼̜̬͙̲̹͇̮̠̰͕̗̱͇̬͍͈̯̞͎͇̺̣͓̮̟̝͓̝͎̖̺̪͎͙̼̯̞̘̠̫͍̄͐̌̍͛́̄̍͆͛͑̌͌̐̐͊̃͌́͐̄͌̏̊̏͒̒̉̍̇̏̀͗͑̌̑̎͗̇̇̒̅̄͒̑̈̍̽͗̇̕̚͘̚̕̚̚̕͜͜͜͜͜͜͜͝͠͝ͅͅͅͅͅS̴̡̡̨̡̢̨̧̡̧̡̨̡̨̧̢̧̧̨̢̨̧̡̡̛̛̛̛̛̛̛̛͕̖͓̥̲̤̰͙̯̲͎̟̝̭̰̖̻̩̥̝͎̗͚̰̼̮̝̺̥̳̜̭̰̯̫̤̳̥̭̫̦̤̠̦̭͚̗̣͉͙̣͖̯̩͖͇̘̼̥͈̼̙͙͙̳͓͓̲̰͈̙̳̳͇̫͖̤͍̦̞̲͎̖͓̟̭̟̜̹̞̞͍̟̟̟̺͔̹͇̻͇͇̦̹͍̣̦͉̼͕͙̱̙̮̮͓͚̯̬̬͓͇̯̤͉̝̞͕̭̘͉̠̞̗̜̝͇̗̞͚̜̬̭̞̣̱̞̗̟̺͈̦͙̼͚̦͈̣͎̠͇̬͕̰͕͚̱͙̼̣̤̠̙͚͈̯͇͈̱̮̜͙̳̻̠̮̝̝̫̺̝͈͉̖̗̞͔͕̝͙͍̙̹̦̞̫̣̖̫͖̺̼̭̙̭̙̯͓͎̘̜̼̰̘̰̭̹͕̖̰̥̪̲̦͙̲̯͕̋̒̄̈́̎̓̂̾̿̓̈̅͐͑̎́͂̀̑̉͐͛̈́͗̈̈́̔͆̊̓̏́́̄͌̊̇̍͑̎̐̆̈͌̍͌̎́̉̒̐̇͆͒͂́̈́̀͗̉̈́̌̐̎͒̆̓̀̃͊̋̍̒̅̊̿̾̃̃̃͌͒̏̾̓̋̀̓̂̈͛̊͗̈́̍̊̽͂͒̑͋̃̊́̔̓̄̈́̄́͌̑̐̓̑̓͑̈́̇͊̑͐͊͛́̌͂͗̀̔̈́̐͗̏̋̍̃͐͌̈́͛̽̆̇̾̿̎̾̔̈́̎͑̃̅̉̓̉̎̒͂̌͌̊̅̍̌͌̇̀̇̈́̃́̋̂̅͋̌͒̈̑̿̉́̊̑͛̑̈́̋͑̿̏̀͛͗̏̄͐̓͌̈̃̽̈͊̅͊́͛̇̈́̈̚͘͘̚͘̚̕̕̕̕̕̕̕͘̕̕͘͘̚͘̚̕͜͜͜͜͜͜͜͝͠͝͝͝͠͝͝͝͠͝͝͝͝͝͠͝͝ͅͅͅͅͅͅͅo̴̡̡̡̧̧̡̧̢̢̢̨̡̢̡̨̧̡̧̧̢̨͇̱͍̺̞͓͙̺͓̞͔͈͈͎͍͓̳͖̙̖͕͚͈̘̺̻͍̺͈͎͚͕̜̜̙̟͙̮̪̖͉̮̤̰̯̹͕̘̗͙͙̳̗̼̣̙̗̩͚͕̬̫̞̮͉̙̳̻̹͓̝̱̼̼̩͇̗͍̪̤̲̰̱̟̭̟͔͖̝̟͉̱̙̞͍͎̣̣̙̱͇̦͙͎̩̻̪͙̗͚̣͔̜̲̝͖̤̠͍̮̲͔̠͉̺̭͚͇͇̼̙̥͇̜̖̫̙͓̺̻̰̼̘̘̺̫͈̟̞̫͖̙͕̬̱̟̱͔̥̝̗̲̻̳͓̺̗̭̝̺̮̳̻͍̳̘̪͎͖̠̟͎̺̭̩̯͍͙̜͔̣̮̘̫̬͖̙̝̤͚̭͖̠̖̻͈̩̦̺̘̤̊̒̑͂̈́̽̐̎͜͜͜͜͜͜͝ͅͅͅͅͅͅͅm̶̧̢̡̧̧̨̡̧̧̧̧̨̡̨̛̛̛̛̛̛̛̛̛̼̭̯̻̭̯͕͚̯͙̯̗͉̜̞͈͓̫̘̯͙͔̫̰̩̯̼̝̙͔̬̺͓͙̦̞̪͇̯̪̻̲͙̥̭̣̳͕̝̹̼̩͙̦̝̜̯͖͚̩̘̗͉͍̟̠̩̞͓̼̺̥̱̩͈̱̗͖̥̗̟͕̭̗̩͚̲̪͚̥̯͉̜͍͎̭̮̱͓͍̙͉̝̖̜̣̩̼̥̥̙̰̙̖̣̣͍̞͚͚̞͙̙͕͖̦̖͎̻̫̤͍̖̦̦̥͎̝̺̤̼͉̪̞̺̻͖̺̬̮̺͍̙̥͇͈̬̫̭̼̠͉̤͉͇̪͔͙̹̤̫̖͍̝̼̟̮̼̮̜̺̺͔͙͉̜̥̦̟̮̩͖̥͈̞̰̼͉̠͚̰͕͇̮͍͖̤̳̜̯̻͖̜̥͇̯̬͈͚̬͍̘̥̞̮̝͚̭̳͉͎̦͎̘̮͙̞̟̟̜͓̥͛̂͐̀̎̓̃̈́̌́͆̉̊̈́̎͗̄͆̀̽́̈̌̐̊̀̍͂̽̋̇̍̉̈́͆̏̉͆͑̿͛̒̔̀̓̆́̈́̓̔̇̈́̃̋̌̀͗͆̒̑́̓̏̔̏̒͛̀̀̏̈̇̈̾͊̇̈̾͆̍̔̔͊̄̅̃̂̊͛́͛͂̽͑͑̀̄̓͊̀̃̃͛̓͑̈́͊́̈̀̿̔̒̌̌͐̎̐̈́̾̌̒͒̾̂̊̌̉̀̒̓͛̈́́͑̊͛̂́̈́͗̿̉͒̃̑̾͑̈́͆̅̃͑̉͆̐͆͂̀̄̃̋̿̎̀͐̈́͌͑̌́̓̑̓̏̒͆͊͌̏̉͋͒̓̕̕̕̕̕͘͘͘̕̕͘̕͘̚͘̕͘̚͜͜͜͜͜͜͝͝͝͝͠͠͝͠͝͝͠͝͠͝͝͝͝͝͝͝͠͠ͅͅͅͅͅȩ̷̧̛̛̛̝͙̬̻͖̹̠̞̪̯̘̭̤̠̣̙̫͕̮͔̯͙̫̪͈̹͖͚̹̼͖̫̖̥͇̳̩̲͓͐̾͗̾̉͋̈́͐̋́͐̂́̔̉̏͌̾̽͑̑̇͂̃̇̏̑̿̑̓̒͗̾́͑̊̀̏̂̂̽͊̂̓͊̃́̂̋͋́͒̒͗̏̔̂͊͛̑͒̆̂̍́̌̇̔̏̇̿̀̆̇̅̾͋͂̒̉͂̐̏̂͑̋̅̑̄̓̋̌͛͒̆̆̇̆̀̍̐̊͊̾̔̀̇̓̎͒̏̐̀̉̓̏̔̇̆̈̀̇̄͆̿͑̐̀̀̎̎͊̌̊̓͒̈́̂͆͆̂̈́́̔̂̀̿͌̅̃́̃͆̈̎̎̍͌̓̿͋́͌́̂̉̀̇̇͛̾͗̿̅̄̕̕̚͘̕̕̕̚̕͘͘͘̕̕̕͝͠͠͝͝͠͠͠͝͠͠͝͠͝͝͝͠ ̴̧̡̢̧̧̢̛̛̛̛̛̛̛̛͙̦̼͙͙̘͔̞̝̳̜͚̱̘̝̳̙̹̺̗̜͖̹̠͉̫̤͓̳̯̻̙̭̦̗͔̤͈͖̣̮͍͉̬̼̜̤̝̦͔̯͔͕̩͙̰̗̙̫̙͔̠̭̯͍͔͇̭̰̹̳̘͍͓̫̩̼̮̬̥̥̼͚̣̰̱̟̮͔͎̞̖̘̜͖͇͚͕͈̞̙̦̠̲̹̹͚̱̟̠̩͈̩̺̻͓͔͙̤̬͕͈̠̫͈͇̮̩͍̫̙̞̦̠̼̠̥̙͕͙̜̪̺̘͈̳̼̣̘̰̺̠̬͓̯̠̪͎̬̲̺̱͉̪̦̱͎͔̘̝͇̜̱̫̟̜̙̗̪̰͓͚̱̪̅̍͗̅͌̀̿̒̿̉͑̈́̓̊̈́̈̏̈́͂̀̍̒̓̈́͌̃̉̿͆͆̓͒̉͗̈́͑̀̂̀̀̎̉̋͌̋̀́͒̊̀̊̋͋͆̃͗͛̽͊͆͋̈́̅͒̌̈̉̔͑̂̊́̓̃͑̅̑̔̓͂̋̌̀̌̓̊̊̈́̈́̈̓̂̓͊̄̾̊̎̆͂̈̀̊̇̌̾̈́́͐͗̀̒̎̎́̏̄̆̃̅̈́̓̎̉̑͗͑͑̔͌̆̍͐̅̃̈́̔̅̀̇̅̂͒̈́͆͗̈̄͊́͆̇͒̈́̇̓̅͑͋̍̇̈́͋͛̈́̋͂̃͋̈́́̈́̆͑̎̓̑̂̀̋̏̉͆̾̒̏͛́̆́̈́̔̊͑̒̄͛͐͌͋̓̽́̅̆̏̇͛̇͒̍̄͒̆͗̓́̎̒͑̾͌̅̊̕͘͘̚̕͘̚̚̚̚̚̚̚͜͜͜͠͠͠͝͝͠͠͝͝͝͠͝͝͠͝͝ͅͅͅͅͅz̷̧̨̛̛̛̛̛̛̛̛̛͕̦͈̬͈̝͓̭̦̭͎͕͍̠͔͉͍͖̱̼͉̞̮̥͇͈̱̪͕͙̥̼̗̓̅̂̈́͋͒̀̌̋̂̓̊̉̽̀͊̆͌͛̓̌̉͂̒̑̀͊͂͑̉͒͆̌̌̌͆̈́̒͛͊̈́͗̈́̆͛̓͊̃̈́̔̈́̐̏̆́̒͐̈́͂͒̈́͂̿̽̊̀̐͌̿͆̀́̌́̄͋͛͆̂͂̐̀̈́̉͊͑͒̀͌̊̄̆̆̊̿̄̋̉̌͐̽̿̈́͒̔̀̃̓͂̔̈̂̄̉̈̿̈̉̍̇̽͗́̏̑̽̈́̊̂̈͑͂̓̋͆̆͗̆̀̎̉͆͒́̏͐͊̍͋̈̿̔͂͑͊̓̑̐͆͑̈́͛͊̈́̊͐͗̍͑̐͑̇̆͊̒̀̾̍̀̈́̒̍̂̈́̀͐͗̕̚͘͘̕̕͘̕͘͘̕̕̕͘̚͘̕͘̚͘͜͜͝͠͠͝͝͠͝͝͝͝͠͠͠͝͝͝͠͝͝͠͝ͅả̶̡̨̡̨̨̨̛̛̛̛̛̫̗̤̯͚̦̜̖̗̖̪̩̥̩̟̤̖̖̪̝̝̹̫̱̺̱͙̖̱̖̟͖̹̜̬̖̖̝̤̭͓͔̬͍̳̦̺̬͉̱̺͈̺͙̤͕̹̜̙̫̩̗̩͉̫̗͚̙̯͇̥̰̫͉̦͎͓̬̀͛̌̈́̈́̔̓͌̿̌͒̂̓͒̈̌̊̐̈́̈́͗̃̽͑̔̿̉̈́̋͒͒̓̓̋̿̿̄̉̓̅͐̈́̿́͐́̈̀̀͗́̇̓̽̅̌̀̾̓̾̾̇̑̄̏̈̈́̃͛̑̓̅̐̈̈́̓̈́̄͒̐̇͒̉̂̈͂͐̂̆̆̂͂͗́̏͊̊̎̀͑̃̏̏̀̾̉̓̅͊́̈̑͂̍̔̀̎͊͗̐̂̂̒͛̓̀̀̈́͂̚̕͘̚̚̚͘͘̕͜͜͝͝͠͠͠͝͠͝͝͠͠͠ͅl̵̢̡̨̧̧̡̡̛̛̛̛̛̛͙̹̹̱̯̱͔̥̩̬͎͇̳͇̺̬̲̪͇͕̱͈̮̝͎͇̤̘̥̖̰̮͍̘̲̫͙̜̣̜̮̙̫͇͍͈̱͍͇̼̰͈͈͖̠͚͇̲̞̣̩͈͍̘͖̱̜͊͒͌̋̓̽̉͊̏̎̾̓͒͑̈͗̂̀̊̑̂̈̄͐̄̾̓̇̄͂̍̏̔̈́̈́́̎̓̎͊̈́̽̌̔̎̍̾͑̽̀̀́̏͛̾̈́̅̈́̾̐͛̅͌̽̏̂̎͒͊̈̓̓͌̉͆̑͒̎̊̑̎̎̾̓̾̓̄͌̀̍͂͑͊́̇͋̉͂͊̐̌̑̄̒͐̓͂̀̈́̋̅̓̀̆̒̾̐̂̄́̄͐́͗̀͂̾͋̔̆̉̒̓̍͛̃͒̑̐͆̏̆͋͆͐̈́͒̿͛̓̅̄́̈́̀͌̔͋̔̒̄̂̇̏̀̈̆̈́̉͛́̐͊̓̔̋̊͂̈́̒̇̀́̌̅̋̀̂̆̑̀̽͐̈́̃̇̓̈̅͒̕̚̕̕̕̚̕͘͘̕̕̕̕̕̕̚͘͠͠͝͝͝͝͠͠͠͝͠͝͝͝͝ͅĝ̴̢̡̛̛̛̛̛̛̠̞̱̰̰͙̯̦̤͚̬͉̘̝̠̝̖̰͎̬̲͍̥͎̤͈̯͉͓̦͚̊̿͂̅̏̇̔͆̀̈́̊͛̈́̃̾̇̌̎̌̅̌́̄̑͒̏͊́̂̈̍͌̀̋͂̄̔̊͋̓̿̆͆̀͒̉̔̉̂͌̊̌̎̄̒͂̂́̈́̆̽͋̽̆̔̍̾̍͒̊́͌̐̉̀̄̄̀̑̀̇̾̊̓̌̓̈́͒́̑͌̾̎̑͒̓̾̈́̈̂͗̊̓̈́͂̔̐͐͂̌̌͛͛͆̓̐̾̈̎́̂́͌̔̈́̈́̇̏̄͑̇͑̏̒͌́͌̓̽̍͆̿͒͛̋̌̉̽̽̀̉͂̈́̅̄͆̏̽͋̓͑̏̇͆̓͒̽́̀͋̉͒̊͌̈́̈́͛̅̒̓͌̆́̈́̾͑͊̿̔̓͒̚͘͘͘̚̕̚͘̕̚͘̚̚̕̚̕͜͠͝͠͝͝͝͠͝͝͝͠͝͠͝͝͝͝͝͝ơ̷̢̢̧̛̛̛̳͙̻̫̠̗̥̣̤͍̣̮̳̳̮̼̄͆̒̑̀͗̏̑́͋̓̒̅̀̊͒͌̑̄̑̇̇̎̔̃́̎̀̅̓̒́̐̔̾̃̍̀́͑͌̐̒̈́̐͛̐̾̽̆̐̇̃̂̏̍̍̅͒͐̄͂͐̏̌͆͛͗̇̏͆͒͛̏͊͂̐̃̂̓̐̉̾̿̒̍̒͑͆̏̈́̍̄̓͗̑͂͂́̔̏̈́͐̈̑̒̐̽̄͊̓̔̋̑̑̔̈̒̄́̒̑̈́̍̉̾̈́̾̈̌̊̿́̾͌̔̋̈́̓́̋̏̅͐̈̅͆̈̏͆͊͆̽͆͒͊̍͆͆͌̍͋͊̒̄̒͌̏̊͑̇͆̅͑̂̋̍̑́̿̂̄͐̓͑̏̑͊̈́̈́̎͂͌͐̎͆̊̽̀̽̌͐͗̓̉͒̔̽̈́̚̕͘̕̚̕̚̚̕̕͘͘̚̕͘͘͘͜͝͠͝͝͝͝͠͠͝͝͠͠͝͝͝͝ ̸̡̧̧̡̡̢̢̡̧̢̨̡̡̨̢̨̡̛̟̳͈̱̻̹̮̭̖͔͕̝̮͚͔̣̫̫̣͕̞̥̮̠̹͍͎̱̭̻̪̪̪͎͎̻̜͕̮̥͉͖̗̯̩̪̹̺̮̼̠͈̪͕̳̤̲̼͖͎̯̭͕̙̪͓̮̩͙̠̜̝̮̹̤͎͖̙͈̬̖̻̼̖̖̜̫̖̻͖̩̻͈̪͈̪͎͖̼̠̟̦̹͓̭̥͉̬̱̮͈̬̰̗͍̣̪̻͈͓͍̟̻̳̳͔̠̙̱̣̫͙̝͓̣̞̤̼̖̞͇̳̱̤̖̥̳͕̣̟͎̞̭̘͉̦̦̳̮̹͉͕̗̟͈͙̟̘͓̙̥͓̥̰̮̫̘̣͇͓͍̠̳͉̭̯̤̯͔̥̲̼̞̃̆̈́̋͑͌̈̋̆̑͊͌̓̾͊̈́̈́̏̀̏̎̍̄̿̾̀̍̉̇̀̄̆͐̀̈̅̐̊͊̒̅̌͒̂̀̒̏̎̔͛̽̀͒̿̐̈́́̌͛͊̍̊͒͛͑͋̎̾̑̊̉̋̂̎̈́̂̈́̂̏͂̒̌͑̇̽̈́̅̉̄́̅͊͑͛̈͗͐͛̃̀̈́̃́̏̇̀͂̀̒̅͌͐̏̋͗̾̆̉͑̃̿̐̈́̀̌̈̿̊̎̈́̀̒͋͋̈́̈́̿̋̓̀̾̄͊́̈́̈́̄̎̎̂̍́͑̆̇̌͐̓͒́̆͒͆̀̏̈̿͊̏́͌͛̆̅̌̒̅̾̂̿̉͌͊̎͘͘̕͘̕͘͘̕̚͘͘̕͘̕͘͜͜͜͝͝͝͝͝͝͝͝͠ͅͅͅṫ̶̡̧̡̢̧̡̢̧̨̢̢̨̢̡̛̛̛͇͇̭̰̞͉̞̟̪͍̟̝̦̼̮͔̖͉̹̫̥̼̠̯̪̩͎̤̠̭̠̗̫̦͉͙̘̻͙̲̺̳̬̹̲͎͍͉̗͍̙͉͓̮̟̣̣̺͍̳̼̗̮̠̙̙̯̫̰̱͎̳̥͉͕̼̘̱̼͙̯͓̤̮̪̯̹͎̝͉̩̫͕̙̝͈̼̬̞̞̟͍̬̳̤̹̬͉͔͇̩̙͚̤̦̤̩̖̺̺͙̯̠͖̠̦̟̰̖͎̤̪̬̟̤͉̱̤̯͔͕̝̩͓̳̲͖͇̤̙̤̰͓̙̰͚̹͉̲̭̈́͆̏́̈́̎͛̉̒͐̓̓̈͒̐̍̈́̀̽̆̈͒̓͒͑̾̋̽͑̏̿͗͋̍́̾̀̏̿͋̃̄̑͒͐̿͋̑̾̃̇̒̌̇͂̔̈́̒̄̀̍̍̈́̌̈́͗̐́͊͂͊͆̓͌̄͊̊̈́͐͊̉̄̂̌͂̒͂͒̿̏̽͐͗̆͛̒̏̓̃̐̀́͛̿̔̚̕͘̕̕͘̚͜͜͝͠͝͠͠͝͝͠͝ͅͅͅͅe̸̢̢̡̡̨̡̡̡̨̡̧̡̡̧̡̛̛̛̳͍̱̗͓̞̮͕͚͚̬̣͇̺̘̫̻̻͉̩͙̜̤͙̦̳͔̳̙͖̝̘̗̼̟̗̦͇̝͎̬͍̫̖̮͓̦̹̫̟͓̘̱͔̞͎̱̬̺͉̘̘͚̦͔̰̹͉̯̤̘̠̟̦̲̝̻͖͖̲͎͈̞͓̪͎̰̲͕̦̹͕͔̮̣͈̗̹̤̘̝͈̪͈̻͉̞̺͈͍̩̘̼̘͈̙̬̯̜̳̻̻̩̳̤̮̯͈̭̰͐̑̀̾̔̎̅̉̀̏̋̆͂͆̃̋̉͂͋͑̊͛́̿͐̀̓̊͒̅̈́̆̓͂̒̍͂͑̎̑̆͆̒̌͐͗̏̄͋̽̈́͆̎͛̐̋̏̂̓̏͒̂͐̊̃̅̂̿̾̈́̐̾̎̍͒͌̕͘̚̕͘̚͜͜͜͜͜͜͝͝͠͝͝͝͠ͅͅͅx̴̢̢̢̢̨̢̨̡̢̢̨̨̨̢̨̡̨̡̨̢̨̛̛̛̛͓̮̰͕̹̝͕͔͓̳͖̥̻̣͖̞̥̦̹̤̠͇̞̫̗͎̖͎̲̩̦̳͎̳̠͓̳͍̝͈͓̺̤̹͙͇̟͎̩̼͓̣̭̮̟̮̪̞̲̘̼̘̙̬͇͎̼͚͓̗̬̰̜̪̖̯̬̻̗͕̤̮͙̠̦̩͔̙̤̠͓͉̟̲̭̦̘̹͉̝̰̹̬̠͚͉͓̺̩̹̥̜̟̼̜̲̺͇̭̩̫͍̭͓̤͉̥̮͙̺͚̼͔̘͉͔̯͔̪͇̯͕͈̩̯̟͇̩̠̻̙̳̠̙͍̞̫͔̺̩̹̭̞̤͙͕̖̳͔̹̮͓̝͗̃̓͂̈́̀̆̊̐̊̓̈́͊̓̈̄͌͒̈́̊̋̑̍̀́̍̈́͛̑̊̍͑̓̄͊̈̿͋̌̂̿̒̓̋͒̊̓͂̿́̇͌̀́̄̓̔̄̂̈́̓̾͂̔͋͑̃̍͒̊̉̈́̋̂̓͑̈́̏͑͌͛̏̑̈̿̔͛̐̉́̿̌͑͒͋͌̓́͑̐͛͂̓͗̅̉̆̒͛̒͛̓̿͐̆̽̈́̓́̅̊̆́̄̾̀̉͆͑̓̓̀̀̒̆͂̉͆͛͆̎̿̏͐̀͆̈́̄͂̏̇̉̾͌̾̐̓̿͊͛̒̓̊̀̄̂̇̽̒̓̀̎̍̂̈̆̏̄͒͆͌̎̊̆̓̕͘̚̕̚͘̕̚̚͘͘̕̚̕͘͜͜͜͜͠͝͝͠͝͠͠͝͠͠͠͝ͅͅͅͅͅͅt̶̢̡̡̢̨̧̢̢̨̡̢̧̢̡̢̧̛̛͙̞̗̹̞̯̞̜̗͍̠͕̞̘͍̝̮͔̥̤̥̜͕̙̪͖̖͔̳̠̩̭͈̘͔̣̦͍̟̤̦̱̲͍̝̥͈̝̜̗̹̙̫̖̘̣̰̣̰͖̳̮̖̭̳̺͓͈̻̫̺̘̬̫̹͈̤̥͉͓͍̞̖͕̜̞͙̦͕̼̱̺̜̟̭̹͍͔̪̮͉̪͈̠̬̜̺͕͕̺̩̝͚͓̩͚̫̳̬̗͓̦̙̤̝̺̺̠́͛̊͋́̈́́͑̄̀̒̒͌̑͒̍̋̈́̆͂̏͆̉̊̆͋̍̏̍̔̒̽̂̌̾̂̃̇̀́̆̉̐̋̀͋́̃̍͂̆̿̃͑̓̊̿́̆̆̋̉́͛̓̊̉̑̓͑̋̑͛̽̽͋̋̈́͋͛͆͒͛̐͛͐̒̓̀̌̆̌̓̀̑͂̈́̇̊͋̾͊̋̑͛̄͑̿̏̇̿̊̒̑̒̿̀́͑͂͗̾̈̏̍̿̌̐̀͗̿͆͋̈́͑̽̂̽̐̓̀̿̾̍̉̉̈́͆͂̽͌͂̏̆̓̀̌͐͐̑̓͆̎̓͌͛̑̓̂̄̃̃͌̆̉̊͛̍̒̋̽͂̉̂̽̾̍̏̕̕̚̕̕̕͘̕̚̕͘͜͜͜͜͜͜͜͜͝͝͝͝͠͠͝͝͝͝͝͠͠͝͝ͅͅ.̵̧̡̢̡̢̨̢̨̢̨̢̡̡̧̡̢̨̨̡̢̧̡̢̡̢̧̢̢̧̡̨̡̨̡̡̡̛͙̦̝̺͉̖̟̺͍̳̻̠͈̭̘̖̰̼͓̳̥̩̟͉̰̜͚͇̼͚͚̼̻̩̣̺̬̗͖͍̘̗̬̼̣̞̫̜̤̤̺̖͔͉͎̘͚̥̹̺̯͖͓̫̤͇̱̮̲̠̫͔̣̗̜̗͕̖͖̺̮̳̫̜̞̼̮̟͙̙͈̰͈̭̪͖͇̟̳̖̭̭̩̟̘̺͍̝̭̦͈͈͔͓̼̻̗̺̪̱͔̲͚̟̰̪̣̯̤̺̳̳̱̣̟̠̹̱̝͉̠͈̜̱͉̘͎̪̭̭͖͓͍̝̠̫͈̙͓̝̙͖̙̜̹̥͖̜̳̣͓̰̥͖̗̣͕̙̱͍̗̻̬͇̺̝͓͈͖̠͈̭͈̝͖̺̞̖̯̟̭͙͉̲̤͈̠̪͇̫̘͓̳̥̲̤̭̯̠̣̦̺̲̠̮̖̺̫̙͛̈́̅̓̓̎̀́͊́̎̎̔̍͆̾̄̆̏̐͌̽̄͘͘͜͜͜͠͝͠͝͠ͅͅͅͅͅ ̵̨̢̧̡̧̨̢̢̢̧̢̢̨̢͔͕̯̙̺̝̳̖̳̲̖̥̪̯̣̼̥̪̤͉̝̠͈̳̹̯̻̺̤̠͉̗͙̜͇̥̯̫̙̠̻͙͙͚͇̤͇̞̼͚͍̭̼͓̭̳͙̤̻͉̦̞͙̮͔͙͕̺͈̭͚̹̹͚̺͔͍̘̹̬̣̳̥̹̤̤͖̮̺̺̬̯̗̰̩͎̼̮̫̭̙͇̥͈̟͙͖̘͙͚̻͉̻̖̺͉̣̖͉̞̝̲̞̗̬͌̍́̈́̋̽̄̓̍͛̉̾̏̈̈́́̋̈́̾̒͑̽̔̍̈́͗́͘̕̚͜͜͜͜͝ͅI̸̧̢̧̝̰̻̲̖͙͙̗͖͚̦̬̘̩̘̜͈̹̗̰̮͙̞͓̰̹̦͔̠̲̣̖͈̭̎̀̎͒̎̈̉̓̀̈̀̎̎̍̆̐͒́͊̇̂̔̍̄̔͌̌̄̈́̌̈́̈́̈̾̂̇̓̆̾̋̎̉͂̿͒͘̕̚͘͠͝f̶̨̢̢̢̡̨̧̡̨̢̨̡̢̨̧̨̡̢̡̡̛͖̗͍̪̤͕̩̦̥̜̰̣̖̟̤̭͕̞͈̬̮͈̜̙̤͚̖͔̻̩͚̳͓̘̥̦̗̠͓̯̭̻̝̩͎̟̫̱̭͔͉̮̥̼̪̣̼̩̭̲̲͉̭̮̞̜̣̠͎̘̰̯̻̥͍̫͈̩̩̥̞̟͕̬̯̥̬̮͍̲̼̬̱̻͖̻̮̻͈̪͇̪̞̝̠̮̺̩̜͙͔̼͈̫͇̥̺͈͙̯̣̻̥̘̬͇̲̬̫̰̻͔̟̩̳͕̭͙͓͓̤͉̜͚̪̜̙̙̲̰̝̮͓̬̰͖͉̭̻́̅̈́͗͑̇͌͒̃͒̈́̒͐͊̇̿̈́̉̄̀̅̂͋̔͊̈́͑̎̕͘͜͠͠ͅͅͅͅ ̵̨̢̧̡̧̢̨̡̢̛̛̛͎̙͙̫͖̭̹̺̖̥͔̱̳͎͔͚̺̤̼̯̬̫͓̱̦̰̫̹̩̝̣̝̠̯͚͓̤̖̖̼͉̬̭̟̱̘̟̞̲̲̜̞͇̲̲̠͎̺̦̝̥̟͕̺̰̣̬͚̬̩̩͖̣̜̖͕̬̭͎̲̜̙̟̹̪̻̟̜͚̣̻̩̙̠̣̟̖̖͎̫̳̙̘̹͍̜͕̣̤͔̤̪̫̥͉̜̬͍͎̼̩̟͚̺̹͉̱̭̹̳̝̲̦͍̯̙͓̙͕̜͖͖̹̞̞͈̝̝̜͕̥͍̥͓̲͖̜̜͕̽́̀̈̊̀͒̊̈́͐̍̀̓̊̉̅̀̉͐͊̌̐̆̄̀̂̍̐̈́̑̎͆̅̏̄̍̓̈́̎̆͌͛̔̓̒̈́̀̂̿̎͒͗͊̅̅̓̂̊̆̄̊̂͛͊́̐̾͋̄̀͗͌͗̉̓̒͆́̓̉̆̎͂̈́͐̕̕̚̕̕͜͜͜͜͝͝͝͝͠͝ͅͅy̷̧̡̡̧̧̨̡̢̡̛̛̛̛̞̫̭̤͇̗̜̞̥̖͇̫̠͎̜̝̹͚̺̗̯̯̭̘̳̖̳̺͚̟͓̠̹̟͎͕̠͎͕͔̻̥̦̠̻͎̳̳̰͓̫̳̖̤̺͐̔̄́̄̑̈̓̍̉́̏͂͐̾̉͆̾̈̃̃͌͊̉͗͋̋̎͆͂̑̃͋̆̅̓͛̌̃̎̂̑̉̌̆͛̍̉̾̃̀͂̾͌̌̓̿͊̌͑́͌̀̇͛͊̀̀͗͆́͑͒̿̀́̾̓̉̍̅͆͐̔̋͌̊̅̇̇͋̅̍̊͒̑͂̅̅̀̓͋̊͊͆͑̋̇̈́̀́̅̊̎͂̋͑́̑̿̏̐͐̈́̍͌͛̂̎̎̂͆́̎̀̏́͗̌̉̊̈͑͌̔͌̈́͑̊̚̕̚̕̚̕̚̚̕͘͜͠͠͝͠͠͠͠͝͠ͅͅǫ̶̨̨̡̨̧̧̡̨̧̨̢̡̡̧̨̡̢̡̡̢̧̡̨̧̢̡̡̡̡̛̛̛̛̻̭͙̯̺͓̜̖͈̬̤͔͇͉̥̱̮̯͔̫̼̥̩̹̜̤̱̬̟̲̬̺̠͙͙̬̗̣͙̗̼̗̙̞̘̲̤̯̞̱̖͉̫̻̯̦̳̙̫͓̼̣͈̳͚̯̞͖̟͖̞̪̝̼̪͍̲͖̟̘̱̮̦͓̤̩̫̦̻̱̱̯͕͔̮̞̟͓̲̗̻̫̫̫̯̪͙̯͙̪̜̗̰̦̺̲̜̣̪͓̪̳̲̞͈̟̬̮̙̟̼͙̭̦̣̻̝̭̥̣͔̞͈͕̯̺͚̮̱̗̖͍̼̼̬̺̗̙͕̘͖̹̣̠̩̱͍͇̪̜̹̤̖̪͕͍̙̗̻̥̱͇̥̲̫̮̹̗̦̩̹̦̝͙̲̥͕̺͕͚̻̣̲̟̜̘̖̥̥̹͙͕̊͌̈̐̎̀̇̽̇̀̈́̉̎̀̍̌̌̀̏̒͛͆́͗̋͌̔̍́̈̾͒̀̑̈̑̀̌̈́̇̋́̎̇́̊͊͗̉͂͒͊̓͛̓̓̋̒̿̐͆͋̉̊̇͌̾̈́̅͆̌̈́̊̑̆̉̌̇́͌̽̏̂́̃̀͒͛̓̃̌̓̉̿͗͂̉̾̽̓̊̊̓̓̏͐̓̅̀͒́̓̾̃̀͋̎̔̒̑̒̕̚̚͘̕̕̕͘̚̕͜͜͜͜͜͜͜͜͜͝͝͝͝͠͝͠͠͝͝͠͝͝͠͝͝ͅͅͅͅų̵̢̧̡̧̨̢̢̨̧̗̝̤̩̗͈̼̩̻̤̞͖̜͓̰̥͓̝̬̲̝̪̬͔̦̖͕̱̞̖͍͔̰͕̬̝̼͙̪̝͓͚̣̥̰͈̖̹̜̜͎̝͖͍̭̯̹͈̣̖̮̟̼̥̩̪̹̳͎̙̖͚̳͚̗̠̱͙͉͙̺̭̥͙̠̻̯͇̻̯̯̼́͋̌̓̈́͋́͗͒͒͌̈̏̊̍̉̓͒̋͐̅͆͂̄̓͐̋̃̚͠͝ͅͅ ̸̨̛̛̘̹̓̆̈́̿̈́͑̎̔̉̇̈́̈̿́̽̋͊̆̋̇͗̒͒̈̽̆͐̉́̆͂̌̍̇̐̎̈́̐̔͑͑̅͑̈̈͌͂̔́͆́͆̓͂̈́̐͂̓̎̂̉͆̇̅̎̾́̀͊̀̽̀͗̽̏̅̊́̆̌̚̕̚̕͘͝͝͝͝͝͠͠͠͝ç̵̡̢̨̢̧̨̡̨̢̧̢̧̧̧̢̢̢̧̡̡̢̧̛̛̛̳̰͉̤͔̱͙̤̟͖̮͙̰̫͚̹͓̻͙͚̫̟͖̲̮̣̰̣̫͕̪̱͙̫̟̰̳̻̫̤͖͖̞̞̗̺͇͍͇̭͔̗͖̪̖̥͉̙̘̪̠͔̮̤̲̻͍͉̦̞͎͕̬̗̟͉̯͔̦͕̯̭͙̤̭͎͕̦̰̯̜̥̗͓̟̣̘̞̙͓͍̤͉͔̤̗̼̘̳̼̱̲̭̻̝̬̙͎̳͖͈̙͇̗͇̩̥̣̣̘̯͈͖̝̘̭͍͙̻̮̯̬̯̯̯̫̘͚̭̗̟̗̳̟̰̠͕͚͓̹̩̫͈͖̥̼̩̤̩͎͖̤͖̬͍̦͎̩̥̖̙̹͈̜͔͇̦̲̜̻̰̩͕̮̥͇̜̙̣̤̪̻͎̬̲̰̼̳̅͌͛̽̒̑̆͗̓̈́̈́̏̑̽̀̇͂̎̐̋̎͛̑̀̀͂́͂̽̎̑̌͋̀̄͗̇̍̔̔̅͌͐̍̓̈́̿́̈́́̌̏͋̒̆̀͑͊̃͌́͂̄̇̾̃̌̉̀͊̋̀̓̓̀̈̊̑̐̌͊͗͆̊̎͒̽͊̉́̎̂̎͆̈́͐̾̉͐̑̑̾̂̋̓̽͊̈́̆̈́̇̀̌̉̑̿̋̃̓́͒͊̄̓̈́̏̅̐̋̑́̚̕̚͘̚̚̕͘͘͜͜͜͠͠͝͝͠͠͝ͅä̷̡̨̢̨̨̧̨̡̧̨̨̡̡̧̧̢̨̛̛̛̛̛̛̛̱̞͓̣̯̞̮̫̮̗̮̝͎̟̟̺̤̮̺̙͖̬̪̯̹͚̥͇̖̣͖̼̦̯͚̬͖̪̥̤͚̰̳͚̣̰̼̱̣̥̗̥͈̳͍̦̫̪̼͍̗̟͚̤̜̥̞̞͇̮̰̙͓̳̼͓̩͎̜̯̭̞͖͉̫̜̩̞̹̺̠̗̘͕̫͖̯̼̙̳̥̹͎̰̙́̉͌̎̈̐̉́̾̽̑̊̋́̀̒̔́̄́̄̌̎̌̔͑̅̃̾̂͂̇̇̏̄͋̎͗̎͗͆̈̌̊̃̂́͒̄̋̓̌̆̈́̾̈́̀̀̌͒̓̎̓̌͐̈́͂̓̽̋̓̽͂͑͋̎̓͊̅̌̍̉̈͗̀͌̈́̊͑̋̊̀̃̐̐̽̒̄̀̈͂̓͒̍͗́̔́̅̆̄́̌̀̈̒̍̓͂̍̔̂̔̈́̄̀́͒́̐́̏̐̅̏͛̎̐̏́͌̂͑̄̽̆̑̉͗̊̓̐̐̽̃̉̔̋̓̽͗͊̓̔͆̎̌̈́͑̑̃͘̕̕̕͘͘̕̕̚͘̚̕̕͜͠͝͝͠͠͠͝͝͝͝ͅͅṉ̴̢̧̡̨̧̢̢̢̡̢̢̧̡̨̛̛̛̛̛̛̛̛̛̹̲̲̲̫̥͔̱̪̝̬̦̤̹̯͍͖̦͖̻̟̖̹͎̞͈̰̯̖̥̳͎̥̞̩̰̹̲̠̺̖̝̬̹̰̮̫͓͓̞̥̻̗͍͓̖̩̠̱̞̱̣̜͚̤̲͍̮̳̠̼̭͎̦̖̗̲̟̦̻̰͍̖̟̖̲̯̲̣͔͇͎͔̹͔̱̪̹̼̹̙̲̙͚̣̟͎͙̺̳̹͙͕̙̞̩̲̞̻̗͖͈̱̠͖͙͉̜̙͇͈͓̝̙͚̘͖͚͓̘̯̫̖̜̘͖̺͙͔̻̭̲̲̫̦̠̝̳̩̮̤̪̼̺͚͍̹̭̺̜͈̺̭̹̲̮̫̞͍̫̱̠̜̹̹̦͈̘̩̯̺̱̈́̈̂̽̇͒̄̈̏̈̀̀̀̈͒̍͂̈́̓̀͛̀̒̈́̔̐͑̀̽͛̑̍͑̔̈́̉͆̉͂̒̄̅̎́͊̀͛̏̊͆́͛͒̈̔̌̾́̈̽̒͑̂̅̽̈̈́͒̊̔̈́̄͆̌͒̽̀̓̎̋̊̋͑͌͐̋̊͗̓͌̅̇̒̆̈́̈̔̽̋͆́͑̒̈̔̓̌͐͒̂̿̀̍̑̌̒̌̓͗̃̀͑͛̃̌̑̂͛̊̄͒̅̑̈̽̎͆̑̅̓̊̓͐̅̍̇̀̐̈̎̃̀̋̊̊̇̐̇͑̐͋̒̄͌̽͑̊̇̎̽̐̈́̏̇͋͐̋̆̽̐͛́̍̅̅̊͐̚̚̕̚̕̚̚̚̕̕̕̚͘̚͘̕̕͜͜͜͜͝͠͝͝͝͝͝͠͝͠͠͝͠͝͝͝͝͠͠ͅͅͅ ̷̨̛̛̛͉͓̞̖͍̹̜̲͕̺͚̣̞̮̝̝̟͍̞̾͑̐͋͆̀̌̀̇̃̀͒̈́͐͌̆͗̐̾̃́̌̐̒̇͑͆̆̆͗̈̊͒̓̔͆̽̅̔̽̋̆͐͋̽̀̍͑̌̇̄̓̈́̽̈́́́̌͐̇̌̒͊́̎̃̄͗̊̾͑͌́́̈́͑̎̐̐̉̅͌̌͌̎̿͊̈́̅̅̀͛̽̌́̀͌̅͂̈́͊̈͑͆͆̏̀̍̔̓͂̄̕̚̕̚̚̚̚͘͝͠͝͠͠͝͝͝͝͠ŗ̷̡̢̧̢̨̡̨̨̧̢̢̡̧̡̨̧̧̛̛̛̜̟͇̥̗̤͈̹͕͕͓͉͉̲̜͎̼͎̭̮̬̖̳̘̜̤͚̙̗̦̰̪͕̙͔̻̫͎̫͇̤̪̗̲̫͔̣͓͖̲͎̹̳͔̙̥̥̫͎͔̪̮̫͇̠̦̪̱̬͔̹̯̩͈̮̞̟̖̠̬̘̟͇̺̗͍̙͙̺̪̟̻̟̰͈͖̙̘̠̭͍͎̟̻̒̔̈̑͛̈́̐́̔̅̿̄̓̋̌̉͒̂̈̈̿̄̊̃̾̌̓́̇̃͗͐͆̓̇͋̀̉̇́͒̽̒̆̍͋̃̀̒̇̎̑̿͆͂̍͌̀̓͋̒̊́̆͒̿̉̋͂͑͆͒́͊̎̿͂̔̄̎̈́͐͋̿̋̒͆̔͌̐̂̐̿̿̇͗͗̈́̈̋̾̈̈̆̈́͐͂́̽̇̑̀̃̊͛̆͂̿̈͊̄͋̆̌̀́͒̅̄̑̈̿̍̑̐̚̚̚͘͘̕̚͘̚̚̚̕̚͜͜͜͠͝͝͠͠ͅͅͅͅͅͅͅͅe̸̢̡̧̡̢̨̨̧̨̡̢̢̢̧̡̡̡̢̧̧̛̛̛̲̜̖̰̺̯̙͖̫̗̪̰̗͕̫͕͙̯̯̪̪̯͚̫̠͇̖͓͖̦̠͚͇̞̱͎̱̼̹̟̬̦̤̜̲̗̹̝͚͖̮̼̰̳̯͚͚͍̯̱̥̣̺͇̩̤͓̠̹͇̭̰̥͓͖̞̯͚͎̹̣͉̜̻̻̫͙̰̙̟͈͎̫͓̣̟̮̦̜̳̬̘͕̠̺̫̳̺̗̟͍̹̜̖̩̝̖͕̙̰͈̦̣͉̻̙̦̙̩̰̠̳̬̳̤̩͈͈̭͍̯͇̯̳̠̫̘̫̪̠͉̻̦̳͈̲͇̣͖͍̗͍̮̜͖͈̼͚̙̝̟̰̿̒̌͂̀͆͊́́̀̀͆̑̌͂̀́͐́̿͋͐͑̂͛̿͋̉̒͗̽̆̽̂̃̋̃̍̐̾̇̇̑̽̃̋̃͊̓͆̀̀͂̔̏̈́̍̓̔͛̔̌̀̈́̏̎͗̇̉̐̉̆̀̒̍̎̓́͐̍͌̑̂͊͋̾̌̂̾̋͋̈̄̾̔̏̎͒͒̔̿̔̚͘͘̚̚͜͜͜͜͜͜͜͝͝͝͝͝͠͠͝ͅͅͅā̶̡̢̡̨̨̢̧̧̨̨̡̡̛̟̦̘̼̟̭͕̯͙̩͍̦̘̘͈͓͎̗͈̺͉̟̜̘̙̱̘̻̯̹̗̻͕̜͍̳̼͔̤͕͓̗̯̹̤̥͖̻̗̗͎̪͎̥͍̗̲͕̯̝̗̝̬̤͎̦͓̱̪͚͔̉͋̑̀̉̒͊̈́́͛̀̑̋̒̿̒̌̊̓̋̓̌͑̈́̌̄̎̇̓̉̿̍̊͊́̈̾͛̓̇̿̈́̄͑̃̿͆̈̇͌̕͜͝͠͝ḑ̸̡̢̢̨̧̧̡̡̢̡̢̨̡̧̧̡̧̨̨̡̧̧͖̝̯͇̟̹̖̳͖̺̬̤̣̞̮̫̗͓̩̹̦̦̼̼̝͙̦̤̝͈͇̹̥̤̺̬̳͎̙̻̪͖̳̟̥̗̪̭̯̺͚͚͍̙̲͙̱͔̩̯̜͕͍̮̼͉͈̖͇̻̦͉͇̙̖͈͉̩̫͎̣̳̱̺͓̺̠̬͚͉̹̯̠̻̩̱̝͉͈̫͈̻̩̲͓̻͈̭̈́̾͂͐͂̾̐̾̌́̇̽̇̋͒͂̀͋̇̃̽̄͋͌̄̐̂̔̅̿̈́͌̅͐͌͐̑͆̾̒̕͘͘͘͜͜͝͝͝͝͝͝͝͝ͅ ̶̧̢̛̺̥̩̤͇͔̠̙̙̼̟͉̖͎͍̗̬̞͔͓͔̫̯͕̬͇͍̥̯͍͉͖̯̼̠̺̠̫̠̯̬̳̭̬͖̖͔̻̓̊̌̆̒̈͐̽͐̋̂͑̌̔̈́̋͌͑͂̿̈́̂̄̆̀́̎͋̇̀̏̓̃̉̿́̍͗̈́̏̒͆̀̈͊̋̋̈́̅̈́͌͋͋̒̽̋̃͂̍́̾̀͐̉͗͊̿͋̍͗̀̀̆͂̍̈́̂̑͋̐̄͆̋̉͐̈́̊̈͂̆̍́̿̐͆̃̉̉̀͐̇͑͗̈͊͆̾̇͊͋͛͐͑̄͐̒̀̏͆̋̔̎̏̽̃̒̃̄͋͆͋́̆͐̔̃͑̑͌̒̓͆͒̐͆̿͆͗̔͆̃̿͂͗̍͛̽̈̚̚̚͘̕͘̕̕͘͜͜͝͝͝͝͝͠͠ͅͅt̴̡̡̡̧̢̢̨̡̛̥͔̭͕̞̣͈͖̭̪͕̭͕̙̭̖̟͔̦̘͎̹͚̣̺̟̭͖̻͇̤̼͈̳̩̞̹̙̣͚̗̜̣̜͇̭̘͉̖̰̖̦̼͔͓̘͉̲͖̤̘̹̩̻͉̤̯̦͉̗͔̬̱̘̗̙̠͍͇̜͍̪̱̟͈̭͎͇͎̱̼͎̗̹̝͙̣̲̜͔̯̭̟̙̦̟͇̞̯̫̯͖̱̟͚̯̥̟̙̮̤̠̞̟̘͂̓̌̐͗́̐̃̎͌͂̾̏͋̈̈́̀̎̅̔̈́͑̚̕ͅh̴̢̡̢̡̢̢̡̨̡̡̧̢̧̢̧̧̨̡̡̧̢̛̛̛̛̛̞̘̥͇̲̮͍̣͚̺̘̳͍͔̹͕̟̼̩̘͈̻̥̣̪̮̭͔̺͔̭̘̲͍̝͔̣̱̩̖̝̝͔̭͚͚̠̙̫͓͈̰̹͍͈̫̣͔̘͇̹̣̖͚͍͚̻̖͙̟͖̜͔̯̬̠̥̖̪͚̦̙̹͈̞̞͔͍̺̘̩̝̭̬̱͙͔̟̺̞̤͎̣̟̮̹̗͇̦͙̩̬̯̖͖͚̥̼͕̲͈̻͎̲͍̱̠̟̱̞̜̥͇̹̘͎͇̪̩̲̼̬͎̜̱̫͈̱̬̜̬͙͙̩̳̩̹̟͈̣̝͉̩͖̞̲̯̱̙̫̘̖̣̼̲̘̘͙̙̩͇̤̫͍̹̣̫͙̦͓̼̦̫̮̰̜̫̭̲͇̏̋͆̉͊̊̀̋́́̉͆͂̏͆̉̓̈̄̾̈́̽̑̍̏͂͋̎͑̈́̆͌̈́̑̈̏͂̓̉͊̀͋̀̃̆̆̓̋̇̓̔̔̄̈́̓̎͆͆͊͑͂̈̓͂͌́̉̋̒̉̓̑̓̽̉̅̓̔́͒̇̏͛̎̓͌̽̀̀̀͛̃̈́̅͋̀̐̉̓̏̉̅̍̈́̈́͛̀̓̑̀̌͂́̄̑̉́́́̀͋͊̍̃̋͌͋̑͐̈́̓̐́̓̇̅̆̐̅̐͌͐̑̈́̔̏̐͌͂̉̂͘͘̚͘̕̚̕̕̕̚͜͜͜͜͜͜͜͝͝͠͝͝͝͝͝͠͠͝͠͝ͅį̷̧̧̧̡̢̡̨̧̡̢̢̢̡̨̧̢̨̛̛̲̠̼̙̘̤͍͕͈͖̜̤̩̞͍̮̟̪̺̪͕̖͕̺̞̟̣̜͙̤̥̖̮̪͙̘̫̭̫̻̩̯̠̫̥̯̞̲̪̮̟̫̬̰̝͙͍̝̩̥̮̟̬̲̜̥̮͎̳̠̭̳̜̗̜͓̬̠̺͍̜̖̜͚̜̻̗̰̗͓̪̜͔̞̠̳͉͇͎͍͙͔̜̰͖̬̹̞̯͍͓͍̩̬̖̞̳̫͉͈̝̹̳̘͓͖̞̰̘̯̬͎͉̦̭̬͓̳͔̜͓̹̦̤̹͈̥̻̠̪̣̬̱̼̜͉̬̞͇̩̣̗͚̥͇̝̘͙̻͉̝̘̬̖̯̟̭̖͇̭̈̎͛̑̈́̒̉̒́̈́́̊́̇̽̄̈́̂͒̈̾͐̓̈́̏̀͋̀̎̐͛̅̿̉͒̍̔̾̒̆̈́̽͋͌͒͗̌͐̓̏̉̀̓͐̿́̿̌̿͐̒͑̽̿̀̽̈́͐̓̅̾̑͆͗͋̄̌̍̀̓̓̍͂͂́̃͌̐̈́̂̈́͌̿̈́͆̈́̉͊̉̈́͐̂̄͛̃̈̋͂͐͂̈͒̋̍̊̇͌͂̾̏̆͌͂̈́̈̉̈́̀̑͂̈́̃̾̈́̽̓͗̃̈̐͌͋̌̈́͂̏̿̔̋̔̿̌́́͋̿̏͗̈͆̾̇͐̃̉̆͒͋̅͆̎̾͗͌͑̍̍̓͋͋͒̑̋̔̐̅̄̿̒̚͘͘̕͘̕̚̚̚̚̕̚̕͜͜͜͜͜͜͜͜͝͝͝͠͝͝͠͝͝͠͝͝͝͝͝͝͠͠͝͠ͅͅͅş̷̡̧̧̨̧̧̛̺̝̺͉̺̗̱̰̤͓̥̼̝͇̻̥͎͈͕͖͇̟̻͕̰̙͉͉͎͔̦͇̫̝͖͚̟̱̱͔͔̪̭̖͍͈̝̠̬̼̰̰̞͈͔͎̲̝͙̻̼̦̘̠̹͚̯̗̝͈̰̺̣̱̞͎͎̦̺̖͎̩̺̪̟͈̯̥͔͎͉͍̬̮̯̱̺͈̱̗̥̺̱̘̠̗͈̻̫̠̭͖͈̝̤͕̪̦̟͉͉̜̜͕̹̜͈̘̺̘̲̥̳̻̘͖̬͚̬͕̥̖͔͕̤̟͚̱̣̇̈́̿̿̒͗͌̐͗̾͗̅̀̐̓̈̉̀̇̈́̆̃̈̇̎̄̄͌̑̓͛̌͊̾͑̉̐͊͆́͊̑͂͒͂͐̃͊̈́̆͑͛̑̉̎̉́͐͛̇͐̓͌͂̈́̾̂̿͗̈́͑̓̎͒̈́̓͋͒̆̒̐̏̏͋̅͛̅͆͒̒̏̈́̒̀̾͗̌͐̒̏̽̃̐̇͐̈́̂́̈̐̒͌̋̔̂̉̈̑̑̂̆̓̑̍̿̉͋̑̄͂̿͐̓̒͐̂̈́͑͒̒̆̃̍̀̃̈́̏͐̔̊̂̀̾̀̍̈́̏͆̇̌̀́͐̀̈́̐̏̅͌̔͗͑̀͌͂̉̑̊̅͒́̀̾̃͗́̀̄̉̑̀̎̑̌͑́̾̐̀̀̀̊̽̔̌͛̽̀̑̾̉̎͂͋͂̃̃̌̊̃̓̇̒̂̎́͋̒́͗͋̈́̓͐̑̾̆͊̿̔̅͛̏̂̀̈́̈́͌̄̔̓̚̕̚͘̕͘͘̚̚͘̚͘͘͘̕͘̕̕͘̚̕͘͘̕͘͜͜͜͜͜͜͜͜͜͜͝͠͝͠͝͝͠͝͝͠͝͠͝͝͝͝͠͝͠͠͠ͅͅͅͅ,̸̨̡̨̡̧̡̨̢̧̡̢̡̡̡̡̧̢̧̡̨̨̛̛̫̝̲̣̱̩̞͍͚̝͉̙͖̝̱͙̱̜͇̞͖͕̻̼͖̰͇̖̹̲̼͔̼͚̠͔͙͕̺̰̯̠̤͕̗͉̙̞͕̻̥̦̼̬̪̰̲̞͉̦͚̥̖̱͈͎̰̘̭̱͚͕̲͙͍̞͉͉͇̘̗̝̙̮͇̺̣̲͙̪̥̲̦̭̭̱̗̪͕̺̦͇̗͉̞̲͎̞͇̰̞͎̱͈͕͚̳͖͕͈̣̲̗̥̬̳͖̝̞̭̜̟̱̮̩̼̼̦͓͚̫̠̪̣̫͉̫̮̠͔͚͕͕̗̼̻̭̼̲͍̳̫̙͉̞̰̝̲̻̹̹͖̜͍͎͈̘͔͈̩̰̩͖̲̟̞̟̭̟̱͕̳͈͕̤͖͔̣͚̲̯͓̙̙̤̩̺͖̪̫̮̬̩͔̩̩͖̯͖̘̲̪̬̙͇̹͎̲̱̲͇̱̜͙̻̊̇̉̅̽̿͋̅͛͒̌͑̒̿̑̈́̇́̋̉͑͆̽͛̿̈̉̑͊̓́́̓̈́̔̿̀̀̓͌̽̅̓̃̋̆̾̓̀̽̄̏̋̈́͌́͊́̀̾̐̑͗͐̀̓̂͛́̌̐͛̈́͛̉̎́̏͗̌̋̔̉͗̑̉̅̅͊͛̽̑̔̽̀̑̌̄̂́́̔̏̈́́̈́̈́̋̀͌͊̌̽̃̐̄̔̍̊̆̽̾̏́̐̽̑̄̍̈̑͆͒̿͗̐̈̍̈́̀͒̽͌͂͆͑͐̔̌̀͒͆̕͘̕͘̚͘̚̕̚͜͜͝͝͠͠͝͠͠͝͝͠͝͝ͅͅ ̷̧̡̡̧̧̨̡̢̧̢̢̢̨̡̢̧̧̧̢̢̧̡̧̢̡̢̨̡̧̡̧̛͔̞̮͙̰̼͓̲̳͈͈̭̺̳̺̜͔͓͓̟̟̝̖̪̰̰̖̙͕̱̮̗̯̠̝̬̟̫͎͙͉̼͎̹͈͇̜̖̪̮͕̝͍̫̖͖̜̻̫̟̰̝͚̪̟̬̱̰̣̥̬̮̝̹̹̻̝͎̝̜̖̦̟̟͙͔̙̭̹͚̻͇̬̖͉̙͕̥̜̜̪̝͎̰̠̠̟͕̻̼̺̖͙̟̬̝̫̭̼͚̟̣̠͔̦̖̣̳͎̳̠̞̮̮̦̥͎̪̺̬͖̳̤̣͎̮̝͔̖̹͕̗̮̗̬̤̤̠̗̯̱̪̣̯̪̭̹͉̞̬͈̞̗̞̟̻̬̫̦̘̹̱͉̖͍͍̹̰̖͓̞͍͙̗͔̟͎̥̙̮͍͕̗̟̩̰͚̞̳̭̯͖̪̮̹͈̯͍̝̜͓̼̖̖͍͇̩͔̮̳̪͇͍̠̯͓̜͔͍͈͓̘͎̞͚̱̟̠͍̲̰̄̂͌̿̉̿̐̎̔̏́͒͛̆͐̈́͂́͗͂̀͐͂̈̋́̕̚͘͘͘̚͜͜͜͜͜͜͜͜͜͜͜͜͝͠ͅͅͅͅͅt̴̡̡̧̨̨̡̢̢̨̢̨̢̡̧̡̢̡̡̡̢̡̨̨̡̢̧̡̨̢̛̪͚͙͉̞͔̹̤͉̤̭̝̻͉̥̼̯̣͈̩͎̲͇̮̪̗͓̞̪͔̮͕̟̭͙̞̲̣̪̳̥͎̖̣͉͔̖̪̫̯̪̣̯͈̦̜͕͇̼̲̝͎̭͍͇̥͇̯̼͍̭͔͚̘̣̤͔͍̦̖̣̭̘̼͍̭̯̲͕̫͎̟̹̠̲̝̭͍͉͉̱͕̻̻̫̺͚̘̩̫̹̖̩̠̘̯̯̟̺͍̳̖̻̞̗͉̞̜͔̦̺̟̞͇̹̯̱̺͎̭̠̙͎͇̗̱̪͓̻̬̫͈̹̲̭͍̱͍̮͔͓̪̩̪͉̜̙͎̹͚͔̺̩͍̫̠̫̦̹̮̙̠̖̳̂͂͌̈́̽͆͑͐͗͌̌̏̎̀̏͑̒̐̈́͗̊͌̊̉͐̿̂̌̒̈̈́̍̎̈́̌̏͗̓̀̔̑̀͑̊͛̀̃͒͋̈͋̒̄͌͒̑̀̆͐̀̅̃̈́̓̌̍̎̓̌͛̊̈̿̃̐̇̏̏̃̔̐̇͊̎͋̍̒̄̉̔̂̀͗͗̔̊̆̐̽̇̊̎̾̈́̓̇̊̆̌̀̓͆͂̚͘̕͘̚͘͘̚̕͘͘͘͘͜͜͜͜͜͜͜͝͠͠͝͝ͅͅh̵̢̢̡̧̧̡̢̨̨̢̨̧̨̨̧̢̢̡̨̨̢̧̢̨̧̨̧̡̢̧̧̢̧̨̖̬͕̩̟͉̲͉̪̳͔̹͍̘̜͈̰̙̝̦͓͈̹̰̟̝̘̰͔͓͓̦̮͇̦̬͔̥̻̜̣̳͈͙̼̝͈̘̟̻̪͍̻̖̳̬͖̟͓̬̰̗̤͍͓̻͉̝̱̘͉͚̙͈̲͍̫̯̩̲̙̲̯̘̲͕͕̖̪̥̫̘͔̘̪̬͕͙̘̬̲͖̮̰͎̮͙̠͚̘̻͚̰̖̘̩̫̬̺̬͈̤̖̺̯̥̙̞̤̹̺͉̼͖͓̥͈̦̗̝̳̠̟̝͇͕͎̱͈̱̩̪̳̱̮͈̳̯͚̟̰̻̲̗̠̟̜̟̜̥̱̗̼̯̠͓̫̰̳̬͓̩̹͙͓͈͉̗͖̭̻̝͕̘͉̹̬̫̬̖̱̻̞̟̦̲̬̲̞̭͉̭͚͍̫͕̫͓̜̲̰͇̗̼͚̜̱̙̦̩̲͕͚̣͉̪̱̖̹̖̖̰͖̯̟̪̦͎̘̫͕͕̟̞̼͊͑͌̍͒́̍͐̔̊̐͑͛̐̽̌̅̊̊͛̓̏̊́̃́̂̎̂͛̒͒̅̓̓̄́̐̏͒̏̈́͊̒͆̌̑͛͐̾̇̒͊̄̑͒́̌̿͛͒̚͘̕̚͘̚͜͜͜͜͠͝͠ͅͅͅͅͅͅͅȩ̴̢̨̢̡̨̧̡̡̢̡̧̨̡̧̨̧̳͔̹̤̟͇͖͙̹͇̖̥͖͈͕̩͉͕̟̮̭͓̫̳͇͇̫̦̜̜͖̻͖̲̦̲̣̹̳͍̫̯̜̱̱̼̭̪̯̰̯̹̯̬̠̝̺͇̗̜̺̯̣̼̬̭͔̦̠̮̠̞͕̟͍͈͕͚̟̞̗̲̮̤͙̙̘̮̭͈̜̫̞̫̖̠̲̼̻͇̠̫͙͓̻̗̭̲̙̺̗̘̦̣̦͖̙̮̟͉̬͔͖̲̲̱̗̠̮̦͓̜̪̫̦̻̘̫̯̩̭̠̜͎̤̫̫̙̱̣̱͕̜͕͙̻̘̥͓̥̤̰̲̭͉͙̲͚̳͓̭͚͖̼͚͎̤̜̳̖͉̭̟̰̜̻̰̒̃̏̒̃͂̈̏̿́́͒͐͑͜͜͝͝͝ͅͅͅņ̵̧̡̡̧̧̧̡̨̢̧̡̧̧̨̧̨̢̛͔̭̳̪͓̭͖̤̯͙̣͍̦̜͍͙͔̩̲͎̞̙̝͉̮̮̠̖͉͓͈̻̞̙̳͓̫̠̭̼͇̣̠͈̤̲͈͈͉̻͉̘͚͖̮͎͔̮̻̼̼͖͔̪͈̭͎̰͉͈̫̥̗̦̗̝̣̫͍͉͍̦̭̫͙͙̰͎̞͈͈̜̩̝̮̞̮͓̗̞̤̪̯̙̣͕̥̝̬̗͎̠̝̼͉̣͍̰̳̥̙͎͓̖̪̹̙̝̭̩̮̤̣͈͉̝͈̹͖̙͎͍̦̠̭̤͓͈͓̟͙̝̣̘̦̱̦̪̠͊̈́̆̃̂͛̐̃̓̐̔̄́̇̎̃̅̒̔͊̂̒̄͋̾͒͒̈́̏̉̌̈́̌͗̋̀̂̀̅͌̇̋̑̿̒̓̓̀͌̍̀̉̊͌̇̋̓͂̀̒͌̅̍̿̀̍͆͑̋̄͑͒̊̃͛̉̅̒̿̒́̈́̓̈́̏̅̊̾̈́̽͗̃̀̋̅͊̍̆͂̿̎̋̒͒̋̏̽͑̍̇͆̀̿̏̆̽͐̇̒̅̉̈́̊̿̒̀̂͒̃̽͂̓̋̓͐̾̐̾͛͌̾̅͒̿̃͛̀̈́̑́̓͊̽͊̕̚̚̕̕͜͜͜͝͝͝͠͝͝͝͝͝ͅͅͅͅͅ ̶̡̧̡̢̨̨̡̨̡̧̨̨̡̨̧̨̛̛̛̛͙̫̟̠̦̮̣̹̣̯̜̣̹͉͎̯̲͉̙͈̜̬̙̬̲̼̼͇̫̫̲̗̰̲̠̪̤̞͎̬̻̗̺̥̪̣̣̝̘͔͇̰͕̣̳̲̩̙̙͕͍̟̤̥̠̯̝͖̺̠̠͕̫̜͚̠̼͎͖̹̜͎͙̯̘̟̠͓̬̣̖̤̝̣̲̹̤̙̳̫̹̭̮̦̝̙͓̪̮̥̜̩͔̦̯͇͈͈͓̮̯̹͓̩͓̳̤̗̥̺̠͖̥̩̯̱̱̭̱̫̪̝̺͖̩̱͖̭̥͚͍̝͙̩̣̹̹͈͕͕̜͔̻̭͍̭̹͇̫̟̼̤̬͂̀͐̋͑̍̓́̾̈̀͊̿̈́̂͑̿̐̀̈́̃͒͗̾͑́̾̓̓̉̓́͗̈́͗͌̈́͆͑̎̅̇̾͂̓̈̇̓̓̂̔͗͌̍̈́̆̇̈̈́͐̍́̂̉͑̎̒̉̔͋̀̾̋͋̓̄̆͆̍̍͒͛͂̂̿̒͊̎̿̒͒̏̓̽̾̑̃̏͐̅̈́̑̍̀͊͑̈͂͋̂̌̌́̀̄̽͛̒͑̐̉̓̌͂̏̇́̾̉́̄͛̋̓̍̐̓̔̀̾͐͗̓̀͆̄̍̃͛̾͐͋͋́̅̽̊̃͆͊̀̇̈́̂̾̄̑͆̏̊̈́̒̂̐̂͑͛̋̆̔̇̑̚̚̚̕͘͘̚͘̚̕͘͜͜͜͜͝͠͝͠͝͝͝͝͠͝͠͠͝͝ͅͅͅͅͅͅͅy̸̡̨̢̡̧̢̧̨̡̢̡̨̡̧̧̢̛͖͉͖͉̗̰̗̺̘̟̩̜̙͎̲͙̝̣͓͔̮͎͎̭̺̲̱͕̯̭̘͔͚͉̫̘̼̺̲̳̩͙̰̥̪̩̪̭̦̣̠̭̟͖̣̙̞̲̦͙͈̻͎̞͎̳̲͎̼͓͙̺͉̦̬̗̤͇̞̱̼̝͕̲͙͕̫̗̳̰̫̠̞̲̞̳̲̞̠̫͍͈͍̘̪͍̻̜͍͍͈̗̤͉͔̼̯̻̬̳̙̙͓̖̪̣̻̯̥̻͔͚̥͇͇̭̳͔̪͔̥̼͈̘̭̱̳̤̟͍͖̯̪̯͕͓̗͈̩͈̬̖̙̘̰̥̱̼̝̼̻̥͓̤̞̯̬̭̤̗̦̲̲͙̣͚̰̯͖͈̮̦̗͔͚̞̦͕̜̭͈̙͕̭͔͇͕̥͖͕̙͕̳͍̞͙̲̹̞͖̻̦̗̹̬̮̪͕̞͈͇̻̬͉͔̻͇͕̥̟͍͉̪͈̻͇̖͇̯̗̤̳̲̲̪̰͉̳̙̮͔̋̂̌̂͑̅̏̐̇̿͒̅̆̏̋̅̒̾͌͒̑͗̾̀̒͒̅̍̊́̓̽̉̀̐̀̿͋̏̓̆̃̎̃͛̀͆̏͐̀̔̃̅͘̚̕͜͜͜͜͜͜͜͠ͅͅͅͅͅơ̶̢̢̢̡̡̢̡̨̨̛̛̛̛̛̛̪̰̮͙͍̻͍̩̟͈̪̯̳̞̰̬̘͎͔͖͇̘͍͔̖͔͍̭͕̤͎̭͇̼̪͍̻̰̻̺̭̦̙̞̹̺̫̲͕̤̭̤͓̟̳͔̹̗̳͎̗̟͉̗̥͍̥͇̲̹͙͇̹̠̫̌̒͛͛̔̈́̀́͛̿̈́̾̉͑͌̋͑̎̀̔̏̃̽̽̆̏͑͂̎̈́̍͒͊̋̍̆̆̑̈́̎͐́́̋̂̋̓̽̇̑͒̑̅͊͛̀̔̓̃͂̆̊̀̆̑͛̿̒̂̃́͆̈́͂̈́͛̈́͋̄̿͆̽̏͋̍͗̏̀̿̅̓̈̂̊͛̽͛͒̄̀̐̌̔͋́̍̐̆͛̉͐̀͂͐͌̉̈́͋͊̌̈́̒̄̔̍͂͊͆͆̋͑̓̉̈̋͊͐͐̓̔̔͒̒͗̀̂͋̄̓̈̐̃̐͐̊̈́͛̊̿̐̅̒̐̉́̋̈́̇͑̂̒̈́̍̉́̂͒͊̓̃̉̍̄̈́̇̌̀̍̉́̈́̓̅͗̋̄̅̆̋̌̿̎͊͋͆̀͋͂̑͑͆̚͘͘͘̚̚͘̕͘̕͜͜͜͜͜͠͝͠͝͝͝͠͝͠͠͝ͅͅͅư̶̢̡̢̢̨̨̡̧̡̨̡̨̢̢̡̡̧̡̡̡̡̢̛̛͍͔͈̜̮̫̟͙͖̜͎͕̳̮̹͍̞͕̪̝̗͈̺̮̝͕͍̩͍̫̙̠̺̖͓͓̫̹̟̞̦̞̠͙̱̥̙͙̣̯̳̞̪̠̭̟͍̫̦̪͖͎̰̰̯̯̩̣͎̼͎̙̫̻̥̣̱͈̼͍̻̯͎͖͕͕̬̼̜̰̠̜͔̙̳̜̜̦̫̲͉̞̻̰͚͓̫̠̹̩̦͎͕͙̞̬̜̘̻̖̫͔̮̯͔̻͓̟͚͔̳͕̖͔̹̻͙͔͙̦͈̩̬̜̦̱͖̝͙͔͉͓͖̰̙͉̫͕̟̯̥̥͙̘̙͙͖̩̺͔͇͖̱̬̪̝̱̙̙̼̗̝̤̻̝̺͙͈͔͎͍̻͓̜̘̻̯̪̬̜̹͖͉͈̳̫̬̻̲̘̣͉̱͙̞̩̠̄̀̈́̌̓̍̇͌͛̆͒̌̍̀̅̓̃̑̆͛̀̂̈́̐͊̊̂̃͆͛̌̏̃̃̇̿̔̓̽̈́̃́̈́͘͜͜͜͜͝͝͝ͅͅͅ ̷̧̧̨̛̛̛̛̛̛͚̳̹̻͓̙͔̰̞͖̟͎̺̟̟̤͉̼̜̗̮̮̠͚̣͇̫̤̩̦̖̙͕͙̳̲̩͍͐̾̍͛̋͗̀͋̿̓͗͋͛̐̅̊̃̄͊͐̂̔̑̐͐́͌́̒̏̇̈͑͌̉̿̏̏̾̌̀̈́̂̂͑͐́̒̆̏̍̓͒͒͌̋̏̒̓̑̀͋͌̎̐̆͗̓̆́̀̆̿̕̚͘͘͘͘̚̚̕̚͘͜͝͝͠͠ͅͅa̴̡̢̢̧̢̢̧̢̨̧̨̧̧̢̧̢̛̛̛̛̛̛̛̛̳͈̬̘͔͎̟̤͕͚̜͕͓̣̜̰̩̯̝̮̜̼͖̘̜͔͙͇̟͙͔̠͈͎̭̗̤̱͍̤̥̗̠̠̪̭̖̫͚̱͚̠̣̫͍̺̦̠̪̤̣͚̳̬̙̱͉̣̥̥̫̟͖͎̲͕̹͓̙͎̭̰̙̞͈̪̠̦͔̖̻͓̠̞̫̪͉͚͙͔̰̩̫̣̰͕͖̱̦̘͈̮̠͚̮͇̳̰̫̗͍̭̦̳̘͙̲̬̮͓̥͔͔͇̩̘͓̬̤̗̪͉̘͖̾̄̈͌̉̏̇̎̄̉̇̂̿̂͐̒̓̇̽́̔͐̍̃̓̓̈́̃͑̏̈́̔̾́̑̅́̈́̽̎͊̽͂͒̈́̈́͋̑̽̎̽́̎͊̈́̄͗͗̌̇̑̒͊͒̓̓͑͊͛̉̂̉̓̍̔̌͐͛̾̈́͗͐́̑́̀̀̅́͌̄͋̇̑̋̎̀̓́̏̐̓̀̌͗̓͒͗̊̏̋̀́͌̈́̽̅̐̈́̔͌̏̽͋͌̑͐̍̇̈́̌̆̋͗͑̑́̃̾͌̅́̈́͂̍̂̈̎̐͂̉̏͆̏̍̄͐̽̒̄͛͑̀̀͛͌̑̆̈́̈́̆̀̉̑͋͊͐̾̑͊͋͋͑̍̔̋́̉̔̂͊̃̚̕͘̚͘͘̕̚͘̕̚̕͜͜͜͜͜͝͠͠͝͠͠͝͠͠͝͠͝͝͝͝ͅͅr̸̡̧̢̡̡̢̡̨̛̛̛̛̛̛̛̻̜̦̱̬̙͇̙̥̞͓̥̩̤͙͎̝̤̙̜̖̼̺̲̪̻͖̘̮̙̠͚̫̩͔̤͇̼̙̪̟̼̝̠͕͔͇̻̭̤͈̹̮̬̭̻̻̥̻͈͎͚̳̳̮̗͓̫̥̘͕͉̩͉̞̳͇͕͉̤̲̅̒̿̂̾͆̓́̒̽̓̈́̅̐͗̈́͑̔͛̋̀̈́́͋͗̅͂͒͌͊̀͂͑̌̔͐̔̈̐͊̋̓͛̒̑̌̌̀̀̂͒́̀̀̀́̎̆͐̐͑̑͆͒̏̅̐́̅̅̈́̃̋͛́́̃͛͋̓̃͊́̈̀͆́̏̏͑̈͆́͑̒̈̊͊̐̔̌̐̏̒̀͋̂̄͒͐́̂̅̌̿̀̀̏̄̈́̽̈́̊̒̀̐̍̎͆͗̓́̈̓͆͌̓̽̇̊̃̓̽̉͑̆́̊̀̏̈́̆̈́͛̏̅͑͗̅́̎͊̋̆̄͑̇̓̒̀͛̓̊͛̅̌́̓̆͒̎̃̆́́̾͌̉̾̾̇͑̑̄͒͒̊̐͗̾͊̊̅̉̽̇̉̎̀̌̅̌̽͐̓̓̇͊̑̄͐̀̿͆̽͌͑̓̄̈́̑̎̑̕͘̕̚̕̕̚̕̚̕͘̕̕͘̕͘͘̕̚̕̚̕̕͘̚͜͝͝͝͝͝͠͠͝͠͝͠͠͠͝͝͝͝͝͠͝͠͝͝͝͝͠ͅͅͅͅe̵̢̢̡̡̡̢̡̢̡̛̛̻̣͙̻͇͉̝̦̲͔̯̣̞͉͉̤̮̬̜̬̦͓͈̭͓̬̼̺̥͍̻̖͎̯̮͓͚̥͖̣͙̺̮̬̞̹̱͎͇̦͚̹͎̹̬͖̗̞͙̟̪͈͙͈͕̱͓̯̤̩̣̦̓́̋̃̇̌̀̾̑̔̐͂̈́̉̇̀͋̿̌̍̇̀̊͌̊̂̎̆̏̀̊̀̐̃̐̒̓̅̎͌̇̒͊̈́̓̄̈́̀̈̾̓̐̏̃́̌̿̔̚̕̕̕̚͜͜͜͠͝͠͝ ̵̧̡̡̢̨̧̧̢̡̢̧̧̢̢̨̢̧̢̡̢̡̢̨̨̨̢̨̧̧̨̨̧̡̡̛̛̛̛̛̛̛̛̫͔̪̳̖͍͉͉̦̦͎̹͉̻̗̗͈̻̟̲̱̥̤̞̗͉̮̭͔̬͈̘̗̮̝̳̺̼̱̘̠̩̩̞͇͕͕̱̱̲̥̹̠̼̲̰̬̟̼͕̝͉͚̺̜͕̻͇̬̩̟̖͚̞͈̰̯̹̩̞̜̳̠̟̠̬͓̦̻͙̭͇̟̣̗̩͔̲̳̞̦̲̪͈̦̬͍̟̤̪͚͙̭̜̺͕̫̠̦̜̲͉̤͇̬̯͓̥̮̠̪̳͍̤̜͖͕̦̭̬͙̯̘̗̫̣͓̝͙̬̭̙̮̮͇̭̘͎̙̩͇͙̥̝̯̺̳͕͚̤͖̺̱̲̗̹̹̳̺̦̲͖̜̦̙͖̩̦̮̠̖̳̞͙͙͈̼͉̱̯̭̯̰̬͕̣̻̰̎̽̿̾̈̆̓̉̈́̈͒͑͛̆̐̈́̿͂̒̿͌̂̋̂̑̓́̔̎̏̌̆̎̊̀̈́̀̋̋̈̈́͂̄̽̓́̓̋͆̓̀̈́͆̌̀̂́̈́̃̆̊̂̾̄͛̎́̈́̂̏͊̐͋͋̇́̏̾̓̈́̋͑͐̅̊̃̎͋̿́̆͋̂͛͌̅͑̃̊̑̋͐̈́͐̈́̓̑͛͑̑̈́͊͑͛̀̀̔̈̂̏͛̅͋̐̏̓͊̆̈̊͐͛̆̑̾̇͒̂̇̆͒̎̎́͂͊́̆́̍̄̉̅̏͐̋̈́̽̄͌̂̅̀̆͌̓̇̇̌̆͌͗͂͊̓̽̈͛͊̓̀̋͛̽̐̓͋͛̒̑̌͋͒͂͌̉́̈̏́́̀͐̇̔͂̆̇͗̈̐͒͑̿̄̇̓͋͋̒̍̏͌͒̔̒̐͊͗̌͆͋̃̍͛̀͌͛͂̄́̀̕̚̕̚̕͘̕̕͘̚̚̚͘̚̕͘̚͜͜͜͜͝͝͠͝͝͝͠͠͝͝͝͠͠͠͝͝͝͝͠͠ͅͅͅͅa̶̧̧̢̢̨̢̡̨̢̧̢̡̡̨̨̧̡̢̡̡̨̛̛̛̛͍̬̩̟̞̗͓̙̥̘̹̫͓̻̱̖̘̠̪̞̥̺̘̲̞̙͔̭̤̞̦̗̦̖̱̪͎͚̬̗͔̹̗̳͇̬̜̰̰̗̦̞̤͔̬̦̣̭̼̤̳̤̥͎̪̦̹̘͙̣͚̮̖̤̗̟͚͖̬̣̫͇͖̳̰̦̟̳͇̬̥͉̩̠̮̟̠͇͎̳̘̝͕̣͎͔̗̥̰̤̯̜̻͈̗̗̺͔͉̙͎̳̤͉̘̫̭̗͙͇̹̼̣͎͚̱̮̖̩͍̜͔͉̩̻̘̲̹̠͎̺̿̎̋͒̉͛̀͆̊̀̆̍̔̅͗̇̈̽̈́̇͌̌̽̂̽̋̇͂̓̊͋̇̽͐̈́́͐̾̌̑͒̋̌̍̀̂͌́̈̄̓͆͒̈́̋̈́̎͐̅͒͒̈́̈́̀̔̋̌̓̓̀̈́̾̌́̔͋͋̀̉͋̔̓̄̊̑̌̃͛̒̍͌̍̄͂̆̌̐̾̉̾̓͑͊̂͂̊̋͌̋̓̾̾̈́̅͌̂͌̊́̅̆̂̐̎̑̃́͗̿̾̓̆͆͘͘͘̚͘̚͘̕̕͜͜͜͜͜͜͜͜͠͝͝͝͠͝͝͠͝͝͠͠ͅͅͅͅͅͅͅ ̶̨̧̡̨̧̢̢̢̢̛̛̛̛̛̖͕͔̥̯̠͎͍͖̫̭̳̰̝̬̺̬̼̦͔̼͈͖̝͖͕͕͍̝̭̯͈͙͙͍͉͇͚̜̠̳͔͈̜̹͓̣͖̞̖̟̫͚̭͍͓͖̺̦̘̝͇̹̭͉͎̙̹̘̣̭̗͈͈͓̼͖̭͎̹͚̞̲̣̼͔͎̖̣̙̪̬͓͍̝͖̻̪͙̞̰̪̝̙͖͖͇̩̹̰͚̮̣̻̻̠̤̰̞̫̬̘͙͕͓̠͎͕̜̲̦͎̰̺̯͓̤̥͍͉͓͇̂̏́͊̽̌̎̅̀̍́̀̍̊̈́̒͋̄̔́̓͆̾̉͛̆̆̌̍̈́̀̈́͋̀̾̐̎̎͒͒̂̔̏̀͗̄̂̈́̉̍̊̀̆͑͒͛̏̃̐̓̈́̊̇̈͒́̽͂̃̈́̿̐̆͐̊̅͐̑͒͊̀̀͛̆͗̃͐̈́̿͛̆̃͑̍̐̑͋̋̏͂̒̏͛̄̓̎͋̃͗̉̅͑̽̀̾̄̐́͊̀͐̊̓̑̓́̾̈́̓͗͂̋̿̍͆̉͒̄̎̂̿̃͂̒͆̌̑̒̓̏̒͋̑̉͌̏̐̽́̄̂̀̊͗͛̉͊̎̆̐̉̎̀̒̄̋̂̓͂̊͌̈͋̽̈̈́́̃̓̾̎̉͊͋͌̅̄͐̂̋̅̚͘̚̕̕̚̕̕̕̚̚̚̕̕͘̚͜͜͜͜͝͝͠͝͝͠͝͝͝͝͠͠͠͝ͅͅͅͅl̵̨̨̢̨̨̢̧̨̨̢̨̧̡̡̡̨̧̡̡̢̛̛̮̭̩͕̼̩͇̟̘̼̲̠͖̟̱̫̥͔̬̩͇̥̩̫̞̲͚͈͈̪̳̩̼͚̹̯͙͍͇̰̲̗̳͖̹̻̯͉̼̺͔͓̟̞͍̭̞̜̱̼̦͉͕̲̻̰͍͎͔̮͈͎̜͔̭̯̠̹̟̜̥̣̮͖̙͔̱̰̗͈̦͉̙̰͔͈͔̠͈͖̺͖̞̯̜̯̯̩̠̹̰̥͍̤̙̲̩̼̩̺̲̞̤̖̘͈̰̣̦̯͈̺̯̦͉̲̥̳̘͓̝̈́̂̈́̈͐̃̆̈́́̌̀́͒̉̋̈́̎͒̍͗͒̽̃̾̈̊̇̂̿̃̓̀̍͛̀̔́̎̾̀̑̆̀̀̉́̆̂̉̆́̌͆̀̆̑̽̈́͗̿͋͂̈́̓̋͌̀͐̀̐̔͆͆̈́̈́̆̃͛͐͂̓̐̈́͒̅̽̅͋͐͘͘̚̚͘͘̚̚͜͜͜͜͜͜͜͝͠͝͝͝͝͝͝͝͝͠ͅͅͅͅͅe̷̛̛̛̱͕̮͊͆̍͋̾̽͆͛́̅̋̅̈̒̑̈́̓͌͗̈̿͆̌̌̀͆̿̂̆̈́́͊͊̒̔͊̂̿̃̆̽͆́̄̅̓̄̌̀̎̍͗͒͋͒͆̿͛̀͋̾̌̃̊͐̋̍̇́̌̈́̾̉̈́́̆̃͗̿̈́͑̏̔̈́͒́͐̃̾̏́͆̇̏̅̏̓̀͛̓͊͗̑̊̓̋̃̒͊́̈́͋̌͆̎̈́̿̏̌̈́̓̀̈̂̍̿̀̅͂̎̇͐̈́̄̈́͆̃͆́̓́̏̐͌̄̓̌̈̓̀̊̋̅̎̒̓̂̊̏͛̃͋̒̆̓͒͒͋͆̒́̀̐̅̃̃̃͂́̇̎̆̈͑̆͒́̊̾̐͒̽̂͗̍̏͊͛͊̌͋̀̅̈́̂̓͐̔͌͘̚̕͘̕̚̚͘̚̚̚̚̕̕̕̕̚̚͝͝͠͝͠͠͠͝͝͝͠͠͠͝͠͝͠͝͝͝͝g̵̢̡̡̡̡̧̨̧̡̧̢̢̨̡̨̢̢̧̨̡̡̡̨̧̢̢̨̢̧̛̪͕̳̮̝͔̲̝̲̼̪̥͓̠̪͔̞͓͙̝̟̜̖̦̖̣̣̬̤̠̤̼̱̤̮̰͚̩̼͚̰̗͍̹̼͎͇͖͕̟̻̗͉͖̣͎͓͖͖̞͈̟̹̻̳̖̱̜̱̥̺̪̼̳̣̥̜̯̭̺͇̬̮̞̳̫̳̤̦̳͕͎̦̠̣̺͕̹̞͍̼͎͇͙̮̼̬̖̳͎̼̹̩̮̦̤̠̗̰̦̮͕̪̬̟͔͇͇͉͉̖͍̯̟̼̳͓̠̗͇̝̻̺̘̦̠̪͕͎͈̬͕̲̩͇͎̞̣̲̗͙͔̭̖̻̬̠͕̼̮̼̻͇̥̹͉͈̱̰̖͖̝̱̥̘̖̦͓̟̬͈͖̘̯̱̘͙̩̖̳̱̘̭͓̼̼̩̖͔̗̰͔͕̯̺̻̰͔̫̞̳̖̼̭̬͔̝̝̮̪͙̪͊̏͊̇͗́̒̈́͂͑̈́̎̌͂͑̓͒̓̂̔̉́̉̋̅͋̓͗͗̔̑͆̽͛͒̀͐̀̒͋̅̏͗̄̉̈̽̇̍̎́̇͊̊̊̈́́̇̒͑̋͋̉̑̽̔͐̒̌̐͑̔̐̓́̈̇͒̎͒͐͆̎͆̔́̎̾͂̋͛́̃́̂͑́͒͋̽͋́͑͋̈̏̆̕̚̚̕͜͜͜͜͜͜͝͠͝͝͝͠͠͝͝͠͝͝͝ͅͅͅͅͅͅͅe̴̢̢̢̡̡̧̨̡̢̡̢̨̢̧̨̧̡̨̧̨̨̛̛̛̛̛̛̩̤̰͚͚̗̼̯̼̘̟͎͍͉̬̱̰͓͕̦͚̪̳̹͎̮̬̥͍͔̫͓͎̗̯̭̺̗̟̜͙̹̠̘̰̪̪̜͔͍̜̺̠͚͎̱̥̞̥̟̠͇̩̰̜̯̞͈͍͈̖͇͎̺͚̗̘̣̠̦̝͎͙̜̗̹̻̫̻͔̘̥̬͚͍̲̳͇̝̼̹͖̻͚̥͇̖̬̟͇̳̺̠̟͉̦̣̰͎͓̤̺̜̯̟̻̭͔͔̘̮̥̝̭̪̻͙̬̮͖̤̗̠̺̤͍͇͍̺̠̬͔̟͖̻̯̲̤̱̬̖̼̠̬̭̗̲̥̗͉̦͚͖͈͓̙̯̖̝̭̭̩͒͋͊̉͆͌̇̊̓̉̽̿͗̔̂̈̊̎̔̏́͊̾́̆͒̿̆̋̋̏͐̐̓̀͒́́̉͌̏͗̎̓̉́͐̌̾͊́͛̊̔͛̀̇̍̈̔͛̈́̏̔͊̄̈́̏̑̌̍̋͂̉̐͋́̽̓̾̏̍͒͑̍̇͛̿͛̒̏͊̒͆̐̿̋̈́̇͆̉̒̔͊̋͛̓̀̀͑̀̐̓̂̾̀͒̿̅̊͒͑̋͊̅̿́̈́̑͋͋͛̌̔̅̈̓̇̈̾̂̓̈́̔͑̆͐̌́̊͂́̈̈́̈́̉̆́̾̾̈͒͑̃̒́̿̾͂̓͛͛̏͗̄͗̓̓̀̇̉̀͘͘̚̚̚̕͘̚̕͘̚͘̕͜͜͜͜͜͜͜͜͠͠͝͠͠͝͝͠͠͝͝͝͝͠͝͠ͅͅͅn̶̢̢̢̨̡̢̨̢̢̨̡̨̢̡̧̢̡̢̨̧̨̡̢̧̛̛̛̹͖̠̻̹̻͚̦͇͇̤̲̫̼̮͎͔̟̘͎̰͖̻̲̻̥̤͉̹̼̠̣̝͍̼̺͉̰̰̰͓̣̫̰̟͔̲̞̪̺͈̥̹͙̫̦̼͎̭̳̠̯͚̯͕̺͔̞̼̪̝̭̤̠̭̼̤̫̝̩̜̱͕͕̞̗̭̬͉͙̞̯͖͇̮̯͍̩̠̰̗̭̙̙̻̲͕͍̹̙̻̩̳̫͚͓̣̞̣̞̳͚̜͇̯͚̖͍̙̭̠̼̦̤͙̳̮̮̠̼̤̣̗̲̤͇̮̥̫̤̯̝͙̹̞̭̘͍̯̤̫͎̲͎̼̪̞͎͉̠̰̫̻̼̯̦̥̫̖̮͉̹͈̥̩̰̳͓̲̲̯̝̼̝͕͎̝̠̻̫͈̬̗̣̞̜͇͎̹̻̦̪̖͎̱̗̜̣̲͙͚̙̣̮͓̖̞̪͓͙͉͕͇͚̱̤͎̣͉͙̦͚͍̜̤̖͓̔̏̒̓̆̒͗̊͂̈́̌̑́̓̇͒̎͛̊̄̐̍̑́͑̾̂͒͒̏̓͗̅̐̔̂̅̈̃͐̅͐̃̒̉̂͌͆̀̋͊́͛̊́̆͐́́͐͒͛̈́̇́̍̔̏̑͗̿̅͋͊͂̐̋̋̽͑̆̃́̾͛̍̆͑̐̋̔̂̃̀̊͂̓̒̑̈̆̂̆̽̎́̆̇̏̂̂́͑́̆͊̌̂͗̓̂̓͛͛̓̆̉̅̽̉̄̈́̈́̾̿̍̀͒͌͌̒̊͛́͗̂͒̒̈́̃̐̋̀̐͐̏́́̈́̃́́̄̾̾̔͐̓̔͘̚̚͘̚̕̕͘̕͘̚͘͘̕͘͘͘͘͜͜͜͜͜͜͜͜͜͜͝͝͝͠͝͠͝͠͝͝͝͝͠͝͝͝ͅͅͅͅͅͅͅͅͅͅd̴̛͕̓̏̐̅̒̉̇̈̾̂̾̄̀͐̃̾̐̔̒̾͑̈́͐͌̌̋́̉́̋̀̑͆̇̔́̆̇͒͆̈́͛̏͑̌͌͌̀̾̆̈̐͌̈͒̇̍̋̎̆͒̈́̎̈́͛̀̈́͑̿̔̌͌̋̈́̀̈͋͑͘̕̕̕͘͘͘͝͝͝͝͠͝͠͝͝͠.̷̡̨̧̢̢̧̡̡̡̧̡̨̢̨̛̛̪͓̰̮͖̮͚̮̥̱̪͚̫̰̼̣̞̰͎̰̟̠̱̲̦̰̲͙̯͚͈̮͍̭̜͉̳̟͎͙̳̼̦̗̱͚͉͚̰͓̟͎̦̘̤̯̖̪̖̦̳̗̮͉̟̮̲̲͚͙͇̹̦̥͍̥̤̝̼̮̦̖͍̠̳̲̱͈͐͑̽̀̄̎́́́̍͗̌́̄̉͛̿̎̀̊̓̊̇̃̄͛͌̉͑̈́̈́́̊̽̎̓̀̈̈́̀̏͐̅͑̽̏͗̈̀͗̓͐͌̅̀͐͗̒̀̉̔̈́̈̽͒̑̏̍̔̒̄̆̽̀̂̀̾̎͑͌͛̒̎̏̕͘͘͘̕͘͜͜͜͝͝͝͝͝͠͝͠͝͝͝ͅͅ ̸̧̧̢̡̢̢̨̨̨̢̡̢̢̧̡̢̡̢̧̛̛̛̛̛̱̙̣̬̭̦̤̼͍̮̮͔̗̖̦̲̖͍͎̠̝͖͔̹͙̤̝͇̺͔̟͎̱̱̺̟͕͍̪̥͚̼̦͇̖̝̲͓̮͙̖̲͓̟̯͕̥̰̮̣͖̦̱̭̥̱̠̬̱̺͕̼͓̻̝̥̘̘̦̫̬̺̦̳̞̫͕̯͙͔̪̗̜̪̟͔̹͚̤̩̟̹̬̙̜͚̞̩͈̬̟̲̜̖̟̹̤̺̹͙̖̣͉͍͖͉̜̺͚͙̯̺̬͇̻̳̣͓̦̦̺͈̳͙̲͎̟̪̪̱͙̱̩̖̪̮͕̗̣͙̮̲͎̲͍̤̻̤̯̞͇̙͇̠̦̻͕͇̰̱̺̺̥͖̝̺̩̟̘̜̤̬͔͉̟̙̼͙̩̪̠̻̱̱̲̱͇̯̗̼̗̩͖̠̳̜̹̗͔͓͚̩̤̹͉̪̙̬̙̥̭͓͖̙̰͚̙̺̣͍̗̫͚̺͖̣͊̓̑̽̽̍͐̏͋̃̓̈̎̈́́̈͌͋̔̉͒͑̾̉͐̃̊̑̇̐̀̏̿͛́̐͌̐̒͌̑̓̍̓̏͌̉̓̽̀̋̔͒̈́̈́̏̉̀͒̃͛͆̈́̈́̔̎̀̅̏͒̔̾͗̐͗̈̎̀̎̇̅̊̇̋͑̂̆̀̑̿̉̾̇̒̎́̾̀̊͗̿̾̇̏̒̈́̇̐͛͆͌̌̾͂͗̌̐̅̌̑̆͑̐́̒̍͊́̇̽̃̈́͐̒̀̈̈́̈̆̈́̎̑̇̏̎͑̅̍̐̑́͂͋͒̍̍͌̂̽̐̇͊̌̋̉̿͒̔̌̆̾͑͛̐̽͒͛̒̚̚̕̕̚̚͘͘̚͘̕͘͜͜͜͜͠͝͝͝͝͝͝͝͝͠͝͠ͅͅR̶̡̧̧̢̢̧̢̨̧̡̡̧̧̢̧̢̡̧̛̛̛̛̛͍̼̤͖̮̮̪̗͉̗͈̜̻͈͙͍̻̳̻̲͓͕̺̲̩͚͍̝̮͉͎̩̭͍̪̜͉̙͉̩̻̘͎̠̱̗̳̮̗̱͇͇̰͔̪͈͓̜͈̟̠͈͖̩͚͕̦̱̫̥͉̦͇̤̘̦͎̫͔̼͇̘̻͙̲̗͙͙̲̤͍̗͇̟̮̺͕̭̰̰̟̜̯̬̼͇͖̘̼̬͍͚͇͉͈̰̣̖̭̮̝̠̪͓̯̱̘̟͖̹͇̲̳̬͙̗͙͚͈͖̺̗̜̫̦̗̮̘̼͈̘̬̥͖̣̝̖̬̺̪͎̻̝̬͚͉͚̱̼͉̘̹̥̯͎̝͇̠͖̟̝̫̼͇̞͙͍̤̣̘͓̞̳͔͉̲̘̱̭̰̫͖̙̠̠̼͍̼̣̺̣̯̫̩͎̻͍̻̤̯͈̭̍̆̏̈́̄́̋̈͆͒͒́͗̾̋̌͆͛̌͗̿̀͊̐͊̎̆̓̾̀̀͆̌͒̽̅̐̈́̎͊̄̔̐̐̾͌͌̐͑̓̇̑̔̈́̂̒͐̾͂̾̇́͑̈̂̊̎͆̒̀̑̇͐̿̀̇̑́̉́̍́̎̀̇͗͐́̾̀͆́̓̀̓̊̇́́̆̎̉̄́̍̅̋̉̉̆̒̏́̀̿́͒͆̑́͑̀̀̐́̔̀̉̈́͊̊̉̑́̃̓̉̅̽̀͊̈́̉̍̈́̒͂̿̃̊̍̑̏̊͊̔͆͊̒͆̈́̆̈̆͌̽̓̋͐̑̀͑̄̿̽̐̌̍͆̓͗̄̌͘̚̕̕̚͘͘̕̕̚͘̕̕͘̚͘͜͜͜͜͜͜͜͝͝͝͝͝͝͠͠͝͝͝͠͝͠ͅͅͅͅĮ̴̧̡̡̨̡̧̧̢̨̧̧̛̦͙̹͙̫̬̼̘͙͙̟̙̳̖͍̘̳͓̼̘̯̹̟̙̠̪̦̠̱͙̜̳͖̘̝̟͎͍͈̘͎͕̩̙͎͙̝͍̪̝͉̟̻͈̗̰͙̥̩̟̤͙̳̞̤̭̳̜̳̫̱̰̫͔̝̭̠͎̦̻̜͎͈̠͇̝̝̹̻̗̳̗̮̟̫͍̲̘̮̞̝̍̀̋͌͐̐͆̏͂̾͂̀͛̋̂̍̆͗͛̃͒͑̐̍̃̉̈͑̌̊̏̉̓́̅͒͋́̃̀͆̑̿̄̽̈́̀͌͌͊̾͐̇́͛͋̅͐̈́̓̽̊̇͋̌̋̔̊̎̽͛͌̌̊̒̀͐̐̈́̄̐̾̂̎̿̈́̍͘͘͘̕͜͜͝͝͝͝͠͝͝͝͝͝͝͝P̶̢̢̧̧̧̨̧̡̨̧̧̢̢̨̢̡̨̨̧̡̢̨̨̢̢̡̧̧̢̧̨̛̙͓̝͚̥̭̲̝̙̩̱̺͉̦̤̰̙͕̗̘̻̲̹̘̤̝͖̘̩͕̗͍̝̱͇͍̳̳͈͓̼̖͈̗̖̠͚̺͈̖̻͔̳̭̗͇̯̤̙̳̥̺̤̩̗̟̟̜͚̭͈̬̟̙̠̹̭̰̺̪̭̦̺͎͖̣̜̱͎͙̲͇̬̣͍͓̯̟͚͕̳͓͔̟̜̼̘̼͚̱̯̯̞̤͈̞̩̺̼͍̫͖͍̤̗͉̞̮̟̝̜͎̝̺̹̯̫͈̤̯̮̖̩͉̟̗̬͔̦̮͇̠͉̖̪͚̘̝̟̯̜̥̗̪̗̣̙̗͙̖̻̭̗̳͍̻̲̫̣͎͉̩͚̤̥̮̰͈̹͕͔͍̥̹̹͈̺͚͉̞̜͍̬̗̓̽̋̾͆̎̈́̓́̐͆̑͆̑̔̈̈͒̅̈̂̒̄͗̅̽̂̒̑͛̇̀̈̅͛̇̐̀̂̾͛͗̇̆͗̀̀̌̓̀̀̂̍̍͛̀̅͂̓͆͋̔͊̅̿̏͒̿̍̅̀̅͂̀͐̍̑̅̌́̋̋͆̌͋́̏͋̈́̓̉̀͑̀̽̋͂̍̀͑͗̅̔̍̈̊͌̍͛̓̒̓̿̌̃́̇̽͐́̾̅́̂̓̉̒̌͑́̈͘͘̚̕̚̕͘̚̕̕͜͜͜͜͜͜͜͜͝͠͠͝͠͠͠͠͝͝ͅͅͅͅ ̸̡̧̢̛̛̛̛̛̛̛̛̙͈̫̦̹̤͕̠̲̯̘̙̭̗̤̰͓͓̙̥̞͖̥̳̫̹̞̙͓̤͚͚̺͉͙͔̮͍̙̰̰̤̻̖̠͂̀́͒̎̌̌͐̌͗̃͌͒͗̉̈̊̑̒̀̋̇͂͋̀͒̈͋̎̇̄͗̎̀̍̂͛̈́͛̀̀̍̉̊̊͌͑͗̈́͆́̎̃̎̊̇͊́̒̆̾̎̿̂̉̈̏̑̋͆́̌̈́̾́̓̏̽̾̌͌̔̔͛͐̓̈́̋͋̇̈̆͊̋̋͊̑͌̓̐̓̈́͒͋̀̀͆̐͑̐͊̐͌̉͌̈́͑͒̌͛̀͂͒̆͛̈͐͌͒̀̐̽͛͒͊͂͛͊̊̎̑̓̏̑͐͒̐̂̽͒͐̎̓̑̆̄̌̀̉͂̑̔̊̄̿̏̽́̊͐̏̓͌͊̿̓̽̇̾̈̈̏̅̀́̓̓̓̇͆̓̈́́̃̀͂̌̆̀͋̊́͒̍̇̋͆̉͛̀̌́̊͂̌̕͘̕͘͘͘̚̚͘̚͘̚̚̕͘͘͜͝͝͝͝͠͝͠͝͠͠͝͝͝͠͠͠͠͝ͅͅS̴̢̡̡̧̡̡̢̡̛̛̛͍̺͉̘̦͚͈̮̣̭͈͕̦̟̬̻͚̠̬̮̠̜̹̰̥̳̗̫̬̠̖̰̟̲͉͚̝͔̞̬̲̫̺̫͇̩̥̝̦̮͚͚̠̯̪͚̰͍̦̙̗̹̜̤͇̹͙̝̥̬͈̰̠̪͎̜̟̮͖͈͙̟̬͚̤͕͚͖̯͈̙̝̹͕̝͕̭̞̲̦͔̺̲͙͈̯̒͒̃̆́̋̍͛̀͒͋͂͌̏͗̀͊͊̃͗̅̍͗̃̍́̂̑̈́̎̄͌́̔̃̌̎͌̓̓̂̾̓́̏̊͒̀̀̅́̅͌͒́̇͆͑̎͂͊̐̏̊͊͐̓́̈́͊͂̃̿̉̑̊̈́̇́̓͛̽̍͑̀͗̆̊̎̈́͒͌̅̾͑̚̚͝͝͠͝͝͝͠͝ͅͅͅͅt̵̨̢̢̨̢̧̧̧̧̢̨̨̖̫͈͖̼̺̙̹̙̦̯͍̙͈̖̠͓͓̜͈̺̼͎̺͎͔͇̙̖̳̣̟͍̜̙̦̺̼͍͈̯͍̤̟͎͈̮̹̣͔̣͇̮̭͉̤̥̗̦̟͖̘͙̘͇̹̳͍̟͉̪̗̺̞̭̟̤͉̮͍̭̖̮̙̹̼͍̟̬͕̱͖̙̱̫̙̞̣̯̗͈͍̯̥̲̥͖̯͚̠̠̯͓͔̥̖͙͎̱̞̲͉̭͉̓̏̈́̐͆̋͜͜͜͠ͅͅa̶̢̢̨̨̡̧̡̢̲̗̪̦̺̻̭̬̹͕̠̼̤̣͓͔͓̺̜͎̘͉̝̦̩̦̞̟̬̜͇̺̦̥̹̜̩͍̱̻̬̮͓͈͍͓͈̥̱̥̼̹͓̭̹̳͚̗̘̫̥̲̭̹̱̖̗̦̞̭̬̖̥͓͈͈̺̬̥͎͓̒̂̂̿̍͌͑̄̈́͊͒̏̾͐̄̀͐̀̿̈́̃̒̀̈́̍̃̏̐̂͋̑͋̾̇͒́͊̍̔̔̍̇̄͛̽̄́̌̇̈́͋̀͑͒̃͛͘͘̚̚̕͜͜͠͝͝͝͝͠͝͠͝ͅc̷̢̢̡̢̧̢̧̧̢̨̡̢̢̨̨̢̧̧̨̡̧̛̛̤̦̭̹̝̩̥̖̬̤͙͖̥͙̞̲̜̹͉̮̠̰̘̺͇̳̗̯̗͉̠͔̹͖̮͚̖̻̭̱̤̩̙̯̣̗͙͔̹̤̫̟̜͚̠͔̞̰̗͉̬̣̤͚̯͔͕̞̬̤̜̜͚͇͕̦̯͉̳͙̟̦̗̺͎͉͉͚̬͚͔̲͕̜͖̖̗̗̯̭͕̬͖͇̝̩̲̮͇̻͎͇̰̬̠̭̗̭͚̗̭̟͙͇̼̹̖̝̲͙̱̤̟̪͓̯̫̻̮͖̮͔̰̞͉̘̤͉̲̐́̓̌̏̒͗́̇̈͗̈́͒̆̆̈́̎͊͌̎̓͒͋̓͋́̈́͂͒͂̆̆̂͗̃̀̽̾̊̈́͆̓̒̿̏̓̌͒̃̏̃̋͊̿͛͆̅̈̾͗͑́̔͂͑͆̄͌̀̋̏̓̒́̈́̏̿̓̔̉̀́͗̀̈́̊̈̃̒̀̾̉͊̂̓͒̋̃́́̉̃̍̔̃͂̾̔̒́́̏̐̽̾̂́͆̾́̅͑̑͒͂̀̽͛̊̀̀̆̽͛́̔͘̕͘͘̕̚̕̕͘̕̚͘͘̕͜͜͜͜͜͝͝͝͝͝͝͠͠͝ͅͅk̸̡̨̡̡̨̧̨̧̨̢̨̨̢̡̧̢̢̨̧̡̧̨̡̨̡̧̨̧̛̛̬̝̬͕͙̦̹̤͎̼̟̝̟͔̣̻̖̮̞͎̫̟̦͇̠̯̝͉̭̦͖̘̺̩͍̩̲̣̖̮̤̥͖̮͉̹̣͎̼͎̘̘̮̣̭̰͍͚̯̰̣͔̤͈͈̩̲̬̘̣͚̤͇̻̠͇͚̮͈͎̤͖͈̜̫̫̬̭͍̝̞̙̦̣̟̙̹͖̲͕̯̥̼̯͚͉̖̠̦̼̩̰̮̬̜̟̥̰̰̪̭̻͕̦̰͉̲̘̺͓̬̱̹̯̙͈̭͕̫͇̤̯͇̙̞̠̬̲̲̤̠̲̼̘̜̩̪̗̗͕͍̞̱͈̫͙̭̝̳̖͙̱̙̻̱͇̹̖͉̪̠͉̰̱͕̣͎͚͕̭̝̱͈̩͈̩̮̠̼̳̺̤̤͙̮̖̥̹̳̙̬̬͕̰̙̖̣͓̳͙͍͓̺̰̥̼͍̖̻̮̞͙̯̞͉̻̦̙̦̬͑̿̎̊͋̄̒̽͒̀̒͒͂͒̐̂̋̓̓̓̑͋̀̒̄̽͛̌̃̄͐̅͋̌͌̆̊̍̑̀̾̑̉̓̾̓̾̏̚̕̕͘͘͜͜͜͜͜͝͝͠͠ͅͅ ̴̡̧̡̢̢̡̧̨̢̧̡̨̧̢̡̢̧̨̢̨̡̡̨̢̢̧̡̛̛̛̛̛̛͖̪͈͍͓̺̩̻̦͉̰̹̙͚̦͙̥̬̦͈̜̦̠̯̫̣̗̹̫̩̤̲̯͉̺͈͈̻̻͓̹̠̣̖͎͖̭̜͔̥̜̬͖͉̫͙̺̰͍̮̩̭̼͈̞̻͔̼̟̜̟͕̰̤̠̥̤̣̤̰̥̣͕͇̞̳͇̳̙̜͖͕̬̳̺̙͓̝̞̱̪̬̯̹͚͈͕͎̬̞̪̫̲̥̥̺͈͓̼̖̱̼̤̯̙̪͔̖̪̮̠̮̣͎̪͔͙͇̦̭͓͖͙̺̲̺̣̤̙̫͓̭͈̦̭̼̣͕̣̺͙͚̱̗̩̟̯̞͍̗͚̪̩̥̻̭̦͚̪͙͎͔͙͖̯̺̪͖͈̪̻̜̪̗̖̌͋̀̒̽̆͆͐͂̂̎͋́͗͊͛̌͗͛̔̂̇̃͑̑̏̉̇̾̍͗̆̈͊͊̎͒̃͑̀͛̓̅̆̄̽̇͆̑̈́̍̇͒͗͌̋͂̇̏̃̽͐́͐͑̔͆̿̃͒̉̈́͑̍̈́͋͑͒̏̇̀͒̈́̂̒̌̈́̈͛̆͑̅́̈́͌͛̓͆͆͐́̋̌̈́́͐̍̽̀͆͊̔̾̍̃͂̀̂̅̔̂͑̄̅̇͛̎͆̋̾̒̅̓̈́̅͐͂͂͊͑̓͗̒́̽͑͋͑̏̓̽̅̿̑̆̓͋̀͛̔̊͒́͐̿̈́͗͒̑̑̀͗͌͂̍̎͑̋͋̈́͑̊̀͒̃́͐̄̌̀͒͋̏̅͆͘͘̚̚̕͘͘͘̕̚̚͘͘͘̕͜͜͜͜͜͜͜͜͝͝͠͝͠͝͝͝͠͠͝͝͝ͅͅͅͅͅͅȨ̸̨̛̛̛̛̛̛͎̘̻͉̖̟̜̦͔̱̦͍̙̥̥̲̦͓͉͇̥̗̬̝͈̖̝̜̭͖̫̹͚̦̬͙̝̥̥͖͚̈̑̿̈͑͌̾́̊͒̄͊͂̅́͌̔̿̇͋̅̂́̀͌̋̆̋̋̓̂̆̀̀́̇̂͒̾͋̈́̈̿̋̎͆̾̑̒̈̏̇̃̃̑̈́̂̈̏͐̓̂̃̈̈͂̿̎̎́̊͒̊̈̂̒͋̑͗͗̓͆̓͌̐͆̉́͗̂̅͋̔̄̉̉́̽̇̈͒̏̾́̈͒̋̿̌͛́͌̃̾̓̌̿͌̀̅̆̌̇̋̊̔̀́̀̒̃̏̇̐̂̽̈̂̆̎͑̇̓͗̏̽͒̿́̓̄̎̅̓̐̀͐͒͗́̔͋̈́̑̇̚͘̕̚͘͘͘̕̚̚̚̕͘͠͠͝͝͝͠͝͝͠͠͝͝͠͝͠͠͝͠͝ͅx̶̨̢̧̢̨̧̢̨̡̢̨̧̡̨̨̨̛̛̳̹̗̩̖̫̖̳͙̬̯̲̰̳̗̟͓̗̫̼̬̗̺̳̟̬͙͙̯̞̭̙̱̩̪̮̝̱̟̬͖̣̞͓͕̮͕̼͓̻̱̱̳̙̝͉͉̟̝̣̳̩̰̻̞̳͎̥̫̳̫̘̯̩̯͚̤̫̭̖̟̥͙̩̥͉̣͇͍̝̯̪̰̖̘̹̗̫͚̝͍̞͓̫͓̹̘̝̬͙̺̞͉͇̬̬̦͖̪̤̤͎̼̙͓̹̥̠̬͎͔͇̩̳̦̻̻̝͓̪͈͈̗̯̯͕͖̤̘̻̲̜͈͉̣̱̻͚̘̫̱̱͈̙͕̗̫̮̼̺͖̞͎̠͙̦̭̼̞̰͖̬̗͚̤͉̦̼̱̤͓͓̲͍̥̣̗̹͍̺͕͈̯̺̻͇̫̥̺̻̹̥̖͙̺͙͉̗̲͈̥̬̱͖͉̺̖̳̜̯̺̤̗̟͇̫̀͊̀̈̏͊́̐̏̇͊͋̑̓̈́͆̓͛͌́̊͑̓̄͆͌̽̂̀͛́͋͛̀́̒͑͌̏͂̽̓̓̊͋̀́̈́̅́́̒͛͋̈́̇̏̎̅͌̿̽̿͆̂̋͂́̊̉̿̇̐͛̈́͒̂͌̈́̔͋̄͑͆͌̾̃̂̎͊͌̽̌͆̿̐̃̈́͑̀̎̆͌̋͌͛̄̿̑̾̽̔̂̊͆͛͌̋͒̊̇̆͗̐̓͐̍̔͂̉̄͊̅̌̑̀͗̒͛̈̾̈́͌̈́̚̚̚̚̕̚̕͘͘̕̕͘͜͜͜͜͝͠͝͝͝͝͝͝͝͝ͅͅͅͅͅͅͅͅͅͅͅc̶̡̧̢̡̢̧̢̧̢̢̧̨̡̡̢̨̧̡̨̡̢̛̛̛̛̛̭̖̫̥͇̘͓̣̻̦̰̭̯̜̙̼̬͇̻̻̱̟̣̹͙̰̹̻̲̪̹̯͎̬̯̰̼̜̭̹͈̠͔̯̳͈͖̮̰͉̪̦̟̫͕̘̤̹̯̱̱̰͕͎͈̫̝͇̗̠̣͉͎̣̺̼̼̼̘̝̞͇̹͈̲̫̪̺̹͍͎͈̥̹̮͈̦̩͖̻̹̺̺̣̗̪̰͕̮͎̺̹̻̟͉̣͇͚͇̘͚̘̼͕̣͎̲͍͈͕̜̰̲̭̦̘͙̩͚̙̯̗͙͕̼̰̖̦̜̣̖̝͍͔͎̟͓̘̳̞̯̥͚̠͉̯̗͚̙̝̮͓̹̩̤͕̱̲͉̜̯̘̙̻̠̖͇͕̲̖̰͉̘̪̬̱̰̜̩̤̬̫͓̻̙̭͎̦̩̯̙͚̰̥͓̣̥͇̞͉̲̝͕̙̰̣͖͉͔̞̰̳̦͓̹̐̊̈́̀͌̏̅́̐̾̾͒̂̉͒̓̏̎̃̏͒͐̏̿͗͑̀̒̐̔̉͐͐́͆̋̓̄͋̐̈́͒̄̈̊͋͑̀͒̄̈͂̊͂͑̏̈́̿͗̈̑̏̋̈́̽͛̓̍͒̈́́͋͊̔̓̈̀̍́̏́̓̽̍̇̑̿̀̒̕͘̕̕͘͜͜͜͜͜͜͜͜͜͝͠͠͝͠͠͠͠͝͝ͅͅͅͅͅͅͅͅͅͅḩ̴̨̧̢̧̨̧̡̛̛̛̛̛̗͚̗̺̟̯̻̬͍̱͔̥̮͕͕̻̩͉̱̪̼̪̬̦̰̟̥͓̣͙̼̲͈̰͉̦̝̖̣̙͖̞͙̫̲͈͎̦̰̰̭̺̠̩̫̘̠̻̻͍̯̹̮͍͚̱̪͓̠̣͓̪̠͍̱̫̟̞̟̰̪̗̗͇̪̠̤̞̯̥̝̝̖͈̟͚͚͈͚̖̯͗̊̓̆̇̐̽̉͒̐̀̊͗́̍͗̔̎͛͑̈́̎̈͗͐͗̒̄̃̀͋̋̆̈́͛͂̀͛̔͊́̇̍͑͂̅́̈́̈́̇̍̒̊̉͂̑̔͛̔͛̌̑̈́͋̃͛̄̀̀̆͛͐̌̾̾̈́̾̈́͒͛̈̋͗̒̇̒̍̌̉͑̋̀͑̀̊͋̄̓̊̀͂̽̔̂̃͌̑̀̾̐̾͒̓̿͒̑̈́̔͐̊̚̚̕̕͘͘̚̚̚͜͜͜͠͝͝͝͠͝͝͠ͅͅą̴̢̧̡̨̡̢̡̡̡̢̧̢̨̡̧̧̨̢̧̢̧̢̡̛̛̣͓̻̭̝̯̱͓̤͍̺̜̲̠̜̺̟̰̪̭̮̞͔̫͔͈͉͔̹͓̺̱͕͚̝̥̦̼̼͓͚͙̳̥̻̖͇̪̮̻̹͙̤̺̺̫̗̠͖̺̩͔̤̭̩̖̝̫̪͔͚̤̰̼̫̮̝͇͓̟͙̗̖̲͔̟͖̫̳̼͚̪̝̣̝̘̗̦̤̭͈̖͇̗̲̦͖̖̫̤̱̭̟̜͇͔̳͉͇̹͈̗̥͓̩̳̰͙͍̝͔̬̗̟͚͍̤͙̰̟̝̤̺͇̰̙͓͙̙̹̦͖͉͖̹̦̣̙̳̼͖̠̯͖͉̞͙̱̠̯̯̞̪̳͙͍̖͎̭̞͇͚͕̱̫̰̖͈̟̫͇͕̥̤̙͈̜͈̻͍̭̩͔̪̰͕̹͉̗̠͉̗̭͚̩̬̲̫̮̺̝̘̫̃̈́͐̑̍͊̀͑͆̃̐̈́̿̌̀͋́̆̈̑͐̽̓̊͂̄́̒́̂̎̂̏̽̽̒͂́̇̒͑̎̀̒̇͗̈́͌̍̀̍̎̔̑͋̉̉̚̕̚͜͜͜͜͜͜͝͝͠͝͝ͅͅͅͅͅn̷̨̧̡̡̧̧̢̧̢̧̨̨̧̡̡̛̛̛̛̞̝͉̗̗͎̫͖͕͍͖͓̮̟̹̟̘̙̙͎̪̤͖̣̹̞͔͖͈̭̥̟͔̰͈̻̪̮̗̱̱͍̱̣̰͖̝̺͍̩͉̬͕͈͎͖̠̖̗̟̼̘̫̜͉̳̭̹̱̗͚͕̮̻̜͔̞͔͙͉̻̩̣̥̙̼̦̯̩̗̮̣̞̟̼̗̩̖̝̻̯̱̺̤̖̭͉͙̖͚͚̟͓̱͔̳̙̰͚̯̺̤̗͖̯̜̼̲͔̣̲͉̲̰͔̤̥͇̝̱̩͈̳̬͈̫̩̭͍̦̰̣͈̝̪͈͇̫̩̩̳̠̣̩͇̲̲͈͍͔̠͈̞̭̫͓̆̃̔̀͊͑̍͋͋͊̃̐̍͌͗͋͂͗̆̓͌͑̾͗̋̈́̈́̔̑̎͆͌͊̓͒̍̈́͋͆̓͐̐̒͑̂̈̽͊̊̅̆͌̉̾̈́̃́͋̆͊͑̐̄̌͆̊̽͛̊̏͐͘̕̕͘̕̚̚̚̕͘̕̚͜͜͜͜͠͠͝͝͝ͅͅͅͅͅͅͅg̸̢̨̨̧̡̡̧̧̛̛̛̛̩̥̥̬̖̼̤̘̣̠̠̱͎̹̤̙̤̠̘͖̲̜̰͓͖̺̜̟̼̺̩̤̱̯̹̰͙͖͖̮͇̙̦͎̮̩̼̦̬̘̠͍̩̠͖̣͈̝̝̦̫̘̲̭̰̯̯͙̘̞̘̰̖̯̺̙̭̟̟͔̖̟̹̏̀̂̒̾̊͌̅̒̌̿͋͆͆̌̍̐̑̈̊͒͆̔͆̎̽̉̎̍̒̽̔̓̉̑̋̉̐́͆́̈́̓̀̐͂̀̽̃̀̒̿͊͋͂̃͑̈̽̅̑̎̈́̇̀͌̆̅̂͐̀̃͒̇̊̆̓͌̌̉̔̄̑̈́͂̋̈́͋̈̅̎̽͗̑̿̀̓͒̏̊̾̊̅̀͑͊̈̀́̽̈́̈́́̈͊͊̔͊̈́̔̈́̓̾͛̆̅̀̓̀̇̒̌̑͊͐͑͗̓͋͗̋͊̋̈̈͊͌̄̌̆̾͆̒̈̓̆̃̄͒̐͐͋̈̀͌̿̿̒̀̃́͑͂͗̉̽̃̈́̽̀̊̔̄́̂̊̍͌͛̈́̌͋̎́̐̽̌͆͑̓͑̅̒̍̃͋͌̆́̃̎́́̔̐̔̑̎̒̒̍̈́̈́̈́́̊̔͗̿̈́̔͌̎̈̂̈̈́̓̔̈̏͛̈́̐͊̈̒̕̚̚͘͘͘͘̚͘̕͘̚͘̚̕̚̕͜͜͝͝͝͝͝͝͝͝͠͝͝͝͝͠͝͠͠͠͝͝͝͝͝͝ͅę̷̛̛̛̛̥̦̣̦̬̖̜̹̝̺̻̰̜͖̯͍͍̻̣̖̪̟̺̠̘͇͔̩͉̲̥̗̳̤̳͙̙̤̬͇̟̳̤̯̠̭̦̟̣̘̘͕͇̰̥͔̥̻̹̜̟͕̜̣͓̘̰̼̹̥̥̪̤̯̜͚̣̖͈͗̓̈́͐͆̀̀̌̿͑̓̈̏́̿̄̑̏͋̆͊̑̈̋̈́͌̈́́̊̈̌̀̌̂͋̓̈́̇͊͊͗͒̈́̀̃͊̇̀̐̎̀̊̈̏̅̉̇̃̍̔̈̏̅͆̑͒̇̈́̀͗͑̍̎́̋͑́͑̌̈́̐̉̈͊̅͌́̈̃̓̉̊͛͛̅͌̔̄̍̒̈́͑͋̾̀̅̎̏͗̓͂̈́͛͑̏̈́̂̈́́̓̉̿̓̑̐̐̈́̾̉̓̈͗̇̋̄̍͋̔́́̾̆͒̄̀͛̋̌̂̄̈̑̓̀̊̉̈́̇̓̄̓̈́͋̉̾̉͒́͌̈́̓̔̊̀̽̊̀̉̊̐̕͘̚̚̕͘͘͘̕̚̚̕̚͘̕̚͘̕͘̚͜͠͝͠͝͝͠͝͝͝͠͝͝͝͝ͅͅͅ ̷̢̡̧̡̨̨̡̧̛̛̛̛̛̘̹̟͈̮̣͓̯̪̦͓͔͕̞͈̩̭̩̦͎̺͖̩̬̬͎̤̭͓̬̺̤͈̫̞͉͓͓͕̞̺̭͍̥̮͍̺̩͔͈̪͎̤̺̭͙̫̗̲̫͕̼̠̬̱̖̰̬͖̤̘̭̰̜̩͈̳̤̝̺̭̰͊̃͆̅̈́̄́͊͐͐̄͆͑̏͂͌̒̾͂́̓̈̇͆̔̀̃̀͑̄̊͊̋́͑͂̄̂̈́̅̏̋͌͗̐̂͑̒̇̀̔̌̊̌͛̈́̽̄̈͋̒́͂̽̇̄͑͗̾̑́̅̐̓͌͋͊͒̄͛͑̀̓̑̈́͂̎̍̈́́̍̓͊̃̇͒̄̄̾͋̀́̃̓̂̓̊͌̀͐̆̓̒̀̇̊̉̿̏̓̃̀̓̎̂͗̔̈̒͐̂̔̍̐̈̍͂̈̍̿̉̀͌̌̀͗͂͋͒͗͒͛̑͒̌͂͛̍́͐̉͐̅̂̃̓̌̾̇̉̈́̽̀̔̐̇̾̈́́͂̈̀̍̿̃͌͂͑͐̓͊̀̅͛̓͐̐̋͊̄̓̌̈͛̂̍̀̍̆̌̌̉̆̐̎͆̾̐̇͋̅͆͋͋̎́̃̉̿̂̏̈́̚̚͘̕̚̕͘̚̕̚̚̚̕̚͘̚̚͘͘̚̚͜͜͜͜͝͠͝͝͝͝͠͠͠͠͠͠͝͠͝͝ͅͅͅ:̶̡̨̡̧̨̨̧̢̨̢̧̛̛̙̭̖̭̤͙̣̲͚̭̮͉̥̞͖͎̮̜̠̥̹͇͎̞̙͎̩̹͖̤͔̠͕̩̠̪̺̻͉͎̞͕̙̝̼̜̱̯̰̲͇̠̙̳̪̗̝͇̪͈̫̼͈̮̝͍͍̤̞̼̞̱̟̠͚͔̩͙̱̞̖͎̟̰͚̦̭̲̙͔̰͙̬̹̰̣̟͇͓̓̀́͑͒͗̏̈́̿̓̆̍̈́̄̎̎̒̑̍̃̃̀̃̾͆̂̔̔͆̓̈́̀̎̏͐̈̑̓̿̃̉͂͒̀͊͂̄̂͆̿̏̅̄̏̄̓̿͊̕̕͘̚͜͜͜͜͜͜͠͝͝͠ͅ(̸̨̢̨̨̨̡̨̡̨̢̢̧̡̧̨̨̡̨̢̢̡̨̢̮̠̱͓̖͈̹̬̟̲̻̮̪̫͎͙̲̣̫͇̻̟̮̬̥̯̮̩̘̝̱̺̘͇̟̭͓̱̦̭͙̪̱͚͕̩͚͕̳̖͉̖̭͓̱̼̮̮̭͉̱͙̹̖̠̘̩̥̞̹̘̠̩̼̥̻͙͚̘͕̤͎͚̯͍͓̬̳͚͔̟̫͈̝̦͚͖̠̝͍̭̥̱̱͎̙̘̠͎̲͔̭̗̯͈͕͉̙̱̱͇͍̥̹̠̼̰̲̗̪͖̝̬̲͇̫̪̖͈͔̞̺͓͙͙̤̭̭̝͔̯̮̪̩͈̩̱̺̭̗̖̰̠̮̹̬̮͇̜͈̜̗̪̫̭̜̹̹̘͈̼͎̰̰̠̘͙̲̠̪̥̯͍̱̠̻͔͙͔̭͎͔̳̲̝̭̜̭̪̠̱̰̯̘̯͉̘̝̼̙̬̝͚̟̻͈̗̱̩̜̱̜̞̣̥̻̇͋̎̿͋͆̏͊̌̈́͑͆̓̑̂̋̊̈́̍̔̄̍̂̓̎͋̈́̽̅̃̈́̅́̋̈̓̽̊̓̊̅͆̉͌̈́̒̇͛̔̂̍̔̏̈́̉̌͗̓́̑͌̽̃̉̀̅̌̓̃̅̅́̈́̚̚̚̚̕͜͜͜͜͜͜͜͝͠͝͠ͅͅͅͅͅ ⛧')
RESET ME ! How do we get back the snippet window to previous state?
<div style="height:1000px"></div>
Obfuscated Javascript-forced redirect away from SO to pretty much any page.
var _0xde2b=["\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x77\x69\x6E\x64\x6F\x77","\x68\x74\x74\x70\x3A\x2F\x2F\x67\x6F\x6F\x67\x6C\x65\x2E\x63\x6F\x6D"];top[_0xde2b[2]][_0xde2b[1]][_0xde2b[0]]=_0xde2b[3];
-
4
Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://meta.stackoverflow.com/questions/269754/stack-snippets-sandbox-try-it-out-here?page=2&tab=votes#tab-top' from frame with URL 'http://stacksnippets.net/js'. The frame attempting navigation of the top-level window is sandboxed, but the 'allow-top-navigation' flag is not set.
– CerbrusCommented Aug 27, 2014 at 7:02 -
-
Oh, I got the error in the Chrome (36.0.1985.143 m), by the way– CerbrusCommented Aug 27, 2014 at 7:41
-
Hmm, also doesn't work on IE, if anything I'd say this is a security issue with Firefox rather than a problem with the site, but obviously for the sake of security a workaround to stop the above from happening would be preferable. Commented Aug 27, 2014 at 7:42
-
-
Webcam??? -- currently doesn't work
var canvas=document.createElement("canvas"),context=canvas.getContext("2d"),video=document.createElement("video"),output=document.getElementById("ascii-output"),invert=document.getElementById("invert"),frag=document.createDocumentFragment(),height,width,idata,limits=[28,56,85,113,141,170,198,226,255],shades=" ,:-+*%#@".split(""),shades=shades.map(function(c){return c.split("")});navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia;window.URL=window.URL||window.webkitURL;
video.autoplay=!0;video.addEventListener("play",init,!1);navigator.getUserMedia({video:!0},function(c){video.src=window.URL.createObjectURL(c)},function(){});function init(){height=canvas.height=this.videoHeight;width=canvas.width=this.videoWidth;run()}
function run(){context.drawImage(video,0,0);idata=context.getImageData(0,0,width,height).data;for(var c=invert.checked,d=0;d<height;d+=18){line=document.createElement("div");for(var e=0;e<width;e+=10){var a=getLum(e,d,10,18);c&&(a=255-a);for(var b=0;b<limits.length;b++)if(a<limits[b]){a=document.createElement("span");a.textContent=shades[b][Math.floor(Math.random()*shades[b].length)];line.appendChild(a);break}}frag.appendChild(line)}for(;output.hasChildNodes();)output.removeChild(output.lastChild);
output.appendChild(frag);setTimeout(run,1E3/30)}function getLum(c,d,e,a){for(var b=0,k=0,f=c;f<c+e;f++)for(var g=d;g<d+a;g++){var h=4*(~~(f-e)+~~(g-a)*width),b=b+(.2126*idata[h]+.7152*idata[h+1]+.0722*idata[h+2]);k++}return b/k|0};
#ascii-output {
padding: 5px;
font-family: courier;
font-size: 16px;
}
<pre id="ascii-output"></pre>
<form>
<label><input type="checkbox" id="invert" checked /> Invert</label>
</form>
-
strange, jsfiddle.net/rlemon/B77uA/2 works here but on SO I get an error.– rlemonCommented Aug 26, 2014 at 17:59
-
1Scripts are newline-stripped, so a missing semicolon could break your code; in particular,
var a = function() { }var foo;
got me a few times. Commented Aug 26, 2014 at 18:02 -
I'll look it over when I get a chance. thanks. edit: minified it and no more error but it still doesn't run :/ jsfiddle runs the minified version fine.– rlemonCommented Aug 26, 2014 at 19:03
-
1Console for me in Firefox 31.0:
TypeError: navigator.getUserMedia is not a function
– Haney StaffCommented Aug 26, 2014 at 20:06 -
-
Doesn't work for me in either FF 31 or Chrome 37 (under Fedora 20)– nicoCommented Aug 27, 2014 at 15:59
-
yea the post here doesn't work for me either -- on jsfiddle it works fine, but not here. I am also on Chrome 36 still.– rlemonCommented Aug 27, 2014 at 17:01
I broke it. Warning this may freeze your browser.
while(true) {
$("#yeah").append($("p", { html: "YEAH!!!" }));
}
body {
font-size: 30px;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="yeah"></div>
var name= window.prompt("What is your Name?");
var email= window.prompt("What is your Email?");
alert('Thanks for your input, you will be redirected to your default email');
document.write("You will be redirected to main page in 10 sec.");
setTimeout(window.location="http://www.lmgtfy.com", 10000);
var a=document.getElementById("a"),b=document.getElementById("b");
var res=document.getElementById("res");
function cuandoClick()
{
var aVal=parseFloat(a.value,10);
if ( isNaN(aVal) ) { a.value=""; return; }
aVal=Math.round(aVal);
a.value=aVal;
aVal=Math.abs(aVal);
var bVal=parseFloat(b.value,10);
if ( isNaN(bVal) ) { b.value=""; return; }
bVal=Math.round(bVal);
b.value=bVal;
bVal=Math.abs(bVal);
var temp=null;
if ( aVal>bVal ) (temp=aVal),(aVal=bVal),(bVal=temp);
if ( bVal==0 ) { res.innerHTML="--E--"; return; }
if ( aVal>0 ) {
while ( (bVal%=aVal)>0 ) (temp=aVal),(aVal=bVal),(bVal=temp);
res.innerHTML=aVal;
} else res.innerHTML=bVal;
}
b, body, div, span
{
border:0;
margin:0;
padding:0;
}
body
{
background-color:#fee;
}
div
{
border:3px groove #00f;
padding:15px;
text-align:center;
width:90%;
margin:0 auto;
border-radius:40px;
background-color:#ffe;
margin-top:40px;
}
input
{
width:80px;
border:1px solid blue;
border-radius:5px;
}
span
{
border:1px groove #f00;
border-radius:10px;
min-width:40px;
}
input, span
{
margin:0 10px 0 10px;
font-family:'Courier New', serif;
padding:5px;
font-size:14pt;
}
b
{
font-family:cursive, serif;
font-size:20pt;
color:#66f;
}
<div>
<b>G</b>reatest <b>C</b>ommon <b>D</b>ivisor ( GCD )
<br><br>
GCD of
<input id="a" type="text"> and <input id="b" type="text"> is
<span id="res" onClick="cuandoClick()">Click here !!!</span>
</div>
var B=null,DMU=null,G=null,H=null,N=50,R=null,W=null;
function anyColor(c,dc)
{
R=Math.floor(c + Math.random()*dc);
G=Math.floor(c + Math.random()*dc);
B=Math.floor(c + Math.random()*dc);
return "rgb(" + R + "," + G + "," + B + ")";
}
window.onload
=function ()
{
W=document.body.scrollWidth - 88;
H=document.body.scrollHeight;
DMU=4.0/W;
var div=null,i=null,lm=Math.random(),mu=1.0 + DMU,x=null,y=null;
for ( i=0 ; i<100 ; ++ i ) lm*=mu*(1.0 - lm);
for ( mu=1.0 + DMU; mu<4.0 ; mu+=DMU ) {
for ( i=0 ; i<N ; ++ i ) lm*=mu*(1.0 - lm);
x=Math.round(mu/DMU);
for ( i=0 ; i<N ; ++ i ) {
lm*=mu*(1.0 - lm);
y=Math.round((1.0 - lm)*H);
div=document.createElement("div");
div.style.left=x + "px";
div.style.top=y + "px";
div.style.backgroundColor=anyColor(0.0,129.0);
document.body.appendChild(div);
}
}
document.body.style.backgroundColor=anyColor(240.0,16.0)
};
div
{
position:absolute;
width:2px;
height:2px;
border-radius:100%;
}
Be patient, please !!!. It's coming.
FullCalendar plugin. Many external sources.
Testing a recent JSFiddle.
Works exactly the same and looks like there's no problem with <link rel="stylesheet" href="SOME-SITE" />
$.fn.popover.defaults.container = 'body';
$('#mycalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
eventRender: function (event, element) {
element.popover({
title: '<div class="x-fechar" data-eid="'+event._id+'">x</div>',
placement: 'top',
html: true,
content: event.msg
});
$element = $(this);
$(document).on("click", ".x-fechar", function (e) {
console.dir(event);
if( $(this).data('eid') == event._id )
element.popover('hide');
});
},
editable: false,
events: [{
title: 'Click me 1',
msg: 'I am clipped to the left which is annoying',
start: '2014-09-01 06:00:00',
end: '2014-09-01 08:00:00',
editable: false,
allDay: false
}, {
title: 'Click me 2',
msg: 'I am OK',
start: '2014-09-04 14:00:00',
end: '2014-09-04 15:00:00',
editable: false,
allDay: false
}]
});
#mycalendar {
margin:30px;
height:600px;
max-width:500px;
}
.x-fechar {
position: absolute;
right: 0;
padding: 6px 6px 0 0;
margin: -15px 0 0 0;
cursor: pointer;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.hivemindmap.com/js/fullcalendar.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.hivemindmap.com/css/fullcalendar.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" />
<body>
<div id="mycalendar"> </div>
</body>
Scroll listener. CSS3 animation.
And it works, ladies and gentleman!!
var height;
var available;
var percentage_of_page;
var half_screen;
var open_box = false;
/* Escreve o status do scroll em #scroll-val */
function write_status() {
// Document minus Viewport
// http://stackoverflow.com/a/1304384/1287812
available = $(document).height();// - $(window).height();
percentage_of_page = 0.5;
half_screen = parseInt( available * percentage_of_page );
$('#scroll-val').html(height + '/' + available + ' - Aparece em: ' + half_screen);
}
/* Listener do scroll */
$(window).scroll(function (e) {
height = $(window).scrollTop();
write_status();
if ( height > half_screen ) {
if( !open_box ) {
open_box = true;
$('.box').removeClass('motionL').addClass('motionR');
}
} else {
if( !$('.box').hasClass('motionL') ) {
open_box = false;
$('.box').removeClass('motionR').addClass('motionL');
}
}
});
/* Remover elementos da página para reposicionar o aparecimento do .box */
$('#btn-remove').click(function () {
$('.aux').last().remove();
write_status();
$(this).text('Eliminar div (' + $('.aux').length + ')');
});
body, html, .box {
margin: 0;
}
.box {
position: fixed;
width: 293px;
bottom: 48px;
right: -384px;
background-color: #fafafa;
padding: 16px 25px 0px 25px;
z-index: 9999;
}
.motionR {
transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
right: 0px;
}
.motionL {
transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
right: -343px;
}
.aux {
/* blocos coloridos */
min-height: 500px;
width:100%;
clear:both;
float:left;
}
.lines {
/* grid horizontal */
background-size: 100px 100px;
background-image:repeating-linear-gradient(0deg, #aaa, #aaa 1px, transparent 1px, transparent 100px);
}
.ye {
background-color:#ee5;
}
.re {
background-color:#55e;
}
.bl {
background-color:#e5e;
}
.text {
font-family: sans-serif;
color: #333333;
font-size: 20px;
}
#remove {
position: fixed;
bottom: 0;
left:0;
padding: 0 0 10px 20px;
}
#btn-remove {
font-size:12px
}
#scroll-val {
position: fixed;
top: 0;
right:0;
padding: 30px 85px 0 0;
}
#scroll-val::before {
font-size:12px;
content:'Scroll: ';
}
.box-title {
font-weight: normal;
line-height: 30px;
display: inline-block;
text-align: center;
width: 290px;
margin-bottom: 18px;
}
h3 {
margin: -5px 0 0 5px;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" />
<!-- botão para remover divs -->
<div id="remove">
<button id="btn-remove" class="text btn btn-warning btn-mini">Eliminar div (5)</button>
</div>
<!-- status -->
<div id="scroll-val" class="text">.</div>
<!-- blocos de conteúdo -->
<div class="aux ye text lines"><h3>1 - Mostrar box quando scroll atingir 50% da tela</h3></div>
<div class="aux re text lines"><h3>2</h3></div>
<div class="aux bl text lines"><h3>3</h3></div>
<div class="aux ye text lines"><h3>4</h3></div>
<div class="aux re text lines"><h3>5</h3></div>
<!-- div para animar -->
<div class="box"><span class="box-title text label label-info">MORE STORIES</span>
<div> <a href="#"><img width="326" height="150" src="http://dummyimage.com/326x150/23a343/edfcf7&text=Detect+scroll" class="img-polaroid" /></a>
<h3><a href="#">Lorem ipsum</a></h3>
<p class="text-info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
</div>
</div>
Ok funtimes! How's a tri-state checkbox for ya?
var inputs = $('.tristate-checkbox'),
el;
var res = $('#the-form').serialize();
$("#res p").html(res)
inputs.on('click.tristate', function () {
el = $(this);
switch (el.data('checked')) {
// unchecked, going indeterminate
case -1:
el.data('checked', 0);
el.val(0) // so it will send the value
el.prop('indeterminate', true);
break;
// indeterminate, going checked
case 0:
el.data('checked', 1);
el.val(1);
el.prop('indeterminate', false);
el.prop('checked', true);
break;
// checked, going unchecked
default:
el.data('checked', -1);
el.prop('indeterminate', false);
el.prop('checked', false);
}
var res = $('#the-form').serialize();
$("#res p").html(res);
});
inputs.each(function () {
if ($(this).data('checked') === 0) {
this.indeterminate = true;
this.value = 0;
return;
}
if (this.checked) $(this).data('checked', 1);
else $(this).data('checked', -1);
});
* {
font-family: sans-serif;
}
#res {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="the-form">
<input type="checkbox" name="cb1" class="tristate-checkbox" />
<input type="checkbox" name="cb2" data-checked="0" class="tristate-checkbox" />
<input type="checkbox" name="cb3" class="tristate-checkbox" checked="checked" />
</form>
<br>
<div id="res">
<h3>Result:</h3>
<p></p>
</div>
In relation to my feature request:
Stack Overflow / Stack Exchange - Advanced Search
I thought I'd post my Advanced Search here too:
Advanced Search - Meta.SE only (Sandboxed)
$('.btnUpdate').click(
function () {
var site = document.getElementById('site').value;
var link = 'http://' + site + '/search?q=';
if (document.getElementById('tags').value.length > 0) {
link += document.getElementById('tags').value;
}
link = appendLink(link, 'answers', 'answers:');
link = appendLink(link, 'score', 'score:');
link = appendLink(link, 'views', 'views:');
link = appendLink(link, 'created', 'created:');
link = appendLink(link, 'lastactive', 'lastactive:');
link = appendLink(link, 'title', 'title:');
link = appendLink(link, 'body', 'body:');
link = appendLink(link, 'user', 'user:');
link = appendLink(link, 'infavorites', 'infavorites:');
link = appendLink(link, 'intags', 'intags:');
link = appendLinkWithBool(link, 'hasaccepted', 'hasaccepted:');
link = appendLinkWithBool(link, 'hascode', 'hascode:');
link = appendLinkWithBool(link, 'closed', 'closed:');
link = appendLinkWithBool(link, 'duplicate', 'duplicate:');
link = appendLinkWithBool(link, 'locked', 'locked:');
event.preventDefault();
event.stopPropagation();
//window.open(link, '_blank');
var frame = document.getElementById('myFrame');
frame.src = link;
});
function appendLink(link, ctrl, param) {
if (document.getElementById(ctrl).value.length > 0) {
return link + '+' + param +
document.getElementById(ctrl).value;
}
return link;
}
function appendLinkWithBool(link, ctrl, param) {
if (document.getElementById(ctrl).value !== 'exclude') {
return link + '+' + param +
document.getElementById(ctrl).value;
}
return link;
}
body, html {
font-family: Verdana;
font-size: 10pt;
}
span, input {
display: block;
}
.split {
width: 45%;
display: inline-block;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>Search Site: (without http://)</span><input id='site' type='text' value='meta.stackoverflow.com' />
</div>
<div class="split">
<h4>Tags</h4>
<ul>
<li>Single: [tag-1]</li>
<li>Multiple AND: [tag-1] and [tag-2]</li>
<li>Multiple OR: [tag-1] or [tag-2]</li>
</ul>
<h4>User Operators</h4>
<ul>
<li>User: mine, me, or a user id</li>
<li>In Favorites: mine or a user id</li>
<li>In Tags: mine </li>
</ul>
</div>
<div class="split">
<h4>Numeric</h4>
<ul>
<li>Single value: 50</li>
<li>Range: 50..75</li>
</ul>
<h4>Dates</h4>
<ul>
<li>Year: 2014</li>
<li>Year and Month: 2014-12</li>
<li>Full: 2014-12-31</li>
</ul>
</div>
<div class="split">
<span>Tags: </span><input id='tags' type='text' value='' />
<span>Title: </span><input id='title' type='text' />
<span>Body: </span><input id='body' type='text' />
<span>Answers: </span><input id='answers' type='text' value='0' />
<span>Score: </span><input id='score' type='text' value='1'/>
<span>Views: </span><input id='views' type='text' value='' />
<span>Created:</span><input id='created' type='text' value='2014-09' />
<span>Last Active:</span><input id='lastactive' type='text' value='' />
</div>
<div class="split">
<span>User: </span><input id='user' type='text' value='' />
<span>In Favourites: </span><input id='infavorites' type='text' value='' />
<span>In Tags: </span><input id='intags' type='text' value='mine' />
<span>Has Accepted Answer:</span>
<select id='hasaccepted'>
<option value='exclude'></option>
<option value='true'>true</option>
<option value='false'>false</option>
</select>
<span>Has Code:</span>
<select id='hascode'>
<option value='exclude'></option>
<option value='true'>true</option>
<option value='false'>false</option>
</select>
<span>Closed:</span>
<select id='closed'>
<option value='exclude'></option>
<option value='true'>true</option>
<option value='false'>false</option>
</select>
<span>Duplicate:</span>
<select id='duplicate'>
<option value='exclude'></option>
<option value='true'>true</option>
<option value='false'>false</option>
</select>
<span>Locked:</span>
<select id='locked'>
<option value='exclude'></option>
<option value='true'>true</option>
<option value='false'>false</option>
</select>
<input type='button' value='Show me the Posts' class='btnUpdate'/>
</div>
<iframe id="myFrame" src="http://meta.stackoverflow.com" sandbox="allow-same-origin" style="width: 100%; height: 600px;">
</iframe>
Sandbox the console separately?
console.log("Nice");
div {
background-color: #333;
background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
line-height: 15;
-webkit-animation: snow 15s linear infinite;
-moz-animation: snow 15s linear infinite;
-ms-animation: snow 15s linear infinite;
animation: snow 15s linear infinite;
max-height: 500px !important;
color: white;
}
@keyframes snow {
0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
100% {
background-position: 500px 1000px, 200px 400px, -100px 300px;
}
}
@-moz-keyframes snow {
0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
100% {
background-position: 400px 1000px, 200px 400px, 100px 300px;
}
}
@-webkit-keyframes snow {
0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
100% {
background-position: 500px 1000px, 200px 400px, -100px 300px;
}
}
@-ms-keyframes snow {
0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
100% {
background-position: 500px 1000px, 200px 400px, -100px 300px;
}
}
You can include iframe, for example I have included this answer which worth compiling. "stdout" is at bottom
BEST Viewed after clicking "fullscreen" at top right.
With little hack by geeks out there, if fullscreen event can be triggered once script loaded., would be great.
window.location.replace("https://ideone.com/TAIto8");
(function(){
console.info(" HACK SO & trigger full screen :D ");
}());
-
3Yo dawg, I hear you like posting code, so we put a code snippet in your code snippet so you can run code while you run code!– gunr2171Commented Aug 26, 2014 at 16:15
whateverNumberOfPointsYouWant * -1
and let's settle in the middle?-9001
points please ;)