You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

100 lines
1.9 KiB

<!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>