From 80d85e057e7c58c7947cd4fceafe0a9fdef9c452 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Wed, 1 Feb 2023 20:57:25 -0600 Subject: [PATCH] Implement the Vue version of the app --- app.js | 55 ++++++++++++++++++++++++++++++++++ index.html | 86 +++++++++++++++++++++++++++++++----------------------- style.css | 25 +++++++++++----- 3 files changed, 123 insertions(+), 43 deletions(-) create mode 100644 app.js diff --git a/app.js b/app.js new file mode 100644 index 0000000..7ea42f7 --- /dev/null +++ b/app.js @@ -0,0 +1,55 @@ +const app = new Vue({ + el: `#app`, + data: { + options: [], + chosen: null, + }, + computed: { + totalWeight() { + return this.options + .filter(c => { + try { parseInt(c.weight) } + catch (e) { return false }; + return true; + }) + .reduce( + (p, c) => p + parseInt(c.weight), + 0 + ); + }, + }, + methods: { + addOption() { + this.options.push({ + name: ``, + weight: ``, + chance: ``, + }); + }, + removeOption(i) { + this.options.splice(i, 1); + this.updateChanceValues(); + }, + pickAnOption() { + let choice = Math.floor(Math.random() * this.totalWeight); + + let min = 0; + for (const opt of this.options) { + let max = min + parseInt(opt.weight); + if (choice < max) { + this.chosen = opt; + return; + }; + min = max; + }; + }, + updateChanceValues() { + for (const opt of this.options) { + if (!opt.weight) { + continue + } + opt.chance = Math.round(opt.weight / this.totalWeight * 100 ); + }; + }, + }, +}) \ No newline at end of file diff --git a/index.html b/index.html index b108200..dc36005 100644 --- a/index.html +++ b/index.html @@ -1,43 +1,57 @@ - - - - - Weighted Choice Maker + + + + + Weighted Choice Maker - - - + + + - - - - - -

Weighted Choice Maker

-
-

Choices:

- -
+ + + + + + +

Weighted Choice Maker

+
+

Choices:

+ +
+
+
    +
  • + + + + ({{option.chance}}%) + + +
    • +
+
+ +

Chosen Entry: {{chosen.name}}

+
+ \ No newline at end of file diff --git a/style.css b/style.css index 9bb9060..9fe7979 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,8 @@ h1, h2, h3 { text-align: center; } +[v-cloak] { + display: none !important; +} div.container { text-align: center; @@ -24,14 +27,22 @@ div.line { } +ul { + list-style: none; + padding-inline-start: 0; +} -input[type="text"] { - display: inline-block !important; - margin-bottom: 0px; - margin-right: 0px; - margin-left: 0px; - margin-top: 0px; - width: 40%; +ul > li { + margin-bottom: 10px; + display: flex; + align-items: center; +} + + +input[type="text"], +input[type="number"] { + margin: 5px; + flex-grow: 1; } /* Move boxes further apart */