Add current implementation

This commit is contained in:
Florine W. Dekker 2019-06-08 14:52:40 +02:00
commit a96ffb0926
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
2 changed files with 276 additions and 0 deletions

41
api.php Normal file
View File

@ -0,0 +1,41 @@
<?php
header("Content-type:application/json;charset=utf-8");
if (!isset($_GET["action"]))
exit("null");
$action = $_GET["action"];
$db = new SQLite3("fo76-dumps-ids.db", SQLITE3_OPEN_READONLY);
switch ($action) {
case "list-signatures":
$results = $db->query("SELECT DISTINCT Signature FROM IDs ORDER BY Signature;");
$signatures = [];
while ($row = $results->fetchArray())
array_push($signatures, $row["Signature"]);
print(json_encode($signatures, JSON_PRETTY_PRINT));
break;
case "get-random":
if (!isset($_GET["signatures"]))
exit("null");
if (empty($_GET["signatures"]))
exit("null");
$signatures = $_GET["signatures"];
$signatures = explode(",", $signatures);
$in_params = implode(",", array_fill(0, count($signatures), "?"));
$stmt = $db->prepare("SELECT * FROM IDs WHERE Signature IN ({$in_params}) ORDER BY RANDOM() LIMIT 1;");
foreach ($signatures as $i => $signature)
$stmt->bindValue($i + 1, $signature);
$results = $stmt->execute();
while ($row = $results->fetchArray(SQLITE3_ASSOC))
print(json_encode($row, JSON_PRETTY_PRINT));
break;
default:
print("null");
break;
}
$db->close();

235
index.html Normal file
View File

@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Felix W. Dekker" />
<meta name="application-name" content="Random Fallout 76 record" />
<meta name="description" content="Returns a random Fallout 76 record." />
<meta name="theme-color" content="#0033cc" />
<title>Random Fallout 76 record</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
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" />
<style>
body {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<h1>Random Fallout 76 record</h1>
<p>
On this page you can retrieve a random record from the Fallout 76 game files.
Simply select the signatures you want to include below, and then press the "Get random record" button.
</p>
<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>
<h2>Record</h2>
<pre><code id="output"></code></pre>
</div>
<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>
const signatureColCount = 8;
const e = id => document.getElementById(id);
const q = query => document.querySelector(query);
const qa = query => document.querySelectorAll(query);
const doAfterLoad = fun => {
const oldOnLoad = window.onload || (() => {
});
window.onload = (() => {
oldOnLoad();
fun();
});
};
/**
* Returns an array of the signatures that are currently selected.
*/
const getSelectedSignatures = () => {
const signatures = [];
const selectedCheckboxes = qa("#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 = qa("#signatures input");
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = false;
for (let i = 0; i < signatures.length; i++)
q(`#signature-${signatures[i]}`).checked = true;
updateSignatureToggle();
};
/**
* Selects all signatures.
*/
const setAllSignatures = checked => {
const checkboxes = qa("#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 = () => setSelectedSignatures(Cookies.get("selectedSignatures").split(","));
/**
* Saves the currently-selected signatures to a cookie.
*/
const saveSelectedSignaturesToCookie = () => Cookies.set("selectedSignatures", getSelectedSignatures().join(","));
/**
* Updates the button used to toggle all signatures on or off.
*/
const updateSignatureToggle = () => {
const signatureToggle = q("#signatureToggle");
if (getSelectedSignatures().length === qa("#signatures input").length) {
signatureToggle.innerHTML = "Deselect all signatures";
signatureToggle.onclick = () => setAllSignatures(false);
} else {
signatureToggle.innerHTML = "Select all signatures";
signatureToggle.onclick = () => setAllSignatures(true);
}
};
/**
* Downloads an array of signatures from the API.
*
* @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();
})
.then(signatures => callback(signatures));
};
/**
* 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 = e("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) => {
e("output").innerHTML = record;
const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
};
doAfterLoad(() => {
e("submit").onclick = () => downloadRandomRecord(record => showRecord(record));
downloadSignatures(signatures => {
createSignatureButtons(signatures);
loadSelectedSignaturesFromCookie();
});
});
</script>
</body>
</html>