elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-10 21:28:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

add codemirror

Browse Source
This commit is contained in:
Felix Roos 2022-02-06 22:13:46 +01:00
parent 36db844155
commit ffe0556c90
6 changed files with 69 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -23,3 +23,4 @@ cabal.project.local~
.HTF/
.ghc.environment.*
node_modules/
.DS_Store

232
repl/package-lock.json generated
View File

@ -6,9 +6,10 @@
"": {
"dependencies": {
"@tonaljs/tonal": "^4.6.5",
"codemirror": "^5.65.1",
"react": "^17.0.2",
"react-codemirror2": "^7.2.1",
"react-dom": "^17.0.2",
"tonal": "^2.2.2",
"tone": "^14.7.77"
},
"devDependencies": {
@ -2890,6 +2891,11 @@
"node": ">=0.10.0"
}
},
"node_modules/codemirror": {
"version": "5.65.1",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
"integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
},
"node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -6845,6 +6851,15 @@
"node": ">=0.10.0"
}
},
"node_modules/react-codemirror2": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.2.1.tgz",
"integrity": "sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==",
"peerDependencies": {
"codemirror": "5.x",
"react": ">=15.5 <=16.x"
}
},
"node_modules/react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@ -8066,108 +8081,6 @@
"node": ">=0.6"
}
},
"node_modules/tonal": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal/-/tonal-2.2.2.tgz",
"integrity": "sha512-Ze2bQc6KhAf3FKM9HzEsQ4z8hZh4WYCOsCrryONqf/THGOrOpL9Cc8Uc0dq0OA2yK2JbD5FhZckEXNYyD9946A==",
"dependencies": {
"tonal-array": "^2.2.2",
"tonal-chord": "^2.2.2",
"tonal-dictionary": "^2.2.2",
"tonal-distance": "^2.2.2",
"tonal-interval": "^2.2.2",
"tonal-key": "^2.2.2",
"tonal-note": "^2.2.2",
"tonal-pcset": "^2.2.2",
"tonal-scale": "^2.2.2"
}
},
"node_modules/tonal-array": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-array/-/tonal-array-2.2.2.tgz",
"integrity": "sha512-h6YIq20L0EEU4EsDoKHAjl5kD2EQn467VfV79QHAuybvNCJpqqRNsQ3QNvoQyir1BgDXaDUIN9FEmQJNiaaCKA==",
"dependencies": {
"tonal-note": "^2.2.2"
}
},
"node_modules/tonal-chord": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-chord/-/tonal-chord-2.2.2.tgz",
"integrity": "sha512-gOIXapi6Gx3ISRKdEJKEQjhDBiwjhaalyWSrN5rijGrSyyFFNZ+EVOfzcqLtnVAF9BgeO9Ca0eXCor3XpHdEJg==",
"dependencies": {
"tonal-dictionary": "^2.2.2",
"tonal-distance": "^2.2.2",
"tonal-note": "^2.2.2",
"tonal-pcset": "^2.2.2"
}
},
"node_modules/tonal-dictionary": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-dictionary/-/tonal-dictionary-2.2.2.tgz",
"integrity": "sha512-283ppJl/0lohhlVPMI6t5C6XwaP5Wx0egu9qfG9TLCT2tn4pRwYpXkzGufd9icvkJTgOylOum3+RxWmywUIPIg==",
"dependencies": {
"tonal-array": "^2.2.2",
"tonal-note": "^2.2.2",
"tonal-pcset": "^2.2.2"
}
},
"node_modules/tonal-distance": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-distance/-/tonal-distance-2.2.2.tgz",
"integrity": "sha512-ktA6OapCxaetXJb/JuXD5QwfyB7/G3y3ONby7Kkbezyffc57cnNfjdhlTR9XBR7eSFIY/J1KuhLwMx/qrffT4g==",
"dependencies": {
"tonal-interval": "^2.2.2",
"tonal-note": "^2.2.2"
}
},
"node_modules/tonal-interval": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-interval/-/tonal-interval-2.2.2.tgz",
"integrity": "sha512-lrtDU8lH5IAX7YE63OhGGDRpVb4OoGxaN0wDu5XC3sUhXBwjSgNYpHY2D9JI2aWQ/Er9jhQbnw9b0ffkLy34+Q=="
},
"node_modules/tonal-key": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-key/-/tonal-key-2.2.2.tgz",
"integrity": "sha512-KIc0b8yPl2ATDxF/65P52tIIempNsAQrug0idpD0zFvs5F5cb1hp7Rh7JJ4gECwC/6a3Hgdd1jomI+TnJ7K98w==",
"dependencies": {
"tonal-array": "^2.2.2",
"tonal-distance": "^2.2.2",
"tonal-note": "^2.2.2",
"tonal-roman-numeral": "^2.2.2"
}
},
"node_modules/tonal-note": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-note/-/tonal-note-2.2.2.tgz",
"integrity": "sha512-RNK3Nb8PxBEW9yYGStcoczgE8bCYFZ5zfLvYJjvuzLWiwTQmqWOhTzONVobVCGFZ/jgDNwpBEKe/bngL3g3Xfw=="
},
"node_modules/tonal-pcset": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-pcset/-/tonal-pcset-2.2.2.tgz",
"integrity": "sha512-PSqhkxzckO6J27W0GxawHYln4wvfDJ7puDmccksyFOBo97UhLnpxiyvBekhiYpkuaMtoZLQC/KALAkEj7lcb+A==",
"dependencies": {
"tonal-array": "^2.2.2",
"tonal-interval": "^2.2.2",
"tonal-note": "^2.2.2"
}
},
"node_modules/tonal-roman-numeral": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-roman-numeral/-/tonal-roman-numeral-2.2.2.tgz",
"integrity": "sha512-+auQNObpW3OvsSqlo+Cc+0otrlEhtbEgpzkPoKbTtkCva0P9oSkSz0OZ9fI73KQM5MsBs1XbB+olxppWkzYTFw=="
},
"node_modules/tonal-scale": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-scale/-/tonal-scale-2.2.2.tgz",
"integrity": "sha512-tDb3YCoTF50XOXq9kNhGB1JkInk7qAGN6GQnP/3xkGxkreFFRZyI58jfHlmWf/AH4+IKb/exsOmL6G8Ok/PCRw==",
"dependencies": {
"tonal-array": "^2.2.2",
"tonal-dictionary": "^2.2.2",
"tonal-distance": "^2.2.2",
"tonal-note": "^2.2.2",
"tonal-pcset": "^2.2.2"
}
},
"node_modules/tone": {
"version": "14.7.77",
"resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
@ -11039,6 +10952,11 @@
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true
},
"codemirror": {
"version": "5.65.1",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
"integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -14027,6 +13945,12 @@
"object-assign": "^4.1.1"
}
},
"react-codemirror2": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.2.1.tgz",
"integrity": "sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==",
"requires": {}
},
"react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@ -14964,108 +14888,6 @@
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
"dev": true
},
"tonal": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal/-/tonal-2.2.2.tgz",
"integrity": "sha512-Ze2bQc6KhAf3FKM9HzEsQ4z8hZh4WYCOsCrryONqf/THGOrOpL9Cc8Uc0dq0OA2yK2JbD5FhZckEXNYyD9946A==",
"requires": {
"tonal-array": "^2.2.2",
"tonal-chord": "^2.2.2",
"tonal-dictionary": "^2.2.2",
"tonal-distance": "^2.2.2",
"tonal-interval": "^2.2.2",
"tonal-key": "^2.2.2",
"tonal-note": "^2.2.2",
"tonal-pcset": "^2.2.2",
"tonal-scale": "^2.2.2"
}
},
"tonal-array": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-array/-/tonal-array-2.2.2.tgz",
"integrity": "sha512-h6YIq20L0EEU4EsDoKHAjl5kD2EQn467VfV79QHAuybvNCJpqqRNsQ3QNvoQyir1BgDXaDUIN9FEmQJNiaaCKA==",
"requires": {
"tonal-note": "^2.2.2"
}
},
"tonal-chord": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-chord/-/tonal-chord-2.2.2.tgz",
"integrity": "sha512-gOIXapi6Gx3ISRKdEJKEQjhDBiwjhaalyWSrN5rijGrSyyFFNZ+EVOfzcqLtnVAF9BgeO9Ca0eXCor3XpHdEJg==",
"requires": {
"tonal-dictionary": "^2.2.2",
"tonal-distance": "^2.2.2",
"tonal-note": "^2.2.2",
"tonal-pcset": "^2.2.2"
}
},
"tonal-dictionary": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-dictionary/-/tonal-dictionary-2.2.2.tgz",
"integrity": "sha512-283ppJl/0lohhlVPMI6t5C6XwaP5Wx0egu9qfG9TLCT2tn4pRwYpXkzGufd9icvkJTgOylOum3+RxWmywUIPIg==",
"requires": {
"tonal-array": "^2.2.2",
"tonal-note": "^2.2.2",
"tonal-pcset": "^2.2.2"
}
},
"tonal-distance": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-distance/-/tonal-distance-2.2.2.tgz",
"integrity": "sha512-ktA6OapCxaetXJb/JuXD5QwfyB7/G3y3ONby7Kkbezyffc57cnNfjdhlTR9XBR7eSFIY/J1KuhLwMx/qrffT4g==",
"requires": {
"tonal-interval": "^2.2.2",
"tonal-note": "^2.2.2"
}
},
"tonal-interval": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-interval/-/tonal-interval-2.2.2.tgz",
"integrity": "sha512-lrtDU8lH5IAX7YE63OhGGDRpVb4OoGxaN0wDu5XC3sUhXBwjSgNYpHY2D9JI2aWQ/Er9jhQbnw9b0ffkLy34+Q=="
},
"tonal-key": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-key/-/tonal-key-2.2.2.tgz",
"integrity": "sha512-KIc0b8yPl2ATDxF/65P52tIIempNsAQrug0idpD0zFvs5F5cb1hp7Rh7JJ4gECwC/6a3Hgdd1jomI+TnJ7K98w==",
"requires": {
"tonal-array": "^2.2.2",
"tonal-distance": "^2.2.2",
"tonal-note": "^2.2.2",
"tonal-roman-numeral": "^2.2.2"
}
},
"tonal-note": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-note/-/tonal-note-2.2.2.tgz",
"integrity": "sha512-RNK3Nb8PxBEW9yYGStcoczgE8bCYFZ5zfLvYJjvuzLWiwTQmqWOhTzONVobVCGFZ/jgDNwpBEKe/bngL3g3Xfw=="
},
"tonal-pcset": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-pcset/-/tonal-pcset-2.2.2.tgz",
"integrity": "sha512-PSqhkxzckO6J27W0GxawHYln4wvfDJ7puDmccksyFOBo97UhLnpxiyvBekhiYpkuaMtoZLQC/KALAkEj7lcb+A==",
"requires": {
"tonal-array": "^2.2.2",
"tonal-interval": "^2.2.2",
"tonal-note": "^2.2.2"
}
},
"tonal-roman-numeral": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-roman-numeral/-/tonal-roman-numeral-2.2.2.tgz",
"integrity": "sha512-+auQNObpW3OvsSqlo+Cc+0otrlEhtbEgpzkPoKbTtkCva0P9oSkSz0OZ9fI73KQM5MsBs1XbB+olxppWkzYTFw=="
},
"tonal-scale": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tonal-scale/-/tonal-scale-2.2.2.tgz",
"integrity": "sha512-tDb3YCoTF50XOXq9kNhGB1JkInk7qAGN6GQnP/3xkGxkreFFRZyI58jfHlmWf/AH4+IKb/exsOmL6G8Ok/PCRw==",
"requires": {
"tonal-array": "^2.2.2",
"tonal-dictionary": "^2.2.2",
"tonal-distance": "^2.2.2",
"tonal-note": "^2.2.2",
"tonal-pcset": "^2.2.2"
}
},
"tone": {
"version": "14.7.77",
"resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",

2
repl/package.json
View File

@ -9,7 +9,9 @@
},
"dependencies": {
"@tonaljs/tonal": "^4.6.5",
"codemirror": "^5.65.1",
"react": "^17.0.2",
"react-codemirror2": "^7.2.1",
"react-dom": "^17.0.2",
"tone": "^14.7.77"
},

5
repl/public/global.css
View File

@ -1,3 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.react-codemirror2,
.CodeMirror {
height: 100% !important;
}

36
repl/src/App.tsx
View File

@ -7,6 +7,7 @@ import useCycle from './useCycle';
import type { Hap, Pattern } from './types';
import * as tunes from './tunes';
import * as krill from './parse';
import CodeMirror from './CodeMirror';
const { tetris, tetrisMini, tetrisHaskell } = tunes;
@ -68,6 +69,7 @@ function App() {
// cycle.query(cycle.activeCycle()); // reschedule active cycle
setError(undefined);
} catch (err: any) {
console.warn(err);
setError(err);
}
}, [code]);
@ -75,38 +77,40 @@ function App() {
useLayoutEffect(() => {
logBox.current.scrollTop = logBox.current?.scrollHeight;
}, [log]);
return (
<div className="h-[100vh] bg-slate-900 flex-row">
<header className="px-2 flex items-center space-x-2 border-b border-gray-200 bg-white">
<div className="h-screen bg-slate-900 flex flex-col">
<header className="flex-none w-full h-16 px-2 flex items-center space-x-2 border-b border-gray-200 bg-white">
<img src={logo} className="Tidal-logo w-16 h-16" alt="logo" />
<h1 className="text-2xl">Strudel REPL</h1>
</header>
<section className="grow p-2 text-gray-100">
<div className="relative">
<div className="absolute right-2 bottom-2 text-red-500">{error?.message}</div>
<textarea
<section className="grow flex flex-col p-2 text-gray-100">
<div className="grow relative">
<div className={cx('h-full bg-slate-600', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}>
<CodeMirror
value={code}
onChange={(_: any, __: any, value: any) => {
setLog((log) => log + `${log ? '\n\n' : ''}✏️ edit\n${code}\n${value}`);
setCode(value);
}}
/>
</div>
{error && <div className="absolute right-2 bottom-2 text-red-500">{error?.message || 'unknown error'}</div>}
{/* <textarea
className={cx('w-full h-64 bg-slate-600', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}
value={code}
onChange={(e) => {
setLog((log) => log + `${log ? '\n\n' : ''}✏️ edit\n${code}\n${e.target.value}`);
setCode(e.target.value);
}}
/>
/> */}
</div>
<textarea
className="w-full h-64 bg-slate-600"
value={log}
readOnly
ref={logBox}
style={{ fontFamily: 'monospace' }}
/>
<button
className="w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
onClick={() => cycle.toggle()}
>
{cycle.started ? 'pause' : 'play'}
</button>
<textarea className="grow bg-[#283237] border-0" value={log} readOnly ref={logBox} style={{ fontFamily: 'monospace' }} />
</section>
</div>
);

14
repl/src/CodeMirror.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import { Controlled as CodeMirror2 } from 'react-codemirror2';
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/theme/material.css';
import 'codemirror/lib/codemirror.css';
export default function CodeMirror({ value, onChange, options }: any) {
options = options || {
mode: 'javascript',
theme: 'material',
lineNumbers: true,
};
return <CodeMirror2 value={value} options={options} onBeforeChange={onChange} />;
}