diff --git a/src/app.js b/src/app.js index 0a47339..cb89f76 100755 --- a/src/app.js +++ b/src/app.js @@ -122,6 +122,9 @@ app.ws('/ws/:repl_name', (ws, req) => { ws.on('close', () => { try { + if (!terminals[repl_name]) { + return; + } let stop_container = pty.spawn('docker', ["rm", "-f", repl_name]); stop_container.on('close', code => { if (DEBUG) console.log("Stopped container "+repl_name); diff --git a/src/web/index.html b/src/web/index.html index 9345087..0e9549c 100755 --- a/src/web/index.html +++ b/src/web/index.html @@ -53,7 +53,35 @@ d="M12 2.25a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V3a.75.75 0 0 1 .75-.75Zm-9 13.5a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" /> + + + + + + + + + + + diff --git a/src/web/script.js b/src/web/script.js index b69ecd7..c23967b 100755 --- a/src/web/script.js +++ b/src/web/script.js @@ -134,7 +134,7 @@ require(['vs/editor/editor.main'], function () { monaco.languages.setMonarchTokensProvider('Elm', window.elm_monarch); // monaco-editor theme & colors - monaco.editor.defineTheme('dark-plus', { + monaco.editor.defineTheme('dark', { base: 'vs-dark', inherit: true, rules: [ @@ -145,6 +145,17 @@ require(['vs/editor/editor.main'], function () { colors: {}, }); + monaco.editor.defineTheme('light', { + base: 'vs', + inherit: true, + rules: [ + { token: 'keyword', foreground: '#037ABA' }, + { token: 'type', foreground: '#BE5A09' }, + { token: 'function.name', foreground: '#044B86' }, + ], + colors: {}, + }); + // init editor var editor = monaco.editor.create(document.getElementById('container'), { fontSize: 18, @@ -152,7 +163,7 @@ require(['vs/editor/editor.main'], function () { language: 'Elm', automaticLayout: true, scrollBeyondLastLine: false, - theme: "dark-plus", + theme: localStorage.getItem("darkmode-editor") === 'false' ? "light" : "dark", automaticLayout: true, }); @@ -166,6 +177,30 @@ require(['vs/editor/editor.main'], function () { // TERMINAL +terminaLightTheme = { + "foreground": "#383A42", + "background": "#FAFAFA", + "cursorColor": "#4F525D", + "selectionBackground": "#FFFFFF", + "black": "#383A42", + "red": "#E45649", + "green": "#50A14F", + "yellow": "#C18301", + "blue": "#0184BC", + "purple": "#A626A4", + "cyan": "#0997B3", + "white": "#FAFAFA", + "brightBlack": "#4F525D", + "brightRed": "#DF6C75", + "brightGreen": "#98C379", + "brightYellow": "#E4C07A", + "brightBlue": "#61AFEF", + "brightPurple": "#C577DD", + "brightCyan": "#56B5C1", + "brightWhite": "#FFFFFF", + "cursor": "#4F525D" +} + let term, socketURL, socket; @@ -178,7 +213,7 @@ const createTerminal = () => { fontFamily: "Menlo, Monaco, monospace", cursorBlink: false }); - + term.options.theme = localStorage.getItem("darkmode-terminal") === 'false' ? terminaLightTheme : {}; socketURL = ((location.protocol === 'https:') ? 'wss://' : 'ws://') + location.hostname + ((location.port) ? (':' + location.port) : '') + '/ws/'; term.open(terminalContainer); @@ -260,3 +295,45 @@ if (repl) { socket.send("import Main exposing (..)\n") }, 2000); } + + +var settingsModal = document.getElementById("settingsModal"); + +// When the user clicks on the settings button, open the modal +document.getElementById("settings").onclick = function () { + settingsModal.style.display = "block"; +} + +// When the user clicks on the close button, close the modal +document.getElementById("close").onclick = function () { + settingsModal.style.display = "none"; +} + +// When the user clicks anywhere outside of the modal, close it +window.onclick = function (event) { + if (event.target == settingsModal) { + settingsModal.style.display = "none"; + } +} + +document.querySelector('#darkmode-editor').checked = (localStorage.getItem('darkmode-editor') === 'true') +document.getElementById("darkmode-editor").addEventListener("change", function () { + if (this.checked) { + window.theEditor.updateOptions({ theme: "dark" }); + localStorage.setItem("darkmode-editor", true); + } else { + window.theEditor.updateOptions({ theme: "light" }); + localStorage.setItem("darkmode-editor", false); + } +}); + +document.querySelector('#darkmode-terminal').checked = (localStorage.getItem('darkmode-terminal') === 'true') +document.getElementById("darkmode-terminal").addEventListener("change", function () { + if (this.checked) { + term.options.theme = {}; + localStorage.setItem("darkmode-terminal", true); + } else { + term.options.theme = terminaLightTheme; + localStorage.setItem("darkmode-terminal", false); + } +}); \ No newline at end of file diff --git a/src/web/style.css b/src/web/style.css index 3244d01..1483dc2 100755 --- a/src/web/style.css +++ b/src/web/style.css @@ -87,3 +87,38 @@ body { resize: vertical; overflow: auto; } + + +.modal { + font-family: Consolas, "Courier New", monospace; + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +.modal-content { + background-color: #1f1f1f; + color: white; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; +} + +#close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +#close:hover, +#close:focus { + color: black; + text-decoration: none; + cursor: pointer; +}