Merge branch 'main' of https://github.com/Bubobubobubobubo/Topos
This commit is contained in:
390
index.html
390
index.html
@ -1,4 +1,4 @@
|
||||
<!doctype html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
@ -11,15 +11,13 @@
|
||||
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<link rel="stylesheet" href="/src/output.css" />
|
||||
<link rel="stylesheet" href='/fonts/index.css' >
|
||||
<link rel="stylesheet" href="/src/output.css" />
|
||||
<script src="https://unpkg.com/hydra-synth"></script>
|
||||
</head>
|
||||
<style>
|
||||
|
||||
body {
|
||||
font-family: "Arial";
|
||||
background-color: #111827;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
@ -28,11 +26,10 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fluid-bg-transition {
|
||||
.fluid-transition {
|
||||
transition: background-color 0.05s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.fullscreencanvas {
|
||||
position: fixed; /* ignore margins */
|
||||
top: 0px;
|
||||
@ -66,60 +63,89 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.bar_button {
|
||||
@apply mx-2 px-2 py-2 flex inline rounded-lg bg-background text-foreground hover:bg-foreground hover:text-background
|
||||
}
|
||||
|
||||
.side_button {
|
||||
@apply px-2 py-2 bg-background text-foreground rounded-lg hover:bg-foreground hover:text-background
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@apply bg-selection_foreground text-sm lg:text-xl border-b py-4 text-foreground
|
||||
}
|
||||
|
||||
.tab_panel {
|
||||
@apply inline-block lg:px-4 px-8 py-1 text-selection_foreground
|
||||
}
|
||||
|
||||
.doc_header {
|
||||
@apply pl-2 pr-2 lg:text-xl text-sm py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
|
||||
}
|
||||
|
||||
.doc_subheader {
|
||||
@apply pl-2 pr-2 lg:text-xl text-sm ml-6 py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<body id="all" class="z-0 bg-neutral-800 overflow-y-hidden">
|
||||
|
||||
<body id="all" class="z-0 overflow-y-hidden bg-black">
|
||||
<!-- The header is hidden on smaller devices -->
|
||||
<header class="py-0 block text-white bg-neutral-900">
|
||||
<div id="topbar" 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">
|
||||
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 bg-white rounded-full" alt="Topos Frog Logo" />
|
||||
<input id="universe-viewer" class="hidden bg-transparent xl:block ml-4 text-2xl text-white placeholder-white" id="renamer" type="text" placeholder="Topos">
|
||||
|
||||
<header class="py-0 block">
|
||||
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-background">
|
||||
<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-selection_foreground p-2 rounded-full bg-foreground" alt="Topos Frog Logo"/>
|
||||
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background text-brightwhite placeholder-brightwhite" id="renamer" type="text" placeholder="Topos">
|
||||
</a>
|
||||
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
|
||||
<a title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<!-- Play Button -->
|
||||
<a title="Play button (Ctrl+P)" id="play-button-1" class="bar_button">
|
||||
<svg id="play-icon" class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16">
|
||||
<path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>
|
||||
</svg>
|
||||
<svg id="pause-icon" class="hidden w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg id="pause-icon" class="hidden w-7 h-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/>
|
||||
</svg>
|
||||
<p id="play-label" class="hidden lg:block text-xl pl-2 text-white inline-block">Play</p>
|
||||
<p id="play-label" class="hidden lg:block text-xl pl-2 inline-block">Play</p>
|
||||
</a>
|
||||
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
|
||||
<!-- Stop button -->
|
||||
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
|
||||
<rect x="6.5" y="6.5" width="7" height="7" fill="black" rx="1" ry="1"/>
|
||||
<rect x="6.5" y="6.5" width="7" height="7" fill="selection_background" rx="1" ry="1"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Stop</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Stop</p>
|
||||
</a>
|
||||
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
||||
|
||||
<!-- Eval button -->
|
||||
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Eval</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Eval</p>
|
||||
</a>
|
||||
|
||||
<a title="Clear button" id="clear-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||
<a title="Clear button" id="clear-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||
<path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Clear</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Clear</p>
|
||||
</a>
|
||||
|
||||
<a title="Share button" id="share-button" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
||||
<a title="Share button" id="share-button" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Share</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Share</p>
|
||||
</a>
|
||||
|
||||
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="flex flex-row hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Docs</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Docs</p>
|
||||
</a>
|
||||
|
||||
</nav>
|
||||
@ -128,138 +154,133 @@
|
||||
</header>
|
||||
|
||||
<div id="documentation" class="hidden">
|
||||
<div id="documentation-page" class="flex flex-row bg-transparent">
|
||||
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-neutral-900 text-white">
|
||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
|
||||
<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 bg-background">
|
||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-background">
|
||||
<details class="" open>
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Welcome </p>
|
||||
<p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
|
||||
<p rel="noopener noreferrer" id="docs_interaction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interaction</p>
|
||||
<p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Keyboard</p>
|
||||
<p rel="noopener noreferrer" id="docs_mouse" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Mouse</p>
|
||||
<p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Coding</p>
|
||||
<p rel="noopener noreferrer" id="docs_introduction" class="doc_header">Welcome </p>
|
||||
<p rel="noopener noreferrer" id="docs_interface" class="doc_header">Interface</p>
|
||||
<p rel="noopener noreferrer" id="docs_interaction" class="doc_header">Interaction</p>
|
||||
<p rel="noopener noreferrer" id="docs_shortcuts" class="doc_header">Keyboard</p>
|
||||
<p rel="noopener noreferrer" id="docs_mouse" class="doc_header">Mouse</p>
|
||||
<p rel="noopener noreferrer" id="docs_code" class="doc_header">Coding</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="space-y-2" open>
|
||||
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Time -->
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Time</summary>
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Time</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_time" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Dealing with time</p>
|
||||
<p rel="noopener noreferrer" id="docs_linear" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Transport</p>
|
||||
<p rel="noopener noreferrer" id="docs_cyclic" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Cycles</p>
|
||||
<p rel="noopener noreferrer" id="docs_longform" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Structure</p>
|
||||
<p rel="noopener noreferrer" id="docs_time" class="doc_subheader">Dealing with time</p>
|
||||
<p rel="noopener noreferrer" id="docs_linear" class="doc_subheader">Time & Transport</p>
|
||||
<p rel="noopener noreferrer" id="docs_cyclic" class="doc_subheader">Time & Cycles</p>
|
||||
<p rel="noopener noreferrer" id="docs_longform" class="doc_subheader">Time & Structure</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Audio Engine -->
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Audio Engine</summary>
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Audio Engine</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_audio_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Playing a sound</p>
|
||||
<p rel="noopener noreferrer" id="docs_amplitude" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Amplitude</p>
|
||||
<p rel="noopener noreferrer" id="docs_sampler" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Sampler</p>
|
||||
<p rel="noopener noreferrer" id="docs_synths" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synths</p>
|
||||
<p rel="noopener noreferrer" id="docs_filters" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Filters</p>
|
||||
<p rel="noopener noreferrer" id="docs_effects" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Effects</p>
|
||||
<p rel="noopener noreferrer" id="docs_audio_basics" class="doc_subheader">Playing a sound</p>
|
||||
<p rel="noopener noreferrer" id="docs_amplitude" class="doc_subheader">Amplitude</p>
|
||||
<p rel="noopener noreferrer" id="docs_sampler" class="doc_subheader">Sampler</p>
|
||||
<p rel="noopener noreferrer" id="docs_synths" class="doc_subheader">Synths</p>
|
||||
<p rel="noopener noreferrer" id="docs_filters" class="doc_subheader">Filters</p>
|
||||
<p rel="noopener noreferrer" id="docs_effects" class="doc_subheader">Effects</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Samples -->
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Samples</summary>
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header ">Samples</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_sample_list" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">List of samples</p>
|
||||
<p rel="noopener noreferrer" id="docs_loading_samples" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">External samples</p>
|
||||
<p rel="noopener noreferrer" id="docs_sample_list" class="doc_subheader">List of samples</p>
|
||||
<p rel="noopener noreferrer" id="docs_loading_samples" class="doc_subheader">External samples</p>
|
||||
</div>
|
||||
</details>
|
||||
<p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
|
||||
<p rel="noopener noreferrer" id="docs_osc" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">OSC</p>
|
||||
<p rel="noopener noreferrer" id="docs_midi" class="doc_header">MIDI</p>
|
||||
<p rel="noopener noreferrer" id="docs_osc" class="doc_header">OSC</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="space-y-2" open>
|
||||
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Array patterns</p>
|
||||
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg doc_header">Array patterns</p>
|
||||
<!-- Ziffers -->
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Ziffers</summary>
|
||||
<summary class="doc_header">Ziffers</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Basics</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_scales" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Scales</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Rhythm</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Algorithmic</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Tonnetz</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_syncing" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Syncing</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_basics" class="doc_subheader">Basics</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_scales" class="doc_subheader">Scales</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="doc_subheader">Rhythm</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="doc_subheader">Algorithmic</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="doc_subheader">Tonnetz</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_syncing" class="doc_subheader">Syncing</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Global Variables</p>
|
||||
<p rel="noopener noreferrer" id="docs_lfos" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Low Freq Oscs.</p>
|
||||
<p rel="noopener noreferrer" id="docs_probabilities" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Probabilities</p>
|
||||
<p rel="noopener noreferrer" id="docs_chaining" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Chaining</p>
|
||||
<p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p>
|
||||
|
||||
<!--
|
||||
<p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</p>
|
||||
-->
|
||||
<p rel="noopener noreferrer" id="docs_variables" class="doc_header">Global Variables</p>
|
||||
<p rel="noopener noreferrer" id="docs_lfos" class="doc_header">Low Freq Oscs.</p>
|
||||
<p rel="noopener noreferrer" id="docs_probabilities" class="doc_header">Probabilities</p>
|
||||
<p rel="noopener noreferrer" id="docs_chaining" class="doc_header">Chaining</p>
|
||||
<p rel="noopener noreferrer" id="docs_functions" class="doc_header">Functions</p>
|
||||
<p rel="noopener noreferrer" id="docs_generators" class="doc_header">Generators</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="space-y-2" open>
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">More</summary>
|
||||
<summary class="font-semibold lg:text-xl doc_header">More</summary>
|
||||
<div class="flex flex-col">
|
||||
<a rel="noopener noreferrer" id="docs_synchronisation" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synchronisation</a>
|
||||
<a rel="noopener noreferrer" id="docs_oscilloscope" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Oscilloscope</a>
|
||||
<a rel="noopener noreferrer" id="docs_bonus" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Bonus/Trivia</a>
|
||||
<a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a>
|
||||
<a rel="noopener noreferrer" id="docs_synchronisation" class="doc_subheader">Synchronisation</a>
|
||||
<a rel="noopener noreferrer" id="docs_oscilloscope" class="doc_subheader">Oscilloscope</a>
|
||||
<a rel="noopener noreferrer" id="docs_bonus" class="doc_header">Bonus/Trivia</a>
|
||||
<a rel="noopener noreferrer" id="docs_about" class="doc_header">About Topos</a>
|
||||
</div>
|
||||
</details>
|
||||
<details class="" open>
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">Community</summary>
|
||||
<form action="https://github.com/Bubobubobubobubo/topos">
|
||||
<input rel="noopener noreferrer" id="github_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="GitHub" />
|
||||
<input rel="noopener noreferrer" id="github_link" class="doc_header" type="submit" value="GitHub" />
|
||||
</form>
|
||||
<form action="https://discord.gg/6T67DqBNNT">
|
||||
<input rel="noopener noreferrer" id="discord_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="Discord" />
|
||||
<input rel="noopener noreferrer" id="discord_link" class="doc_header" type="submit" value="Discord" />
|
||||
</form>
|
||||
<form action="https://ko-fi.com/raphaelbubo">
|
||||
<input rel="noopener noreferrer" id="support_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="Support" />
|
||||
<input rel="noopener noreferrer" id="support_link" class="doc_header" type="submit" value="Support" />
|
||||
</form>
|
||||
</details>
|
||||
</nav>
|
||||
</aside>
|
||||
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32 bg-transparent"></div>
|
||||
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32 transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app">
|
||||
<!-- This modal is used for switching between buffers -->
|
||||
<div id="modal-buffers" class="invisible bg-gray-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-white">
|
||||
<p class="text-semibold lg:text-2xl text-sm pb-4">Known universes</p>
|
||||
<div id="modal-buffers" class="invisible flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground">
|
||||
<p class="text-semibold lg:text-2xl text-sm pb-4 text-selection_foreground">Known universes</p>
|
||||
<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
|
||||
<div id="disclaimer" class="pb-4">
|
||||
<form id="universe-creator">
|
||||
<label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only text-white">Search</label>
|
||||
<label for="search" class="mb-2 text-sm font-medium sr-only ">Search</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-500 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<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 name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg bg-neutral-800 text-white" placeholder="Buffer..." required>
|
||||
<button id="load-universe-button" 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>
|
||||
<input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg neutral-800 " placeholder="Buffer..." required>
|
||||
<button id="load-universe-button" class="bg-background text-selection_background absolute right-2.5 bottom-2.5 focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-2 flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 border-spacing-y-4">
|
||||
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 hover:bg-neutral-700 bg-neutral-800 text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Close</button>
|
||||
<div class="mt-2 flex space-x-6 border-t rounded-b border-spacing-y-4">
|
||||
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-background text-selection_background">Close</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -268,29 +289,26 @@
|
||||
|
||||
<!-- This modal is used for settings -->
|
||||
<div id="modal-settings" class="invisible flex
|
||||
absolute lg:justify-center lg:items-center
|
||||
absolute lg:justify-center lg:items-center
|
||||
lg:overflow-y-auto lg:overflow-x-auto
|
||||
overflow-y-scroll owerflow-x-scroll
|
||||
md:top-0 md:bottom-0 h-screen w-full"
|
||||
>
|
||||
<div class="grid w-full grid-col-3">
|
||||
<div class="bg-white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8">
|
||||
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg
|
||||
bg-gray-800 justify-center lg:text-center lg:pl-0 pl-8 text-white mx-4
|
||||
text-sm lg:text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
|
||||
<div class="white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8 bg-foreground">
|
||||
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg justify-center lg:text-center lg:pl-0 pl-8 mx-4 subtitle">Topos Application Settings</h1>
|
||||
<div class="flex lg:flex-row flex-col mr-4 ml-4">
|
||||
<!-- Font Size Selection -->
|
||||
<div class="bg-gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4">Font Settings</p>
|
||||
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4 text-selection_background">Theme Settings</p>
|
||||
<div class="mb-6 mx-4 font-semibold">
|
||||
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm">Size:</label>
|
||||
<input type="text" id="font-size-input" type="number" class="bg-gray-50 border border-gray-300 text-gray-900
|
||||
text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700
|
||||
dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
||||
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm text-foreground">Size:</label>
|
||||
<input type="text" id="font-size-input" type="number" class="border
|
||||
text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 focus:border-blue-500">
|
||||
</div>
|
||||
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm">Font:</label>
|
||||
<select id="font-family" class="bg-gray-50 ml-4 border border-gray-300 mb-2
|
||||
text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
|
||||
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Font:</label>
|
||||
<select id="font-family" class=" ml-4 border mb-2
|
||||
text-sm rounded-lg focus:border-blue-500 block p-2.5">
|
||||
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
||||
<option value="Jet Brains">Jet Brains</option>
|
||||
<option value="Courier">Courier</option>
|
||||
@ -302,186 +320,191 @@
|
||||
<option value="Steps Mono">Steps Mono</option>
|
||||
<option value="Steps Mono Thin">Steps Mono Thin</option>
|
||||
</select>
|
||||
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<label for="theme" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Theme:</label>
|
||||
<select id="theme-selector" class="ml-4 border mb-2
|
||||
text-sm rounded-lg block p-2.5">
|
||||
</select>
|
||||
<div id="theme-previewer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editor mode selection -->
|
||||
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Editor options</p>
|
||||
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Editor options</p>
|
||||
<!-- Checkboxes -->
|
||||
<div class="pr-4">
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="vim-mode" 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">Vim Mode</label>
|
||||
<input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-selection_background">Vim Mode</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-line-numbers" 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 Line Numbers</label>
|
||||
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Line Numbers</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-time-position" 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 Time Position</label>
|
||||
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Time Position</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<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>
|
||||
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Hovering Tips</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-completions" 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 Completions</label>
|
||||
<input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Completions</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<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>
|
||||
<input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Load Demo Song</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">File Management</p>
|
||||
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">File Management</p>
|
||||
<div class="flex flex-col space-y-2 pb-2">
|
||||
<button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="download-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Download universes</span>
|
||||
<span class="text-selection_foreground">Download universes</span>
|
||||
</button>
|
||||
<button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="upload-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Upload universes</span>
|
||||
<span class="text-selection_foreground">Upload universes</span>
|
||||
</button>
|
||||
<button id="destroy-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="destroy-universes" class="bg-brightwhite font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<span>Destroy universes</span>
|
||||
<span class="text-selection_foreground">Destroy universes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Midi settings -->
|
||||
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4">
|
||||
<div id="midi-settings-container" class="rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4 bg-color bg-selection_foreground">
|
||||
<div class="lg:flex lg:flex-row w-fit">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p>
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">MIDI I/O Settings</p>
|
||||
<div class="flex items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI Clock: </label>
|
||||
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">MIDI Clock: </label>
|
||||
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
|
||||
<option value="-1">Internal</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Clock PPQN: </label>
|
||||
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">Clock PPQN: </label>
|
||||
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
|
||||
<option value="24">24</option>
|
||||
<option value="48">48</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-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">Send MIDI Clock</label>
|
||||
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Send MIDI Clock</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:flex block flex-row">
|
||||
<div class="flex items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI input: </label>
|
||||
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">MIDI input: </label>
|
||||
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600 focus:ring-2">
|
||||
<option value="-1">None</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-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">Route channels to scripts</label>
|
||||
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Route channels to scripts</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audio nudge slider -->
|
||||
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Audio/Event Nudging</p>
|
||||
<div class="flex flex-column pb-2">
|
||||
<p class="pt-0.5 ml-4">Clock:</p>
|
||||
<div id="midi-settings-container" class="rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Audio/Event Nudging</p> <div class="flex flex-column pb-2">
|
||||
<p class="pt-0.5 ml-4 text-foreground">Clock:</p>
|
||||
<input
|
||||
type="range" id="audio_nudge"
|
||||
name="audiorangeInput"
|
||||
min="-200" max="200"
|
||||
value="0"
|
||||
class="w-full ml-4"
|
||||
class="w-full ml-4 text-red"
|
||||
oninput="nudgenumber.value=audio_nudge.value"
|
||||
>
|
||||
<output
|
||||
name="nudgenumber"
|
||||
id="nudgenumber"
|
||||
for="audiorangeInput"
|
||||
class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white"
|
||||
class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
|
||||
>0</output>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column">
|
||||
|
||||
<p class="pt-0.5 ml-4">Audio:</p>
|
||||
<p class="pt-0.5 ml-4 text-foreground">Audio:</p>
|
||||
<input
|
||||
type="range" id="dough_nudge"
|
||||
name="doughrangeInput"
|
||||
min="0" max="100"
|
||||
value="0"
|
||||
class="w-full ml-4"
|
||||
class="w-full ml-4 text-foreground"
|
||||
oninput="doughnumber.value=dough_nudge.value"
|
||||
>
|
||||
<output
|
||||
name="doughnumber"
|
||||
id="doughnumber"
|
||||
for="doughrangeInput"
|
||||
class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white"
|
||||
class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
|
||||
>0</output>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4 pb-36 lg:pb-0">
|
||||
<div class="flex space-x-6 border-t rounded-b mx-4 border-spacing-y-4 pb-36 lg:pb-0">
|
||||
<button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="
|
||||
hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4
|
||||
font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
|
||||
hover:bg-background bg-background mt-4 mb-4 focus:ring-4
|
||||
font-medium rounded-lg text-sm px-5 py-2.5 text-center text-selection_background">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row max-h-fit">
|
||||
|
||||
<!-- This is a lateral bar that will inherit the header buttons if the window is too small. -->
|
||||
<aside id="sidebar" class="
|
||||
flex flex-col items-center w-14
|
||||
h-screen py-2 border-r
|
||||
rtl:border-l max-h-fit
|
||||
rtl:border-r-0 bg-neutral-900
|
||||
dark:border-neutral-700 border-none"
|
||||
rtl:border-r-0 bg-background
|
||||
border-neutral-700 border-none"
|
||||
>
|
||||
<nav class="flex flex-col space-y-6">
|
||||
<a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||
<a title="Local Scripts (Ctrl + L)" id="local-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||
<path d="M18 5H0v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5Zm-7.258-2L9.092.8a2.009 2.009 0 0 0-1.6-.8H2.049a2 2 0 0 0-2 2v1h10.693Z"/>
|
||||
</svg>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
|
||||
<a title="Global Script (Ctrl + G)" id="global-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
|
||||
<path d="M14.316.051A1 1 0 0 0 13 1v8.473A4.49 4.49 0 0 0 11 9c-2.206 0-4 1.525-4 3.4s1.794 3.4 4 3.4 4-1.526 4-3.4a2.945 2.945 0 0 0-.067-.566c.041-.107.064-.22.067-.334V2.763A2.974 2.974 0 0 1 16 5a1 1 0 0 0 2 0C18 1.322 14.467.1 14.316.051ZM10 3H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Z"/>
|
||||
<path d="M10 7H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Zm-5 4H1a1 1 0 0 1 0-2h4a1 1 0 1 1 0 2Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
||||
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1v12m0 0 4-4m-4 4L1 9"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<a title="Project notes (Ctrl + N)" id="note-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Application Settings" id="settings-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<a title="Application Settings" id="settings-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
@ -495,56 +518,55 @@
|
||||
|
||||
<!-- Tabs for local files -->
|
||||
<div class="min-w-screen flex grow flex-col">
|
||||
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center text-white bg-neutral-900 space-x-1 lg:space-x-8">
|
||||
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center neutral-900 space-x-1 lg:space-x-8">
|
||||
<li class="pl-5">
|
||||
<a title="Local Script 1 (F1)" id="tab-1" class="bg-orange-300 inline-block lg:px-4 px-2 py-1 text-white hover:bg-gray-800">1</a>
|
||||
<a title="Local Script 1 (F1)" id="tab-1" class="tab_panel">1</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 2 (F2)" id="tab-2" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">2</a>
|
||||
<a title="Local Script 2 (F2)" id="tab-2" class="tab_panel">2</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 3 (F3)" id="tab-3" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">3</a>
|
||||
<a title="Local Script 3 (F3)" id="tab-3" class="tab_panel">3</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 4 (F4)" id="tab-4" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">4</a>
|
||||
<a title="Local Script 4 (F4)" id="tab-4" class="tab_panel">4</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 5 (F5)" id="tab-5" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">5</a>
|
||||
<a title="Local Script 5 (F5)" id="tab-5" class="tab_panel">5</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 6 (F6)" id="tab-6" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">6</a>
|
||||
<a title="Local Script 6 (F6)" id="tab-6" class="tab_panel">6</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 7 (F7)" id="tab-7" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">7</a>
|
||||
<a title="Local Script 7 (F7)" id="tab-7" class="tab_panel">7</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 8 (F8)" id="tab-8" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">8</a>
|
||||
<a title="Local Script 8 (F8)" id="tab-8" class="tab_panel">8</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 9 (F9)" id="tab-9" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">9</a>
|
||||
<a title="Local Script 9 (F9)" id="tab-9" class="tab_panel">9</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- Here comes the editor itself -->
|
||||
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
|
||||
<canvas id="hydra-bg" class="fullscreencanvas"></canvas>
|
||||
<canvas id="scope" class="fullscreencanvas"></canvas>
|
||||
<canvas id="hydra-bg" class="fullscreencanvas"></canvas>
|
||||
<canvas id="feedback" class="fullscreencanvas"></canvas>
|
||||
<canvas id="drawings" class="fullscreencanvas"></canvas>
|
||||
</div>
|
||||
<p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
|
||||
<p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
|
||||
<template id="ui-known-universe-item-template">
|
||||
<!-- A known universe button in "opening" interface -->
|
||||
<li class="hover:fill-black hover:bg-white py-2 hover:text-black flex justify-between px-4">
|
||||
<li class="py-2 px-4 flex justify-between text-brightwhite hover:bg-selection_background hover:text-selection_foreground">
|
||||
<button class="universe-name load-universe" title="Load this universe">Universe Name</button>
|
||||
<button class="delete-universe" title="Delete this universe">🗑</button>
|
||||
</li>
|
||||
</template>
|
||||
</body>
|
||||
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
|
||||
<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute right-2 bottom-12">/////// Fill ///////</p>
|
||||
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold cursor-textpointer-events-none select-none text-sm absolute bottom-2 right-2 bg-foreground text-background"></p>
|
||||
<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold cursor-textpointer-events-none select-none text-sm absolute right-2 bottom-12 bg-foreground text-background">/////// Fill ///////</p>
|
||||
</html>
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
"autoprefixer": "^10.4.14",
|
||||
"codemirror": "^6.0.1",
|
||||
"fflate": "^0.8.0",
|
||||
"highlight.js": "^11.9.0",
|
||||
"jisg": "^0.9.7",
|
||||
"lru-cache": "^10.0.1",
|
||||
"marked": "^7.0.3",
|
||||
|
||||
47
src/API.ts
47
src/API.ts
@ -1,6 +1,7 @@
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { sendToServer, type OSCMessage, oscMessages } from "./IO/OSC";
|
||||
import { getAllScaleNotes, nearScales, seededRandom } from "zifferjs";
|
||||
import colorschemes from "./colors.json";
|
||||
import {
|
||||
MidiCCEvent,
|
||||
MidiConnection,
|
||||
@ -87,8 +88,7 @@ export class UserAPI {
|
||||
public randomGen = Math.random;
|
||||
public currentSeed: string | undefined = undefined;
|
||||
public localSeeds = new Map<string, Function>();
|
||||
public patternCache = new LRUCache({ max: 1000, ttl: 1000 * 60 * 5 });
|
||||
public tempCache = new LRUCache({ max: 1000, ttl: 1000 * 60 * 5 });
|
||||
public patternCache = new LRUCache({ max: 10000, ttl: 10000 * 60 * 5 });
|
||||
public invalidPatterns: {[key: string]: boolean} = {};
|
||||
public cueTimes: { [key: string]: number } = {};
|
||||
private errorTimeoutID: number = 0;
|
||||
@ -147,8 +147,8 @@ export class UserAPI {
|
||||
? code
|
||||
: (this.app.selectedExample as string);
|
||||
}
|
||||
this.clearPatternCache();
|
||||
this.stop();
|
||||
this.resetAllFromCache();
|
||||
this.play();
|
||||
};
|
||||
|
||||
@ -159,6 +159,7 @@ export class UserAPI {
|
||||
current_universe.example.candidate! = "";
|
||||
current_universe.example.committed! = "";
|
||||
}
|
||||
this.clearPatternCache();
|
||||
this.stop();
|
||||
};
|
||||
|
||||
@ -168,10 +169,10 @@ export class UserAPI {
|
||||
current_universe.example.candidate! = "";
|
||||
current_universe.example.committed! = "";
|
||||
}
|
||||
this.clearPatternCache();
|
||||
this.stop();
|
||||
this.play();
|
||||
this.app.exampleIsPlaying = true;
|
||||
this.resetAllFromCache();
|
||||
evaluateOnce(this.app, code as string);
|
||||
};
|
||||
|
||||
@ -220,7 +221,7 @@ export class UserAPI {
|
||||
clearTimeout(this.printTimeoutID);
|
||||
clearTimeout(this.errorTimeoutID);
|
||||
this.app.interface.error_line.innerHTML = message as string;
|
||||
this.app.interface.error_line.style.color = "white";
|
||||
this.app.interface.error_line.style.color = "red";
|
||||
this.app.interface.error_line.classList.remove("hidden");
|
||||
// @ts-ignore
|
||||
this.printTimeoutID = setTimeout(
|
||||
@ -724,7 +725,7 @@ export class UserAPI {
|
||||
|
||||
maybeToNumber = (something: any): number|any => {
|
||||
// If something is BigInt
|
||||
if(something && typeof something === "bigint") {
|
||||
if(typeof something === "bigint") {
|
||||
return Number(something);
|
||||
} else {
|
||||
return something;
|
||||
@ -743,7 +744,7 @@ export class UserAPI {
|
||||
if(isGenerator(value)) {
|
||||
if(this.patternCache.has(key)) {
|
||||
const cachedValue = (this.patternCache.get(key) as Generator<any>).next().value
|
||||
if(!cachedValue) {
|
||||
if(cachedValue!==0 && !cachedValue) {
|
||||
const generator = value as unknown as Generator<any>
|
||||
this.patternCache.set(key, generator);
|
||||
return this.maybeToNumber(generator.next().value);
|
||||
@ -757,7 +758,7 @@ export class UserAPI {
|
||||
} else if(isGeneratorFunction(value)) {
|
||||
if(this.patternCache.has(key)) {
|
||||
const cachedValue = (this.patternCache.get(key) as Generator<any>).next().value;
|
||||
if(cachedValue) {
|
||||
if(cachedValue || cachedValue===0 || cachedValue===0n) {
|
||||
return this.maybeToNumber(cachedValue);
|
||||
} else {
|
||||
const generator = value();
|
||||
@ -2416,4 +2417,34 @@ export class UserAPI {
|
||||
this.cueTimes[functionName] = this.app.clock.pulses_since_origin;
|
||||
};
|
||||
|
||||
public theme = (color_scheme: string): void => {
|
||||
this.app.readTheme(color_scheme);
|
||||
console.log("Changing color scheme for: ", color_scheme)
|
||||
}
|
||||
|
||||
public themeName = (): string => {
|
||||
return this.app.currentThemeName;
|
||||
}
|
||||
|
||||
public randomTheme = (): void => {
|
||||
let theme_names = this.getThemes();
|
||||
let selected_theme = theme_names[Math.floor(Math.random() * theme_names.length)];
|
||||
this.app.readTheme(selected_theme);
|
||||
this.app.api.log(selected_theme);
|
||||
}
|
||||
|
||||
public nextTheme = (): void => {
|
||||
let theme_names = this.getThemes();
|
||||
let current_theme = this.app.api.themeName();
|
||||
let current_theme_idx = theme_names.indexOf(current_theme);
|
||||
let next_theme_idx = (current_theme_idx + 1) % theme_names.length;
|
||||
let next_theme = theme_names[next_theme_idx];
|
||||
this.app.readTheme(next_theme);
|
||||
this.app.api.log(next_theme);
|
||||
}
|
||||
|
||||
public getThemes = (): string[] => {
|
||||
return Object.keys(colorschemes);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -27,6 +27,7 @@ import { midi } from "./documentation/learning/midi";
|
||||
import { osc } from "./documentation/learning/osc";
|
||||
import { patterns } from "./documentation/patterns/patterns";
|
||||
import { functions } from "./documentation/patterns/functions";
|
||||
import { generators } from "./documentation/patterns/generators";
|
||||
import { variables } from "./documentation/patterns/variables";
|
||||
import { probabilities } from "./documentation/patterns/probabilities";
|
||||
import { lfos } from "./documentation/patterns/lfos";
|
||||
@ -36,18 +37,17 @@ import { ziffers_rhythm } from "./documentation/patterns/ziffers/ziffers_rhythm"
|
||||
import { ziffers_algorithmic } from "./documentation/patterns/ziffers/ziffers_algorithmic";
|
||||
import { ziffers_tonnetz } from "./documentation/patterns/ziffers/ziffers_tonnetz";
|
||||
import { ziffers_syncing } from "./documentation/patterns/ziffers/ziffers_syncing";
|
||||
|
||||
import { synths } from "./documentation/learning/audio_engine/synths";
|
||||
|
||||
// Setting up the Markdown converter with syntax highlighting
|
||||
import showdown from "showdown";
|
||||
import showdownHighlight from "showdown-highlight";
|
||||
import "highlight.js/styles/atom-one-dark-reasonable.min.css";
|
||||
import { createDocumentationStyle } from "./DomElements";
|
||||
import { filters } from "./documentation/learning/audio_engine/filters";
|
||||
showdown.setFlavor("github");
|
||||
|
||||
export const key_shortcut = (shortcut: string): string => {
|
||||
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
|
||||
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-brightwhite bg-brightblack border border-black rounded-lg">${shortcut}</kbd>`;
|
||||
};
|
||||
|
||||
export const makeExampleFactory = (application: Editor): Function => {
|
||||
@ -63,13 +63,11 @@ export const makeExampleFactory = (application: Editor): Function => {
|
||||
return `
|
||||
<details ${open ? "open" : ""}>
|
||||
<summary >${description}
|
||||
<button class="ml-4 py-1 align-top text-base px-4 hover:bg-green-700 bg-emerald-600 inline-block" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
|
||||
<button class="py-1 text-base px-4 hover:bg-neutral-600 bg-neutral-500 inline-block " onclick="app.api._stopDocExample()">⏸️ Pause</button>
|
||||
<button class="py-1 text-base px-4 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
|
||||
<button class="ml-4 py-1 align-top text-base px-4 hover:bg-brightgreen bg-green inline-block text-selection_foreground" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
|
||||
<button class="py-1 text-base px-4 hover:brightyellow bg-yellow text-selection_foreground inline-block" onclick="app.api._stopDocExample()">⏸️ Pause</button>
|
||||
<button class="py-1 text-base px-4 hover:bg-brightmagenta bg-magenta text-selection_foreground inline-block" onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
|
||||
</summary>
|
||||
\`\`\`javascript
|
||||
${code}
|
||||
\`\`\`
|
||||
<pre><code class="hljs language-javascript">${code.trim()}</code></pre>
|
||||
</details>
|
||||
`;
|
||||
};
|
||||
@ -109,6 +107,7 @@ export const documentation_factory = (application: Editor) => {
|
||||
variables: variables(application),
|
||||
probabilities: probabilities(application),
|
||||
functions: functions(application),
|
||||
generators: generators(application),
|
||||
shortcuts: shortcuts(application),
|
||||
amplitude: amplitude(application),
|
||||
effects: effects(application),
|
||||
@ -170,12 +169,15 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
|
||||
* @param app - The editor application.
|
||||
* @param bindings - Additional bindings for the showdown converter.
|
||||
*/
|
||||
let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-white'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
|
||||
let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-brightwhite'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
|
||||
const converter = new showdown.Converter({
|
||||
emoji: true,
|
||||
moreStyling: true,
|
||||
backslashEscapesHTMLTags: true,
|
||||
extensions: [showdownHighlight({ auto_detection: true }), ...bindings],
|
||||
extensions: [showdownHighlight({
|
||||
pre: true,
|
||||
auto_detection: false
|
||||
}), ...bindings],
|
||||
});
|
||||
console.log(app.currentDocumentationPane);
|
||||
|
||||
|
||||
@ -43,6 +43,8 @@ export const singleElements = {
|
||||
midi_clock_checkbox: "send-midi-clock",
|
||||
midi_channels_scripts: "midi-channels-scripts",
|
||||
midi_clock_ppqn: "midi-clock-ppqn-input",
|
||||
theme_selector: "theme-selector",
|
||||
theme_previewer: "theme-previewer",
|
||||
load_demo_songs: "load-demo-songs",
|
||||
normal_mode_button: "normal-mode",
|
||||
vim_mode_button: "vim-mode",
|
||||
@ -71,30 +73,30 @@ export const createDocumentationStyle = (app: Editor) => {
|
||||
*/
|
||||
|
||||
return {
|
||||
h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
|
||||
h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
|
||||
h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
|
||||
h1: "text-brightwhite lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
|
||||
h2: "text-brightwhite lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
|
||||
h3: "text-brightwhite lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
|
||||
ul: "text-underline ml-12",
|
||||
li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
|
||||
p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
|
||||
warning:
|
||||
"animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal",
|
||||
a: "lg:text-2xl text-base text-orange-300",
|
||||
"animate-pulse lg:text-2xl font-bold text-brightred lg:mx-6 mx-2 my-4 leading-normal",
|
||||
a: "lg:text-2xl text-base text-white",
|
||||
code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
|
||||
icode:
|
||||
"lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
|
||||
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
|
||||
blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
|
||||
"lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
|
||||
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
|
||||
blockquote: "text-brightwhite border-l-4 border-white pl-4 my-4 mx-4",
|
||||
details:
|
||||
"lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-neutral-900",
|
||||
"lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-selection_foreground",
|
||||
summary: "font-semibold text-xl",
|
||||
table:
|
||||
"justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
|
||||
thead:
|
||||
"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
|
||||
"text-xs text-gray-700 uppercase",
|
||||
th: "",
|
||||
td: "",
|
||||
tr: "",
|
||||
box: "border bg-red-500",
|
||||
box: "border bg-red",
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Prec } from "@codemirror/state";
|
||||
import { indentWithTab } from "@codemirror/commands";
|
||||
import { tags as t } from "@lezer/highlight";
|
||||
import {
|
||||
keymap,
|
||||
lineNumbers,
|
||||
@ -7,8 +8,6 @@ import {
|
||||
drawSelection,
|
||||
highlightActiveLine,
|
||||
dropCursor,
|
||||
// rectangularSelection,
|
||||
// crosshairCursor,
|
||||
highlightActiveLineGutter,
|
||||
} from "@codemirror/view";
|
||||
import { Extension, EditorState } from "@codemirror/state";
|
||||
@ -18,6 +17,7 @@ import {
|
||||
syntaxHighlighting,
|
||||
indentOnInput,
|
||||
bracketMatching,
|
||||
HighlightStyle,
|
||||
} from "@codemirror/language";
|
||||
import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
|
||||
import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
|
||||
@ -30,12 +30,215 @@ import { lintKeymap } from "@codemirror/lint";
|
||||
import { Compartment } from "@codemirror/state";
|
||||
import { Editor } from "./main";
|
||||
import { EditorView } from "codemirror";
|
||||
import { toposTheme } from "./themes/toposTheme";
|
||||
import { javascript } from "@codemirror/lang-javascript";
|
||||
import { inlineHoveringTips } from "./documentation/inlineHelp";
|
||||
import { toposCompletions, soundCompletions } from "./documentation/inlineHelp";
|
||||
import { javascriptLanguage } from "@codemirror/lang-javascript";
|
||||
|
||||
export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => {
|
||||
// @ts-ignore
|
||||
const black = theme["black"],
|
||||
red = theme["red"],
|
||||
green = theme["green"],
|
||||
yellow = theme["yellow"],
|
||||
blue = theme["blue"],
|
||||
magenta = theme["magenta"],
|
||||
cyan = theme["cyan"],
|
||||
white = theme["white"],
|
||||
// @ts-ignore
|
||||
brightblack = theme["brightblack"],
|
||||
// @ts-ignore
|
||||
brightred = theme["brightred"],
|
||||
brightgreen = theme["brightgreen"],
|
||||
// @ts-ignore
|
||||
brightyellow = theme["brightyellow"],
|
||||
// @ts-ignore
|
||||
brightblue = theme["brightblue"],
|
||||
// @ts-ignore
|
||||
brightmagenta = theme["brightmagenta"],
|
||||
// @ts-ignore
|
||||
brightcyan = theme["brightcyan"],
|
||||
brightwhite = theme["brightwhite"],
|
||||
background = theme["background"],
|
||||
selection_foreground = theme["selection_foreground"],
|
||||
cursor = theme["cursor"],
|
||||
foreground = theme["foreground"],
|
||||
selection_background = theme["selection_background"];
|
||||
const toposTheme = EditorView.theme( {
|
||||
"&": {
|
||||
color: background,
|
||||
// backgroundColor: background,
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "24px",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-content": {
|
||||
caretColor: cursor,
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-cursor, .cm-dropCursor": {
|
||||
borderLeftColor: cursor,
|
||||
},
|
||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
||||
{
|
||||
backgroundColor: selection_foreground,
|
||||
border: `0.5px solid ${selection_background}`,
|
||||
},
|
||||
".cm-panels": {
|
||||
backgroundColor: selection_background,
|
||||
color: red,
|
||||
},
|
||||
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
||||
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
||||
".cm-search.cm-panel": { backgroundColor: "transparent" },
|
||||
".cm-searchMatch": {
|
||||
outline: `1px solid ${magenta}`,
|
||||
},
|
||||
".cm-searchMatch.cm-searchMatch-selected": {
|
||||
backgroundColor: red,
|
||||
},
|
||||
".cm-activeLine": {
|
||||
// backgroundColor: highlightBackground
|
||||
backgroundColor: `${selection_foreground}`,
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
backgroundColor: yellow,
|
||||
outline: `1px solid ${red}`,
|
||||
},
|
||||
"&.cm-focused .cm-matchingBracket": {
|
||||
color: yellow,
|
||||
// outline: `1px solid ${base02}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-nonmatchingBracket": {
|
||||
color: yellow,
|
||||
},
|
||||
|
||||
".cm-gutters": {
|
||||
//backgroundColor: base00,
|
||||
backgroundColor: "transparent",
|
||||
color: foreground,
|
||||
},
|
||||
".cm-activeLineGutter": {
|
||||
backgroundColor: selection_background,
|
||||
color: selection_foreground,
|
||||
},
|
||||
|
||||
".cm-foldPlaceholder": {
|
||||
border: "none",
|
||||
color: `${blue}`,
|
||||
},
|
||||
".cm-tooltip": {
|
||||
border: "none",
|
||||
backgroundColor: background,
|
||||
},
|
||||
".cm-tooltip .cm-tooltip-arrow:before": {},
|
||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
||||
borderTopColor: background,
|
||||
borderBottomColor: background,
|
||||
},
|
||||
".cm-tooltip-autocomplete": {
|
||||
"& > ul > li[aria-selected]": {
|
||||
backgroundColor: background,
|
||||
color: background,
|
||||
},
|
||||
},
|
||||
},
|
||||
{ dark: true },
|
||||
);
|
||||
|
||||
let toposHighlightStyle = HighlightStyle.define([
|
||||
{ tag: t.paren, color: brightwhite },
|
||||
{ tag: [t.propertyName, t.punctuation, t.variableName], color: brightwhite },
|
||||
{ tag: t.keyword, color: yellow },
|
||||
{ tag: [t.name, t.deleted, t.character, t.macroName], color: red, },
|
||||
{ tag: [t.function(t.variableName)], color: blue },
|
||||
{ tag: [t.labelName], color: red },
|
||||
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: cyan, },
|
||||
{ tag: [t.definition(t.name), t.separator], color: magenta },
|
||||
{ tag: [t.brace], color: white },
|
||||
{ tag: [t.annotation], color: blue, },
|
||||
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: yellow, },
|
||||
{ tag: [t.typeName, t.className], color: magenta, },
|
||||
{ tag: [t.operator, t.operatorKeyword], color: blue, },
|
||||
{ tag: [t.tagName], color: blue, },
|
||||
{ tag: [t.squareBracket], color: blue, },
|
||||
{ tag: [t.angleBracket], color: blue, },
|
||||
{ tag: [t.attributeName], color: red, },
|
||||
{ tag: [t.regexp], color: brightgreen, },
|
||||
{ tag: [t.quote], color: green, },
|
||||
{ tag: [t.string], color: green },
|
||||
{
|
||||
tag: t.link,
|
||||
color: green,
|
||||
textDecoration: "underline",
|
||||
textUnderlinePosition: "under",
|
||||
},
|
||||
{
|
||||
tag: [t.url, t.escape, t.special(t.string)],
|
||||
color: green,
|
||||
},
|
||||
{ tag: [t.meta], color: brightwhite },
|
||||
{ tag: [t.comment], color: brightwhite, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: brightwhite },
|
||||
{ tag: t.strong, fontWeight: "bold", color: white },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: white },
|
||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
||||
{ tag: t.heading, fontWeight: "bold", color: white },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: white },
|
||||
{
|
||||
tag: [t.heading2, t.heading3, t.heading4],
|
||||
fontWeight: "bold",
|
||||
color: yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.heading5, t.heading6],
|
||||
color: red,
|
||||
},
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: green},
|
||||
{
|
||||
tag: [t.processingInstruction, t.inserted],
|
||||
color: green,
|
||||
},
|
||||
{
|
||||
tag: [t.contentSeparator],
|
||||
color: green,
|
||||
},
|
||||
{ tag: t.invalid, color: red, borderBottom: `1px dotted ${red}` },
|
||||
]);
|
||||
return [ toposTheme, syntaxHighlighting(toposHighlightStyle),
|
||||
]
|
||||
}
|
||||
|
||||
// const debugTheme = EditorView.theme({
|
||||
// ".cm-line span": {
|
||||
// position: "relative",
|
||||
// },
|
||||
// ".cm-line span:hover::after": {
|
||||
// position: "absolute",
|
||||
// bottom: "100%",
|
||||
// left: 0,
|
||||
// background: "black",
|
||||
// color: "white",
|
||||
// border: "solid 2px",
|
||||
// borderRadius: "5px",
|
||||
// content: "var(--tags)",
|
||||
// width: `max-content`,
|
||||
// padding: "1px 4px",
|
||||
// zIndex: 10,
|
||||
// pointerEvents: "none",
|
||||
// },
|
||||
// });
|
||||
|
||||
// const debugHighlightStyle = HighlightStyle.define(
|
||||
// // @ts-ignore
|
||||
// Object.entries(t).map(([key, value]) => {
|
||||
// return { tag: value, "--tags": `"tag.${key}"` };
|
||||
// })
|
||||
// );
|
||||
// const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
|
||||
|
||||
|
||||
export const jsCompletions = javascriptLanguage.data.of({
|
||||
autocomplete: toposCompletions,
|
||||
});
|
||||
@ -70,6 +273,7 @@ export const editorSetup: Extension = (() => [
|
||||
export const installEditor = (app: Editor) => {
|
||||
app.vimModeCompartment = new Compartment();
|
||||
app.hoveringCompartment = new Compartment();
|
||||
app.themeCompartment = new Compartment();
|
||||
app.completionsCompartment = new Compartment();
|
||||
app.withLineNumbers = new Compartment();
|
||||
app.chosenLanguage = new Compartment();
|
||||
@ -99,7 +303,10 @@ export const installEditor = (app: Editor) => {
|
||||
app.settings.completions ? [jsCompletions, toposSoundCompletions] : [],
|
||||
),
|
||||
editorSetup,
|
||||
toposTheme,
|
||||
app.themeCompartment.of(
|
||||
getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
|
||||
// debug
|
||||
),
|
||||
app.chosenLanguage.of(javascript()),
|
||||
];
|
||||
app.dynamicPlugins = new Compartment();
|
||||
|
||||
@ -136,7 +136,7 @@ export class AppSettings {
|
||||
*/
|
||||
|
||||
public vimMode: boolean = false;
|
||||
public theme: string = "toposTheme";
|
||||
public theme: string = "Everblush";
|
||||
public font: string = "IBM Plex Mono";
|
||||
public font_size: number = 24;
|
||||
public universes: Universes;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { EditorView } from "codemirror";
|
||||
import { vim } from "@replit/codemirror-vim";
|
||||
import { type Editor } from "./main";
|
||||
import colors from "./colors.json";
|
||||
import {
|
||||
documentation_factory,
|
||||
hideDocumentation,
|
||||
@ -57,9 +58,9 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
tabs[i].addEventListener("click", (event) => {
|
||||
// Updating the CSS accordingly
|
||||
tabs[i].classList.add("bg-orange-300");
|
||||
tabs[i].classList.add("bg-foreground");
|
||||
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-foreground");
|
||||
}
|
||||
app.currentFile().candidate = app.view.state.doc.toString();
|
||||
|
||||
@ -289,6 +290,18 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
});
|
||||
});
|
||||
|
||||
app.interface.theme_selector.addEventListener("change", () => {
|
||||
app.settings.theme = (app.interface.theme_selector as HTMLSelectElement).value;
|
||||
app.readTheme(app.settings.theme);
|
||||
// @ts-ignore
|
||||
let selected_theme = colors[app.settings.theme as string];
|
||||
let theme_preview = "";
|
||||
for (const [key, _] of Object.entries(selected_theme)) {
|
||||
theme_preview += `<p class="inline text-${key} bg-${key}">█</div>`;
|
||||
}
|
||||
app.interface.theme_previewer.innerHTML = theme_preview;
|
||||
});
|
||||
|
||||
app.interface.settings_button.addEventListener("click", () => {
|
||||
// Populate the font selector
|
||||
const fontFamilySelect = document.getElementById(
|
||||
@ -298,6 +311,26 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
fontFamilySelect.value = app.settings.font;
|
||||
}
|
||||
|
||||
app.interface.theme_selector.innerHTML = "";
|
||||
let all_themes = Object.keys(colors);
|
||||
all_themes.sort((a, b) => {
|
||||
return a.toLowerCase().localeCompare(b.toLowerCase());
|
||||
});
|
||||
app.interface.theme_selector.innerHTML = all_themes.map((color) => {
|
||||
return `<option value="${color}">${color}</option>`
|
||||
}).join("");
|
||||
// Set the selected theme in the selector to app.settings.theme
|
||||
// @ts-ignore
|
||||
app.interface.theme_selector.value = app.settings.theme;
|
||||
|
||||
// @ts-ignore
|
||||
let selected_theme = colors[app.settings.theme as string];
|
||||
let theme_preview = "<div class='ml-6'>";
|
||||
for (const [key, _] of Object.entries(selected_theme)) {
|
||||
theme_preview += `<p class="inline text-${key} bg-${key}">█</p>`;
|
||||
}
|
||||
theme_preview += "</div>";
|
||||
app.interface.theme_previewer.innerHTML = theme_preview;
|
||||
// Populate the font family selector
|
||||
const doughNudgeRange = app.interface.dough_nudge_range as HTMLInputElement;
|
||||
doughNudgeRange.value = app.dough_nudge.toString();
|
||||
@ -512,6 +545,7 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
"midi",
|
||||
"osc",
|
||||
"functions",
|
||||
"generators",
|
||||
"lfos",
|
||||
"probabilities",
|
||||
"variables",
|
||||
|
||||
@ -9,6 +9,7 @@ import {
|
||||
import { SkipEvent } from "./SkipEvent";
|
||||
import { SoundParams } from "./SoundEvent";
|
||||
import { centsToSemitones, edoToSemitones, ratiosToSemitones } from "zifferjs/src/scale";
|
||||
import { safeMod } from "zifferjs/src/utils";
|
||||
|
||||
export type EventOperation<T> = (instance: T, ...args: any[]) => void;
|
||||
|
||||
@ -210,9 +211,14 @@ export class AbstractEvent {
|
||||
* @param func - The function to be applied to the Event
|
||||
* @returns The transformed Event
|
||||
*/
|
||||
return this.modify(func);
|
||||
return this.modify(func).update();
|
||||
};
|
||||
|
||||
mod = (value: number): AbstractEvent => {
|
||||
this.values.originalPitch = safeMod(this.values.originalPitch, value);
|
||||
return this.update();
|
||||
}
|
||||
|
||||
noteLength = (
|
||||
value: number | number[],
|
||||
...kwargs: number[]
|
||||
@ -297,8 +303,7 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
this.values["pitch"] = value;
|
||||
this.values["originalPitch"] = value;
|
||||
this.defaultPitchKeyScale();
|
||||
this.update();
|
||||
return this;
|
||||
return this.update();
|
||||
};
|
||||
|
||||
pc = this.pitch;
|
||||
@ -317,8 +322,10 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
this.values.key &&
|
||||
(this.values.pitch || this.values.pitch === 0) &&
|
||||
this.values.parsedScale
|
||||
)
|
||||
this.update();
|
||||
) {
|
||||
return this.update();
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
@ -335,8 +342,10 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
if (
|
||||
(this.values.pitch || this.values.pitch === 0) &&
|
||||
this.values.parsedScale
|
||||
)
|
||||
this.update();
|
||||
) {
|
||||
return this.update();
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
@ -364,16 +373,14 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
this.values.parsedScale = value.map((v) => safeScale(v));
|
||||
}
|
||||
this.defaultPitchKeyScale();
|
||||
this.update();
|
||||
return this;
|
||||
return this.update();
|
||||
};
|
||||
|
||||
semitones(values: number|number[], ...rest: number[]) {
|
||||
const scaleValues = typeof values === "number" ? [values, ...rest] : values;
|
||||
this.values.parsedScale = safeScale(scaleValues);
|
||||
this.defaultPitchKeyScale();
|
||||
this.update();
|
||||
return this;
|
||||
return this.update();
|
||||
}
|
||||
steps = this.semitones;
|
||||
|
||||
@ -381,23 +388,20 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
const scaleValues = typeof values === "number" ? [values, ...rest] : values;
|
||||
this.values.parsedScale = safeScale(centsToSemitones(scaleValues));
|
||||
this.defaultPitchKeyScale();
|
||||
this.update();
|
||||
return this;
|
||||
return this.update();
|
||||
}
|
||||
|
||||
ratios(values: number|number[], ...rest: number[]) {
|
||||
const scaleValues = typeof values === "number" ? [values, ...rest] : values;
|
||||
this.values.parsedScale = safeScale(ratiosToSemitones(scaleValues));
|
||||
this.defaultPitchKeyScale();
|
||||
this.update();
|
||||
return this;
|
||||
return this.update();
|
||||
}
|
||||
|
||||
edo(value: number, intervals: string|number[] = new Array(value).fill(1)) {
|
||||
this.values.parsedScale = edoToSemitones(value, intervals);
|
||||
this.defaultPitchKeyScale();
|
||||
this.update();
|
||||
return this;
|
||||
return this.update();
|
||||
}
|
||||
|
||||
protected updateValue<T>(key: string, value: T | T[] | null): this {
|
||||
@ -508,8 +512,9 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
return this;
|
||||
};
|
||||
|
||||
update = (): void => {
|
||||
update = (): this => {
|
||||
// Overwrite in subclasses
|
||||
return this;
|
||||
};
|
||||
|
||||
cue = (functionName: string|Function): this => {
|
||||
|
||||
@ -67,8 +67,7 @@ export class MidiEvent extends AudibleEvent {
|
||||
return funcResult;
|
||||
} else {
|
||||
func(this.values);
|
||||
this.update();
|
||||
return this;
|
||||
return this.update();
|
||||
}
|
||||
};
|
||||
|
||||
@ -84,7 +83,7 @@ export class MidiEvent extends AudibleEvent {
|
||||
return this;
|
||||
};
|
||||
|
||||
update = (): void => {
|
||||
update = (): this => {
|
||||
const filteredValues = filterObject(this.values, [
|
||||
"key",
|
||||
"pitch",
|
||||
@ -113,6 +112,7 @@ export class MidiEvent extends AudibleEvent {
|
||||
|
||||
this.values.note = maybeAtomic(newArrays.note);
|
||||
if (newArrays.bend) this.values.bend = maybeAtomic(newArrays.bend);
|
||||
return this;
|
||||
};
|
||||
|
||||
out = (): void => {
|
||||
|
||||
@ -382,12 +382,11 @@ export class SoundEvent extends AudibleEvent {
|
||||
if (funcResult instanceof Object) return funcResult;
|
||||
else {
|
||||
func(this.values);
|
||||
this.update();
|
||||
return this;
|
||||
return this.update();
|
||||
}
|
||||
};
|
||||
|
||||
update = (): void => {
|
||||
update = (): this => {
|
||||
const filteredValues = filterObject(this.values, [
|
||||
"key",
|
||||
"pitch",
|
||||
@ -420,7 +419,7 @@ export class SoundEvent extends AudibleEvent {
|
||||
this.values.pitch = maybeAtomic(newArrays.pitch);
|
||||
this.values.octave = maybeAtomic(newArrays.octave);
|
||||
this.values.pitchOctave = maybeAtomic(newArrays.pitchOctave);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
out = (orbit?: number | number[]): void => {
|
||||
|
||||
7181
src/colors.json
Normal file
7181
src/colors.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -49,6 +49,9 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
|
||||
|Force Eval|${key_shortcut(
|
||||
"Ctrl + Shift + Enter",
|
||||
)}|Force evaluation of the current script|
|
||||
|Clear cache & Eval|${key_shortcut(
|
||||
"Ctrl + Shift + Backspace (Delete)",
|
||||
)}|Clears cache and forces evaluation to update cached scripts|
|
||||
|
||||
### Special
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ export const samples_to_markdown = (
|
||||
|
||||
markdownList += `
|
||||
<button
|
||||
class="hover:bg-neutral-500 inline px-4 py-2 bg-neutral-700 text-orange-300 text-xl"
|
||||
class="hover:bg-foreground inline px-4 py-2 bg-black text-brightwhite hover:text-background text-xl"
|
||||
onclick="app.api._playDocExampleOnce(app.api.codeExamples['${codeId}'])"
|
||||
>
|
||||
${keys[i]}
|
||||
@ -75,7 +75,7 @@ beat(0.5)::sound('wt_stereo').n([0, 1].pick()).ad(0, .25).out()
|
||||
|
||||
Pick one folder and spend some time exploring it. There is a lot of different waveforms.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Waveforms")}
|
||||
</div>
|
||||
|
||||
@ -94,7 +94,7 @@ beat(0.5)::sound(['bd', 'cp'].pick()).bank("AkaiLinn").out()
|
||||
Here is the complete list of available machines:
|
||||
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Machines")}
|
||||
</div>
|
||||
|
||||
@ -102,7 +102,7 @@ ${samples_to_markdown(application, "Machines")}
|
||||
|
||||
The default sample pack used by Ryan Kirkbride's [FoxDot](https://github.com/Qirky/FoxDot). It is a nice curated sample pack that covers all the basic sounds you could want.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "FoxDot")}
|
||||
</div>
|
||||
|
||||
@ -110,7 +110,7 @@ ${samples_to_markdown(application, "FoxDot")}
|
||||
|
||||
This set of audio samples is taken from [this wonderful collection](https://archive.org/details/AmigaSoundtrackerSamplePacksst-xx) of **Ultimate Tracker Amiga samples**. They were initially made by Karsten Obarski. These files were processed: pitched down one octave, gain down 6db. The audio has been processed with [SoX](https://github.com/chirlu/sox). The script used to do so is also included in this repository.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Amiga")}
|
||||
</div>
|
||||
|
||||
@ -128,7 +128,7 @@ beat(4)::sound('amen1').stretch(4).out()
|
||||
|
||||
The stretch should be adapted based on the length of each amen break.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Amen")}
|
||||
</div>
|
||||
|
||||
@ -137,7 +137,7 @@ ${samples_to_markdown(application, "Amen")}
|
||||
Many live coders are expecting to find the Tidal sample library wherever they go, so here it is :)
|
||||
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Tidal")}
|
||||
</div>
|
||||
|
||||
@ -145,7 +145,7 @@ ${samples_to_markdown(application, "Tidal")}
|
||||
|
||||
This sample pack is only one folder full of french phonems! It sounds super nice.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Juliette")}
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -9,6 +9,24 @@ export const bonus = (application: Editor): string => {
|
||||
|
||||
Some features have been included as a bonus. These features are often about patterning over things that are not directly related to sound: pictures, video, etc.
|
||||
|
||||
## Editor theme configuration
|
||||
|
||||
The editor theme can be changed using the <ic>theme</ic> and <ic>randomTheme</ic> functions. The following example will use a random color scheme for every beat:
|
||||
|
||||
${makeExample(
|
||||
"Random theme on each beat",
|
||||
`
|
||||
beat(1)::randomTheme()
|
||||
`, true)}
|
||||
|
||||
You can also pick a theme using the <ic>theme</ic> function with a string as only argument:
|
||||
|
||||
${makeExample(
|
||||
"Picking a theme",
|
||||
`
|
||||
beat(1)::theme("Batman")
|
||||
`, true)}
|
||||
|
||||
## Hydra Visual Live Coding
|
||||
|
||||
<div class="mx-12 bg-neutral-600 rounded-lg flex flex-col items-center justify-center">
|
||||
|
||||
@ -6,9 +6,48 @@ export const generators = (application: Editor): string => {
|
||||
return `
|
||||
# Generator functions
|
||||
|
||||
JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator" target="_blank">generators</a> are powerful functions for generating value sequences. They can be used to generate melodies, rhythms or control parameters.
|
||||
|
||||
In Topos generator functions should be called using the <ic>cache(key, function)</ic> function to store the current state of the generator. This function takes two arguments: the name for the cache and the generator instance.
|
||||
|
||||
Once the generator is cached the values will be returned from the named cache even if the generator function is modified. To clear the current cache and to re-evaluate the modified generator use the **Shift+Ctrl+Backspace** shortcut. Alternatively you can cache the modified generator using a different name.
|
||||
|
||||
The resulted values can be played using either <ic>pitch()</ic> or <ic>freq()</ic> or as Ziffers patterns. When playing the values using <ic>pitch()</ic> different scales and chained methods can be used to alter the result, for example <ic>mod(value: number)</ic> to limit the integer range or <ic>scale(name: string)</ic> etc. to change the resulting note.
|
||||
|
||||
${makeExample(
|
||||
"More complex function generating chaotic frequencies",
|
||||
"Simple looping generator function",
|
||||
`
|
||||
function* simple() {
|
||||
let x = 0;
|
||||
while (x < 12) {
|
||||
yield x+x;
|
||||
x+=1;
|
||||
}
|
||||
}
|
||||
|
||||
beat(.25) && sound("triangle").pitch(cache("simple",simple())).scale("minor").out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
${makeExample(
|
||||
"Infinite frequency generator",
|
||||
`
|
||||
function* poly(x=0) {
|
||||
while (true) {
|
||||
const s = Math.tan(x/10)+Math.sin(x/20);
|
||||
yield 2 * Math.pow(s, 3) - 6 * Math.pow(s, 2) + 5 * s + 200;
|
||||
x++;
|
||||
}
|
||||
}
|
||||
|
||||
beat(.125) && sound("triangle").freq(cache("mathyshit",poly())).out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
${makeExample(
|
||||
"Truly scale free chaos inspired by Lorentz attractor",
|
||||
`
|
||||
function* strange(x = 0.1, y = 0, z = 0, rho = 28, beta = 8 / 3, zeta = 10) {
|
||||
while (true) {
|
||||
@ -33,5 +72,48 @@ ${makeExample(
|
||||
true,
|
||||
)};
|
||||
|
||||
`;
|
||||
## OEIS integer sequences
|
||||
|
||||
To find some inspiration - or to enter into the void - one can visit <a href="https://oeis.org/" target="_blank">The On-Line Encyclopedia of Integer Sequences (OEIS)</a> to find some interesting integer sequences.
|
||||
|
||||
Many of the sequences are implemented by <a href="https://github.com/acerix/jisg/tree/main/src/oeis" target="_blank">JISG</a> (Javascript Integer Sequence Generators) project. Those sequences can be referenced directly with the identifiers using the cache function.
|
||||
|
||||
One of these implemented generators is the Inventory sequence <a href="https://github.com/acerix/jisg/blob/main/src/oeis/A342585.ts" target="_blank">A342585</a> made famous by <a href="https://www.youtube.com/watch?v=rBU9E-ZOZAI" target="_blank">Neil Sloane</a>.
|
||||
|
||||
${makeExample(
|
||||
"Inventory sequence",
|
||||
`
|
||||
rhythm(0.5,[8,7,5,6].bar(4),9) :: sound("triangle")
|
||||
.pitch(cache("Inventory",A342585))
|
||||
.mod(11).scale("minor")
|
||||
.adsr(.25,.05,.5,.5)
|
||||
.room(2.0).size(0.5)
|
||||
.gain(1).out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
## Using generators with Ziffers
|
||||
|
||||
Alternatively generators can be used with Ziffers to generate longer patterns. In this case the generator function should be passed as an argument to the ziffers function. Ziffers patterns are cached separately so there is no need for using **cache()** function. Ziffers expects values from the generators to be integers or strings in ziffers syntax.
|
||||
|
||||
${makeExample(
|
||||
"Ziffers patterns using a generator functions",
|
||||
`
|
||||
function* poly(x) {
|
||||
while (true) {
|
||||
yield 64 * Math.pow(x, 6) - 480 * Math.pow(x, 4) + 720 * Math.pow(x, 2);
|
||||
x++;
|
||||
}
|
||||
}
|
||||
|
||||
z0(poly(1)).noteLength(0.5).semitones(2,2,3,2,2,2).sound("sine").out()
|
||||
z1(poly(8)).noteLength(0.25).semitones(2,1,2,1,2,2).sound("sine").out()
|
||||
z2(poly(-3)).noteLength(1.0).semitones(2,2,2,1,3,2).sound("sine").out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
|
||||
`
|
||||
};
|
||||
|
||||
@ -12,14 +12,14 @@ Ziffers patterns can be synced to any event by using **cue**, **sync**, **wait**
|
||||
|
||||
The <ic>cue(name: string)</ic> methods can be used to send cue messages for ziffers patterns. The <ic>wait(name: string)</ic> method is used to wait for the cue message to be received before starting the next cycle.
|
||||
|
||||
${makeExample(
|
||||
"Sending cue from event and wait",
|
||||
`
|
||||
beat(4.0) :: sound("bd").cue("foo").out();
|
||||
z1("e 0 3 2 1 2 1").wait("foo").sound("sine").out();
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
${makeExample(
|
||||
"Sending cue from event and wait",
|
||||
`
|
||||
beat(4.0) :: sound("bd").cue("foo").out()
|
||||
z1("e 0 3 2 1 2 1").wait("foo").sound("sine").out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
The <ic>sync(name: string)</ic> method is used to sync the ziffers pattern to the cue message.
|
||||
|
||||
|
||||
72
src/main.ts
72
src/main.ts
@ -5,6 +5,7 @@ import { javascript } from "@codemirror/lang-javascript";
|
||||
import { markdown } from "@codemirror/lang-markdown";
|
||||
import { Extension } from "@codemirror/state";
|
||||
import { outputSocket } from "./IO/OSC";
|
||||
import { getCodeMirrorTheme } from "./EditorSetup";
|
||||
import {
|
||||
initializeSelectedUniverse,
|
||||
AppSettings,
|
||||
@ -32,6 +33,7 @@ import { installWindowBehaviors } from "./WindowBehavior";
|
||||
import { makeNumberExtensions } from "./extensions/NumberExtensions";
|
||||
// @ts-ignore
|
||||
import { registerSW } from "virtual:pwa-register";
|
||||
import colors from "./colors.json";
|
||||
|
||||
if ("serviceWorker" in navigator) {
|
||||
registerSW();
|
||||
@ -51,6 +53,7 @@ export class Editor {
|
||||
hidden_interface: boolean = false;
|
||||
fontSize!: Compartment;
|
||||
withLineNumbers!: Compartment;
|
||||
themeCompartment!: Compartment;
|
||||
vimModeCompartment!: Compartment;
|
||||
hoveringCompartment!: Compartment;
|
||||
completionsCompartment!: Compartment;
|
||||
@ -68,6 +71,7 @@ export class Editor {
|
||||
public _mouseX: number = 0;
|
||||
public _mouseY: number = 0;
|
||||
show_error: boolean = false;
|
||||
currentThemeName: string = "Everblush";
|
||||
buttonElements: Record<string, HTMLButtonElement[]> = {};
|
||||
interface: ElementMap = {};
|
||||
blinkTimeouts: Record<number, number> = {};
|
||||
@ -206,6 +210,15 @@ export class Editor {
|
||||
|
||||
// Loading universe from URL (if needed)
|
||||
loadUniverserFromUrl(this);
|
||||
|
||||
// Set the color scheme for the application
|
||||
let available_themes = Object.keys(colors);
|
||||
if (this.settings.theme in available_themes) {
|
||||
this.readTheme(this.settings.theme);
|
||||
} else {
|
||||
this.settings.theme = "Everblush";
|
||||
this.readTheme(this.settings.theme);
|
||||
}
|
||||
}
|
||||
|
||||
private getBuffer(type: string): any {
|
||||
@ -261,7 +274,7 @@ export class Editor {
|
||||
|
||||
let list = document.createElement("ul");
|
||||
list.className =
|
||||
"lg:h-80 lg:text-normal text-sm h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800";
|
||||
"lg:h-80 lg:text-normal text-normal h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-brightwhite bg-background lg:mb-4 border rounded-lg";
|
||||
list.append(
|
||||
...Object.keys(this.universes).map((it) => {
|
||||
let item = itemTemplate.content.cloneNode(true) as DocumentFragment;
|
||||
@ -293,9 +306,9 @@ export class Editor {
|
||||
*/
|
||||
const tabs = document.querySelectorAll('[id^="tab-"]');
|
||||
const tab = tabs[i] as HTMLElement;
|
||||
tab.classList.add("bg-orange-300");
|
||||
tab.classList.add("bg-foreground");
|
||||
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-foreground_selection");
|
||||
}
|
||||
let tab_id = tab.id.split("-")[1];
|
||||
this.local_index = parseInt(tab_id);
|
||||
@ -318,15 +331,15 @@ export class Editor {
|
||||
let changeColor = (button: HTMLElement) => {
|
||||
interface_buttons.forEach((button) => {
|
||||
let svg = button.children[0] as HTMLElement;
|
||||
if (svg.classList.contains("text-orange-300")) {
|
||||
svg.classList.remove("text-orange-300");
|
||||
button.classList.remove("text-orange-300");
|
||||
if (svg.classList.contains("text-foreground_selection")) {
|
||||
svg.classList.remove("text-foreground_selection");
|
||||
button.classList.remove("text-foreground_selection");
|
||||
}
|
||||
});
|
||||
button.children[0].classList.remove("text-white");
|
||||
button.children[0].classList.add("text-orange-300");
|
||||
button.classList.add("text-orange-300");
|
||||
button.classList.add("fill-orange-300");
|
||||
button.children[0].classList.add("text-foreground_selection");
|
||||
button.classList.add("text-foreground_selection");
|
||||
button.classList.add("fill-foreground_selection");
|
||||
};
|
||||
|
||||
switch (mode) {
|
||||
@ -441,7 +454,7 @@ export class Editor {
|
||||
|
||||
unfocusPlayButtons() {
|
||||
document.querySelectorAll('[id^="play-button-"]').forEach((button) => {
|
||||
button.children[0].classList.remove("fill-orange-300");
|
||||
button.children[0].classList.remove("fill-foreground_selection");
|
||||
button.children[0].classList.remove("animate-pulse");
|
||||
});
|
||||
}
|
||||
@ -570,6 +583,45 @@ export class Editor {
|
||||
ctx.scale(dpr, dpr);
|
||||
}
|
||||
}
|
||||
|
||||
private updateInterfaceTheme(selected_theme: {[key: string]: string}): void {
|
||||
function hexToRgb(hex: string): {r: number, g: number, b: number} | null {
|
||||
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
};
|
||||
for (const [key, value] of Object.entries(selected_theme)) {
|
||||
let color = hexToRgb(value);
|
||||
if (color) {
|
||||
let colorString = `${color.r} ${color.g} ${color.b}`
|
||||
document.documentElement.style.setProperty("--" + key, colorString);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getColorScheme(theme_name: string): {[key: string]: string} {
|
||||
// Check if the theme exists in colors.json
|
||||
let themes: Record<string, { [key: string]: any }> = colors;
|
||||
return themes[theme_name];
|
||||
}
|
||||
|
||||
readTheme(theme_name: string): void {
|
||||
// Check if the theme exists in colors.json
|
||||
let themes: Record<string, { [key: string]: any }> = colors;
|
||||
let selected_theme = themes[theme_name];
|
||||
if (selected_theme) {
|
||||
this.currentThemeName = theme_name;
|
||||
this.updateInterfaceTheme(selected_theme);
|
||||
let codeMirrorTheme = getCodeMirrorTheme(selected_theme);
|
||||
// Reconfigure the view with the new theme
|
||||
this.view.dispatch({
|
||||
effects: this.themeCompartment.reconfigure(codeMirrorTheme),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let app = new Editor();
|
||||
|
||||
2662
src/style.css
2662
src/style.css
File diff suppressed because it is too large
Load Diff
29
src/tailwind.css
Normal file
29
src/tailwind.css
Normal file
@ -0,0 +1,29 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--black: 40 42 54;
|
||||
--red: 68 71 90;
|
||||
--green: 248 248 242;
|
||||
--yellow: 98 114 164;
|
||||
--blue: 139 233 253;
|
||||
--magenta: 80 250 123;
|
||||
--cyan: 255 184 108;
|
||||
--white: 255 121 198;
|
||||
--brightblack: 189 147 249;
|
||||
--brightred: 255 85 85;
|
||||
--brightgreen: 241 250 140;
|
||||
--brightyellow: 139 233 253;
|
||||
--brightblue: 80 250 123;
|
||||
--brightmagenta: 255 184 108;
|
||||
--brightcyan: 255 121 198;
|
||||
--brightwhite: 189 147 249;
|
||||
--background: 40 42 54;
|
||||
--selection_foreground: 68 71 90;
|
||||
--cursor: 139 233 253;
|
||||
--foreground: 248 248 242;
|
||||
--selection_background: 189 147 249;
|
||||
}
|
||||
}
|
||||
@ -1,221 +0,0 @@
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { Extension } from "@codemirror/state";
|
||||
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
|
||||
import { tags as t } from "@lezer/highlight";
|
||||
|
||||
const base00 = "#262626",
|
||||
base01 = "#3B4252",
|
||||
base02 = "#BBBBBB",
|
||||
base03 = "#4C566A",
|
||||
base04 = "#D8DEE9",
|
||||
base05 = "#E5E9F0",
|
||||
base07 = "#8FBCBB",
|
||||
base_red = "#BF616A",
|
||||
base_deeporange = "#D08770",
|
||||
base_pink = "#B48EAD",
|
||||
base_cyan = "#FBCF8B",
|
||||
base_yellow = "#88C0D0",
|
||||
base_orange = "#D08770",
|
||||
base_indigo = "#5E81AC",
|
||||
base_purple = "#B48EAD",
|
||||
base_green = "#A3BE8C",
|
||||
base_lightgreen = "#A3BE8C";
|
||||
|
||||
const invalid = base_red,
|
||||
darkBackground = "#262626",
|
||||
highlightBackground = "#252525",
|
||||
// background = base00,
|
||||
tooltipBackground = base01,
|
||||
cursor = base04;
|
||||
|
||||
/// The editor theme styles for Material Dark.
|
||||
export const toposDarkTheme = EditorView.theme(
|
||||
{
|
||||
"&": {
|
||||
color: base05,
|
||||
// backgroundColor: background,
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "24px",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-content": {
|
||||
caretColor: cursor,
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-cursor, .cm-dropCursor": {
|
||||
borderLeftColor: cursor,
|
||||
},
|
||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
||||
{
|
||||
backgroundColor: base00,
|
||||
border: `0.5px solid ${base00}`,
|
||||
},
|
||||
".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-search.cm-panel": { backgroundColor: "transparent" },
|
||||
".cm-searchMatch": {
|
||||
outline: `1px solid ${base_cyan}`,
|
||||
},
|
||||
".cm-searchMatch.cm-searchMatch-selected": {
|
||||
backgroundColor: highlightBackground,
|
||||
},
|
||||
".cm-activeLine": {
|
||||
// backgroundColor: highlightBackground
|
||||
backgroundColor: "rgb(76,76,106, 0.1)",
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
backgroundColor: base04,
|
||||
outline: `1px solid ${base_red}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-matchingBracket": {
|
||||
color: base02,
|
||||
// outline: `1px solid ${base02}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-nonmatchingBracket": {
|
||||
color: base_red,
|
||||
},
|
||||
|
||||
".cm-gutters": {
|
||||
//backgroundColor: base00,
|
||||
backgroundColor: "transparent",
|
||||
color: base02,
|
||||
},
|
||||
|
||||
".cm-activeLineGutter": {
|
||||
backgroundColor: highlightBackground,
|
||||
color: base02,
|
||||
},
|
||||
|
||||
".cm-foldPlaceholder": {
|
||||
border: "none",
|
||||
color: `${base07}`,
|
||||
},
|
||||
|
||||
".cm-tooltip": {
|
||||
border: "none",
|
||||
backgroundColor: tooltipBackground,
|
||||
},
|
||||
".cm-tooltip .cm-tooltip-arrow:before": {},
|
||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
||||
borderTopColor: tooltipBackground,
|
||||
borderBottomColor: tooltipBackground,
|
||||
},
|
||||
".cm-tooltip-autocomplete": {
|
||||
"& > ul > li[aria-selected]": {
|
||||
backgroundColor: highlightBackground,
|
||||
color: base03,
|
||||
},
|
||||
},
|
||||
},
|
||||
{ dark: true },
|
||||
);
|
||||
|
||||
/// The highlighting style for code in the Material Dark theme.
|
||||
export const toposDarkHighlightStyle = HighlightStyle.define([
|
||||
{ tag: t.keyword, color: base_purple },
|
||||
{
|
||||
tag: [t.name, t.deleted, t.character, t.macroName],
|
||||
color: base_cyan,
|
||||
},
|
||||
{ tag: [t.propertyName], color: base_yellow },
|
||||
{ tag: [t.variableName], color: base05 },
|
||||
{ tag: [t.function(t.variableName)], color: base_cyan },
|
||||
{ tag: [t.labelName], color: base_purple },
|
||||
{
|
||||
tag: [t.color, t.constant(t.name), t.standard(t.name)],
|
||||
color: base_yellow,
|
||||
},
|
||||
{ tag: [t.definition(t.name), t.separator], color: base_pink },
|
||||
{ tag: [t.brace], color: base_purple },
|
||||
{
|
||||
tag: [t.annotation],
|
||||
color: invalid,
|
||||
},
|
||||
{
|
||||
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
|
||||
color: base_orange,
|
||||
},
|
||||
{
|
||||
tag: [t.typeName, t.className],
|
||||
color: base_orange,
|
||||
},
|
||||
{
|
||||
tag: [t.operator, t.operatorKeyword],
|
||||
color: base_indigo,
|
||||
},
|
||||
{
|
||||
tag: [t.tagName],
|
||||
color: base_deeporange,
|
||||
},
|
||||
{
|
||||
tag: [t.squareBracket],
|
||||
color: base_red,
|
||||
},
|
||||
{
|
||||
tag: [t.angleBracket],
|
||||
color: base02,
|
||||
},
|
||||
{
|
||||
tag: [t.attributeName],
|
||||
color: base05,
|
||||
},
|
||||
{
|
||||
tag: [t.regexp],
|
||||
color: invalid,
|
||||
},
|
||||
{
|
||||
tag: [t.quote],
|
||||
color: base_green,
|
||||
},
|
||||
{ tag: [t.string], color: base_lightgreen },
|
||||
{
|
||||
tag: t.link,
|
||||
color: base_cyan,
|
||||
textDecoration: "underline",
|
||||
textUnderlinePosition: "under",
|
||||
},
|
||||
{
|
||||
tag: [t.url, t.escape, t.special(t.string)],
|
||||
color: base_yellow,
|
||||
},
|
||||
{ tag: [t.meta], color: base03 },
|
||||
{ tag: [t.comment], color: base02, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: base05 },
|
||||
{ tag: t.strong, fontWeight: "bold", color: base_red },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: base_lightgreen },
|
||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
||||
{ tag: t.heading, fontWeight: "bold", color: base_yellow },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: base_yellow },
|
||||
{
|
||||
tag: [t.heading2, t.heading3, t.heading4],
|
||||
fontWeight: "bold",
|
||||
color: base_yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.heading5, t.heading6],
|
||||
color: base_yellow,
|
||||
},
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: base_cyan },
|
||||
{
|
||||
tag: [t.processingInstruction, t.inserted],
|
||||
color: base_red,
|
||||
},
|
||||
{
|
||||
tag: [t.contentSeparator],
|
||||
color: base_cyan,
|
||||
},
|
||||
{ tag: t.invalid, color: base02, borderBottom: `1px dotted ${base_red}` },
|
||||
]);
|
||||
|
||||
/// Extension to enable the Material Dark theme (both the editor theme and
|
||||
/// the highlight style).
|
||||
export const toposTheme: Extension = [
|
||||
toposDarkTheme,
|
||||
syntaxHighlighting(toposDarkHighlightStyle),
|
||||
];
|
||||
@ -1,21 +1,33 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
safelist: [
|
||||
{
|
||||
pattern: /hljs+/,
|
||||
},
|
||||
],
|
||||
content: ["./src/**/*.html", "./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
hljs: {
|
||||
theme: "nord",
|
||||
custom: {
|
||||
general: {
|
||||
comment: "#FEFEFE",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwind-highlightjs")],
|
||||
colors: {
|
||||
black: "rgb(var(--black) / <alpha-value>)",
|
||||
red: "rgb(var(--red) / <alpha-value>)",
|
||||
green: "rgb(var(--green) / <alpha-value>)",
|
||||
yellow: "rgb(var(--yellow) / <alpha-value>)",
|
||||
blue: "rgb(var(--blue) / <alpha-value>)",
|
||||
magenta: "rgb(var(--magenta) / <alpha-value>)",
|
||||
cyan: "rgb(var(--cyan) / <alpha-value>)",
|
||||
white: "rgb(var(--white) / <alpha-value>)",
|
||||
brightblack: "rgb(var(--brightblack) / <alpha-value>)",
|
||||
brightred: "rgb(var(--brightred) / <alpha-value>)",
|
||||
brightgreen: "rgb(var(--brightgreen) / <alpha-value>)",
|
||||
brightyellow: "rgb(var(--brightyellow) / <alpha-value>)",
|
||||
brightblue: "rgb(var(--brightblue) / <alpha-value>)",
|
||||
brightmagenta: "rgb(var(--brightmagenta) / <alpha-value>)",
|
||||
brightcyan: "rgb(var(--brightcyan) / <alpha-value>)",
|
||||
brightwhite: "rgb(var(--brightwhite) / <alpha-value>)",
|
||||
background: "rgb(var(--background) / <alpha-value>)",
|
||||
selection_foreground: "rgb(var(--selection_foreground) / <alpha-value>)",
|
||||
cursor: "rgb(var(--cursor) / <alpha-value>)",
|
||||
foreground: "rgb(var(--foreground) / <alpha-value>)",
|
||||
selection_background: "rgb(var(--selection_background) / <alpha-value>)",
|
||||
}
|
||||
},
|
||||
extend: {},
|
||||
safelist: [{
|
||||
pattern: /(bg|text|border)-(transparent|color0|color1|color2|color3|color4|color5|color6|color7|color8|color9|color10|color11|color12|color13|color14|color15|background|selection_background|cursor|foreground|selection_background)/,
|
||||
}],
|
||||
};
|
||||
|
||||
@ -10,11 +10,10 @@ const vitePWAconfiguration = {
|
||||
|
||||
workbox: {
|
||||
sourcemap: false,
|
||||
cleanupOutdatedCaches: true,
|
||||
cleanupOutdatedCaches: false,
|
||||
globPatterns: [
|
||||
"**/*.{js,js.gz,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}",
|
||||
],
|
||||
// Thanks Froos :)
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: ({ url }) =>
|
||||
|
||||
@ -2476,6 +2476,11 @@ highlight.js@^11.5.0:
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
|
||||
integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
|
||||
|
||||
highlight.js@^11.9.0:
|
||||
version "11.9.0"
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
|
||||
integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
|
||||
|
||||
html-encoder-decoder@^1.3.9:
|
||||
version "1.3.9"
|
||||
resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.9.tgz#d5ec7d249cd525709f7640ae9340f482cc86e94a"
|
||||
|
||||
Reference in New Issue
Block a user