tools
/
random-fo76
1
1
Fork 0
Code Issues Pull Requests Releases Activity

Add version number and best practices

This commit is contained in:
Florine W. Dekker 2020-03-14 12:58:33 +01:00
parent e795f96e00
commit 3204a76983
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
3 changed files with 235 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.editorconfig Normal file
View File

@ -0,0 +1,11 @@
root = true
[*]
charset = utf-8
trim_trailing_whitespace = true
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4

11
README.md Normal file
View File

@ -0,0 +1,11 @@
# Random _Fallout 76_ records
Allows a user to retrieve a random record from the _Fallout 76_ game files.
The user can filter records by data type to avoid receiving uninteresting data types.
The back end, `api.php`, communicates with an SQLite database, `fo76-dumps-ids.db`, containing only the `IDS.csv` dump
from [the _Fallout 76_ data dumps repository](https://github.com/FWDekker/fo76-dumps/).
The database is not included in this repository.
The front end, `index.html`, sends asynchronous queries to the back end based on the user's settings.
Selected data types are stored in a cookie so the user doesn't have to redo their settings each time the page is
refreshed.

424
index.html
View File

@ -10,247 +10,249 @@
<title>Random Fallout 76 record</title> <title>Random Fallout 76 record</title>
<link rel="shortcut icon" href="https://fwdekker.com/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic" <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
crossorigin="anonymous" /> crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" <link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-bundle.min.css" crossorigin="anonymous" />
integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-common.css" crossorigin="anonymous" />
</head> </head>
<body> <body>
<main class="wrapper"> <main class="wrapper">
<!-- Header --> <!-- Header -->
<header class="header"> <header class="header">
<div class="container"> <div class="container">
<h1>Random Fallout 76 record</h1> <h1>Random Fallout 76 record</h1>
<p> <noscript>
On this page you can retrieve a random record from the Fallout 76 game files. <span style="color: red; font-weight: bold;">
Simply select the signatures you want to include below, and then press the "Get random record" This website does not function if JavaScript is disabled.
button. Please check the <a href="https://www.enable-javascript.com/">
</p> instructions on how to enable JavaScript in your web browser</a>.
</div> </span>
</header> </noscript>
<p>
On this page you can retrieve a random record from the <i>Fallout 76</i> game files.
Simply select the signatures you want to include below, and then press the "Get random record"
button.
</p>
</div>
</header>
<!-- Input --> <!-- Input -->
<section class="container">
<h2>Settings</h2>
<form>
<button id="signatureToggle" class="button button-outline" type="button">Select all signatures</button>
<fieldset id="signatures">Loading... please wait.</fieldset>
<button id="submit" type="button">Get random record</button>
</form>
</section>
<!-- Input -->
<section class="container">
<h2>Record</h2>
<pre><code id="output"></code></pre>
</section>
<!-- Footer -->
<footer class="footer">
<section class="container"> <section class="container">
<h2>Settings</h2> Made by <a href="https://fwdekker.com/">Felix W. Dekker</a>.
<form> Licensed under the
<button id="signatureToggle" class="button button-outline" type="button">Select all signatures</button> <a href="https://git.fwdekker.com/FWDekker/random-fo76/src/branch/master/LICENSE">MIT License</a>.
<fieldset id="signatures">Loading... please wait.</fieldset> Source code available on <a href="https://git.fwdekker.com/FWDekker/random-fo76/">git</a>.
<button id="submit" type="button">Get random record</button> <div style="float: right;">v1.0.6</div>
</form>
</section> </section>
</footer>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"
integrity="sha256-9Nt2r+tJnSd2A2CRUvnjgsD+ES1ExvjbjBNqidm9doI=" crossorigin="anonymous"></script>
<script src="https://static.fwdekker.com/js/common.js" crossorigin="anonymous"></script>
<script>
const signatureColCount = 8;
<!-- Input --> /**
<section class="container"> * Returns an array of the signatures that are currently selected.
<h2>Record</h2> */
<pre><code id="output"></code></pre> const getSelectedSignatures = () => {
</section> const signatures = [];
const selectedCheckboxes = $a("#signatures input:checked");
for (let i = 0; i < selectedCheckboxes.length; i++) {
const selectedCheckbox = selectedCheckboxes[i];
signatures.push(selectedCheckbox.value);
}
return signatures;
};
/**
* Selects the indicated signatures, and deselects all others.
*
* @param signatures the array of signatures to select
*/
const setSelectedSignatures = signatures => {
const checkboxes = $a("#signatures input");
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = false;
for (let i = 0; i < signatures.length; i++)
$(`#signature-${signatures[i]}`).checked = true;
updateSignatureToggle();
};
/**
* Selects all signatures.
*/
const setAllSignatures = checked => {
const checkboxes = $a("#signatures input");
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = checked;
saveSelectedSignaturesToCookie();
updateSignatureToggle();
};
/**
* (De)selects signatures based on the selection stored in a cookie.
*/
const loadSelectedSignaturesFromCookie = () => {
const cookie = Cookies.get("selectedSignatures");
let signatures;
if (cookie === undefined)
signatures = [];
else
signatures = cookie.split(",");
setSelectedSignatures(signatures);
};
/**
* Saves the currently-selected signatures to a cookie.
*/
const saveSelectedSignaturesToCookie =
() => Cookies.set("selectedSignatures", getSelectedSignatures().join(","), {expires: 5 * 365});
/**
* Updates the button used to toggle all signatures on or off.
*/
const updateSignatureToggle = () => {
const signatureToggle = $("#signatureToggle");
if (getSelectedSignatures().length === $a("#signatures input").length) {
signatureToggle.innerHTML = "Deselect all signatures";
signatureToggle.onclick = () => setAllSignatures(false);
} else {
signatureToggle.innerHTML = "Select all signatures";
signatureToggle.onclick = () => setAllSignatures(true);
}
};
<!-- Footer --> /**
<footer class="footer"> * Downloads an array of signatures from the API.
<section class="container"> *
<div class="footer"> * @param callback the function to execute with the array of signatures
Made by <a href="https://fwdekker.com/">Felix W. Dekker</a>. */
Licensed under the const downloadSignatures = callback => {
<a href="https://git.fwdekker.com/FWDekker/random-fo76/src/branch/master/LICENSE">MIT License</a>. fetch("api.php?action=list-signatures")
Source code available on <a href="https://git.fwdekker.com/FWDekker/random-fo76/">git</a>. .then(response => {
</div> if (!response.ok)
</section> throw new Error("Failed to fetch list of signatures.");
</footer>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js" return response.json();
integrity="sha256-9Nt2r+tJnSd2A2CRUvnjgsD+ES1ExvjbjBNqidm9doI=" crossorigin="anonymous"></script> })
<script src="https://static.fwdekker.com/js/common.js" crossorigin="anonymous"></script> .then(signatures => callback(signatures));
<script> };
const signatureColCount = 8;
/**
* Creates buttons for the signatures and adds them to the form.
*
* @param signatures an array of signatures to create buttons for
*/
const createSignatureButtons = signatures => {
const form = $("#signatures");
form.innerHTML = "";
/** let row;
* Returns an array of the signatures that are currently selected. for (let i = 0; i < signatures.length; i++) {
*/ const signature = signatures[i];
const getSelectedSignatures = () => {
const signatures = [];
const selectedCheckboxes = $a("#signatures input:checked"); if (i % signatureColCount === 0) {
for (let i = 0; i < selectedCheckboxes.length; i++) { if (row !== undefined)
const selectedCheckbox = selectedCheckboxes[i]; form.appendChild(row);
signatures.push(selectedCheckbox.value);
row = document.createElement("div");
row.className = "row";
} }
return signatures; const col = document.createElement("div");
}; col.className = "column";
/** const label = document.createElement("label");
* Selects the indicated signatures, and deselects all others. label.htmlFor = `signature-${signature}`;
* label.innerHTML = signature;
* @param signatures the array of signatures to select col.appendChild(label);
*/
const setSelectedSignatures = signatures => {
const checkboxes = $a("#signatures input");
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = false;
for (let i = 0; i < signatures.length; i++) const checkbox = document.createElement("input");
$(`#signature-${signatures[i]}`).checked = true; checkbox.type = "checkbox";
checkbox.id = `signature-${signature}`;
checkbox.name = `signature-${signature}`;
checkbox.value = signature;
checkbox.onclick = () => {
updateSignatureToggle();
saveSelectedSignaturesToCookie();
};
col.appendChild(checkbox);
updateSignatureToggle(); row.appendChild(col);
}; }
};
/** /**
* Selects all signatures. * Downloads a random record from the API.
*/ *
const setAllSignatures = checked => { * @param callback the function to execute with the record
const checkboxes = $a("#signatures input"); */
for (let i = 0; i < checkboxes.length; i++) const downloadRandomRecord = callback => {
checkboxes[i].checked = checked; const selectedSignatures = getSelectedSignatures();
saveSelectedSignaturesToCookie();
updateSignatureToggle(); fetch(`api.php?action=get-random&signatures=${selectedSignatures.join(",")}`)
}; .then(response => {
if (!response.ok)
throw new Error("Failed to fetch random record.");
/** return response.text();
* (De)selects signatures based on the selection stored in a cookie. })
*/ .then(record => callback(record));
const loadSelectedSignaturesFromCookie = () => { };
const cookie = Cookies.get("selectedSignatures");
let signatures;
if (cookie === undefined)
signatures = [];
else
signatures = cookie.split(",");
setSelectedSignatures(signatures); /**
}; * Displays a record on the page.
*
* @param record the record to display
*/
const showRecord = (record) => {
$("#output").innerHTML = record;
/** const scrollingElement = (document.scrollingElement || document.body);
* Saves the currently-selected signatures to a cookie. scrollingElement.scrollTop = scrollingElement.scrollHeight;
*/ };
const saveSelectedSignaturesToCookie =
() => Cookies.set("selectedSignatures", getSelectedSignatures().join(","), {expires: 5 * 365});
/**
* Updates the button used to toggle all signatures on or off.
*/
const updateSignatureToggle = () => {
const signatureToggle = $("#signatureToggle");
if (getSelectedSignatures().length === $a("#signatures input").length) {
signatureToggle.innerHTML = "Deselect all signatures";
signatureToggle.onclick = () => setAllSignatures(false);
} else {
signatureToggle.innerHTML = "Select all signatures";
signatureToggle.onclick = () => setAllSignatures(true);
}
};
/** doAfterLoad(() => {
* Downloads an array of signatures from the API. $("#submit").onclick = () => downloadRandomRecord(record => showRecord(record));
*
* @param callback the function to execute with the array of signatures
*/
const downloadSignatures = callback => {
fetch("api.php?action=list-signatures")
.then(response => {
if (!response.ok)
throw new Error("Failed to fetch list of signatures.");
return response.json(); downloadSignatures(signatures => {
}) createSignatureButtons(signatures);
.then(signatures => callback(signatures)); loadSelectedSignaturesFromCookie();
};
/**
* Creates buttons for the signatures and adds them to the form.
*
* @param signatures an array of signatures to create buttons for
*/
const createSignatureButtons = signatures => {
const form = $("#signatures");
form.innerHTML = "";
let row;
for (let i = 0; i < signatures.length; i++) {
const signature = signatures[i];
if (i % signatureColCount === 0) {
if (row !== undefined)
form.appendChild(row);
row = document.createElement("div");
row.className = "row";
}
const col = document.createElement("div");
col.className = "column";
const label = document.createElement("label");
label.htmlFor = `signature-${signature}`;
label.innerHTML = signature;
col.appendChild(label);
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = `signature-${signature}`;
checkbox.name = `signature-${signature}`;
checkbox.value = signature;
checkbox.onclick = () => {
updateSignatureToggle();
saveSelectedSignaturesToCookie();
};
col.appendChild(checkbox);
row.appendChild(col);
}
};
/**
* Downloads a random record from the API.
*
* @param callback the function to execute with the record
*/
const downloadRandomRecord = callback => {
const selectedSignatures = getSelectedSignatures();
fetch(`api.php?action=get-random&signatures=${selectedSignatures.join(",")}`)
.then(response => {
if (!response.ok)
throw new Error("Failed to fetch random record.");
return response.text();
})
.then(record => callback(record));
};
/**
* Displays a record on the page.
*
* @param record the record to display
*/
const showRecord = (record) => {
$("#output").innerHTML = record;
const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
};
doAfterLoad(() => {
$("#submit").onclick = () => downloadRandomRecord(record => showRecord(record));
downloadSignatures(signatures => {
createSignatureButtons(signatures);
loadSelectedSignaturesFromCookie();
});
}); });
</script> });
</script>
</body> </body>
</html> </html>