ari/OpenTerminal
ari/OpenTerminal
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

added palette selector panel, and lcd toggle! 🎨

Browse source
This commit is contained in:
ari melody 2023-10-02 23:51:20 +01:00
parent 9db4e48ffa
commit f99e4801f4
No known key found for this signature in database
GPG key ID: 12A070A0ACDCA45F
4 changed files with 128 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/scripts/terminal.js
View file

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

85
public/scripts/visual.js
View file

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