Dveře 1

ZAMČENO

{% extends "templates/base.html" %}
{% set game_name = "Dveře 1" %}
{% 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 1</h1>
    <p id="doorStatus" class="h4 mb-1">ZAMČENO</p>
    <p id="countdown" class="h5 mb-0" style="visibility:hidden;"></p>
  </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>

body.locked   .full-screen { background-color:#ff4d4d; }
  body.unlocked .full-screen { background-color:#4dff4d; }
  body.alarm    .full-screen { background-color:#660000; }
  #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; }
  .color-btn { padding:1rem 1.5rem; font-size:1.25rem; width:100%; }
  .btn-primary{background-color:#0d6efd;border-color:#0d6efd;color:#fff;}
  .btn-success{background-color:#198754;border-color:#198754;color:#fff;}
  .btn-warning{background-color:#ff8800;border-color:#ff8800;color:#fff;}
  .btn-danger{background-color:#dc3545;border-color:#dc3545;color:#fff;}
  .btn-secondary{background-color:#f8f9fa;border-color:#f8f9fa;color:#000;}
  .btn-dark{background-color:#212529;border-color:#212529;color:#fff;}
  .btn-pink{background-color:#ff69b4;border-color:#ff69b4;color:#fff;}
  .btn-brown{background-color:#8b4513;border-color:#8b4513;color:#fff;}
  .btn-yellow{background-color:#ffc107;border-color:#ffc107;color:#000;}
  @media(max-width:1024px){.middle-section img{max-width:80vw;height:auto;} .color-btn{font-size:1rem;min-width:80px;}}
</style>

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='', state='locked', 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(){
    const other=fh.dbVarGetKey('doors2Image')||'';
    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('doors1Image',currentImage);
  }

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

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

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

function unlockDoor(){
    clearTimers(); state='unlocked'; fh.dbVarSetKey('doors1State',state); updateUI();
    let t=10; showCountdown(t);
    countdownTimer=setInterval(()=>t>1?showCountdown(--t):clearInterval(countdownTimer),1000);
    alarmTimer=setTimeout(lockDoor,10000);
  }

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

lockDoor();
  document.querySelectorAll('.color-btn').forEach(btn=>btn.addEventListener('click',()=>{
    if(state!=='locked') return;
    (btn.dataset.color===currentImage.split('_')[0]?unlockDoor:triggerAlarm)();
  }));
});
</script>
{% endblock %}