slow and tedious progress
This commit is contained in:
10
index.html
10
index.html
@ -18,7 +18,6 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: "Arial";
|
||||
background-color: "red";
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
@ -66,12 +65,13 @@
|
||||
|
||||
</style>
|
||||
<body id="all" class="z-0 overflow-y-hidden bg-background">
|
||||
<h1 class="text-3xl text-color5">Portez donc un whisky à ce juge blond qui fume</h1>
|
||||
<!-- The header is hidden on smaller devices -->
|
||||
<header class="py-0 block neutral-900">
|
||||
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
|
||||
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-color5">
|
||||
<a class="flex title-font font-medium items-center mb-0">
|
||||
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 rounded-full fill-color2" alt="Topos Frog Logo" />
|
||||
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl placeholder-color2" id="renamer" type="text" placeholder="Topos">
|
||||
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-color6 text-2xl placeholder-color2" id="renamer" type="text" placeholder="Topos">
|
||||
|
||||
</a>
|
||||
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
|
||||
@ -126,8 +126,8 @@
|
||||
|
||||
<div id="documentation" class="hidden">
|
||||
<div id="documentation-page" class="flex flex-row transparent">
|
||||
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 lineHighlight">
|
||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
|
||||
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-[--var(color1)]">
|
||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-color4">
|
||||
<details class="" open>
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
|
||||
<div class="flex flex-col">
|
||||
|
||||
@ -268,6 +268,7 @@ export const editorSetup: Extension = (() => [
|
||||
export const installEditor = (app: Editor) => {
|
||||
app.vimModeCompartment = new Compartment();
|
||||
app.hoveringCompartment = new Compartment();
|
||||
app.themeCompartment = new Compartment();
|
||||
app.completionsCompartment = new Compartment();
|
||||
app.withLineNumbers = new Compartment();
|
||||
app.chosenLanguage = new Compartment();
|
||||
@ -297,7 +298,9 @@ export const installEditor = (app: Editor) => {
|
||||
app.settings.completions ? [jsCompletions, toposSoundCompletions] : [],
|
||||
),
|
||||
editorSetup,
|
||||
getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
|
||||
app.themeCompartment.of(
|
||||
getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
|
||||
),
|
||||
app.chosenLanguage.of(javascript()),
|
||||
];
|
||||
app.dynamicPlugins = new Compartment();
|
||||
|
||||
27
src/main.ts
27
src/main.ts
@ -34,6 +34,7 @@ import { makeNumberExtensions } from "./extensions/NumberExtensions";
|
||||
// @ts-ignore
|
||||
import { registerSW } from "virtual:pwa-register";
|
||||
import colors from "./colors.json";
|
||||
import { code } from "./documentation/basics/code";
|
||||
|
||||
if ("serviceWorker" in navigator) {
|
||||
registerSW();
|
||||
@ -53,6 +54,7 @@ export class Editor {
|
||||
hidden_interface: boolean = false;
|
||||
fontSize!: Compartment;
|
||||
withLineNumbers!: Compartment;
|
||||
themeCompartment!: Compartment;
|
||||
vimModeCompartment!: Compartment;
|
||||
hoveringCompartment!: Compartment;
|
||||
completionsCompartment!: Compartment;
|
||||
@ -207,6 +209,9 @@ export class Editor {
|
||||
|
||||
// Loading universe from URL (if needed)
|
||||
loadUniverserFromUrl(this);
|
||||
|
||||
// Set the color scheme for the application
|
||||
this.readTheme("Floraverse");
|
||||
}
|
||||
|
||||
private getBuffer(type: string): any {
|
||||
@ -294,9 +299,9 @@ export class Editor {
|
||||
*/
|
||||
const tabs = document.querySelectorAll('[id^="tab-"]');
|
||||
const tab = tabs[i] as HTMLElement;
|
||||
tab.classList.add("bg-orange-300");
|
||||
tab.classList.add("bg-color3");
|
||||
for (let j = 0; j < tabs.length; j++) {
|
||||
if (j != i) tabs[j].classList.remove("bg-orange-300");
|
||||
if (j != i) tabs[j].classList.remove("bg-color3");
|
||||
}
|
||||
let tab_id = tab.id.split("-")[1];
|
||||
this.local_index = parseInt(tab_id);
|
||||
@ -319,15 +324,15 @@ export class Editor {
|
||||
let changeColor = (button: HTMLElement) => {
|
||||
interface_buttons.forEach((button) => {
|
||||
let svg = button.children[0] as HTMLElement;
|
||||
if (svg.classList.contains("text-orange-300")) {
|
||||
svg.classList.remove("text-orange-300");
|
||||
button.classList.remove("text-orange-300");
|
||||
if (svg.classList.contains("text-color3")) {
|
||||
svg.classList.remove("text-color3");
|
||||
button.classList.remove("text-color3");
|
||||
}
|
||||
});
|
||||
button.children[0].classList.remove("text-white");
|
||||
button.children[0].classList.add("text-orange-300");
|
||||
button.classList.add("text-orange-300");
|
||||
button.classList.add("fill-orange-300");
|
||||
button.children[0].classList.add("text-color3");
|
||||
button.classList.add("text-color3");
|
||||
button.classList.add("fill-color3");
|
||||
};
|
||||
|
||||
switch (mode) {
|
||||
@ -442,7 +447,7 @@ export class Editor {
|
||||
|
||||
unfocusPlayButtons() {
|
||||
document.querySelectorAll('[id^="play-button-"]').forEach((button) => {
|
||||
button.children[0].classList.remove("fill-orange-300");
|
||||
button.children[0].classList.remove("fill-color3");
|
||||
button.children[0].classList.remove("animate-pulse");
|
||||
});
|
||||
}
|
||||
@ -591,6 +596,10 @@ export class Editor {
|
||||
if (selected_theme) {
|
||||
this.updateInterfaceTheme(selected_theme);
|
||||
let codeMirrorTheme = getCodeMirrorTheme(selected_theme);
|
||||
// Reconfigure the view with the new theme
|
||||
this.view.dispatch({
|
||||
effects: this.themeCompartment.reconfigure(codeMirrorTheme),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1161,10 +1161,33 @@ video {
|
||||
background-color: rgb(var(--color6) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-color3 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--color3) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-color2 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--color2) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-color4 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--color4) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[--var\(color1\)\] {
|
||||
background-color: var(--var(color1));
|
||||
}
|
||||
|
||||
.fill-color2 {
|
||||
fill: rgb(var(--color2) / 1);
|
||||
}
|
||||
|
||||
.fill-color3 {
|
||||
fill: rgb(var(--color3) / 1);
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
@ -1356,6 +1379,11 @@ video {
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -1404,6 +1432,11 @@ video {
|
||||
color: rgb(var(--color2) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-color6 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(var(--color6) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user