added zoom in/out buttons

jh-488 · May 11, 2024 · 8d77b74 · 8d77b74
1 parent 3ee9bd7
commit 8d77b74
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -44,12 +44,13 @@
 </head>
 
 <body>
-
     <div id="app">
         <div style="height: 640px;" v-if="!multiFileMode">
             <div id="editor" style="height: 100%; max-height: inherit; max-width: inherit;">
-                <div class="theme_toggle_container">
-                    <button id="toggle_theme" @click="toggleTheme"><span class="oi" data-glyph="brush" title="Toggle Theme"></span></button>
+                <div class="top_bar_container">
+                    <button class="btn2" @click="zoomOut"><span class="oi" data-glyph="zoom-out" title="Zoom Out"></span></button>
+                    <button class="btn2" @click="zoomIn"><span class="oi" data-glyph="zoom-in" title="Zoom In"></span></button>
+                    <button class="btn2" @click="toggleTheme"><span class="oi" data-glyph="brush" title="Change Theme"></span></button>
                 </div>
             </div>
             <div class="editor_output">
@@ -98,6 +99,7 @@
                 </div>
             </div>
         </div>
+
     </div>
 
     <script src="./script.js"></script>

diff --git 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";
 };
diff --git 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,30 +76,31 @@ 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;
   padding: 5px 15px;
   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;
 }