From 8d77b745217b18b252ca93ec0d7406d22e953171 Mon Sep 17 00:00:00 2001 From: jh-488 Date: Sat, 11 May 2024 17:27:55 +0200 Subject: [PATCH] added zoom in/out buttons --- index.html | 8 +++-- script.js | 94 +++++++++++++++++++++++++++++------------------- styles/style.css | 13 +++---- 3 files changed, 69 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index 89d5e33..c3c5040 100644 --- a/index.html +++ b/index.html @@ -44,12 +44,13 @@ -
-
- +
+ + +
@@ -98,6 +99,7 @@
+
diff --git a/script.js b/script.js index 0694218..22b425b 100644 --- a/script.js +++ b/script.js @@ -4,6 +4,7 @@ const EDITOR = "editor"; var sendMsgNext = true; const client = new Date().getTime(); var editor = {}; +let myFontSize = 13; function identifier(id) { return id.replace(".", "_").replace("/", "__"); @@ -19,6 +20,7 @@ function initEditor({ id, content, language, theme }) { language: language, theme: theme, automaticLayout: true, + fontSize: myFontSize, }); function save() { @@ -89,25 +91,6 @@ const app = createApp({ run(); }, - // reset the editor content to the starter code - resetCode() { - clearEditor(); - }, - - // toggle editor theme - toggleTheme() { - const theme = Edrys.getItem("theme") == "vs-light" ? "vs-dark" : "vs-light"; - Edrys.setItem("theme", theme); - - changeThemeToggleContainerBgC(theme); - - for (const id in editor) { - editor[id].updateOptions({ - theme, - }); - } - }, - identifier(id) { return identifier(id); }, @@ -118,16 +101,16 @@ const app = createApp({ this.multiFileMode = false; editor = {}; editor[this.identifier(id)] = initEditor({ - id, - content, - language, - theme, + id, + content, + language, + theme, }); } else { this.multiFileMode = true; for (const name in content) { - this.filename.push(name); + this.filename.push(name); } } }, @@ -138,10 +121,47 @@ const app = createApp({ for (const filename in content) { let id = this.identifier(filename); editor[id] = initEditor({ - id, - content: content[filename], - language, - theme, + id, + content: content[filename], + language, + theme, + }); + } + }, + + // reset the editor content to the starter code + resetCode() { + clearEditor(); + }, + + // toggle editor theme + toggleTheme() { + const theme = Edrys.getItem("theme") == "vs-light" ? "vs-dark" : "vs-light"; + Edrys.setItem("theme", theme); + + changeTopBarBgColor(theme); + + for (const id in editor) { + editor[id].updateOptions({ + theme, + }); + } + }, + + zoomIn() { + myFontSize += 3; + for (const id in editor) { + editor[id].updateOptions({ + fontSize: myFontSize, + }); + } + }, + + zoomOut() { + myFontSize -= 3; + for (const id in editor) { + editor[id].updateOptions({ + fontSize: myFontSize, }); } }, @@ -166,7 +186,7 @@ Edrys.onReady(() => { ? "vs-dark" : "vs-light"); - changeThemeToggleContainerBgC(theme); + changeTopBarBgColor(theme); // if the challenge is time-restricted, the editor should be read-only, until the timer starts if (Edrys.module.challengeType === "time-restricted" || Edrys.module.challengeType === "multiplayer" || Edrys.module.challengeId === "missing-led") { @@ -191,9 +211,9 @@ Edrys.onReady(() => { } else { const content = - Edrys.getItem(`editorText_${EDITOR}`) || - Edrys.module.config.editorText || - CONTENT; + Edrys.getItem(`editorText_${EDITOR}`) || + Edrys.module.config.editorText || + CONTENT; ui.init({ id: EDITOR, content, language, theme }); } @@ -287,8 +307,8 @@ socket.onmessage = (event) => { } } else { Edrys.sendMessage( - "server-response", - data.message + "\n" + (data.stdout ? data.stdout : data.stderr) + "server-response", + data.message + "\n" + (data.stdout ? data.stdout : data.stderr) ); } }; @@ -350,7 +370,7 @@ Edrys.onMessage(({ from, subject, body }) => { // Function to change the theme toggle container background color -const changeThemeToggleContainerBgC = (theme) => { - const themeToggleContainer = document.querySelector(".theme_toggle_container"); - theme === "vs-light" ? themeToggleContainer.style.backgroundColor = "#fffffe" : themeToggleContainer.style.backgroundColor = "#1e1e1e"; +const changeTopBarBgColor = (theme) => { + const topBarContainer = document.querySelector(".top_bar_container"); + theme === "vs-light" ? topBarContainer.style.backgroundColor = "#fffffe" : topBarContainer.style.backgroundColor = "#1e1e1e"; }; \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index da73313..edbf023 100644 --- a/styles/style.css +++ b/styles/style.css @@ -29,8 +29,8 @@ body, position: absolute; bottom: 0; overflow: scroll; - box-shadow: 0 0 15px #f4f4f4; background-color: #202b38; + border: 2px solid #526980; } #server-messages { @@ -76,19 +76,21 @@ body, font-weight: 600; } -.btn1:hover, #toggle_theme:hover{ +.btn1:hover, .btn2:hover{ background-color: #0f0f0f; color: #ececec; border: 1px solid #f4f4f4; } -.theme_toggle_container { +.top_bar_container { display: flex; + align-items: center; justify-content: right; background-color: #202b38; + border-bottom: 1px solid #526980; } -#toggle_theme { +.btn2 { width: 20px; height: 30px; margin: 5px; @@ -96,10 +98,9 @@ body, display: flex; align-items: center; justify-content: center; - background-color: #ececec; + background-color: #f4f4f4; color: #0f0f0f; border: 1px solid #0f0f0f; - box-shadow: 0 0 5px #f4f4f4; transition: all 0.3s ease-in-out; }