added palette selector panel, and lcd toggle! 🎨

public/index.html

@@ -29,6 +29,14 @@
 				<li id="server-url">not connected</li>
 				<li><a id="connect">connect</a></li>
 			</ul>
+			<ul>
+				<li>
+					<a id="colours">colours</a>
+					<ul id="colours-dropdown">
+					</ul>
+				</li>
+				<li><a id="lcd">lcd</a></li>
+			</ul>
 		</header>
 		<main>
 			<pre id="content"></pre>

public/scripts/terminal.js

@@ -104,6 +104,7 @@ export async function connect(server_url) {
 		});
 	}
 
+	pre_buffer_chars = 0;
 	content.innerHTML = "";
 	server_indicator.innerText = "connecting...";
 

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)
  */

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,
+footer a:hover,
-header li:has(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;