Reworking the repository

README.md

@@ -0,0 +1,26 @@
+# Rollover
+
+Rollover is an [esolang](https://en.wikipedia.org/wiki/Esoteric_programming_language) created by [Scratch_Fakemon](https://scratchfakemon.github.io/).
+
+## Commands
+
+Rollover has seven commands, which are:
+- `n`: moves to the next cell
+- `i`: increments the current cell's value
+- `c[]`: loops the code inside the brackets until the value of the cell equals the cell's index
+- `p`: prints the current cell's value as a number
+- `a`: prints the current cell's value as an ASCII character
+- `u`: prints the current cell's value as a UTF-8 character
+- `g`: gets a numerical input from the user and places it in the current cell
+
+## Limits
+
+Rollover has 256 cells, which have numeric values from 0 to 255 (similar to C's `uint8_t`).
+
+Due to Rollover having no decrement commands, the only way to make the current cell or its value go down is to have it *roll over* when it exceeds the limit.
+
+## Resources
+
+- https://esolangs.org/wiki/Rollover, the page for Rollover on the Esolangs wiki
+- https://scratchfakemon.github.io/rollover, the official Rollover page
+- https://pid-j.github.io/rollover, an unofficial fork of the Rollover page with *extended features.*

i18n/en-US.json

@@ -0,0 +1,73 @@
+{
+  "metadata": {
+    "languageName": "English",
+    "languageNativeName": "English",
+    "locationName": "United States",
+    "locationNativeName": "United States",
+    "localeName": "English (United States)",
+    "localeNameNative": "English (United States)"
+  },
+  "strings": {
+    "Rollover": "Rollover",
+    "What is Rollover?": "What is Rollover?",
+    "Rollover is an esolang created by Scratch_Fakemon.": "Rollover is an esolang created by <a href=\"https://scratchfakemon.github.io/\">Scratch_Fakemon</a>. ",
+    "It uses an array of cells, of which there can only be 256 (0-255).": "It uses an array of cells, of which there can only be 256 (0-255). ",
+    "A cell's value works the same way, starting at 0 and having a maximum of 255.": "A cell's value works the same way, starting at 0 and having a maximum of 255.",
+
+    "Since Rollover doesn't have any decrement commands,": "Since Rollover doesn't have any decrement commands, ",
+    "the only way to make the current cell or its value go down": "the only way to make the current cell or its value go down ",
+    "is to have it roll over (get it?) when it exceeds the maximum value.": "is to have it <i>roll over</i> (get it?) when it exceeds the maximum value.",
+
+    "Rollover's commands": "Rollover's commands",
+    "Rollover has (number) commands in total:": "Rollover has 7 commands in total:",
+    "n - moves to the next cell": "n - moves to the next cell",
+    "i - increments the current cell's value": "i - increments the current cell's value",
+    "c[] - loops the code inside the brackets": "c[] - loops the code inside the brackets ",
+    "until the value of the cell equals the cell's index": "until the value of the cell equals the cell's index",
+    "p - prints the current cell's value as a number": "p - prints the current cell's value as a number",
+    "a - prints the current cell's value as an ASCII character": "a - prints the current cell's value as an ASCII character",
+    "u - prints the current cell's value as a UTF-8 character": "u - prints the current cell's value as a UTF-8 character",
+    "g - gets a numerical input from the user and places it in the current cell": "g - gets a numerical input from the user and places it in the current cell",
+
+    "Try it out!": "Try it out!",
+    "Use a sample": "Use a sample",
+    "Sample name (0+0)": "%1",
+    "Sample name (1+0)": "%1 - by %2",
+    "Sample name (2+0)": "%1 - by %2 and %3",
+    "Sample name (3+0)": "%1 - by %2, %3, and %4",
+    "Sample name (1+1)": "%1 - by %2, modified by %5",
+    "Sample name (2+1)": "%1 - by %2 and %3, modified by %5",
+    "Sample name (3+1)": "%1 - by %2, %3 and %4, modified by %5",
+    "Sample name (1+2)": "%1 - by %2, modified by %5 and %6",
+    "Sample name (2+2)": "%1 - by %2 and %3, modified by %5 and %6",
+    "Sample name (3+2)": "%1 - by %2, %3, and %4, modified by %5 and %6",
+    "Sample name (1+3)": "%1 - by %2, modified by %5, %6, and %7",
+    "Sample name (2+3)": "%1 - by %2 and %3, modified by %5, %6, and %7",
+    "Sample name (3+3)": "%1 - by %2, %3, and %4, modified by %5, %6, and %7",
+
+    "Put your Rollover code here...": "Put your Rollover code here...",
+    "Run": "Run",
+    "Hide Output": "Hide Output",
+    "Show Output": "Show Output",
+    "Final state:": "Final state:",
+
+    "Configuration": "Configuration",
+    "Configuration data will not be saved.": "Configuration data will <b>not</b> be saved. ",
+    "Options marked as dangerous should be used at your own risk!": "Options marked as dangerous should be used at your own risk!",
+    "Invalid input!": "Invalid input!",
+
+    "Other": "Other",
+    "Select language": "Select language",
+    "Convert text to Rollover": "Convert text to Rollover",
+    "Convert": "Convert",
+
+    "Rollover also has a page on esolangs.org!": "Rollover also has a <a href=\"https://esolangs.org/wiki/Rollover\">page on esolangs.org!</a>",
+    "Rollover was originally created by Scratch_Fakemon.": "Rollover was originally created by <a href=\"https://scratchfakemon.github.io/\">Scratch_Fakemon</a>. ",
+    "Modified by Pigeon.": "Modified by <a href=\"https://pid-j.github.io\">Pigeon</a>.",
+
+    "Rollover is under the GNU GPLv3.": "Rollover is under the GNU GPLv3."
+  },
+  "configuration": {
+    "(DANGEROUS)": " <b style=\"color: var(--theme-light)\">(DANGEROUS)<b>"
+  }
+}

i18n/i18n.js

@@ -0,0 +1,56 @@
+window.i18n = class {
+  constructor(localStorageKey = "") {
+    this.availableLocales = ["en-US"];
+    this.localStorageKey = localStorageKey;
+    this.locale = null;
+    this.i18n = null;
+    this.listeners = [];
+
+    this.changeLocale(localStorage.getItem(this.localStorageKey) ?? "en-US");
+  }
+
+  // Locale
+  async changeLocale(newLocale = "en-US") {
+    if (!this.availableLocales.includes(newLocale)) return;
+
+    let response = await fetch(`i18n/${newLocale}.json`);
+    this.i18n = await response.json();
+    this.locale = newLocale;
+    localStorage.setItem(this.localStorageKey, newLocale);
+
+    this._fire("LOCALE_CHANGED", newLocale);
+  }
+
+  translate(translationKey = "", namespace = "strings", defaultValue = "") {
+    let namespaceObject = this.i18n[namespace] ?? {};
+
+    return namespaceObject[translationKey] ?? (defaultValue || translationKey);
+  }
+
+  // Event listeners
+  _fire(event, ...data) {
+    this.listeners.forEach(listener => {
+      if (listener.event != event) return;
+
+      listener.callback(...data);
+    });
+  }
+
+  on(event, callback) {
+    return this.addListener(event, callback);
+  }
+
+  addListener(event, callback) {
+    let id = window.crypto.randomUUID();
+    this.listeners.push({ event, callback, id });
+
+    return id;
+  }
+
+  removeListener(id) {
+    let idx = this.listeners.findIndex(el => el.id === id);
+    if (idx < 0) return;
+
+    delete this.listeners[idx];
+  }
+};

index.html

@@ -1,102 +1,100 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Rollover Esolang</title>
-    <style>
-      body,
-      label {
-        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
-          sans-serif;
-        color: white;
-        background-color: #864848;
-      }
-      textarea,
-      button,
-      select {
-        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
-          sans-serif;
-        padding: 10px;
-        border-radius: 100px;
-        border: none;
-        background-color: #e68b8b;
-        color: white;
-        margin-top: 5px;
-      }
-      textarea {
-        border-radius: 25px;
-        width: 510px;
-        height: 290px;
-      }
-      a {
-        color: #e68b8b;
-        font-weight: bold;
-        text-decoration: none;
-      }
-      button,
-      a,
-      select {
-        transition: all 1s ease-in-out;
-      }
-      button:hover,
-      select:hover {
-        background-color: #eda8a8;
-      }
-      a:hover {
-        color: #eda8a8;
-        text-decoration: underline;
-      }
-    </style>
-    <link rel="icon" type="image/x-icon" href="favicon.svg" />
-  </head>
-  <body>
-    <h1>Rollover</h1>
-    <br />
-    <h3>What is Rollover?</h3>
-    Rollover is an esolang created by
-    <a href="https://scratchfakemon.github.io">Scratch_Fakemon</a>. It uses an
-    array of cells, of which there can only be 256 (0-255). A cell's value works
-    the same way, starting at 0 and having a maximum of 255. <br />Since
-    Rollover doesn't have any decrement commands, the only way to make the
-    current cell or its value go down is to have it <i>roll over</i> (get it?)
-    when it exceeds the maximum value.
-    <br />
-    <h3>Rollover's commands</h3>
-    Rollover has 6 commands in total:
-    <ul>
-      <li>n - moves to the next cell</li>
-      <li>i - increments the current cell's value</li>
-      <li>
-        c[] - loops the code inside the brackets until the value of the cell
-        equals the cell's index
-      </li>
-      <li>p - prints the current cell's value as a number</li>
-      <li>a - prints the current cell's value as an ASCII character</li>
-      <li>u - prints the current cell's value as a UTF-8 character</li>
-      <li>g - gets a numerical input from the user and places it in the current cell</li>
-    </ul>
-    <br />
-    <h3>Try it out!</h3>
-    <div id="tryitout">
-      <label for="samples">Use a sample</label>
-      <select id="samples" onchange="updateinput()">
-        <option value="0">None</option>
-        <option value="1">Hello world!</option>
-        <option value="2">Winky Guy</option>
-        <option value="3">Isn't Rollover just so epic?</option>
-        <option value="4">Aviation</option>
-        <option value="5">Odd or Even - by Ponydork, modified by Scratch_Fakemon</option>
-        <option value="6">Beer on the Wall - by Ponydork</option>
-        <option value="7">ASCII Printer</option>
-      </select>
-      <br />
-      <textarea placeholder="Put your Rollover code here..." id="rolloverinput"></textarea>
-      <button onclick="runfromweb()">Run</button>
-      <p id="notices"></p>
-    </div>
-    <hr />
-    Rollover also has a
-    <a href="https://esolangs.org/wiki/Rollover">page on esolangs.org</a>!
-
-    <script src="rollover.js"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8">
+        <title>Rollover Esolang</title>
+
+        <script src="rollover/rollover.js"></script>
+        <script src="rollover/samples.js"></script>
+        <script src="rollover/config.js"></script>
+        <script src="i18n/i18n.js"></script>
+
+        <link rel="icon" type="image/x-icon" href="page/favicon.svg" />
+        <link rel="stylesheet" href="page/index.css" />
+    </head>
+    <body>
+        <h1 data-i18n="Rollover"></h1>
+        <h2 data-i18n="What is Rollover?"></h2>
+        <span data-i18n="Rollover is an esolang created by Scratch_Fakemon."></span>
+        <span data-i18n="It uses an array of cells, of which there can only be 256 (0-255)."></span>
+        <span data-i18n="A cell's value works the same way, starting at 0 and having a maximum of 255."></span>
+        <br/>
+        <span data-i18n="Since Rollover doesn't have any decrement commands,"></span>
+        <span data-i18n="the only way to make the current cell or its value go down"></span>
+        <span data-i18n="is to have it roll over (get it?) when it exceeds the maximum value."></span>
+
+        <h2 data-i18n="Rollover's commands"></h2>
+        <span data-i18n="Rollover has (number) commands in total:"></span>
+        <ul>
+            <li data-i18n="n - moves to the next cell"></li>
+            <li data-i18n="i - increments the current cell's value"></li>
+            <li>
+                <span data-i18n="c[] - loops the code inside the brackets"></span>
+                <span data-i18n="until the value of the cell equals the cell's index"></span>
+            </li>
+            <li data-i18n="p - prints the current cell's value as a number"></li>
+            <li data-i18n="a - prints the current cell's value as an ASCII character"></li>
+            <li data-i18n="u - prints the current cell's value as a UTF-8 character"></li>
+            <li data-i18n="g - gets a numerical input from the user and places it in the current cell"></li>
+        </ul>
+
+        <h2 data-i18n="Try it out!"></h2>
+
+        <div id="tryItOut">
+            <label for="samples" data-i18n="Use a sample"></label>
+            <select id="samples" onchange="updateInput()"></select>
+            <br />
+
+            <textarea data-i18n="Put your Rollover code here..." id="inputArea"></textarea>
+            <br/>
+
+            <button id="runRollover" data-i18n="Run" onclick="runFromInput()"></button><br/>
+            <button id="toggleOutput" data-i18n="Hide Output" onclick="toggleOutput()" hidden></button>
+            <p id="notices"></p>
+        </div>
+
+        <h3 data-i18n="Configuration"></h3>
+
+        <i data-i18n="Configuration data will not be saved."></i>
+        <i><b data-i18n="Options marked as dangerous should be used at your own risk!"></b></i>
+        <br/>
+        <br/>
+
+        <div id="configurationOptions"></div>
+
+        <h3 data-i18n="Other"></h3>
+
+        <label for="languageSelector" data-i18n="Select language"></label>
+        <select id="languageSelector"></select>
+        <br/>
+        <br/>
+
+        <label for="stringToRollover" data-i18n="Convert text to Rollover"></label>
+        <input id="stringToRollover"></input>
+        <button data-i18n="Convert" onclick="stringToRollover()"></button>
+        <br/>
+        <br/>
+
+        <span id="stringToRolloverResult"></span>
+        <br/>
+
+        <hr />
+
+        <div class="footer">
+            <span data-i18n="Rollover also has a page on esolangs.org!"></span>
+            <br />
+
+            <small><i>
+                <span data-i18n="Rollover was originally created by Scratch_Fakemon."></span>
+                <span data-i18n="Modified by Pigeon."></span>
+                <br />
+
+                <span data-i18n="Rollover is under the GNU GPLv3."></span>
+            </i></small>
+
+            <br />
+        </div>
+
+        <script src="page/index.js"></script>
+    </body>
 </html>