Dveře 5

ZAMČENO

{% extends "templates/base.html" %}
{% set game_name = "Dveře 5" %}
{% block content %}

<button type="button" id="goFullscreen" class="btn btn-light" style="position:fixed; top:8px; right:8px; z-index:2000;">📺 Fullscreen</button>

<div class="full-screen">
  
  <div class="door-panel card text-center p-3 mb-4 d-flex align-items-center justify-content-between">
    <div class="flex-shrink-0"></div>
    <div>
      <br>
      <h1 class="mb-1">Dveře 5</h1>
      <p id="doorStatus" class="h4 mb-1">ZAMČENO</p>
      <p id="countdown" class="h5 mb-0" style="visibility:hidden;"></p>
    </div>
    <div class="flex-shrink-0"></div>
  </div>
<br>
  
  <div id="grid" class="grid-container mb-3">
    {% for row in ['A','B','C','D','E'] %}
      {% for col in [1,2,3,4,5] %}
        <div id="cell-{{row}}{{col}}" class="grid-cell"></div>
      {% endfor %}
    {% endfor %}
  </div>
<br>
  
  <div class="d-flex justify-content-center gap-2">
    <button type="button" class="btn btn-secondary move-btn" data-dir="up">↑</button>
    <button type="button" class="btn btn-secondary move-btn" data-dir="left">←</button>
    <button type="button" class="btn btn-secondary move-btn" data-dir="right">→</button>
    <button type="button" class="btn btn-secondary move-btn" data-dir="down">↓</button>
  </div>
</div>

(async()=>{
  const fh = new ForrestHubLib();

function updateUI() {
    document.body.classList.remove('locked','unlocked','alarm');
    document.body.classList.add(state);
    document.getElementById('doorStatus').textContent =
      state==='locked'?   'ZAMČENO'
    : state==='unlocked'? 'ODEMČENO'
    :                      'ALARM';
  }

function renderGrid() {
    document.querySelectorAll('.grid-cell').forEach(cell=>{
      cell.textContent = '';
    });
    document.getElementById('cell-'+pos).textContent = variant.emoji;
    const tgt = document.getElementById('cell-'+target);
    tgt.style.backgroundColor = '#cfc';
  }

async function pickVariant() {
    const i = Math.floor(Math.random()*variants.length);
    variant = variants[i];
    await fh.dbVarSetKey('doors5Variant', variant.name);
  }

async function lockDoor() {
    clearInterval(countdownTimer);
    clearTimeout(resetTimer);
    state = 'locked';
    await pickVariant();
    pos = 'A1';
    await fh.dbVarSetKey('doors5Pos', pos);
    await fh.dbVarSetKey('doors5State', state);
    document.querySelectorAll('.grid-cell').forEach(cell=>{
      cell.style.backgroundColor = '#fff';
    });
    updateUI();
    renderGrid();
    const cd = document.getElementById('countdown');

cd.style.visibility = 'hidden';

}

async function unlockDoor() {
    clearInterval(countdownTimer);
    clearTimeout(resetTimer);
    state = 'unlocked';
    await fh.dbVarSetKey('doors5State', state);
    updateUI();
    let t = 10;
    const cd = document.getElementById('countdown');
    cd.style.visibility = 'visible';
    cd.textContent = t + ' s';
    countdownTimer = setInterval(()=>{
      if (--t > 0) cd.textContent = t + ' s';
    },1000);
    resetTimer = setTimeout(lockDoor,10000);
  }

async function triggerAlarm() {
    clearInterval(countdownTimer);
    clearTimeout(resetTimer);
    state = 'alarm';
    await fh.dbVarSetKey('doors5State','alarm');
    updateUI();
    const ov = document.createElement('div');
    ov.id = 'alarmOverlay';
    ov.textContent = '!!!! Chyba !!!! ALARM !!!!';
    document.body.appendChild(ov);
    setTimeout(()=>{
      ov.remove();
      lockDoor();
    },10000);
  }

function move(dir) {
    if (state !== 'locked') return;
    const row = pos[0], col = Number(pos[1]);
    const rows = ['A','B','C','D','E'];
    let r = rows.indexOf(row), c = col - 1;
    if (dir==='up' && r>0) r--;
    if (dir==='down' && r<4) r++;
    if (dir==='left' && c>0) c--;
    if (dir==='right' && c<4) c++;
    pos = rows[r] + (c+1);
    fh.dbVarSetKey('doors5Pos', pos);
    renderGrid();
    if (pos === target) unlockDoor();
    else if (variant.forbidden.includes(pos)) triggerAlarm();
  }

await lockDoor();
  updateUI();
  document.querySelectorAll('.move-btn').forEach(btn=>{
    btn.addEventListener('click', ()=> move(btn.dataset.dir));
  });
})();
</script>
{% endblock %}