simulator

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Epic Simulator</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <style>
      body {
        padding-top: 54px;
      }
      @media (min-width: 992px) {
        body {
          padding-top: 56px;
        }
      }

      .input-group-text {

        min-width: 50px;
      }
      table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }
        .alert{
          margin-top:5px;
          margin-bottom: 0px;
        }
    </style>

  </head>

  <body>


    <!-- Page Content -->
    <div class="container">
      <div id="app">
          <div style="margin-bottom:15px;">
              <h3>Add new ticket type</h1>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text" id="basic-addon1" style="width: 100px;">Multiplier</span>
                    </div>
                    <input type="text" class="form-control"  aria-label="Multiplier" aria-describedby="basic-addon1" v-model='enteredMultiplier'>
                  </div>
                  <div class="input-group mb-3">
                      <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1" style="width: 100px;">Amount</span>
                      </div>
                      <input type="text" class="form-control"  aria-label="Amount" aria-describedby="basic-addon2"  v-model='enteredAmount'>

                    </div>
                    <button type="button" class="btn btn-success"  @click="addToTable">Add</button>
            </div>

            <div class="container">
              <div class="row">
                <div class="col-8">
                  <table class="table table-striped table-hover" id="ticketTable">
                    <thead>
                      <tr>
                        <th scope="col">ID</th>
                        <th scope="col">x (multiplier)</th>
                        <th scope="col">Amount</th>
                        <th scope="col">Payout</th>
                        <th scope="col">Win %</th>
                        <th scope="col">Delete</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="ticket in tickets">
                          <td>{{ticket.id}}</td>
                        <td><input type="text" class="form-control"  aria-label="Amount" aria-describedby="basic-addon2"  v-model='ticket.multiplier'></td>
                        <td><input type="text" class="form-control"  aria-label="Amount" aria-describedby="basic-addon2"  v-model='ticket.amount'></td>
                        <td>{{ticket.amount * ticket.multiplier}}</td>
                        <td>{{ticket.amount/total*100}} %</td>
                        <td><button type="button" class="btn btn-danger"  @click="tickets.splice(tickets.indexOf(ticket),1)">Delete</button></td>
                      </tr>
                      <thead>
                        <tr>
                          <th scope="col">Total tickets:</th>
                          <th scope="col">{{total}}</th>
                        </tr>
                      </thead>

                    </tbody>
                  </table>
                </div>
                <div class="col-4">
                  <div class="card" style="width: 100%;">
                    <div class="card-body">
                      <h5 class="card-title">Client Area</h5>
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <span class="input-group-text" id="basic-addon1" style="width: 88px;">Balance</span>
                        </div>
                      <input type="text" class="form-control"  aria-label="Balance" aria-describedby="basic-addon2"  v-model='balance'>
                       </div>
                       <hr>
                       <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <span class="input-group-text" id="basic-addon1" style="width: 88px;">Iterations</span>
                        </div>
                      <input type="text" class="form-control"  aria-label="Iterations" aria-describedby="basic-addon2"  v-model='iterations'>
                       </div>
                       <button type="button" class="btn btn-success" style="" @click="play">PLAY</button>
                       <div class="alert alert-success" v-if="winner">
                        Winner ticked ID: {{winner}} <br>
                        Lucky number: {{luckyNumber}}<br>
                        <strong>Won: 100</strong>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>

      <div class="jumbotron" v-if="winner">
        <code>{{jsonData}}</code>
      </div>

      </div>

    </div>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 <script>


 new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    enteredMultiplier: "",
    enteredAmount: "",
    winner: "",
    luckyNumber: "",
    jsonData: "",
    balance: 100,
    iterations: 10,
    tickets: [
      {
        id:1,
        multiplier: 10,
        amount: 1,
      },
      {
        id:2,
        multiplier: 5,
        amount: 2,
      },
      {
        id:3,
        multiplier: 2.5,
        amount: 5,
      }
    ],

  },
  methods:{
      addToTable: function () {
        var index = 1;
        for (let ticket of this.tickets)
    {
      for (let ticket of this.tickets){
      if (ticket.id != index){

        break;
      }
      index++;
      }

    }
            this.tickets.push({id: index, multiplier: parseFloat(this.enteredMultiplier), amount: parseInt(this.enteredAmount)});
    },
    play: function () {

      var counter = 1;
      var sumArray = [];

      for (let ticket of this.tickets)
    {
      var insertObject = {
          id: ticket.id,
          luckyNumbers: []
        };

      for (let index = 1; index <= ticket.amount; index++) {


        insertObject.luckyNumbers.push(counter);

        counter++;

      }

      sumArray.push(insertObject);
    }
      this.jsonData = JSON.stringify(sumArray);
      counter = counter - 1;
          var luckyNumber = Math.floor((Math.random() * counter) + 1);
          this.luckyNumber = luckyNumber;
          console.log(luckyNumber);
          for (let obj of sumArray) {
            var index = obj.luckyNumbers.indexOf(luckyNumber);
            if (index != -1) this.winner = obj.id;


          }


    }

    },

    computed: {
      total: function(){
        return this.tickets.reduce(function(total, item){


          return total + parseInt(item.amount);
        },0);
      },


    }

  })


 </script>


  </body>

</html>