diff options
| author | Florian Fischer <florian.fl.fischer@fau.de> | 2021-04-02 22:26:31 +0200 |
|---|---|---|
| committer | Florian Fischer <florian.fl.fischer@fau.de> | 2021-04-02 22:27:54 +0200 |
| commit | 23408c6b463ee2a73060f08e29b221467d310066 (patch) | |
| tree | f1f01410c8b73c01a57a219a2b6c1670f0fde56a /html/tools.html | |
| parent | 0f8c8d3354e28c53f47cedfe3595f20f0b9300bd (diff) | |
| download | muhqs-game-23408c6b463ee2a73060f08e29b221467d310066.tar.gz muhqs-game-23408c6b463ee2a73060f08e29b221467d310066.zip | |
add simple web tools
Diffstat (limited to 'html/tools.html')
| -rw-r--r-- | html/tools.html | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/html/tools.html b/html/tools.html new file mode 100644 index 00000000..86e8ea61 --- /dev/null +++ b/html/tools.html @@ -0,0 +1,183 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <title>Muhq’s Game Web Tools</title> + + <style> + [class*="cell-"] { + min-width: 20px; + min-height: 20px; + display: inline-block; + } + + .cell-hidden { + margin: 1px; + } + + .cell-visible { + border: 1px solid gray; + } + </style> + + <script language="javascript" type="text/javascript"> + /* + @licstart The following is the entire license notice for the + JavaScript code in this page. + + Copyright (C) 2021 Florian Fischer + + The JavaScript code in this page is free software: you can + redistribute it and/or modify it under the terms of the GNU + General Public License (GNU GPL) as published by the Free Software + Foundation, either version 3 of the License, or any later version. + The code is distributed WITHOUT ANY WARRANTY; + without even the implied warranty of MERCHANTABILITY or FITNESS + FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. + + As additional permission under GNU GPL version 3 section 7, you + may distribute non-source (e.g., minimized or compacted) forms of + that code without the copy of the GNU GPL normally required by + section 4, provided you include this license notice and a URL + through which recipients can access the Corresponding Source. + + @licend The above is the entire license notice + for the JavaScript code in this page. + */ + + // return a random number between 1 and max + function randomInt(max) { + return Math.floor(Math.random() * Number(max)) + 1; + } + + // return True if the point (x,y) is in Range r + // Thanks Wolfgang for this function :) + function xyInRange(x, y, r) { + let ax = Math.abs(x); + let ay = Math.abs(y); + let abs = 0; + + if (ax > ay) { + abs = ax + Math.floor(ay / 2); + } else { + abs = ay + Math.floor(ax / 2); + } + + return abs <= r; + } + + // Create a Range X + function range(r, include_center) { + let range_div = document.createElement("div"); + + for (y = -r; y <= r; y++) { + let row = document.createElement("div"); + range_div.appendChild(row).className = "gridRow"; + for (x = -r; x <= r; x++) { + let cell = document.createElement("div"); + + if (xyInRange(x, y, r)) { + cell.className = "cell-visible"; + } else { + cell.className = "cell-hidden"; + } + + if (x == 0 && y == 0) { + cell.id = "center"; + cell.style['backgroundColor'] = "yellow"; + } + + + row.appendChild(cell); + } + } + + // highlight random tile + highlightRandom(range_div, include_center); + + return range_div; + } + + function highlightRandom(range_div, include_center) { + let cells = range_div.querySelectorAll(".cell-visible"); + while (true) { + let r = randomInt(cells.length) - 1; + let cell = cells[r]; + + if (cell.id == "center" && !include_center) { + continue; + } + + cell.style['backgroundColor'] = "red"; + return; + } + } + + document.addEventListener('DOMContentLoaded', function() { + let result = document.getElementById("result"); + + document.getElementById("random_number_form").onsubmit = function() { + let max_input = document.getElementById('random_number_max'); + result.innerHTML = "Random number: " + randomInt(max_input.value); + return false; + } + + document.getElementById("random_tile_from_map_form").onsubmit = function() { + let x_input = document.getElementById('random_tile_from_map_x'); + let y_input = document.getElementById('random_tile_from_map_y'); + result.innerHTML = "Random tile: (x:" + randomInt(x_input.value) + + ", y:" + randomInt(y_input.value) + ")"; + return false; + } + + document.getElementById("random_tile_from_range_form").onsubmit = function() { + let x_input = document.getElementById('random_tile_from_range_x'); + let include_center = document.getElementById('random_tile_from_range_include_center'); + let range_div = range(x_input.value, include_center.checked); + result.innerHTML = ""; + result.appendChild(range_div); + // TODO select random tile + return false; + } + }); + </script> + +</head> + +<body> +<div> +Random number smaller than +<form id="random_number_form"> + <input id="random_number_max" type="number"/> + <!-- non visual submit input to submit on "Enter" --> + <input type="submit" style="display: none" /> + <input id="random_number_button" type="submit"> +</form> +</div> + +<div> +Random tile within +<form id="random_tile_from_map_form"> + <input id="random_tile_from_map_x" type="number"/> + <input id="random_tile_from_map_y" type="number"/> + <input id="random_tile_from_map_button" type="submit"> +</form> +</div> + +<div> +Random tile within Range +<form id="random_tile_from_range_form"> + <input id="random_tile_from_range_x" type="number"/> + <!-- non visual submit input to submit on "Enter" --> + <input type="submit" style="display: none" /> + <input id="random_tile_from_range_button" type="submit"> + <input id="random_tile_from_range_include_center" type="checkbox"> + include center +</form> +</div> + +<div id="result"> +</div> + +</body> +</html> |