From 30c909403244108da7c53d841c546acb301c5c13 Mon Sep 17 00:00:00 2001 From: Raphael Forment Date: Sun, 3 Sep 2023 14:08:44 +0200 Subject: [PATCH] minor fixes --- src/API.ts | 4 +-- src/documentation/samples.ts | 2 +- src/main.ts | 15 ++++---- src/themes/materialDark.ts | 69 +++++++++++++++++++++++------------- 4 files changed, 56 insertions(+), 34 deletions(-) diff --git a/src/API.ts b/src/API.ts index 94fae60..560a57d 100644 --- a/src/API.ts +++ b/src/API.ts @@ -31,8 +31,8 @@ export async function loadSamples() { registerSynthSounds() ), registerZZFXSounds(), - samples("github:Bubobubobubobubo/Topos-Samples/main"), - samples("github:Bubobubobubobubo/Topos-Atari/main"), + samples("github:Bubobubobubobubo/Dough-Samples/main"), + samples("github:Bubobubobubobubo/Dough-Amiga/main"), ]); } diff --git a/src/documentation/samples.ts b/src/documentation/samples.ts index 35720ea..f4dc2dd 100644 --- a/src/documentation/samples.ts +++ b/src/documentation/samples.ts @@ -47,7 +47,7 @@ export const samples = (application: Editor): string => { Audio samples are dynamically loaded from the web. By default, Topos is providing some samples coming from the classic [Dirt-Samples](https://github.com/tidalcycles/Dirt-Samples) but also from the [Topos-Samples](https://github.com/Bubobubobubobubo/Topos-Samples) repository. You can contribute to the latter if you want to share your samples with the community! For each sample folder, we are indicating how many of them are available in parentheses. -The samples starting with ST are coming from [this wonderful collection](https://archive.org/details/AmigaSoundtrackerSamplePacksst-xx) of Ultimate Tracker Atari ST audio samples released by Karsten Obarski. They are very high-pitched as was usual in the tracker era. Pitch them down using .speed(0.5). +The samples starting with ST are coming from [this wonderful collection](https://archive.org/details/AmigaSoundtrackerSamplePacksst-xx) of Ultimate Tracker Amiga audio samples released by Karsten Obarski. They are very high-pitched as was usual in the tracker era. Pitch them down using .speed(0.5). ## Available audio samples diff --git a/src/main.ts b/src/main.ts index d0c3b4f..6d9f25c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,7 +3,7 @@ import { examples } from "./examples/excerpts"; import { EditorState, Compartment } from "@codemirror/state"; import { ViewUpdate, lineNumbers, keymap } from "@codemirror/view"; import { javascript } from "@codemirror/lang-javascript"; -import { oneDark } from "@codemirror/theme-one-dark"; +import { materialDark } from "./themes/materialDark"; import { markdown } from "@codemirror/lang-markdown"; import { Extension, Prec } from "@codemirror/state"; import { indentWithTab } from "@codemirror/commands"; @@ -242,6 +242,7 @@ export class Editor { }, $content: { fontFamily: `${this.settings.font}, Menlo, Monaco, Lucida Console, monospace`, + fontSize: `${this.settings.font_size}px`, }, ".cm-gutters": { fontSize: `${this.settings.font_size}px`, @@ -253,7 +254,7 @@ export class Editor { this.fontSize.of(fontModif), this.vimModeCompartment.of(vimPlugin), editorSetup, - oneDark, + materialDark, this.chosenLanguage.of(javascript()), EditorView.updateListener.of((v: ViewUpdate) => { v; @@ -317,7 +318,7 @@ export class Editor { if ((event.key === "Enter" || event.key === "Return") && event.ctrlKey) { event.preventDefault(); this.currentFile().candidate = this.view.state.doc.toString(); - this.flashBackground("#2d313d", 200); + this.flashBackground("#404040", 200); } // Shift + Enter or Ctrl + E: evaluate the line @@ -327,7 +328,7 @@ export class Editor { ) { event.preventDefault(); // Prevents the addition of a new line this.currentFile().candidate = this.view.state.doc.toString(); - this.flashBackground("#2d313d", 200); + this.flashBackground("#404040", 200); } // This is the modal to switch between universes @@ -476,7 +477,7 @@ export class Editor { this.eval_button.addEventListener("click", () => { this.currentFile().candidate = this.view.state.doc.toString(); - this.flashBackground("#2d313d", 200); + this.flashBackground("#404040", 200); }); this.stop_buttons.forEach((button) => { @@ -532,7 +533,7 @@ export class Editor { this.font_size_witness.innerHTML = `Font Size: ${new_value}px`; let new_font_size = EditorView.theme({ - "&": { fontSize: new_value + "px", fontFamily: this.settings.font }, + "&": { fontSize: new_value + "px" }, "&content": { fontFamily: this.settings.font }, ".cm-gutters": { fontSize: new_value + "px" }, }); @@ -885,7 +886,7 @@ export class Editor { document.getElementById("play-icon")!.classList.remove("hidden"); } - this.flashBackground("#2d313d", 200); + this.flashBackground("#404040", 200); const possible_selectors = [ '[id^="play-button-"]', '[id^="clear-button-"]', diff --git a/src/themes/materialDark.ts b/src/themes/materialDark.ts index 905d2f7..34be29b 100644 --- a/src/themes/materialDark.ts +++ b/src/themes/materialDark.ts @@ -3,25 +3,46 @@ import { Extension } from "@codemirror/state"; import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"; import { tags as t } from "@lezer/highlight"; -const base00 = "#171717", - base01 = "#505d64", - base02 = "white", - base03 = "#707d8b", - base04 = "#a0a4ae", - base05 = "#bdbdbd", - base06 = "#e0e0e0", - base07 = "#fdf6e3", - base_red = "#ff5f52", - base_deeporange = "#ff6e40", - base_pink = "#fa5788", - base_yellow = "#facf4e", - base_orange = "#ffad42", - base_cyan = "#1E6AE1", - base_indigo = "#7186f0", - base_purple = "#D09EBF", - base_green = "#82d47c", - base_lightgreen = "#82d47c", - base_teal = "#4ebaaa"; +const base00 = "#353535", + base01 = "#3D3D3D", + base02 = "#FEFEFE", + base03 = "#656565", + base04 = "#797979", + base05 = "#8D8D8D", + base06 = "#A1A1A1", + base07 = "#B5B5B5", + base_red = "#D38185", + base_deeporange = "#D8A094", + base_pink = "#D0AEB7", + base_yellow = "#EEDC93", + base_orange = "#D8A094", + base_cyan = "#6292B2", + base_indigo = "#92C8D8", + base_purple = "#CAB0C7", + base_green = "#ADC390", + base_lightgreen = "#ADC390", + base_teal = "#93CFC9"; + +// Good Nord palette +// const base00 = "#2E3440", +// base01 = "#3B4252", +// base02 = "#F0F0F0", +// base03 = "#4C566A", +// base04 = "#D8DEE9", +// base05 = "#E5E9F0", +// base06 = "#ECEFF4", +// base07 = "#8FBCBB", +// base_red = "#BF616A", +// base_deeporange = "#D08770", +// base_pink = "#B48EAD", +// base_yellow = "#EBCB8B", +// base_orange = "#D08770", +// base_cyan = "#88C0D0", +// base_indigo = "#5E81AC", +// base_purple = "#B48EAD", +// base_green = "#A3BE8C", +// base_lightgreen = "#A3BE8C", +// base_teal = "#8FBCBB"; const invalid = base_red, darkBackground = "#fdf6e3", @@ -38,7 +59,7 @@ export const materialDarkTheme = EditorView.theme( color: base05, backgroundColor: background, fontSize: "48px", - font: "'Victor Mono', monospace", + fontFamily: "'Victor Mono', monospace", }, ".cm-content": { caretColor: cursor, @@ -46,8 +67,8 @@ export const materialDarkTheme = EditorView.theme( }, ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor }, "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": - { backgroundColor: selection, border: `0.5px solid ${base_teal}` }, - ".cm-panels": { backgroundColor: darkBackground, color: base03 }, + { backgroundColor: base_deeporange, border: `0.5px solid ${base_red}` }, + ".cm-panels": { backgroundColor: darkBackground, color: base05 }, ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" }, ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" }, ".cm-searchMatch": { @@ -61,12 +82,12 @@ export const materialDarkTheme = EditorView.theme( ".cm-activeLine": { backgroundColor: highlightBackground }, ".cm-selectionMatch": { backgroundColor: darkBackground, - outline: `1px solid ${base_teal}`, + outline: `1px solid ${base_red}`, }, "&.cm-focused .cm-matchingBracket": { color: base06, - outline: `1px solid ${base_teal}`, + outline: `1px solid ${base_red}`, }, "&.cm-focused .cm-nonmatchingBracket": {