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

Add the possibility to load or not the demo songs

Browse Source
This commit is contained in:
Raphaël Forment
2023-10-02 23:25:48 +02:00
parent 78176b1d10
commit 3fd5bd8383
3 changed files with 49 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -235,6 +235,11 @@
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label>
</div>
<div class="flex items-center mb-4 ml-8">
<input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label>
</div>
</div>
<!-- Information card -->
<div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0">

5
src/AppSettings.ts
View File

@ -53,6 +53,7 @@ export interface Settings {
selected_universe: string;
line_numbers: boolean;
time_position: boolean;
load_demo_songs: boolean;
tips: boolean;
}
@ -122,6 +123,7 @@ export class AppSettings {
public line_numbers: boolean = true;
public time_position: boolean = true;
public tips: boolean = true;
public load_demo_songs: boolean = true;
constructor() {
const settingsFromStorage = JSON.parse(
@ -139,6 +141,7 @@ export class AppSettings {
this.line_numbers = settingsFromStorage.line_numbers;
this.time_position = settingsFromStorage.time_position;
this.tips = settingsFromStorage.tips;
this.load_demo_songs = settingsFromStorage.load_demo_songs;
} else {
this.universes = template_universes;
}
@ -162,6 +165,7 @@ export class AppSettings {
line_numbers: this.line_numbers,
time_position: this.time_position,
tips: this.tips,
load_demo_songs: this.load_demo_songs,
};
}
@ -183,6 +187,7 @@ export class AppSettings {
this.line_numbers = settings.line_numbers;
this.time_position = settings.time_position;
this.tips = settings.tips;
this.load_demo_songs = settings.load_demo_songs;
localStorage.setItem("topos", JSON.stringify(this.data));
}
}

51
src/main.ts
View File

@ -193,6 +193,11 @@ export class Editor {
"show-tips"
) as HTMLInputElement;
// Loading demo songs when starting
load_demo_songs: HTMLInputElement = document.getElementById(
"load-demo-songs"
) as HTMLInputElement;
// Editor mode selection
normal_mode_button: HTMLButtonElement = document.getElementById(
"normal-mode"
@ -225,18 +230,10 @@ export class Editor {
public hydra: any = this.hydra_backend.synth;
constructor() {
// ================================================================================
// Loading the universe from local storage
// ================================================================================
this.universes = { ...this.settings.universes, ...template_universes };
this.selected_universe = "Welcome";
this.universe_viewer.innerHTML = `Topos: ${this.selected_universe}`;
// Picking a random example to populate the landing page
let random_example = examples[Math.floor(Math.random() * examples.length)];
this.universes[this.selected_universe].global.committed = random_example;
this.universes[this.selected_universe].global.candidate = random_example;
// ================================================================================
// Loading the settings
// ================================================================================
this.line_numbers_checkbox.checked = this.settings.line_numbers;
this.time_position_checkbox.checked = this.settings.time_position;
@ -244,6 +241,29 @@ export class Editor {
if (!this.settings.time_position) {
document.getElementById("timeviewer")!.classList.add("hidden");
}
this.load_demo_songs.checked = this.settings.load_demo_songs;
// ================================================================================
// Loading the universe from local storage
// ================================================================================
this.universes = {
...this.settings.universes,
...template_universes
};
if (this.settings.load_demo_songs) {
let random_example = examples[Math.floor(Math.random() * examples.length)];
this.selected_universe = "Welcome"
this.universes[this.selected_universe].global.committed = random_example;
this.universes[this.selected_universe].global.candidate = random_example;
} else {
this.selected_universe = this.settings.selected_universe;
if (this.universes[this.selected_universe] === undefined)
this.universes[this.selected_universe] = structuredClone(template_universe)
}
this.universe_viewer.innerHTML = `Topos: ${this.selected_universe}`;
// ================================================================================
// Audio context and clock
@ -499,7 +519,7 @@ export class Editor {
button.addEventListener("click", () => {
this.setButtonHighlighting("clear", true);
if (confirm("Do you want to reset the current universe?")) {
this.universes[this.selected_universe] = template_universe;
this.universes[this.selected_universe] = structuredClone(template_universe);
this.updateEditorView();
}
});
@ -559,6 +579,7 @@ export class Editor {
this.line_numbers_checkbox.checked = this.settings.line_numbers;
this.time_position_checkbox.checked = this.settings.time_position;
this.tips_checkbox.checked = this.settings.tips;
this.load_demo_songs.checked = this.settings.load_demo_songs;
if (this.settings.vimMode) {
let vim = document.getElementById("vim-mode-radio") as HTMLInputElement;
@ -654,6 +675,12 @@ export class Editor {
});
});
this.load_demo_songs.addEventListener("change", () => {
let checked = this.load_demo_songs.checked ? true : false;
this.settings.load_demo_songs = checked;
});
this.vim_mode_button.addEventListener("click", () => {
this.settings.vimMode = true;
this.view.dispatch({