Oliver/Weighted-RNG
0
0
Fork 0
Code Issues Activity

Implement the Vue version of the app

Browse source
This commit is contained in:
Oliver-Akins 2023-02-01 20:57:25 -06:00
parent 0001dca6e7
commit 80d85e057e
3 changed files with 123 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

55
app.js Normal file
View file

@ -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 );
};
},
},
})

40
index.html
View file

@ -12,6 +12,7 @@
<!-- JAVASCRIPT --> <!-- JAVASCRIPT -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./app.js" defer></script>
</head> </head>
<body> <body>
<template id="choice-template"> <template id="choice-template">
@ -23,21 +24,34 @@
</div> </div>
</template> </template>
<h1>Weighted Choice Maker</h1> <h1>Weighted Choice Maker</h1>
<div class="container"> <div id="app" v-cloak class="container">
<h2>Choices:</h2> <h2>Choices:</h2>
<button onclick="add_choice()">Add New Choice</button> <button @click.stop="addOption">Add New Choice</button>
<br> <br>
<div class="line"></div> <hr>
<div id="choices"> <ul>
<div class="choice"> <li
<input class="left" type="text" id="text-in-0" placeholder="Choice Name"> v-for="option, i in options"
<input class="right" type="text" id="weight-in-0" placeholder="Choice Weighting"> :key="i"
<button class="delete" onclick="delete_choice(this)">X</button> >
<div class="line"></div> <input type="text" class="left" placeholder="Choice Name" v-model="option.name">
</div> <input
</div> type="number"
<button onclick="choose_option()">Choose</button> class="right"
<h2>Chosen Entry: <span id="result"></span></h2> placeholder="Choice Weighting"
v-model="option.weight"
min="1"
@change="updateChanceValues"
>
<span v-if="option.chance">
({{option.chance}}%)
</span>
<button class="delete" @click.stop="removeOption(i)">X</button>
</li>
</ul>
<hr v-if="options.length > 0">
<button @click.stop="pickAnOption">Choose</button>
<h2 v-if="chosen">Chosen Entry: <span id="result">{{chosen.name}}</span></h2>
</div> </div>
</body> </body>
</html> </html>

25
style.css
View file

@ -1,5 +1,8 @@
h1, h2, h3 { text-align: center; } h1, h2, h3 { text-align: center; }
[v-cloak] {
display: none !important;
}
div.container { div.container {
text-align: center; text-align: center;
@ -24,14 +27,22 @@ div.line {
} }
ul {
list-style: none;
padding-inline-start: 0;
}
input[type="text"] { ul > li {
display: inline-block !important; margin-bottom: 10px;
margin-bottom: 0px; display: flex;
margin-right: 0px; align-items: center;
margin-left: 0px; }
margin-top: 0px;
width: 40%;
input[type="text"],
input[type="number"] {
margin: 5px;
flex-grow: 1;
} }
/* Move boxes further apart */ /* Move boxes further apart */