<!DOCTYPE html>
<html>
  <head>
    <title>Scrabble calculator</title>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/spectre.css/dist/spectre.min.css"
    />
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      main {
        padding: 3em;
      }
      .number {
        width: 3em;
      }
      p {
        padding: 1em 0;
      }
    </style>
  </head>

  <body>
    <main id="app">
      <input type="text" placeholder="Oggetto" v-model="text" />
      <input
        type="text"
        placeholder="Quanti slot hai"
        class="number"
        v-model="maxslot"
      />
      <p>
        Risultato: <b>{{ score }}</b> % {{ maxslot }} => <b>{{ slot }}</b>
      </p>
    </main>
    <script type="module">
      import Vue from "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js";

      let points = {
        A: 1,
        O: 1,
        I: 1,
        E: 1,
        C: 2,
        R: 2,
        S: 2,
        T: 2,
        L: 3,
        M: 3,
        N: 3,
        U: 3,
        W: 4,
        Y: 4,
        B: 5,
        D: 5,
        F: 5,
        P: 5,
        V: 5,
        K: 5,
        G: 8,
        H: 8,
        Z: 8,
        J: 8,
        X: 8,
        Q: 10
      };

      const app = new Vue({
        el: "#app",
        data: {
          text: "",
          maxslot: 10
        },
        computed: {
          score: function() {
            const letters = this.text
              .toUpperCase()
              .trim()
              .split("");
            return letters.reduce((total, letter) => {
              if (letter in points) {
                total += points[letter];
              }
              return total;
            }, 0);
          },

          slot: function() {
            return (this.score % this.maxslot) + 1;
          }
        }
      });
    </script>
  </body>
</html>