Untitled

<!DOCTYPE HTML>
<html>

<head>
  <title>Zadanie Asseco</title>

  <!--Bootstrap CDN-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="style.css">

  <script>
    var sum = 0;
    var counter = 0;
    var sumField = 0;

    normalFieldsArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18];
    specialFieldsArray = [12];
    returnFiledsArray = [19];
    winningField = 20;
    board = normalFieldsArray.concat(specialFieldsArray, returnFiledsArray, winningField);

    //rzut kostką
    function dice() {
      var minThrow = 1;
      var maxThrow = 6;
      throwDice = Math.floor(Math.random() * (maxThrow - minThrow + 1)) + minThrow;
      document.getElementById("count").innerHTML = "Liczba wyrzuconych oczek: " + throwDice;

      pointerMoving(throwDice);
    }

    function pointerMoving(fieldCount) {

      var status = false;

      sum += fieldCount;
      counter += 1;


      average = (sum / counter);

      sumField += fieldCount;

      if (sumField == 12) {
        document.getElementById("info").style.color = "red";
        document.getElementById("info").innerHTML = "Koniec Gry! Przegrana!";
        status = true;
      }
      if (sumField == 19) {
        document.getElementById("info").style.color = "orange";
        document.getElementById("info").innerHTML = "Pole specjalne zostałeś przeniesiony na pole nr 11";

        document.getElementById("19").classList.remove("glyphicon");
        document.getElementById("19").classList.remove("glyphicon-pawn");

        deletePointer = sumField - fieldCount;
        document.getElementById(deletePointer).classList.remove("glyphicon");
        document.getElementById(deletePointer).classList.remove("glyphicon-pawn");

        sumField = 11;
      }
      if (sumField == 20) {
        document.getElementById("info").style.color = "green";
        document.getElementById("info").innerHTML = "Koniec Gry! Wygrałeś!";
        status = true;
      }

      if (sumField <= 20) {

        deletePointer = (sumField - fieldCount);
        document.getElementById(deletePointer).classList.remove("glyphicon");
        document.getElementById(deletePointer).classList.remove("glyphicon-pawn");

        var pointerLocation = sumField.toString();
        var pointer = document.getElementById(pointerLocation);
        pointer.className = "glyphicon glyphicon-pawn";

      } else {

        newSumField = 20 - (sumField%20);
        sumField = newSumField;

        if (sumField == 19) {
          document.getElementById("info").style.color = "orange";
          document.getElementById("info").innerHTML = "Pole specjalne zostałeś przeniesiony na pole nr 11";

          document.getElementById("19").classList.remove("glyphicon");
          document.getElementById("19").classList.remove("glyphicon-pawn");

          deletePointer = sumField - fieldCount;
          document.getElementById(deletePointer).classList.remove("glyphicon");
          document.getElementById(deletePointer).classList.remove("glyphicon-pawn");

          sumField = 11;
        }
        console.log(newSumField);
        var newSumPointerField = newSumField.toString();
        var newPointer = document.getElementById(newSumPointerField);
        newPointer.className = "glyphicon glyphicon-pawn";
      }

      return showResults(counter, average, status)
      return clearBoard(sumField)
    }

    function clearBoard(sumField) {

      var pointerLocationOld = sumField.toString();
      document.getElementById(pointerLocationOld).classList.remove("glyphicon");
      document.getElementById(pointerLocationOld).classList.remove("glyphicon-pawn");

    }

    function showResults(counter, average, status) {

      if (status) {
        document.getElementById("throws").innerHTML = "Twoja liczba rzutów: " + counter;
        document.getElementById("avg").innerHTML = "Twoja średnia: " + average;

        document.getElementById("button").disabled = true;
        document.getElementById("buttonInfo").disabled = false;
      }
    }


    function refresh() {
      window.location.reload();
    }
  </script>

</head>

<body>
  <div class="container">
    <div class="row">
      <div class=" col-xs-12 col-lg-9">
        <div class="col-xs-12">
          <p id="0" class="field"></p><!--exception handler--->
          <div class="board">
            <p id="1" class="field"> 1</p>
          </div>
          <div class="board">
            <p id="2" class="field"> 2</p>
          </div>
          <div class="board">
            <p id="3" class="field"> 3</p>
          </div>
          <div class="board">
            <p id="4" class="field"> 4</p>
          </div>
          <div class="board">
            <p id="5" class="field"> 5</p>
          </div>
          <div class="board">
            <p id="6" class="field"> 6</p>
          </div>
          <div class="board">
            <p id="7" class="field"> 7</p>
          </div>
          <div class="board">
            <p id="8" class="field"> 8</p>
          </div>
          <div class="board">
            <p id="9" class="field"> 9</p>
          </div>
          <div class="board">
            <p id="10" class="field"> 10</p>
          </div>
          <div class="board">
            <p id="11" class="field"> 11</p>
          </div>
          <div class="board" style="background-color: red;">
            <p id="12" class="field"> 12</p>
          </div>
          <div class="board">
            <p id="13" class="field"> 13</p>
          </div>
          <div class="board">
            <p id="14" class="field"> 14</p>
          </div>
          <div class="board">
            <p id="15" class="field"> 15</p>
          </div>
          <div class="board">
            <p id="16" class="field"> 16</p>
          </div>
          <div class="board">
            <p id="17" class="field"> 17</p>
          </div>
          <div class="board">
            <p id="18" class="field"> 18</p>
          </div>
          <div class="board">
            <p id="19" class="field"> 19</p>
          </div>
          <div class="board" style="background-color: green;">
            <p id="20" class="field"> 20</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-lg-3">
      <div>
        <p id="count">Liczba wyrzuconych oczek: </p>
      </div>
      <div>
        <p id="info"></p>
        <p id="throws"></p>
        <p id="avg"></p>
      </div>
      <button id="button" type="button" class="btn btn-primary" onclick="dice()">Rzuć kostką</button>
      <button id="buttonInfo" type="button" class="btn btn-info" onclick="refresh()" disabled>Zagraj jeszcze raz</button>
    </div>
  </div>
</body></html>