<!DOCTYPE html>
<html>
<head>
  <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-TXXHKBTD');</script>
  <!-- End Google Tag Manager -->
  <title>Carga Mental - Play</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="64x64" href="/icons8-brain-64.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="/css/styles.css">  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
  <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144184532-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-144184532-1');
</script>

</head>
<body>
  <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TXXHKBTD"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
  <div id="container" class="container">
    <h1>Jogo</h1>

    <div id="result-block" style="display:none;">
      <p id="result-message"></p>
      <button class="button" id="result-button" style="display:none;"><i class="fa-solid fa-magnifying-glass" style="font-size:xx-large; color: #000000;"></i></button>
      <button class="button" id="saveButton" style="display:none;"><i class="fas fa-save" style="font-size:xx-large; color: #000000;"></i></button>



      <div id="result-list" style="display:none;">
        <ul id="items-list" style="list-style:none;margin-left:-3%;"></ul>
        <p id="max"></p>
        <p id="wins"></p>
        <p id="lefts"></p>
        <p id="interval"></p>
      </div>      

    </div>

    <div id="reset-block" style="display:none;">
      <h3 id="message"></h3>      
      <form action="game" method="post">
        <input type="hidden" name="percentage" id="percentage" value="<%=percentage%>">        
        <input type="hidden" name="rounds1" id="rounds1" value="<%=rounds1%>">
        <input type="hidden" name="rounds2" id="rounds2" value="<%=rounds2%>">                   
        <input type="hidden" name="limit" id="limit" value="<%=limit%>">
        <button class="button" id="game"><i class="fa-solid fa-play" style="font-size:xx-large; color: #000000;"></i></button>
      </form>
      <p>Clique para reiniciar</p>      
    </div>

    <div id="play-console">
      <!-- <p>Rodada: <span id="round">1</span> / 10</p> -->
      <div id="buttons" class="buttons">
        <button class="button" id="left" class="button primary"></button>
        <button class="button" id="right" class="button primary"></button>
      </div>
    </div>
     
    <div id="img-display" class="image-container" style="display:none;">
      <img id="prize5-image" width="447" src="/images/5reais.png" alt="Prize 5 Image" style="display:none;">
      <img id="prize10-image" width="447" src="/images/10reais.png" alt="Prize 10 Image" style="display:none;">
      <img id="prize50-image" width="447" src="/images/50reais.png" alt="Prize 50 Image" style="display:none;">
      <img id="prize100-image" width="447" src="/images/100reais.png" alt="Prize 100 Image" style="display:none;">
    </div>

    <div id="loader-block" class="loader-block">
     <div id="timer" style="color:white; display:none;">00:00:00</div> 
     <text x="100" y="100" text-anchor="middle" style="display:none;"><tspan id="timeLeft"></tspan></text>

      <div class="timer animatable">
      <svg>
        <circle cx="50" cy="50" r="33"/>
        <circle cx="50" cy="50" r="33" pathLength="1" />
      </svg>
      </div>
    </div>      

  </div>

  <script src="/js/utils.js"></script>
  <script>
    $(document).ready(function() {
      // array containing left solutions
      const arr = '<%= arr %>'.split(',');
      // console.log('arr ',arr);
      play(arr, 0); 
    }); // document block executes on loading page. //
  </script>
</body>
</html>
