No Description https://ascii.town
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

explore.html 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <title>Explore the Torus</title>
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <style>
  5. body {
  6. color: white;
  7. background-color: black;
  8. text-align: center;
  9. }
  10. a { color: white; }
  11. img {
  12. max-width: 100%;
  13. image-rendering: pixelated;
  14. }
  15. table { margin: auto; }
  16. button.arr { font-size: 150%; }
  17. </style>
  18. <p>
  19. A collaborative ASCII art project.
  20. <p>
  21. <a href="ssh://torus@ascii.town"><code>ssh torus@ascii.town</code></a>
  22. <p>
  23. <img id="tile" src="tile.png">
  24. <table>
  25. <tr>
  26. <td rowspan="2">
  27. <button id="larr" class="arr" type="button">&larr;</button>
  28. </td>
  29. <td><button id="uarr" class="arr" type="button">&uarr;</button></td>
  30. <td rowspan="2">
  31. <button id="rarr" class="arr" type="button">&rarr;</button>
  32. </td>
  33. </tr>
  34. <tr>
  35. <td><button id="darr" class="arr" type="button">&darr;</button></td>
  36. </tr>
  37. <tr>
  38. <td colspan="3"><button id="home" type="button">HOME</button></td>
  39. </tr>
  40. </table>
  41. <p>
  42. This is AGPLv3 Free Software!
  43. Code is available from
  44. <a href="https://code.causal.agency/june/torus">Code Toilet</a>.
  45. <script>
  46. /* Copyright (C) 2019 C. McEnroe <june@causal.agency>
  47. *
  48. * This program is free software: you can redistribute it and/or modify
  49. * it under the terms of the GNU Affero General Public License as published by
  50. * the Free Software Foundation, either version 3 of the License, or
  51. * (at your option) any later version.
  52. *
  53. * This program is distributed in the hope that it will be useful,
  54. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  55. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  56. * GNU Affero General Public License for more details.
  57. *
  58. * You should have received a copy of the GNU Affero General Public License
  59. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  60. */
  61. let tile = document.getElementById("tile");
  62. let larr = document.getElementById("larr");
  63. let darr = document.getElementById("darr");
  64. let uarr = document.getElementById("uarr");
  65. let rarr = document.getElementById("rarr");
  66. let state = new URLSearchParams();
  67. function setImage() {
  68. let url = new URL(tile.src);
  69. url.search = "?" + state.toString();
  70. tile.src = url.toString();
  71. }
  72. window.onhashchange = function() {
  73. state = new URLSearchParams(document.location.hash.slice(1));
  74. setImage();
  75. }
  76. window.onhashchange();
  77. function setState(x, y) {
  78. state.set("x", x);
  79. state.set("y", y);
  80. history.pushState(state.toString(), "", "#" + state.toString());
  81. setImage();
  82. }
  83. function move(dx, dy) {
  84. setState(+state.get("x") + dx, +state.get("y") + dy);
  85. }
  86. window.onpopstate = function(event) {
  87. state = new URLSearchParams(event.state);
  88. setImage();
  89. }
  90. home.onclick = () => setState(0, 0);
  91. larr.onclick = () => move(-1, 0);
  92. darr.onclick = () => move( 0, 1);
  93. uarr.onclick = () => move( 0, -1);
  94. rarr.onclick = () => move( 1, 0);
  95. document.onkeydown = function(event) {
  96. switch (event.key) {
  97. case "Q": case "Home": home.onclick(); break;
  98. case "h": case "ArrowLeft": larr.onclick(); break;
  99. case "j": case "ArrowDown": darr.onclick(); break;
  100. case "k": case "ArrowUp": uarr.onclick(); break;
  101. case "l": case "ArrowRight": rarr.onclick(); break;
  102. }
  103. return false;
  104. }
  105. </script>