timer.html

---
permalink: /timer/
redirect_from: /timer.html
title: memento mori
tags: [memory, смерть]
---
{% include header.html %}
<h1>{{ page.title }}</h1>

<div class="dt"></div>

<div id="tcont" style="display: flex; flex-grow: 1; align-items: center; justify-content: center;">
<div class="cntrd">

<div id="how-old-now">
<p lang="en">how old are you?</p>
<p lang="es">¿сuántos años tienes?</p>
<p lang="ru">сколько тебе лет?</p>
<input id="how-old-now-val" type="number" min="1"><button onclick="yearsNow = parseInt(this.previousSibling.value); if (yearsNow > 0) {shoh(['#how-old-now', '#how-old-end']);}">~</button>
</div>

<div id="how-old-end">
<p lang="en">how old do you want to be at the end?</p>
<p lang="es">¿сuántos años tú quieres tener al final?</p>
<p lang="ru">сколько тебе лет будет в конце концов?</p>
<input id="how-old-end-val" type="number" min="1"><button onclick="yearsEnd = parseInt(this.previousSibling.value); if (yearsEnd > yearsNow) {if (yearsEnd > 100) shoh(['#how-old-end', '#get-out']); else {shoh(['#how-old-end', '#timer']); setTimer();}}">~</button>
</div>

<div id="get-out">
<p lang="en">you are very optimistic person. <a href="https://youtube.com/watch?v=wQ78t7Gamf4">get outta here</a> now.</p>
<p lang="es">eres una persona muy optimista. <a href="https://youtube.com/watch?v=wQ78t7Gamf4">salir de aquí</a> ahora.</p>
<p lang="ru">ты большой оптимист. <a href="https://youtube.com/watch?v=wQ78t7Gamf4">убирайся отсюда</a> сейчас же.</p>
</div>

<div id="timer">
<p id="final-countdown" style="font-size: 2.3em; margin-top: 0;"></p>
<p lang="en"><a onclick="shoh(['#timer', '#timer-options']);">options</a></p>
<p lang="es"><a onclick="shoh(['#timer', '#timer-options']);">opciones</a></p>
<p lang="ru"><a onclick="shoh(['#timer', '#timer-options']);">варианты</a></p>
</div>

<div id="timer-options">
<div lang="en">
<p>you have not many options in fact.</p>
<p>don't smoke. move your body. sleep well.</p>
<p><a onclick="shoh(['#timer', '#timer-options']);">ok</a> |
<a onclick="shoh(['#timer-options', '#how-old-now']);">reset</a></p>
</div>
<div lang="es">
<p>tienes no muchas opciones, de hecho.</p>
<p>no fume. mueve tu cuerpo. duerma bien.</p>
<p><a onclick="shoh(['#timer', '#timer-options']);">sí</a> |
<a onclick="shoh(['#timer-options', '#how-old-now']);">restablecer</a></p>
</div>
<div lang="ru">
<p>на самом деле у тебя не много вариантов.</p>
<p>не кури. двигайся. высыпайся.</p>
<p><a onclick="shoh(['#timer', '#timer-options']);">да</a> |
<a onclick="shoh(['#timer-options', '#how-old-now']);">уточнить</a></p>
</div>
</div>

</div>
</div>

<script>
var dt = new Date(), finalCountdown = document.getElementById('final-countdown'), yearsNow, yearsEnd;
document.querySelector('.dt').innerHTML = dt.toISOString().slice(0, 10).replace(/-/g, '.');

opt.add('timer', 0);

if (opt.timer.v.last > 0 && opt.timer.v.left > 0) {
  tickTimer();

  shoh(['#how-old-now', '#how-old-end', '#timer-options', '#get-out']);
} else
  shoh(['#how-old-end', '#timer', '#timer-options', '#get-out']);

var timer = setInterval(tickTimer, 1000);

function setTimer() {
  var d = new Date(), t = Math.floor(d.getTime() / 1000);

  d.setFullYear(d.getFullYear() + yearsEnd - yearsNow);
  opt.set('timer', {last: t, left: Math.floor(d.getTime() / 1000) - t - 1});
  finalCountdown.innerHTML = '~'; // FIXME need to set something special
}

function tickTimer() {
  if (opt.timer.v.last > 0 && opt.timer.v.left > 0) {
    var t = Math.floor(new Date().getTime() / 1000);

    opt.timer.v.left = opt.timer.v.left - t + opt.timer.v.last;
    opt.timer.v.last = t;
    opt.save('timer');

    var days = Math.floor(opt.timer.v.left / 86400);
    var hours = Math.floor((opt.timer.v.left - days * 86400) / 3600);
    var minutes = Math.floor((opt.timer.v.left - days * 86400 - hours * 3600) / 60);
    var seconds = opt.timer.v.left - days * 86400 - hours * 3600 - minutes * 60;
    finalCountdown.innerHTML = days + ' / ' + hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
  }
}
</script>

{% include footer.html %}