diff options
author | davidovski <david@sendula.com> | 2022-11-30 10:06:56 +0000 |
---|---|---|
committer | davidovski <david@sendula.com> | 2022-11-30 10:06:56 +0000 |
commit | 290c68795d8100cc97b8b53d80f331e536fc71b1 (patch) | |
tree | bf0068c4c9121406df9bc90f5c159fd93de8a61e /src/webserver/dist/site.js |
Diffstat (limited to 'src/webserver/dist/site.js')
-rw-r--r-- | src/webserver/dist/site.js | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/src/webserver/dist/site.js b/src/webserver/dist/site.js new file mode 100644 index 0000000..2e9bac3 --- /dev/null +++ b/src/webserver/dist/site.js @@ -0,0 +1,129 @@ + + +// the function to be called when the generate name button is pressed +function generateName() { + + // get the values of the various buttons and selectors and store them as variables + var gender = document.getElementById("gender").value; + var origin = document.getElementById("origin").value; + + var count = parseInt(document.getElementById("number").value); + var surnames = document.getElementById("surnames").checked; + + // create a request object + var request = { + "origin": origin, + "gender": gender, + "count": count, + "surname": surnames + }; + + // turn the request json into a string + request = JSON.stringify(request) + + console.log(request) + + // Make the http request using ajax + const http = new XMLHttpRequest(); + const url = "/api/name"; + http.open("POST", url); + http.send(request); + + // create a listener for when the request is returned + http.onreadystatechange = (e) => { + showNames(JSON.parse(http.responseText)) + } +} + +// Change the page's html to show the generated names +function showNames(names) { + + // get the name area element + var nameArea = document.getElementById("namearea"); + + // delete all existing name entries + while (nameArea.lastChild) { + nameArea.removeChild(nameArea.lastChild); + } + + // iterate through all of the given names + names.names.forEach((name) => { + + // create the name element + var nameElement = document.createElement("p"); + nameElement.textContent = name; + nameElement.classList.add("name"); + + // add the name element to the name area + nameArea.appendChild(nameElement); + }); +} + +function updateMap() { + // Load the current country of origin + var origin = document.getElementById("origin").value; + + console.log(origin) + + // get the canvas context for the worldmap + var canvas = document.getElementById("worldmap"); + var context = canvas.getContext("2d"); + + // clear the canvas + context.clearRect(0, 0, canvas.width, canvas.height); + + // create the background image + var background = new Image(); + background.src = "/map/background.png" + + // wait for the image to load before trying to draw it + background.onload = function() { + context.drawImage(background, 0, 0) + + // only draw the country after the background has been drawn + var country = new Image(); + country.src = "/map/" + origin + ".png" + + // wait for the image to load before trying to draw it + country.onload = function() { + context.drawImage(country, 0, 0) + }; + + }; + +} + +// force the count to be between 1 and 99 +function forceCount() { + var count = parseInt(document.getElementById("number").value); + if (count > 99) { + document.getElementById("number").value = 99 + } else if (count < 1) { + document.getElementById("number").value = 1 + } +} + +// toggle the visibility of advanced options +function toggleAdvanced() { + // get the advanced options div + var element = document.getElementById("advancedoptions"); + + // if display: none, make it visible and vice versa + if (element.style.display == "none") { + element.style.display = "" + } else { + element.style.display = "none" + } + +} + +// toggle the checkbox from checked to unchecked and vice versa +function checkBox(checkbox) { + if (checkbox.getAttribute("checked")) { + // uncheck the box + checkbox.removeAttribute("checked"); + } else { + // set the box to checked + checkbox.setAttribute("checked", true); + } +} |