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

Convert to tabs and switch to using Vue

Browse source
This commit is contained in:
Oliver-Akins 2023-02-01 10:42:48 -06:00
parent e461a0a677
commit 0001dca6e7
5 changed files with 55 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

78
index.html
View file

@ -1,45 +1,43 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Weighted Choice Maker</title> <title>Weighted Choice Maker</title>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- JAVASCRIPT --> <!-- JAVASCRIPT -->
<script src="./js/delete_choice.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./js/add_choice.js"></script> </head>
<script src="./js/choosing.js"></script> <body>
</head> <template id="choice-template">
<body> <div class="choice">
<template id="choice-template"> <input type="text" class="left" placeholder="Choice Name">
<div class="choice"> <input class="right" type="text" placeholder="Choice Weighting">
<input type="text" class="left" placeholder="Choice Name"> <button class="delete" onclick="delete_choice(this)">X</button>
<input class="right" type="text" placeholder="Choice Weighting"> <div class="line"></div>
<button class="delete" onclick="delete_choice(this)">X</button> </div>
<div class="line"></div> </template>
</div> <h1>Weighted Choice Maker</h1>
</template> <div class="container">
<h1>Weighted Choice Maker</h1> <h2>Choices:</h2>
<div class="container"> <button onclick="add_choice()">Add New Choice</button>
<h2>Choices:</h2> <br>
<button onclick="add_choice()">Add New Choice</button> <div class="line"></div>
<br> <div id="choices">
<div class="line"></div> <div class="choice">
<div id="choices"> <input class="left" type="text" id="text-in-0" placeholder="Choice Name">
<div class="choice"> <input class="right" type="text" id="weight-in-0" placeholder="Choice Weighting">
<input class="left" type="text" id="text-in-0" placeholder="Choice Name"> <button class="delete" onclick="delete_choice(this)">X</button>
<input class="right" type="text" id="weight-in-0" placeholder="Choice Weighting"> <div class="line"></div>
<button class="delete" onclick="delete_choice(this)">X</button> </div>
<div class="line"></div> </div>
</div> <button onclick="choose_option()">Choose</button>
</div> <h2>Chosen Entry: <span id="result"></span></h2>
<button onclick="choose_option()">Choose</button> </div>
<h2>Chosen Entry: <span id="result"></span></h2> </body>
</div>
</body>
</html> </html>

12
js/add_choice.js
View file

@ -1,12 +0,0 @@
const add_choice = () => {
let index = document.getElementsByClassName("choice").length;
let choice_div = document.getElementById("choice-template");
let clone = choice_div.content.cloneNode(true);
clone.children[0].children[0].id = `text-in-${index}`;
clone.children[0].children[1].id = `weight-in-${index}`;
// Add to document without resetting the other ones
document.getElementById("choices").appendChild(clone);
};

55
js/choosing.js
View file

@ -1,55 +0,0 @@
const construct_choices = () => {
let choices = document.getElementById("choices").children;
let start_of_next_range = 1;
let options = [];
// Construct the array for choosing
for (choice of choices) {
let name = choice.children[0].value;
let weight = parseInt(choice.children[1].value);
if (Number.isNaN(weight)) {
break;
};
options.push({
"name": name,
"min": start_of_next_range,
"max": start_of_next_range + weight - 1
});
start_of_next_range += weight;
};
return {
"choices": options,
"max_value": start_of_next_range - 1
};
};
const choose_option = () => {
let {choices, max_value} = construct_choices();
// No options, error
if (choices.length === 0 && max_value === 0) {
document.getElementById("result").innerText = "\nERROR: No Choices to pick from";
return;
}
// Only one option exists, no need to waste time with randomness
else if (choices.length === 1) {
document.getElementById("result").innerText = choices[0].name
};
let chosen_value = Math.round(Math.random() * max_value);
// Find the choice which the randomly chosen number fits within
for (choice of choices) {
if (choice.min <= chosen_value <= choice.max) {
document.getElementById("result").innerText = choice.name;
return;
};
};
};

3
js/delete_choice.js
View file

@ -1,3 +0,0 @@
const delete_choice = (node) => {
node.parentElement.parentElement.removeChild(node.parentElement)
};

34
style.css
View file

@ -2,36 +2,36 @@ h1, h2, h3 { text-align: center; }
div.container { div.container {
text-align: center; text-align: center;
border-radius: 7px; border-radius: 7px;
margin: 5px auto; margin: 5px auto;
padding: 10px; padding: 10px;
width: 95%; width: 95%;
} }
button.delete { button.delete {
width: 10%; width: 10%;
margin: 0 auto; margin: 0 auto;
} }
div.line { div.line {
background-color: #7289da; background-color: #7289da;
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 15px; margin-top: 15px;
height: 2px; height: 2px;
} }
input[type="text"] { input[type="text"] {
display: inline-block !important; display: inline-block !important;
margin-bottom: 0px; margin-bottom: 0px;
margin-right: 0px; margin-right: 0px;
margin-left: 0px; margin-left: 0px;
margin-top: 0px; margin-top: 0px;
width: 40%; width: 40%;
} }
/* Move boxes further apart */ /* Move boxes further apart */