fix up editor things
This commit is contained in:
parent
7afb5d8097
commit
ea65bf0ecd
6 changed files with 18 additions and 66 deletions
|
@ -1,6 +1,5 @@
|
||||||
# Sprigsy editor
|
# Sprigsy editor
|
||||||
|
|
||||||
|
|
||||||
# planned for v1
|
# planned for v1
|
||||||
- [ ] ability to play project
|
- [ ] ability to play project
|
||||||
- [ ] monaco code editor
|
- [ ] monaco code editor
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
|
|
@ -32,7 +32,6 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Function to add global types
|
|
||||||
async function addGlobalTypes() {
|
async function addGlobalTypes() {
|
||||||
const sprigTypeDef = (await import('./editorcontext/sprig.d.ts?raw')).default;
|
const sprigTypeDef = (await import('./editorcontext/sprig.d.ts?raw')).default;
|
||||||
monaco.languages.typescript.typescriptDefaults.addExtraLib(
|
monaco.languages.typescript.typescriptDefaults.addExtraLib(
|
||||||
|
@ -42,7 +41,7 @@
|
||||||
const globalTypeDef = (await import('./editorcontext/global.d.ts?raw')).default;
|
const globalTypeDef = (await import('./editorcontext/global.d.ts?raw')).default;
|
||||||
monaco.languages.typescript.typescriptDefaults.addExtraLib(
|
monaco.languages.typescript.typescriptDefaults.addExtraLib(
|
||||||
globalTypeDef,
|
globalTypeDef,
|
||||||
'context/global.d.ts'
|
'global.d.ts'
|
||||||
);
|
);
|
||||||
|
|
||||||
// IMPLEMENT ONCE v2 IS DONE!
|
// IMPLEMENT ONCE v2 IS DONE!
|
||||||
|
@ -94,10 +93,10 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Function to set up the editor
|
|
||||||
function setupEditor() {
|
function setupEditor() {
|
||||||
editor = monaco.editor.create(editorContainer, {
|
editor = monaco.editor.create(editorContainer, {
|
||||||
value: `function game(api: sprig.FullSprigAPI): void {
|
value:
|
||||||
|
`function game(api: sprig.FullSprigAPI): void {
|
||||||
${code}
|
${code}
|
||||||
}`,
|
}`,
|
||||||
language: 'typescript',
|
language: 'typescript',
|
||||||
|
@ -107,57 +106,6 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
const model = editor.getModel()!;
|
const model = editor.getModel()!;
|
||||||
// Mark function declaration and closing brace as read-only
|
|
||||||
// editor.createDecorationsCollection(
|
|
||||||
// [
|
|
||||||
// {
|
|
||||||
// range: new monaco.Range(1, 1, 1, 28),
|
|
||||||
// options: {
|
|
||||||
// className: 'read-only',
|
|
||||||
// isWholeLine: true
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// range: new monaco.Range(
|
|
||||||
// model.getLineCount(),
|
|
||||||
// 1,
|
|
||||||
// model.getLineCount(),
|
|
||||||
// model.getLineMaxColumn(model.getLineCount())
|
|
||||||
// ),
|
|
||||||
// options: {
|
|
||||||
// className: 'read-only',
|
|
||||||
// isWholeLine: true
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// Disable editing in read-only regions
|
|
||||||
// editor.onDidChangeModelContent((event) => {
|
|
||||||
// event.changes.forEach((change) => {
|
|
||||||
// const { range } = change;
|
|
||||||
|
|
||||||
// if (
|
|
||||||
// (range.startLineNumber === 1 && range.endLineNumber === 1) ||
|
|
||||||
// (range.startLineNumber === model.getLineCount() &&
|
|
||||||
// range.endLineNumber === model.getLineCount())
|
|
||||||
// ) {
|
|
||||||
// editor.executeEdits('revert-read-only', [
|
|
||||||
// {
|
|
||||||
// range: new monaco.Range(
|
|
||||||
// range.startLineNumber,
|
|
||||||
// range.startColumn,
|
|
||||||
// range.endLineNumber,
|
|
||||||
// range.endColumn
|
|
||||||
// ),
|
|
||||||
// text: '',
|
|
||||||
// forceMoveMarkers: true
|
|
||||||
// }
|
|
||||||
// ]);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
|
|
||||||
const constrainedInstance = constrainedEditor(monaco);
|
const constrainedInstance = constrainedEditor(monaco);
|
||||||
constrainedInstance.initializeIn(editor);
|
constrainedInstance.initializeIn(editor);
|
||||||
constrainedInstance.addRestrictionsTo(model, [
|
constrainedInstance.addRestrictionsTo(model, [
|
15
src/lib/editorcontext/global.d.ts
vendored
15
src/lib/editorcontext/global.d.ts
vendored
|
@ -1,10 +1,11 @@
|
||||||
import "./sprig"
|
// for some reason this doesn't work, I can't figure out why
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
var setTimeout: sprig.FullSprigAPI['setTimeout'];
|
declare function tune(template: TemplateStringsArray, ...params: string[]): string
|
||||||
var setInterval: sprig.FullSprigAPI['setInterval'];
|
interface Window {
|
||||||
var clearTimeout: sprig.FullSprigAPI['clearTimeout'];
|
setTimeout: import('./sprig').sprig.FullSprigAPI['setTimeout'];
|
||||||
var clearInterval: sprig.FullSprigAPI['clearInterval'];
|
setInterval: sprig.FullSprigAPI['setInterval'];
|
||||||
|
clearTimeout: sprig.FullSprigAPI['clearTimeout'];
|
||||||
var tones: typeof sprig['tones']
|
clearInterval: sprig.FullSprigAPI['clearInterval'];
|
||||||
|
}
|
||||||
}
|
}
|
4
src/lib/editorcontext/sprig.d.ts
vendored
4
src/lib/editorcontext/sprig.d.ts
vendored
|
@ -1,3 +1,7 @@
|
||||||
|
/**
|
||||||
|
* normal sprig api
|
||||||
|
* this is provided because your project type is
|
||||||
|
*/
|
||||||
declare namespace sprig {
|
declare namespace sprig {
|
||||||
export declare const VALID_INPUTS: readonly ["w", "s", "a", "d", "i", "j", "k", "l"];
|
export declare const VALID_INPUTS: readonly ["w", "s", "a", "d", "i", "j", "k", "l"];
|
||||||
export type InputKey = typeof VALID_INPUTS[number];
|
export type InputKey = typeof VALID_INPUTS[number];
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import Editor from "$lib/Editor.svelte";
|
import CodeEditor from "$lib/CodeEditor.svelte";
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<div class="">
|
<div class="">
|
||||||
<Editor />
|
<CodeEditor />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue