{{ block title }}
     Münzwurf zur Bestimmung der auszahlungsrelevanten Runde
{{ endblock }}
{{ block content }}
Per Münzwurf wird nun bestimmt, ob das Spiel aus Runde 1 oder Runde 2 auszahlungsrelevant wird. <br><br>
{{if chooser}}
Sie wurden zufällig ausgewählt den Münzwurf durchzuführen, der bestimmt ob das Verhandlungsergebnis der Runde 1 oder Runde 2
ausbezahlt wird. <br><br>
Die Münze hat zwei Seiten: Runde 1 und Runde 2. Mit dem Betätigen des Buttons "Münzwurf starten",
starten Sie die Animation des Münzwurfs. Die Münze wird dabei ständig geworfen und stoppt irgendwann. Im Anschluss wird Ihnen die aktuell "oben" stehende
Seite der Münze angezeigt. Sollte dies Runde 1 sein, so wird das Verhandlungserbnis von Runde 1 ausbezahlt. Andernfalls wird Runde 2 ausbezahlt.


<br><br>Bitten starten Sie nun den Münzwurf. <br><br>

<div id="coin"></div>
<div id="coinFlip">Münzwurf starten</div>

<p class="d-none" id="nextButtonParagraph">
<br> Die Münze wurde geworfen und zeigt Runde <b id="won-round"></b> an. Damit wird das Verhandlungsergebnis aus dieser Runde für
     beide SpielerInnen auszahlungsrelevant.
     <br><br>
     Bitte gehen Sie nun auf Weiter, um zur Ergebnisseite weitergeleitet zu werden.
     <br><br>
<button id="nextButton" class="nexttab btn-primary btn next d-none">weiter</button>
</p>

{{else}}

Ihr(e) SpielpartnerIn wurde dabei ausgewählt den Münzwurf durchzuführen, der bestimmt, ob das Verhandlungsergebnis der Runde 1 oder Runde 2
ausbezahlt wird. Bitte gehen Sie auf Weiter, damit Ihnen das Ergebnis des Münzwurfs auf der nachfolgenden Ergebnisseite angezeigt wird.
<br><br>
<button class="nexttab btn-primary btn next">weiter</button>
{{endif}}





<script>
let coin = document.getElementById("coin");
let button = document.getElementById("coinFlip");
let nextButton = document.getElementById("nextButton")
let nextButtonParagraph = document.getElementById("nextButtonParagraph")
let answerWonText = document.getElementById("won-round");

function coinToss() {
  let x = Math.floor(Math.random() * 2);
  let coin_1 = "{{static 'chip_bargain/red.jpg'}}";
  let coin_2 = "{{static 'chip_bargain/blue.jpg'}}";
  if (x === 0) {
    coin.innerHTML = '<img class="heads animate-coin" src="' + coin_1 + '">';
    //heads += 1; // if anybody needs to count something for another project

  } else {
    coin.innerHTML = '<img class="heads animate-coin" src="' + coin_2 + '">';
     //tails += 1; // add heads & tails with zero in script
  }
  return x;
}

button.onclick = function() {
  let x = coinToss() +1;
  nextButton.classList.remove('d-none');
  button.classList.add('d-none');

  let data = {result : x};
  liveSend(data);
  setTimeout(() => {  swapPicture(x);  nextButtonParagraph.classList.remove('d-none'); }, 1650);
  answerWonText.innerText = x;

}
function swapPicture(x){
  let coin_1 = "{{static 'chip_bargain/pic_R1.jpg'}}";
  let coin_2 = "{{static 'chip_bargain/pic_R2.jpg'}}";

   if (x === 1) {
    coin.innerHTML = '<img class="heads" src="' + coin_1 + '">';
    //heads += 1; // if anybody needs to count something for another project

   } else {
    coin.innerHTML = '<img class="heads" src="' + coin_2 + '">';
     //tails += 1; // add heads & tails with zero in script
  }

}

</script>
<style>
    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#coin {
   position: relative;
}

#coinFlip {
  background-color:#e9c46a;
  color:#fff;
  padding:15px 15px;
  border-radius:30px;
  display:inline-block;
  transition:1s;
  cursor:pointer;
}

#coinFlip:hover {
    opacity:0.5;
    background-color: #ef233c;
  }


.animate-coin {
  animation: flip 2s 1;

}

@keyframes flip {
  0% {
    transform: rotateX(0deg);


  }
  50% {
    transform: rotateX(3600deg);


  }
  100% {
    transform: rotateX(7200deg);

  }
}
</style>
{{ endblock }}