Collaborative ASCII art 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

11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
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>