Knock Code Demo

index.html

<h1>Knock code : 0113</h1>

<div id="knock-code-2" class="knock">
</div>

knock-code-demo.markdown

Knock Code Demo

A Pen by Jooyung Han on CodePen.

License.

script.js

function* knockCodeHandler(preset) {
  while (true) {
    const input = [];
    for (let i = 0; i < preset.length; i++) {
      input.push(getCode(yield));
    }
    if (input.join("") === preset) {
      success();
    } else {
      failure(input.join(""));
    }
  }
}

document.getElementById("knock-code-2").onclick = coro(
  knockCodeHandler("0113")
);

function coro(g) {
  g.next();
  return g.next.bind(g);
}

function delay(ms) {
  return new Promise(r => setTimeout(r, ms));
}

function run(g) {
  const { value, done } = g.next();
  if (!done) {
    value.then(() => run(g));
  }
}

function* showToast(message) {
  var div = document.createElement("div");
  div.className = "toast in";
  div.textContent = message;
  document.body.appendChild(div);
  yield delay(1000);
  div.className = "toast out";
  yield delay(500);
  document.body.removeChild(div);
}

function success() {
  run(showToast("pass"));
}

function failure(input) {
  run(showToast("WRONG: " + input));
}

function getCode(e) {
  const x = (e.clientX - e.target.offsetLeft) / e.target.clientWidth;
  const y = (e.clientY - e.target.offsetTop) / e.target.clientHeight;
  if (x < 0.5 && y < 0.5) {
    return 0;
  } else if (x >= 0.5 && y < 0.5) {
    return 1;
  } else if (x < 0.5 && y >= 0.5) {
    return 2;
  } else {
    return 3;
  }
}

style.css

.knock {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: solid 1px #aabbcc;
  margin-left: 10px;
}

.toast {
  position: absolute;
  bottom: 1em;
  left: 1em;
  border-radius: 0.2em;
  box-shadow: 0px 0px 3px 3px silver;
  padding: 0.5em;
}

.toast.in {
  animation-duration: 500ms;
  animation-name: toast-in;
}

.toast.out {
  opacity: 0;
  animation-duration: 500ms;
  animation-name: toast-out;
}

@keyframes toast-in {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 1em;
    opacity: 1;
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}