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

Keyboard shortcuts

Browse Source
This commit is contained in:
Raphaël Forment
2023-07-28 10:59:22 +02:00
parent b77768475d
commit 4aa85765b4
5 changed files with 88 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -30,7 +30,7 @@
}
</style>
<body>
<header class="hidden xl:block text-white bg-black">
<header class="py-2 hidden xl:block text-white bg-neutral-900">
<div class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
<a class="flex title-font font-medium items-center text-black mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-black p-2 bg-white rounded-full" viewBox="0 0 24 24">
@ -64,7 +64,7 @@
<div id="app">
<div id="modal-buffers" class="invisible bg-black bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="modal-buffers" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="start-button" class="px-16 py-14 rounded-md text-center">
<div id="disclaimer" class="pb-4">
<form>
@ -75,7 +75,7 @@
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg>
</div>
<input minlength="2" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 outline-0 rounded-lg bg-black dark:bg-black dark:text-white" placeholder="Buffer..." required>
<input minlength="2" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 outline-0 rounded-lg bg-neutral-900 dark:bg-neutral-900 dark:text-white" placeholder="Buffer..." required>
<button disabled class="text-black absolute right-2.5 bottom-2.5 bg-white hover:bg-white focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
</div>
</form>
@ -84,34 +84,35 @@
</div>
<div id="modal-container" class="motion-safe:animate-pulse flex min-h-screen flex flex-col">
<div id="modal" class="bg-black bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="modal" class="bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="start-button" class="bg-white px-16 py-14 rounded-md text-center">
<h1 class="text-xl mb-4 font-bold text-black">Topos Prototype</h1>
<div id="disclaimer" class="pb-4">
<p>This is Topos, an experimental live coding platform.</p>
<p>Switch to the <b>Help</b> (<b>Ctrl+b</b>) universe for a tutorial!</p>
<p>Have fun, press <b>Enter/Space</b> to get started!</p>
</div>
</div>
</div>
<div class="flex flex-row">
<aside class="flex flex-col items-center w-14 h-screen py-2 overflow-y-auto bg-white border-r rtl:border-l rtl:border-r-0 dark:bg-black dark:border-gray-700">
<aside class="flex flex-col items-center w-14 h-screen py-2 overflow-y-auto bg-white border-r rtl:border-l rtl:border-r-0 dark:bg-neutral-900 dark:border-gray-700">
<nav class="flex flex-col space-y-6">
<a id="local-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
<svg class="w-8 h-8 text-orange-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<svg class="w-8 h-8 text-orange-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-11a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1Zm0 12a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1ZM4.343 5.757a1 1 0 0 0 1.414-1.414L4.343 2.929a1 1 0 0 0-1.414 1.414l1.414 1.414Zm11.314 8.486a1 1 0 0 0-1.414 1.414l1.414 1.414a1 1 0 0 0 1.414-1.414l-1.414-1.414ZM4 10a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h2a1 1 0 0 0 1-1Zm15-1h-2a1 1 0 1 0 0 2h2a1 1 0 0 0 0-2ZM4.343 14.243l-1.414 1.414a1 1 0 1 0 1.414 1.414l1.414-1.414a1 1 0 0 0-1.414-1.414ZM14.95 6.05a1 1 0 0 0 .707-.293l1.414-1.414a1 1 0 1 0-1.414-1.414l-1.414 1.414a1 1 0 0 0 .707 1.707Z"/>
</svg>
</a>
<a id="global-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 18 20">
<path d="M17.8 13.75a1 1 0 0 0-.859-.5A7.488 7.488 0 0 1 10.52 2a1 1 0 0 0 0-.969A1.035 1.035 0 0 0 9.687.5h-.113a9.5 9.5 0 1 0 8.222 14.247 1 1 0 0 0 .004-.997Z"/>
</svg>
</a>
<a id="init-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
<svg class="w-8 h-8 text-white " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 20">
<svg class="w-8 h-8 text-white " fill="none" viewBox="0 0 21 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.487 1.746c0 4.192 3.592 1.66 4.592 5.754 0 .828 1 1.5 2 1.5s2-.672 2-1.5a1.5 1.5 0 0 1 1.5-1.5h1.5m-16.02.471c4.02 2.248 1.776 4.216 4.878 5.645C10.18 13.61 9 19 9 19m9.366-6h-2.287a3 3 0 0 0-3 3v2m6-8a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
</a>
@ -143,7 +144,7 @@
</a>
</aside>
<div class="min-w-screen flex grow flex-col">
<ul id="local-script-tabs" class="flex text-sm font-medium text-center text-white dark:text-white bg-black space-x-2 lg:space-x-8">
<ul id="local-script-tabs" class="flex text-sm font-medium text-center text-white dark:text-white bg-neutral-900 space-x-2 lg:space-x-8">
<li class="pl-5">
<a id="tab-1" class="bg-orange-300 inline-block px-4 py-1 text-white hover:bg-gray-800">1</a>
</li>

5
src/AppSettings.ts
View File

@ -1,3 +1,5 @@
import { tutorial_universe } from "./universes/tutorial"
export type Universes = { [key: string]: Universe }
export interface Universe {
@ -50,7 +52,8 @@ export const template_universes = {
9: { candidate: "", committed: "", evaluations: 0},
},
init: { candidate: "", committed: "", evaluations: 0 }
}
},
"Help": tutorial_universe,
}

46
src/main.ts
View File

@ -14,7 +14,7 @@ import {
} from "./highlightSelection";
import { UserAPI } from './API';
import { Extension } from '@codemirror/state';
import { Universes, File, template_universe } from './AppSettings';
import { Universes, File, template_universe, template_universes } from './AppSettings';
import { tryEvaluate } from './Evaluator';
@ -22,7 +22,7 @@ import { tryEvaluate } from './Evaluator';
export class Editor {
// Data structures for editor text management
universes: Universes
universes: Universes = template_universes
selected_universe: string
local_index: number = 1
editor_mode: 'global' | 'local' | 'init' = 'local'
@ -68,15 +68,13 @@ export class Editor {
constructor() {
// ================================================================================
// Loading the universe from local storage
// ================================================================================
this.selected_universe = "Default";
this.universe_viewer.innerHTML = `Topos: ${this.selected_universe}`
this.universes = this.settings.universes
this.universes = {...this.settings.universes, ...template_universes}
// ================================================================================
// Audio context and clock
@ -166,14 +164,23 @@ export class Editor {
this.openSettingsModal()
}
// Switch to local files
if (event.ctrlKey && event.key === "l") this.changeModeFromInterface('local');
if (event.ctrlKey && event.key === "g") this.changeModeFromInterface('global');
if (event.ctrlKey && event.key === "i") this.changeModeFromInterface('init');
[112, 113, 114, 115, 116, 117, 118, 119, 120].forEach((keycode, index) => {
if (event.keyCode === keycode) {
event.preventDefault();
this.changeToLocalBuffer(index)
}
})
});
// ================================================================================
// Interface buttons
// ================================================================================
let tabs = document.querySelectorAll('[id^="tab-"]');
const tabs = document.querySelectorAll('[id^="tab-"]');
// Iterate over the tabs with an index
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', (event) => {
@ -241,15 +248,34 @@ export class Editor {
return this.universes[this.selected_universe.toString()].init
}
changeToLocalBuffer(i: number) {
// Updating the CSS accordingly
const tabs = document.querySelectorAll('[id^="tab-"]');
const tab = tabs[i] as HTMLElement
tab.classList.add('bg-orange-300')
for (let j = 0; j < tabs.length; j++) {
if (j != i) tabs[j].classList.remove('bg-orange-300')
}
this.currentFile.candidate = this.view.state.doc.toString()
let tab_id = tab.id.split('-')[1]
this.local_index = parseInt(tab_id)
this.updateEditorView()
}
changeModeFromInterface(mode: 'global' | 'local' | 'init') {
const interface_buttons = [this.local_button, this.global_button, this.init_button]
const interface_buttons: HTMLElement[] = [
this.local_button,
this.global_button,
this.init_button
]
let changeColor = (button: HTMLElement) => {
interface_buttons.forEach(button => {
// Get the child svg element of each button
let svg = button.children[0] as HTMLElement
if (svg.classList.contains('text-orange-300')) {
console.log('Fond de couleur trouvé')
svg.classList.remove('text-orange-300')
svg.classList.add('text-white')
}
@ -390,7 +416,7 @@ export class Editor {
endLine = state.doc.line(endLine.number + 1);
}
this.view.dispatch({selection: {anchor: 0 + startLine.from, head: endLine.to}});
// this.view.dispatch({selection: {anchor: 0 + startLine.from, head: endLine.to}});
highlightSelection(this.view);
setTimeout(() => {

2
src/themes/materialDark.ts
View File

@ -3,7 +3,7 @@ import { Extension } from '@codemirror/state'
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
import { tags as t } from '@lezer/highlight'
const base00 = 'black', base01 = '#505d64',
const base00 = '#171717', base01 = '#505d64',
base02 = 'white', base03 = '#707d8b',
base04 = '#a0a4ae', base05 = '#bdbdbd',
base06 = '#e0e0e0', base07 = '#fdf6e3',

36
src/universes/tutorial.ts Normal file
View File

@ -0,0 +1,36 @@
const global_text =`
// Global buffer: a central buffer to command them all.
// ====================================================
// The global buffer is a special buffer used to control
// the general behavior of your universe. It is meant to
// be used as a "control room" for your universe. You can
// make use of several commands to control the execution
// flow of all the files:
// - script(universe/universes: number): run script(s)
`
const local_buffer =`
// Local buffer: nine buffers to write your algorithms.
`
const init_buffer=`
// Init buffer: a buffer to initialize the universe.
// This universe is runned once when the universe is
// loaded!
`
export const tutorial_universe = {
global: { candidate: global_text, committed: global_text, evaluations: 0 },
locals: {
1: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
2: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
3: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
4: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
5: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
6: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
7: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
8: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
9: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
},
init: { candidate: init_buffer, committed: init_buffer, evaluations: 0 }
}