Dveře 3

ZAMČENO

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

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

<div id="gameView" class="full-screen">
  
  <div class="door-panel card mb-3 d-flex flex-row align-items-center justify-content-between">
    <img src="autoDoor.png" alt="Auto dveře" class="door-icon">
    <div class="door-text text-center mx-2">
      <h1 class="mb-1">Dveře 3</h1>
      <p id="doorStatus" class="h4 mb-1">ZAMČENO</p>
      <p id="countdown" class="h5 mb-0" style="visibility:hidden;"></p>
    </div>
    <img src="autoDoor.png" alt="Auto dveře" class="door-icon">
  </div>

<div class="room-image-container flex-grow-1 d-flex align-items-center justify-content-center">
    <img id="roomImage" src="" alt="Místnost" class="img-fluid room-img">
  </div>

<div class="footer-spacer" style="height:3rem;"></div>
</div>

/* Panel se stavem + ikony */
  .door-panel {
    width: 100%; max-width: 600px;
    background: rgba(255,255,255,0.85);
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: .5rem;
    padding: 1rem;
  }
  .door-icon {
    width: 60px;
    height: auto;
    flex-shrink: 0;
  }
  .door-text {
    flex: 1;
  }

/* Změna pozadí dle stavu */
  body.locked   .full-screen { background-color: #ff4d4d; }
  body.unlocked .full-screen { background-color: #4dff4d; }
  body.alarm    .full-screen { background-color: #660000; }

/* Alarm overlay */
  #alarmOverlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    color: #ff4444;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; text-align: center; z-index: 9999;
    padding: 1rem;
  }

/* Obrázek místnosti */
  .room-image-container { width: 100%; flex: 1; }
  .room-img { max-height: 80vh; max-width: 90vw; }

/* Fullscreen button */
  #goFullscreen { background: rgba(255,255,255,0.8); }

/* Responsivita na tabletu */
  @media (max-width:1024px) {
    .door-panel { padding: 0.5rem; }
    .door-icon { width: 50px; }
    .room-img { max-height: 50vh; }
    .door-text h1 { font-size: 1.5rem; }
    .door-text p { font-size: 1rem; }
  }
</style>

(async () => {
  const fh = new ForrestHubLib();
  const rooms = ['archiv.png','kancelar.png','technicka.png','uklid.png','wc.png'];
  let currentRoom = '';
  let state = 'locked';
  let countdownTimer, alarmTimer;

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';
  }

async function pickRoom() {
    const other = await fh.dbVarGetKey('doors4Room') || '';
    const avail = rooms.filter(r => r !== other);
    currentRoom = avail[Math.floor(Math.random() * avail.length)];
    document.getElementById('roomImage').src = currentRoom;
    await fh.dbVarSetKey('doors3Room', currentRoom);
  }

function clearTimers() {
    clearInterval(countdownTimer);
    clearTimeout(alarmTimer);
  }

async function lockDoor() {
    clearTimers();
    state = 'locked';
    await pickRoom();
    await fh.dbVarSetKey('doors3State', state);
    updateUI();
    // skryj odpočet po zamčení
    document.getElementById('countdown').style.visibility = 'hidden';
    clearTimers();
    state = 'locked';
    await pickRoom();
    await fh.dbVarSetKey('doors3State', state);
    updateUI();
  }

function showCountdown(sec) {
    const el = document.getElementById('countdown');
    el.style.visibility = 'visible';
    el.textContent = sec + ' s';
  }

async function alarmLocal() {
    clearTimers();
    state = 'alarm';
    await fh.dbVarSetKey('doors3State', 'alarm');
    updateUI();
    const ov = document.createElement('div');
    ov.id = 'alarmOverlay';
    ov.textContent = '!!!! Chyba !!!! Byl aktivován ALARM !!!';
    document.querySelector('.full-screen').appendChild(ov);
    alarmTimer = setTimeout(() => {
      ov.remove();
      lockDoor();
    }, 10000);
  }

async function unlockDoor() {
    clearTimers();
    state = 'unlocked';
    await fh.dbVarSetKey('doors3State', state);
    updateUI();
    let t = 10;
    showCountdown(t);
    countdownTimer = setInterval(() => {
      if (--t > 0) showCountdown(t);
    }, 1000);
    alarmTimer = setTimeout(lockDoor, 10000);
  }

// Poll commands for unlock
  setInterval(async () => {
    const cmd = await fh.dbVarGetKey('doors3Command') || '';
    if (cmd === currentRoom) {
      await fh.dbVarSetKey('doors3Command', '');
      unlockDoor();
    }
  }, 500);

// Poll for remote alarm
  setInterval(async () => {
    const st = await fh.dbVarGetKey('doors3State') || 'locked';
    if (st === 'alarm' && state !== 'alarm') {
      alarmLocal();
    }
  }, 500);

// start
  lockDoor();
})();
</script>
{% endblock %}