
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
  <script src="https://telegram.org/js/games.js"></script>

<head>

<title>Круглая кнопка</title>

<script>
  $(document).ready(function() {
    var level = 1;
    var money = 0;
    var plpercl = 1;

    $("img.lazyload").lazyload();
    var scoree = document.getElementById("score");
    var click1 = document.getElementById("click1");
    var bar1 = document.getElementById("bar1");
    var userid = {{uid}};



    const click_pushed = [];
    const area_pushed = [];
    var buttarea = document.getElementById("mine");

    var butt = document.getElementById('minepic');
    butt.addEventListener('touchstart', function(event) {
      var geg = 0;
      for(var i=0; i< event.targetTouches.length; i++){
        for(var j=0; j<area_pushed.length; j++){
          if(area_pushed[j].screenX == event.targetTouches.item(i).screenX && area_pushed[j].screenY == event.targetTouches.item(i).screenY){
            money-=plpercl;
          }
        }
        if(geg == 0){

        console.log(event.targetTouches.item(i));
      money+=plpercl;


      var text = document.createElement("p");
      text.className = String(money);
      text.textContent = "+" + String(plpercl);
      text.id = money;
      click_pushed.push(text);
      text.style.zIndex = 1;
      text.style.position = "fixed";
      text.style.top = event.targetTouches.item(i).screenY - 40 + "px";
      text.style.left = event.targetTouches.item(i).screenX + "px";
      document.body.appendChild(text);
      area_pushed.push(event.targetTouches.item(i));
      $(String(money)).fadeOut("slow");
      delayTimer = setTimeout( function( ) {
        text.style.opacity = delayTimer;
        area_pushed.shift();
        setTimeout(() => {
            click_pushed.shift().remove();

        }, 500);
     }, 100);
      }}
      scoree.innerText = money;
      bar1.value=money;
    }, false);



  });
</script>
<style>
body{
  background-color: #130f36;
}
.button {
  background-color: #000000;
  border: none;
  color:#1b1837;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  line-height: 100px;
  cursor: pointer;
}
.button:active, button:focus{outline: none;}
.img:active, img:focus{outline: none;}
.click1 {
  position: absolute;
  border-radius: 100px;
  width: 10px;
  height: 10px;
  background: red;
  display:block;
}
p{
  color: azure;
}

.game1{
  text-align: center;
  background-color: #1b1837;
  max-width: 	768;
  margin: 0 auto;
  justify-content: center;
  min-height: 1024;
}
</style>
</head>

<body>
  <button onclick="TelegramGameProxy.shareScore()">Share score</button>
  <p>welcome, {{username}}!</p>
<div class="game1" id="g1">
<h2>your score</h2><br>
<p id="score">0</p><br>
<progress  id="bar1" max="1000"></progress><br>
<button class="button"  id='mine'>
  <img class="lazyload" src="static/img/lincoin.png" id="minepic" alt="Изображение кнопки" style="max-width: 100px; max-height: 100px;">
</button>
</div>
</body>
</html>
uts

templates/libre_kombat.html
