Roll the Dice - Microservice

Dice roller example using microservices (webtask)

by William Sena

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div class="rollTheDice">
  <div class="row">
    <form action="#" v-on:submit.prevent="showTheDice()">
      <div class="col s12 m10">
        <div class="card blue-grey darken-1">
          <div class="card-content white-text">
            <span class="card-title">Choose six numbers</span>
            <div class="row">
              <div class="input-field col s2" v-for="bet in 6">
                <input type="number" class="validate" min="1" max="6" v-model="yourBet[bet - 1]" />
              </div>
            </div>
          </div>
          <div class="card-action">
            <button type="submit" class="btn">Roll the Dice</button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="row">
    <div class="col s12">
      <div class="col s1 dice" v-for="dice in dices">
        <div class="first-face" v-if="dice == 1">
          <span class="pip"></span>
        </div>
        <div class="second-face" v-if="dice == 2">
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="third-face" v-if="dice == 3">
          <span class="pip"></span>
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="fourth-face" v-if="dice == 4">
          <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
          </div>
          <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
          </div>
        </div>
        <div class="fifth-face" v-if="dice == 5">
          <div class="column">
            <span class="pip"></span>
            <span...

SCSS

.rollTheDice {  
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
          -webkit-appearance: none; 
          margin: 0; 
    }
    
  input[type=number] { 
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0; 
  }
    
  .first-face {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .second-face {
    display: flex;
    justify-content: space-between;
  }

  .second-face .pip:nth-of-type(2) {
    align-self: flex-end;
  }

  .third-face {
    display: flex;
    justify-content: space-between;
  }

  .third-face .pip:nth-of-type(2) {
    align-self: center;
  }

  .third-face .pip:nth-of-type(3) {
    align-self: flex-end;
  }

  .fourth-face, .sixth-face {
    display: flex;
    justify-content: space-between;
  }

  .fourth-face .column, .sixth-face .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .fifth-face {
    display: flex;
    justify-content: space-between;
  }

  .fifth-face .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .fifth-face .column:nth-of-type(2) {
    justify-content: center;
  }
  
  .col.dice{
    width: 14.333%
  }

  * {
    box-sizing: border-box;
  }

  [class$="face"] {
    padding: 4px;

    background-color: #e7e7e7;
    width: 63px;
    height: 63px;
    object-fit: contain;

    box-shadow:
      inset 0 5px white, 
      inset 0 -5px #bbb,
      inset 5px 0 #d7d7d7, 
      inset -5px 0 #d7d7d7;

    border-radius: 10%;
  }

  .pip {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin: 4px;

    background-color: #333;
    box-shadow: inset 0 3px #111, inset 0 -3px #555;
  }
  .card-title{
    font-size: 1.3em;
  }
  .btn {
     width: 100%;
  }
}

JavaScript

let rollTheDiceVue = new Vue({
  el: '.rollTheDice',
  data: {
    yourBet: [0, 0, 0, 0, 0, 0],
    dices: [],
    lastBet: null,
    score: null
  },
  methods: {
    rollTheDice() {
        return Math.floor(Math.random() * 6) + 1;
      },

      showTheDice: function() {
        var i,
          output = [],
          dicesCount = 6;

        for (i = 0; i < dicesCount; i++) {
          output.push(this.rollTheDice());
        }

        this.dices = output;
        this.validate();
        this.reset();
      },

      validate: function() {
        var i,
          dicesCount = 6
        score = 0;

        for (i = 0; i < dicesCount; i++) {
          if (this.dices[i] === parseInt(this.yourBet[i])) {
            score++;
          }
        }

        this.score = parseFloat(score / 0.06).toFixed(2);
      },

      reset: function() {
        this.lastBet = this.yourBet.join(" ");
        this.yourBet = [0, 0, 0, 0, 0, 0];
      }
  }
});