BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

slow and tedious progress

Browse Source
This commit is contained in:
Raphaël Forment
2023-12-15 16:56:54 +01:00
parent 32ae67b2c6
commit fb4d311ba8
4 changed files with 60 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -18,7 +18,6 @@
<style> <style>
body { body {
font-family: "Arial"; font-family: "Arial";
background-color: "red";
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
width: 100vw; width: 100vw;
@ -66,12 +65,13 @@
</style> </style>
<body id="all" class="z-0 overflow-y-hidden bg-background"> <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 --> <!-- The header is hidden on smaller devices -->
<header class="py-0 block neutral-900"> <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"> <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" /> <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> </a>
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0"> <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" class="hidden">
<div id="documentation-page" class="flex flex-row transparent"> <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"> <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"> <nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-color4">
<details class="" open> <details class="" open>
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary> <summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
<div class="flex flex-col"> <div class="flex flex-col">

3
src/EditorSetup.ts
View File

@ -268,6 +268,7 @@ export const editorSetup: Extension = (() => [
export const installEditor = (app: Editor) => { export const installEditor = (app: Editor) => {
app.vimModeCompartment = new Compartment(); app.vimModeCompartment = new Compartment();
app.hoveringCompartment = new Compartment(); app.hoveringCompartment = new Compartment();
app.themeCompartment = new Compartment();
app.completionsCompartment = new Compartment(); app.completionsCompartment = new Compartment();
app.withLineNumbers = new Compartment(); app.withLineNumbers = new Compartment();
app.chosenLanguage = new Compartment(); app.chosenLanguage = new Compartment();
@ -297,7 +298,9 @@ export const installEditor = (app: Editor) => {
app.settings.completions ? [jsCompletions, toposSoundCompletions] : [], app.settings.completions ? [jsCompletions, toposSoundCompletions] : [],
), ),
editorSetup, editorSetup,
app.themeCompartment.of(
getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")), getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
),
app.chosenLanguage.of(javascript()), app.chosenLanguage.of(javascript()),
]; ];
app.dynamicPlugins = new Compartment(); app.dynamicPlugins = new Compartment();

27
src/main.ts
View File

@ -34,6 +34,7 @@ import { makeNumberExtensions } from "./extensions/NumberExtensions";
// @ts-ignore // @ts-ignore
import { registerSW } from "virtual:pwa-register"; import { registerSW } from "virtual:pwa-register";
import colors from "./colors.json"; import colors from "./colors.json";
import { code } from "./documentation/basics/code";
if ("serviceWorker" in navigator) { if ("serviceWorker" in navigator) {
registerSW(); registerSW();
@ -53,6 +54,7 @@ export class Editor {
hidden_interface: boolean = false; hidden_interface: boolean = false;
fontSize!: Compartment; fontSize!: Compartment;
withLineNumbers!: Compartment; withLineNumbers!: Compartment;
themeCompartment!: Compartment;
vimModeCompartment!: Compartment; vimModeCompartment!: Compartment;
hoveringCompartment!: Compartment; hoveringCompartment!: Compartment;
completionsCompartment!: Compartment; completionsCompartment!: Compartment;
@ -207,6 +209,9 @@ export class Editor {
// Loading universe from URL (if needed) // Loading universe from URL (if needed)
loadUniverserFromUrl(this); loadUniverserFromUrl(this);
// Set the color scheme for the application
this.readTheme("Floraverse");
} }
private getBuffer(type: string): any { private getBuffer(type: string): any {
@ -294,9 +299,9 @@ export class Editor {
*/ */
const tabs = document.querySelectorAll('[id^="tab-"]'); const tabs = document.querySelectorAll('[id^="tab-"]');
const tab = tabs[i] as HTMLElement; 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++) { 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]; let tab_id = tab.id.split("-")[1];
this.local_index = parseInt(tab_id); this.local_index = parseInt(tab_id);
@ -319,15 +324,15 @@ export class Editor {
let changeColor = (button: HTMLElement) => { let changeColor = (button: HTMLElement) => {
interface_buttons.forEach((button) => { interface_buttons.forEach((button) => {
let svg = button.children[0] as HTMLElement; let svg = button.children[0] as HTMLElement;
if (svg.classList.contains("text-orange-300")) { if (svg.classList.contains("text-color3")) {
svg.classList.remove("text-orange-300"); svg.classList.remove("text-color3");
button.classList.remove("text-orange-300"); button.classList.remove("text-color3");
} }
}); });
button.children[0].classList.remove("text-white"); button.children[0].classList.remove("text-white");
button.children[0].classList.add("text-orange-300"); button.children[0].classList.add("text-color3");
button.classList.add("text-orange-300"); button.classList.add("text-color3");
button.classList.add("fill-orange-300"); button.classList.add("fill-color3");
}; };
switch (mode) { switch (mode) {
@ -442,7 +447,7 @@ export class Editor {
unfocusPlayButtons() { unfocusPlayButtons() {
document.querySelectorAll('[id^="play-button-"]').forEach((button) => { 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"); button.children[0].classList.remove("animate-pulse");
}); });
} }
@ -591,6 +596,10 @@ export class Editor {
if (selected_theme) { if (selected_theme) {
this.updateInterfaceTheme(selected_theme); this.updateInterfaceTheme(selected_theme);
let codeMirrorTheme = getCodeMirrorTheme(selected_theme); let codeMirrorTheme = getCodeMirrorTheme(selected_theme);
// Reconfigure the view with the new theme
this.view.dispatch({
effects: this.themeCompartment.reconfigure(codeMirrorTheme),
});
} }
} }
} }

33
src/style.css
View File

@ -1161,10 +1161,33 @@ video {
background-color: rgb(var(--color6) / var(--tw-bg-opacity)); 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-color2 {
fill: rgb(var(--color2) / 1); fill: rgb(var(--color2) / 1);
} }
.fill-color3 {
fill: rgb(var(--color3) / 1);
}
.p-1 { .p-1 {
padding: 0.25rem; padding: 0.25rem;
} }
@ -1356,6 +1379,11 @@ video {
line-height: 1rem; line-height: 1rem;
} }
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.font-bold { .font-bold {
font-weight: 700; font-weight: 700;
} }
@ -1404,6 +1432,11 @@ video {
color: rgb(var(--color2) / var(--tw-text-opacity)); color: rgb(var(--color2) / var(--tw-text-opacity));
} }
.text-color6 {
--tw-text-opacity: 1;
color: rgb(var(--color6) / var(--tw-text-opacity));
}
.underline { .underline {
text-decoration-line: underline; text-decoration-line: underline;
} }