Mejoras hacklab: i18n, pestaña Projects, transporte con seek, guía y temas
- i18n ligero de la interfaz del REPL (castellano, inglés, francés, alemán, italiano, portugués...) con selector en el header - Pestaña Projects: gestor local de proyectos con carpetas, buscador y librería de tracks de fábrica (bases techno/acid originales) - Barra de transporte bajo el editor: play/pausa/anterior/siguiente, tiempo y barra de progreso arrastrable; seek real vía Cyclist.setCycle() - Pestaña Guía: chuleta de síntesis y sonidos para el directo - Packs de temas del editor: neon-madrid + hacklab-pack (5 neón + 5 estándar) - pnpm-workspace: allowBuilds para instalación limpia en Linux
This commit is contained in:
hacklab
parent
c150752372
commit
7b9f1155b4
13 changed files with 2731 additions and 55 deletions
45
packages/codemirror/themes.mjs
vendored
45
packages/codemirror/themes.mjs
vendored
|
|
@ -1,4 +1,27 @@
|
|||
import strudelTheme, { settings as strudelThemeSettings } from './themes/strudel-theme.mjs';
|
||||
import neonMadrid, { settings as neonMadridSettings } from './themes/neon-madrid.mjs';
|
||||
import {
|
||||
neonCian,
|
||||
neonCianSettings,
|
||||
neonMagenta,
|
||||
neonMagentaSettings,
|
||||
neonVerde,
|
||||
neonVerdeSettings,
|
||||
neonVioleta,
|
||||
neonVioletaSettings,
|
||||
neonRave,
|
||||
neonRaveSettings,
|
||||
madridClaro,
|
||||
madridClaroSettings,
|
||||
madridOscuro,
|
||||
madridOscuroSettings,
|
||||
papelSepia,
|
||||
papelSepiaSettings,
|
||||
medianoche,
|
||||
medianocheSettings,
|
||||
grafito,
|
||||
grafitoSettings,
|
||||
} from './themes/hacklab-pack.mjs';
|
||||
import bluescreen, { settings as bluescreenSettings } from './themes/bluescreen.mjs';
|
||||
import blackscreen, { settings as blackscreenSettings } from './themes/blackscreen.mjs';
|
||||
import whitescreen, { settings as whitescreenSettings } from './themes/whitescreen.mjs';
|
||||
|
|
@ -43,6 +66,17 @@ import noctisLilac, { settings as noctisLilacSettings } from './themes/noctisLil
|
|||
import { setTheme } from '@strudel/draw';
|
||||
export const themes = {
|
||||
strudelTheme,
|
||||
neonMadrid,
|
||||
neonCian,
|
||||
neonMagenta,
|
||||
neonVerde,
|
||||
neonVioleta,
|
||||
neonRave,
|
||||
madridClaro,
|
||||
madridOscuro,
|
||||
papelSepia,
|
||||
medianoche,
|
||||
grafito,
|
||||
algoboy,
|
||||
archBtw,
|
||||
androidstudio,
|
||||
|
|
@ -85,6 +119,17 @@ export const themes = {
|
|||
|
||||
export const settings = {
|
||||
strudelTheme: strudelThemeSettings,
|
||||
neonMadrid: neonMadridSettings,
|
||||
neonCian: neonCianSettings,
|
||||
neonMagenta: neonMagentaSettings,
|
||||
neonVerde: neonVerdeSettings,
|
||||
neonVioleta: neonVioletaSettings,
|
||||
neonRave: neonRaveSettings,
|
||||
madridClaro: madridClaroSettings,
|
||||
madridOscuro: madridOscuroSettings,
|
||||
papelSepia: papelSepiaSettings,
|
||||
medianoche: medianocheSettings,
|
||||
grafito: grafitoSettings,
|
||||
bluescreen: bluescreenSettings,
|
||||
bluescreenlight: bluescreenlightsettings,
|
||||
blackscreen: blackscreenSettings,
|
||||
|
|
|
|||
240
packages/codemirror/themes/hacklab-pack.mjs
vendored
Normal file
240
packages/codemirror/themes/hacklab-pack.mjs
vendored
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
import { tags as t } from '@lezer/highlight';
|
||||
import { createTheme } from './theme-helper.mjs';
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// PACK HACKLAB · 10 temas: 5 NEÓN sobre negro + 5 estándar
|
||||
// Mismo formato que neon-madrid.mjs: default = createTheme, settings aparte.
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
|
||||
// ── helper: genera un tema neón sobre negro a partir de 3 acentos ──
|
||||
const neon = ({ base, acento, extra, seleccion }) => ({
|
||||
settings: {
|
||||
background: '#050507',
|
||||
lineBackground: '#05050799',
|
||||
foreground: base,
|
||||
muted: `${base}40`,
|
||||
caret: acento,
|
||||
selection: seleccion,
|
||||
selectionMatch: `${acento}33`,
|
||||
lineHighlight: `${base}0d`,
|
||||
gutterBackground: 'transparent',
|
||||
gutterForeground: `${base}66`,
|
||||
},
|
||||
theme: createTheme({
|
||||
theme: 'dark',
|
||||
settings: {
|
||||
background: '#050507',
|
||||
lineBackground: '#05050799',
|
||||
foreground: base,
|
||||
caret: acento,
|
||||
selection: seleccion,
|
||||
selectionMatch: `${acento}33`,
|
||||
lineHighlight: `${base}0d`,
|
||||
gutterBackground: 'transparent',
|
||||
gutterForeground: `${base}66`,
|
||||
},
|
||||
styles: [
|
||||
{ tag: [t.atom, t.bool, t.number], color: extra },
|
||||
{ tag: t.labelName, color: acento },
|
||||
{ tag: t.keyword, color: acento },
|
||||
{ tag: t.operator, color: acento },
|
||||
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: base },
|
||||
{ tag: t.definition(t.variableName), color: extra },
|
||||
{ tag: [t.string, t.special(t.string)], color: extra },
|
||||
{ tag: t.comment, color: `${base}77` },
|
||||
{ tag: [t.bracket, t.unit, t.punctuation], color: acento },
|
||||
{ tag: [t.meta, t.attributeName], color: extra },
|
||||
{ tag: t.className, color: extra },
|
||||
{ tag: t.invalid, color: '#ff2222' },
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
// ── 5 NEÓN ──────────────────────────────────────────────────────────
|
||||
|
||||
// cian eléctrico + magenta
|
||||
const neonCian_ = neon({ base: '#00e5ff', acento: '#ff00d4', extra: '#7dff00', seleccion: 'rgba(255,0,212,.25)' });
|
||||
export const neonCianSettings = neonCian_.settings;
|
||||
export const neonCian = neonCian_.theme;
|
||||
|
||||
// magenta/rosa + cian
|
||||
const neonMagenta_ = neon({ base: '#ff2ec4', acento: '#00e5ff', extra: '#ffe600', seleccion: 'rgba(0,229,255,.25)' });
|
||||
export const neonMagentaSettings = neonMagenta_.settings;
|
||||
export const neonMagenta = neonMagenta_.theme;
|
||||
|
||||
// verde matrix + lima
|
||||
const neonVerde_ = neon({ base: '#39ff14', acento: '#00ffc8', extra: '#eaff00', seleccion: 'rgba(0,255,200,.25)' });
|
||||
export const neonVerdeSettings = neonVerde_.settings;
|
||||
export const neonVerde = neonVerde_.theme;
|
||||
|
||||
// violeta + rosa
|
||||
const neonVioleta_ = neon({ base: '#b26bff', acento: '#ff4fd8', extra: '#00e5ff', seleccion: 'rgba(255,79,216,.25)' });
|
||||
export const neonVioletaSettings = neonVioleta_.settings;
|
||||
export const neonVioleta = neonVioleta_.theme;
|
||||
|
||||
// rave multicolor: base ámbar, acentos cian/verde (fiesta total)
|
||||
const neonRave_ = neon({ base: '#ffb300', acento: '#00e5ff', extra: '#ff2ec4', seleccion: 'rgba(57,255,20,.25)' });
|
||||
export const neonRaveSettings = neonRave_.settings;
|
||||
export const neonRave = neonRave_.theme;
|
||||
|
||||
// ── 5 ESTÁNDAR ──────────────────────────────────────────────────────
|
||||
|
||||
// claro limpio (blanco, azules/teal — para trabajar de día)
|
||||
export const madridClaroSettings = {
|
||||
background: '#ffffff',
|
||||
lineBackground: '#ffffff99',
|
||||
foreground: '#1e293b',
|
||||
muted: '#1e293b26',
|
||||
caret: '#0369a1',
|
||||
selection: 'rgba(2,132,199,.18)',
|
||||
selectionMatch: 'rgba(2,132,199,.12)',
|
||||
lineHighlight: 'rgba(2,132,199,.05)',
|
||||
gutterBackground: 'transparent',
|
||||
gutterForeground: '#1e293b55',
|
||||
};
|
||||
export const madridClaro = createTheme({
|
||||
theme: 'light',
|
||||
settings: madridClaroSettings,
|
||||
styles: [
|
||||
{ tag: [t.atom, t.bool, t.number], color: '#0d9488' },
|
||||
{ tag: t.labelName, color: '#c026d3' },
|
||||
{ tag: t.keyword, color: '#7c3aed' },
|
||||
{ tag: t.operator, color: '#0369a1' },
|
||||
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#0f172a' },
|
||||
{ tag: t.definition(t.variableName), color: '#b45309' },
|
||||
{ tag: [t.string, t.special(t.string)], color: '#15803d' },
|
||||
{ tag: t.comment, color: '#94a3b8' },
|
||||
{ tag: [t.bracket, t.unit, t.punctuation], color: '#0369a1' },
|
||||
{ tag: [t.meta, t.attributeName], color: '#0d9488' },
|
||||
{ tag: t.className, color: '#b45309' },
|
||||
{ tag: t.invalid, color: '#dc2626' },
|
||||
],
|
||||
});
|
||||
|
||||
// oscuro neutro (gris carbón, acentos suaves — sobrio)
|
||||
export const madridOscuroSettings = {
|
||||
background: '#1c1e24',
|
||||
lineBackground: '#1c1e2499',
|
||||
foreground: '#d7dae0',
|
||||
muted: '#d7dae026',
|
||||
caret: '#61afef',
|
||||
selection: 'rgba(97,175,239,.22)',
|
||||
selectionMatch: 'rgba(97,175,239,.15)',
|
||||
lineHighlight: 'rgba(215,218,224,.05)',
|
||||
gutterBackground: 'transparent',
|
||||
gutterForeground: '#d7dae055',
|
||||
};
|
||||
export const madridOscuro = createTheme({
|
||||
theme: 'dark',
|
||||
settings: madridOscuroSettings,
|
||||
styles: [
|
||||
{ tag: [t.atom, t.bool, t.number], color: '#d19a66' },
|
||||
{ tag: t.labelName, color: '#c678dd' },
|
||||
{ tag: t.keyword, color: '#c678dd' },
|
||||
{ tag: t.operator, color: '#56b6c2' },
|
||||
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#e5c07b' },
|
||||
{ tag: t.definition(t.variableName), color: '#61afef' },
|
||||
{ tag: [t.string, t.special(t.string)], color: '#98c379' },
|
||||
{ tag: t.comment, color: '#7f848e' },
|
||||
{ tag: [t.bracket, t.unit, t.punctuation], color: '#56b6c2' },
|
||||
{ tag: [t.meta, t.attributeName], color: '#d19a66' },
|
||||
{ tag: t.className, color: '#e5c07b' },
|
||||
{ tag: t.invalid, color: '#f14c4c' },
|
||||
],
|
||||
});
|
||||
|
||||
// papel sepia (cálido tipo solarized claro — descansa la vista)
|
||||
export const papelSepiaSettings = {
|
||||
background: '#f5edda',
|
||||
lineBackground: '#f5edda99',
|
||||
foreground: '#59493a',
|
||||
muted: '#59493a26',
|
||||
caret: '#b58900',
|
||||
selection: 'rgba(181,137,0,.22)',
|
||||
selectionMatch: 'rgba(181,137,0,.14)',
|
||||
lineHighlight: 'rgba(89,73,58,.06)',
|
||||
gutterBackground: 'transparent',
|
||||
gutterForeground: '#59493a55',
|
||||
};
|
||||
export const papelSepia = createTheme({
|
||||
theme: 'light',
|
||||
settings: papelSepiaSettings,
|
||||
styles: [
|
||||
{ tag: [t.atom, t.bool, t.number], color: '#b58900' },
|
||||
{ tag: t.labelName, color: '#d33682' },
|
||||
{ tag: t.keyword, color: '#859900' },
|
||||
{ tag: t.operator, color: '#cb4b16' },
|
||||
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#268bd2' },
|
||||
{ tag: t.definition(t.variableName), color: '#6c71c4' },
|
||||
{ tag: [t.string, t.special(t.string)], color: '#2aa198' },
|
||||
{ tag: t.comment, color: '#9d8f77' },
|
||||
{ tag: [t.bracket, t.unit, t.punctuation], color: '#cb4b16' },
|
||||
{ tag: [t.meta, t.attributeName], color: '#b58900' },
|
||||
{ tag: t.className, color: '#6c71c4' },
|
||||
{ tag: t.invalid, color: '#dc322f' },
|
||||
],
|
||||
});
|
||||
|
||||
// medianoche (azul profundo — clásico nocturno)
|
||||
export const medianocheSettings = {
|
||||
background: '#0f172a',
|
||||
lineBackground: '#0f172a99',
|
||||
foreground: '#cbd5e1',
|
||||
muted: '#cbd5e126',
|
||||
caret: '#38bdf8',
|
||||
selection: 'rgba(56,189,248,.22)',
|
||||
selectionMatch: 'rgba(56,189,248,.14)',
|
||||
lineHighlight: 'rgba(203,213,225,.05)',
|
||||
gutterBackground: 'transparent',
|
||||
gutterForeground: '#cbd5e155',
|
||||
};
|
||||
export const medianoche = createTheme({
|
||||
theme: 'dark',
|
||||
settings: medianocheSettings,
|
||||
styles: [
|
||||
{ tag: [t.atom, t.bool, t.number], color: '#fbbf24' },
|
||||
{ tag: t.labelName, color: '#f472b6' },
|
||||
{ tag: t.keyword, color: '#818cf8' },
|
||||
{ tag: t.operator, color: '#38bdf8' },
|
||||
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#7dd3fc' },
|
||||
{ tag: t.definition(t.variableName), color: '#c4b5fd' },
|
||||
{ tag: [t.string, t.special(t.string)], color: '#6ee7b7' },
|
||||
{ tag: t.comment, color: '#64748b' },
|
||||
{ tag: [t.bracket, t.unit, t.punctuation], color: '#38bdf8' },
|
||||
{ tag: [t.meta, t.attributeName], color: '#fbbf24' },
|
||||
{ tag: t.className, color: '#c4b5fd' },
|
||||
{ tag: t.invalid, color: '#f87171' },
|
||||
],
|
||||
});
|
||||
|
||||
// grafito (monocromo con un solo acento ámbar — minimalista)
|
||||
export const grafitoSettings = {
|
||||
background: '#232323',
|
||||
lineBackground: '#23232399',
|
||||
foreground: '#c9c9c9',
|
||||
muted: '#c9c9c926',
|
||||
caret: '#ffb300',
|
||||
selection: 'rgba(255,179,0,.22)',
|
||||
selectionMatch: 'rgba(255,179,0,.14)',
|
||||
lineHighlight: 'rgba(201,201,201,.05)',
|
||||
gutterBackground: 'transparent',
|
||||
gutterForeground: '#c9c9c955',
|
||||
};
|
||||
export const grafito = createTheme({
|
||||
theme: 'dark',
|
||||
settings: grafitoSettings,
|
||||
styles: [
|
||||
{ tag: [t.atom, t.bool, t.number], color: '#ffb300' },
|
||||
{ tag: t.labelName, color: '#ffb300' },
|
||||
{ tag: t.keyword, color: '#e0e0e0' },
|
||||
{ tag: t.operator, color: '#9e9e9e' },
|
||||
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#dedede' },
|
||||
{ tag: t.definition(t.variableName), color: '#ffffff' },
|
||||
{ tag: [t.string, t.special(t.string)], color: '#ffd54f' },
|
||||
{ tag: t.comment, color: '#757575' },
|
||||
{ tag: [t.bracket, t.unit, t.punctuation], color: '#9e9e9e' },
|
||||
{ tag: [t.meta, t.attributeName], color: '#ffb300' },
|
||||
{ tag: t.className, color: '#ffffff' },
|
||||
{ tag: t.invalid, color: '#ff5252' },
|
||||
],
|
||||
});
|
||||
45
packages/codemirror/themes/neon-madrid.mjs
vendored
Normal file
45
packages/codemirror/themes/neon-madrid.mjs
vendored
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { tags as t } from '@lezer/highlight';
|
||||
import { createTheme } from './theme-helper.mjs';
|
||||
|
||||
// Tema NEÓN: naranja neón dominante (texto de UI y código base),
|
||||
// con acentos VERDE NEÓN (números, átomos) y CIAN (operadores, corchetes, puntuación).
|
||||
export const settings = {
|
||||
background: '#0a0a0c',
|
||||
lineBackground: '#0a0a0c99',
|
||||
foreground: '#ff7a18', // naranja neón — todo el texto de la interfaz y el código base
|
||||
muted: '#ff7a1840', // bordes/separadores en naranja tenue
|
||||
caret: '#00e5ff', // cursor cian
|
||||
selection: 'rgba(57,255,20,0.25)', // selección verde neón
|
||||
selectionMatch: 'rgba(0,229,255,0.22)',
|
||||
lineHighlight: 'rgba(255,122,24,0.07)',
|
||||
gutterBackground: 'transparent',
|
||||
gutterForeground: '#ff7a1866',
|
||||
};
|
||||
|
||||
export default createTheme({
|
||||
theme: 'dark',
|
||||
settings,
|
||||
styles: [
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#39ff14' }, // verde neón
|
||||
{ tag: t.labelName, color: '#00e5ff' }, // $: en cian
|
||||
{ tag: t.keyword, color: '#ff5e00' }, // const, => naranja fuerte
|
||||
{ tag: t.operator, color: '#00e5ff' }, // + - * / cian
|
||||
{ tag: t.special(t.variableName), color: '#ffb877' },
|
||||
{ tag: t.typeName, color: '#ff9a3c' },
|
||||
{ tag: t.atom, color: '#39ff14' },
|
||||
{ tag: t.number, color: '#39ff14' }, // números verde neón
|
||||
{ tag: t.definition(t.variableName), color: '#ffb877' }, // nombres de const
|
||||
{ tag: t.string, color: '#ffd59e' }, // "bd*4" "RolandTR909" ámbar cálido (legible)
|
||||
{ tag: t.special(t.string), color: '#ffd59e' },
|
||||
{ tag: t.comment, color: '#9a7a55' }, // comentarios apagados
|
||||
{ tag: t.variableName, color: '#ff9a3c' }, // s, note, stack... naranja
|
||||
{ tag: t.tagName, color: '#ff9a3c' },
|
||||
{ tag: t.bracket, color: '#00e5ff' }, // ( ) [ ] cian
|
||||
{ tag: t.meta, color: '#39ff14' },
|
||||
{ tag: t.attributeName, color: '#39ff14' },
|
||||
{ tag: t.propertyName, color: '#ff9a3c' }, // .lpf .gain .bank naranja
|
||||
{ tag: t.className, color: '#ffb877' },
|
||||
{ tag: t.invalid, color: '#ff2222' },
|
||||
{ tag: [t.unit, t.punctuation], color: '#00e5ff' }, // puntuación cian
|
||||
],
|
||||
});
|
||||
|
|
@ -133,6 +133,14 @@ export class Cyclist {
|
|||
this.cps = cps;
|
||||
this.num_ticks_since_cps_change = 0;
|
||||
}
|
||||
// salta a un ciclo concreto (seek). El siguiente tick re-ancla la fase del
|
||||
// reloj igual que hace un cambio de cps: num_cycles_at_cps_change tomará
|
||||
// lastEnd (el ciclo pedido) y seconds_at_cps_change la fase actual.
|
||||
setCycle(cycle) {
|
||||
this.num_ticks_since_cps_change = 0;
|
||||
this.lastBegin = cycle;
|
||||
this.lastEnd = cycle;
|
||||
}
|
||||
log(begin, end, haps) {
|
||||
const onsets = haps.filter((h) => h.hasOnset());
|
||||
console.log(`${begin.toFixed(4)} - ${end.toFixed(4)} ${Array(onsets.length).fill('I').join('')}`);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue