Dveře 2

ZAMČENO

{% extends "templates/base.html" %}
{% set game_name = "Dveře 2" %}
{% 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 text-center p-3">
    <h1 class="mb-2">Dveře 2</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="middle-section flex-grow-1 d-flex align-items-center justify-content-center">
    <img id="shapeImage" src="" alt="Symbol" style="max-width:80vw; height:auto;">
  </div>

<div id="buttonsRow" class="bottom-buttons mb-3">
    <button type="button" class="btn btn-primary color-btn" data-color="blue">Modrá</button>
    <button type="button" class="btn btn-success color-btn" data-color="green">Zelená</button>
    <button type="button" class="btn btn-warning color-btn" data-color="orange">Oranžová</button>
    <button type="button" class="btn btn-danger color-btn" data-color="red">Červená</button>
    <button type="button" class="btn btn-secondary color-btn" data-color="white">Bílá</button>
    <button type="button" class="btn btn-dark color-btn" data-color="black">Černá</button>
    <button type="button" class="btn btn-pink color-btn" data-color="pink">Růžová</button>
    <button type="button" class="btn btn-brown color-btn" data-color="brown">Hnědá</button>
    <button type="button" class="btn btn-yellow color-btn" data-color="yellow">Žlutá</button>
  </div>
</div>

document.addEventListener('DOMContentLoaded',()=>{
  const fh=new ForrestHubLib();
  const images=[
    'blue_cross_circle_cross.png','blue_cross_square_cross.png',
    'blue_square_circle_circle.png','blue_square_circle_square.png',
    'blue_square_square_circle.png','blue_square_square_triangle.png',
    'blue_triangle_circle_triangle.png','blue_triangle_square_triangle.png',
    'green_triangle_triangle_cross.png','green_triangle_triangle_square.png',
    'green_square_triangle_triangle.png','green_triangle_triangle_circle.png',
    'orange_triangle_triangle_circle_cross.png','orange_triangle_square_circle_circle.png',
    'orange_triangle_square_circle_cross.png','orange_triangle_square_circle_square.png',
    'orange_triangle_square_circle_triangle.png','orange_triangle_square_cross_circle.png',
    'orange_triangle_square_cross_cross.png','orange_triangle_square_cross_square.png',
    'orange_triangle_square_cross_triangle.png','orange_triangle_square_square_circle.png',
    'orange_triangle_square_square_cross.png','orange_triangle_square_square_square.png',
    'orange_triangle_square_square_triangle.png','orange_triangle_square_triangle_circle.png',
    'orange_triangle_square_triangle_cross.png','orange_triangle_square_triangle_square.png',
    'pink_circle_cross_circle.png','pink_circle_cross_cross.png',
    'pink_square_cross_cross.png','pink_square_cross_square.png',
    'pink_triangle_cross_triangle.png','red_cross_cross.png',
    'red_cross_square.png','red_cross_triangle.png',
    'red_square_cross.png','red_square_triangle.png',
    'red_triangle_cross.png','red_triangle_square.png',
    'white_circle_square_triangle.png','white_circle_triangle_cross.png',
    'white_circle_triangle_square.png','white_circle_cross_square.png',
    'white_circle_cross_triangle.png','white_circle_square_cross.png',
    'yellow_cross_circle.png','yellow_square_circle.png',
    'brown_circle_circle_square_square.png','brown_circle_cross_square_square.png',
    'brown_circle_square_circle_square.png','brown_circle_square_cross_square.png',
    'brown_circle_square_square_circle.png','brown_circle_square_square_cross.png',
    'brown_circle_square_square_triangle.png'
  ];

let currentImage='';
  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';
  }

function pickRandomImage(){
    // získej symbol z Dveře1
    const other=fh.dbVarGetKey('doors1Image')||'';
    // vyfiltruj, aby nebyl stejný
    const avail=images.filter(i=>i!==other);
    const idx=Math.floor(Math.random()*avail.length);
    currentImage=avail[idx];
    document.getElementById('shapeImage').src=currentImage;
    fh.dbVarSetKey('doors2Image',currentImage);
  }

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

function lockDoor(){
    clearTimers(); state='locked'; pickRandomImage(); fh.dbVarSetKey('doors2State',state); updateUI();
    document.getElementById('countdown').style.visibility='hidden';
  }

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

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

function triggerAlarm(){
    clearTimers(); state='alarm'; fh.dbVarSetKey('doors2State',state); 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);
  }

// start
  lockDoor();