diff --git a/public/index.html b/public/index.html
index 9c5fe2e..1dd6909 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,6 +29,14 @@
not connected
connect
+
diff --git a/public/scripts/terminal.js b/public/scripts/terminal.js
index d73dde8..14ec853 100644
--- a/public/scripts/terminal.js
+++ b/public/scripts/terminal.js
@@ -104,6 +104,7 @@ export async function connect(server_url) {
});
}
+ pre_buffer_chars = 0;
content.innerHTML = "";
server_indicator.innerText = "connecting...";
diff --git a/public/scripts/visual.js b/public/scripts/visual.js
index 7ad63c0..5186f5e 100644
--- a/public/scripts/visual.js
+++ b/public/scripts/visual.js
@@ -1,14 +1,3 @@
-/*
- * binds visual functions to the window
- */
-export function bind() {
- window.PALETTE = PALETTE;
- window.set_palette = set_palette;
- window.set_colours = set_colours;
- window.clear_colours = clear_colours;
- window.toggle_lcd = toggle_lcd;
-}
-
const PALETTE = {
ari: ["#b7fd49", "#111111"],
mono: ["#ffffff", "#111111"],
@@ -47,6 +36,80 @@ const PALETTE = {
},
};
+/*
+ * binds visual functions to the window
+ */
+export function bind() {
+ window.PALETTE = PALETTE;
+ window.set_palette = set_palette;
+ window.set_colours = set_colours;
+ window.clear_colours = clear_colours;
+ window.toggle_lcd = toggle_lcd;
+
+ const colours_toggle = document.getElementById("colours");
+ const dropdown = document.getElementById("colours-dropdown");
+
+ colours_toggle.addEventListener("click", () => {
+ dropdown.classList.toggle("active");
+ });
+
+ function create_theme_list_item(name, palette) {
+ const list_item = document.createElement("li");
+ list_item.innerText = name;
+
+ list_item.addEventListener("click", () => {
+ set_palette(palette);
+ });
+
+ // previewing themes pre-selection
+ // there are epilepsy concerns regarding this, so i've disabled it for now
+ /*
+ list_item.addEventListener("mouseenter", () => {
+ document.documentElement.style.setProperty('--colour', palette[0]);
+ document.documentElement.style.setProperty('--bgcolour', palette[1]);
+ });
+
+ list_item.addEventListener("mouseleave", () => {
+ document.documentElement.style.setProperty('--colour', localStorage.getItem("foreground"));
+ document.documentElement.style.setProperty('--bgcolour', localStorage.getItem("background"));
+ });
+ */
+
+ return list_item;
+ }
+
+ function iterate_palette(palette, parent_key = "") {
+ var named_palettes = [];
+ for (const key in palette) {
+ if (!palette.hasOwnProperty(key)) continue;
+
+ const nested_key = parent_key ? `${parent_key}.${key}` : key;
+
+ if (palette[key].constructor == Object) {
+ named_palettes.push(...iterate_palette(palette[key], nested_key));
+ } else {
+ named_palettes.push({
+ name: nested_key,
+ colours: palette[key]
+ });
+ }
+ }
+ return named_palettes;
+ }
+
+ const named_palettes = iterate_palette(PALETTE);
+
+ for (var i = 0; i < named_palettes.length; i++) {
+ const name = named_palettes[i].name;
+ const palette = named_palettes[i].colours;
+ dropdown.appendChild(create_theme_list_item(name, palette));
+ }
+
+ const lcd_toggle = document.getElementById("lcd");
+
+ lcd_toggle.addEventListener("click", toggle_lcd);
+}
+
/*
* sets the colour palette using the name ("example.palette") or reference to a palette (PALETTE.example)
*/
diff --git a/public/styles/main.css b/public/styles/main.css
index 269f914..c590b3c 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -67,11 +67,19 @@ header ul {
footer li,
header li {
list-style: none;
+}
+
+footer li a,
+header li a,
+footer li:not(:has(a)),
+header li:not(:has(a)) {
opacity: .5;
}
-footer li:has(a):hover,
-header li:has(a):hover {
+footer a:hover,
+header a:hover,
+footer a.active,
+header a.active {
text-shadow: 0 0 1em, 0 0 3em;
opacity: 1;
}
@@ -83,6 +91,41 @@ header a {
cursor: pointer;
}
+a#colours {
+
+}
+
+ul#colours-dropdown {
+ position: absolute;
+ top: 2.5em;
+ right: 1.3em;
+ padding: calc(1rem - .25em);
+ display: none;
+ flex-direction: column;
+ text-align: right;
+ gap: 0;
+ border: 1px solid var(--colour);
+ background: var(--bgcolour);
+ max-height: 18em;
+ overflow-y: scroll;
+}
+
+ul#colours-dropdown.active {
+ display: flex;
+}
+
+ul#colours-dropdown li {
+ padding: .25em .5em;
+ cursor: pointer;
+}
+
+ul#colours-dropdown li:hover,
+ul#colours-dropdown li.active {
+ opacity: 1;
+ color: var(--bgcolour);
+ background: var(--colour);
+}
+
div#overlay {
position: fixed;
top: 0;