Merge pull request #51 from Moros1138/50-fails-to-compile-fails-to-in…

…dicate-errors

50 fails to compile fails to indicate errors

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. Each batch
 
 It is a summary of changes that would be pertinent to the end user of the PGEtinker website. For a comprehensive history of changes made to the project, please refer to the repository's commit history.
 
+## 2024-05-02
+
+- Fixed [Issue #50](https://github.com/Moros1138/PGEtinker/issues/50)
+- Added Build Information panel (Requires you to reset to default layout)
+- Added Console panel (Requires you to reset to default layout)
+
 ## 2024-05-01
 
 - Added the changelog

app/Http/Controllers/CodeController.php

@@ -486,6 +486,8 @@ function compileCode($code)
             ->timeout(10)
             ->command($compilerCommand)->run();
 
+        $log->info("compiler exited with code: " . $compilerProcessResult->exitCode());
+
         if($compilerProcessResult->exitCode() !== 0)
         {
             $response = [
@@ -554,14 +556,22 @@ function compileCode($code)
 
     function filterOutput($text)
     {
-        $text = array_filter(explode("\n", $text), function($value)
-        {
-            return (strpos($value, "undefined symbol") !== false) ||
-                (strpos($value, "duplicate symbol") !== false) ||
-                (strpos($value, "pgetinker.cpp") === 0);
-        });
+
+        $text = str_replace("/opt/emsdk/upstream/emscripten/cache/sysroot", "/***", $text);
 
-        return implode("\n", $text);
+        return $text;
+        // $text = explode("\n", $text);
+
+        // for($i = 0 $i < count($text))
+
+        // // $text = array_filter(explode("\n", $text), function($value)
+        // // {
+        // //     return (strpos($value, "undefined symbol") !== false) ||
+        // //         (strpos($value, "duplicate symbol") !== false) ||
+        // //         (strpos($value, "pgetinker.cpp") === 0);
+        // // });
+
+        // return implode("\n", $text);
     }
 
 }

resources/css/app.scss

@@ -216,8 +216,6 @@ nav .navbar-right-menu .menu-item {
     margin-top: -3px;
 }
 
-
-
 #content {
     position: absolute;
     top: 49px;
@@ -233,6 +231,8 @@ nav .navbar-right-menu .menu-item {
     text-align: center;
 }
 
+@import "./console-panel.scss";
 @import "./editor-panel.scss";
+@import "./info-panel.scss";
 @import "./player-panel.scss";
 @import "./dialog.scss";

resources/css/console-panel.scss

@@ -0,0 +1,14 @@
+#console-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+    padding: 1rem 1rem 2rem 1rem;
+}
+
+#console-panel div {
+    white-space: pre;
+    font-family: "Droid Sans Mono", "monospace", monospace;
+}

resources/css/info-panel.scss

@@ -0,0 +1,14 @@
+#info-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+    padding: 1rem 1rem 2rem 1rem;
+}
+
+#info-panel div {
+    white-space: pre;
+    font-family: "Droid Sans Mono", "monospace", monospace;
+}

resources/js/app.js

@@ -27,6 +27,9 @@ class PGEtinker
     monacoModel  = null;
     monacoModelIntellisense = null;
 
+    consolePanelExist = false;
+    informationPanelExist = false;
+
     constructor()
     {
         this.sharedFlag = (window.location.pathname.indexOf("/s/") === 0);
@@ -49,6 +52,10 @@ class PGEtinker
             axios.get("/api/default-code").then((response) =>
             {
                 this.monacoModel.setValue(response.data.code);
+                this.monacoEditor.revealPositionInCenter({
+                    column: 1,
+                    lineNumber: 1,
+                });
             }).catch((reason) => console.log(reason));
         });
 
@@ -76,19 +83,6 @@ class PGEtinker
             this.SetupLayout();
         });
 
-        // Toggle Console Button
-        document.querySelector("#toggle-console").addEventListener("click", (event) => 
-        {
-            event.preventDefault();
-
-            this.consoleShown = !this.consoleShown;
-            window.localStorage.setItem("pgetinkerConsoleShown", this.consoleShown);
-
-            document.querySelector("#player-panel iframe").contentWindow.postMessage({
-                message: "toggle-console",
-            }, "*");   
-        });
-
         // Download Button
         document.querySelector("#download").addEventListener("click", (event) => 
         {
@@ -229,6 +223,25 @@ class PGEtinker
                     value: this.consoleShown
                 }, "*");
             }
+
+            if(event.data.message === "console-output")
+            {
+                if(!this.informationPanelExist)
+                    return;
+
+                let elem = document.createElement('div');
+                elem.innerHTML = event.data.data;
+
+                document.querySelector('#console-panel').scrollTop = document.querySelector('#console-panel').scrollHeight;
+                document.querySelector('#console-panel').append(elem);
+
+                let consolePanel = this.layout.root.getItemsById('console')[0];
+                if(consolePanel.parent.isStack)
+                {
+                    consolePanel.parent.setActiveContentItem(consolePanel);
+                }
+            }
+
         });
 
         let agreedToTerms = window.localStorage.getItem("pgetinkerAgreedToTerms");
@@ -265,6 +278,18 @@ class PGEtinker
             return false;
         }
 
+        if(this.informationPanelExist)
+        {
+            let infoPanel = this.layout.root.getItemsById('info')[0];
+            if(infoPanel.parent.isStack)
+            {
+                infoPanel.parent.setActiveContentItem(infoPanel);
+            }
+
+            document.querySelector("#info-panel").innerHTML = "";
+            document.querySelector("#console-panel").innerHTML = "";
+        }
+
         this.compiling = true;
 
         this.lastPlayerHtml = "";
@@ -275,7 +300,7 @@ class PGEtinker
 
         document.querySelector("#player-panel .compiling").classList.toggle("display-flex", true);
         document.querySelector("#player-panel .compiling-failed").classList.toggle("display-flex", false);
-        
+
         monaco.editor.removeAllMarkers("owner");
         this.monacoEditor.trigger("", "closeMarkersNavigation");
 
@@ -299,18 +324,30 @@ class PGEtinker
 
     compileFailHandler(stderr)
     {
-        const compilerRegex = /:(\d+):(\d+): (fatal error|error|warning): (.*)/gm;
+        let infoPanel = document.querySelector("#info-panel");
+        infoPanel.innerHTML = `<div>${stderr}</div>`;
+        infoPanel.scrollTop = infoPanel.scrollHeight;
+
+        const compilerRegex = /pgetinker.cpp:(\d+):(\d+): (fatal error|error|warning|note): (.*)/gm;
         const linkerRegex   = /wasm-ld: error: pgetinker.o: (.*): (.*)/gm;
 
         let markers = [];
 
         let matches;
-
+        
         while((matches = compilerRegex.exec(stderr)) !== null)
         {
+            let severity = monaco.MarkerSeverity.Error;
+
+            if(matches[3] == "warning")
+                severity = monaco.MarkerSeverity.Warning;
+
+            if(matches[3] == "note")
+                severity = monaco.MarkerSeverity.Info;
+
             markers.push({
                 message: matches[4],
-                severity: (matches[3] === "warning") ? monaco.MarkerSeverity.Warning : monaco.MarkerSeverity.Error,
+                severity: severity,
                 startLineNumber: parseInt(matches[1]),
                 startColumn: parseInt(matches[2]),
                 endLineNumber: parseInt(matches[1]),
@@ -349,6 +386,22 @@ class PGEtinker
     {
         this.layout = new GoldenLayout(this.layoutConfig, document.querySelector("#content"))
 
+        this.layout.registerComponent('consoleComponent', function(container)
+        {
+            container.getElement().html(`
+                <div id="console-panel">
+                </div>
+            `);
+        });
+
+        this.layout.registerComponent('infoComponent', function(container)
+        {
+            container.getElement().html(`
+                <div id="info-panel">
+                </div>
+            `);
+        });
+
         this.layout.registerComponent('playerComponent', function(container)
         {   
             container.getElement().html(`
@@ -394,6 +447,9 @@ class PGEtinker
 
         this.layout.on("initialised", () =>
         {
+            this.informationPanelExist = (this.layout.root.getItemsById('info').length > 0);
+            this.consolePanelExist     = (this.layout.root.getItemsById('console').length > 0);
+
             this.layoutInitialized = true;
             window.addEventListener("resize", (event) => this.layout.updateSize());
 
@@ -465,8 +521,13 @@ class PGEtinker
 
             if(this.lastPlayerHtml != "")
             {
-                document.querySelector("#player-panel .iframe-container iframe").srcdoc = this.lastPlayerHtml;
-                document.querySelector("#player-panel .iframe-container iframe").classList.toggle("display-block", true);
+                let playerFrame = document.createElement('iframe');
+                playerFrame.setAttribute("srcdoc", this.lastPlayerHtml);
+                document.querySelector("#player-panel .iframe-container").append(playerFrame);
+
+                playerFrame.classList.toggle("display-block", true);
+                document.querySelector("#player-panel .compiling").classList.toggle("display-flex", false);
+                document.querySelector("#player-panel .compiling-failed").classList.toggle("display-flex", false);
             }
 
             this.UpdateStatusBar();

resources/js/lib/defaultLayout.js

@@ -3,19 +3,41 @@ const defaultLayout = {
         showPopoutIcon: false,
     },
     content: [{
-        type: 'row',
+        type: 'column',
         content:[{
-            type: 'component',
-            componentName: 'editorComponent',
-            componentState: {},
-            isClosable: false,
-            title: 'C++ Editor',
+            type: 'row',
+            content:[{
+                type: 'component',
+                componentName: 'editorComponent',
+                componentState: {},
+                isClosable: false,
+                title: 'C++ Editor',
+            },{
+                type: 'component',
+                componentName: 'playerComponent',
+                componentState: {},
+                isClosable: false,
+                title: 'Emscripten Player',
+            }],
         },{
-            type: 'component',
-            componentName: 'playerComponent',
-            componentState: {},
-            isClosable: false,
-            title: 'Emscripten Player',
+            type: 'stack',
+            id: 'information-stack',
+            height: 25,
+            content: [{
+                type: 'component',
+                componentName: 'infoComponent',
+                componentState: {},
+                isClosable: false,
+                title: 'Build Information',
+                id: 'info',
+            },{
+                type: 'component',
+                componentName: 'consoleComponent',
+                componentState: {},
+                isClosable: false,
+                title: 'Console',
+                id: 'console',
+            }]
         }],
     }],
 };

resources/js/lib/newsDialog.js

@@ -7,6 +7,9 @@ export default function newsDialog()
         if(newsDialog == null)
             return;
 
+        if(event.target.tagName == 'A')
+            return;
+
         newsDialog.dispatchEvent(new Event("close-dialog"));
     }
 

resources/views/home.blade.php

@@ -38,10 +38,6 @@
                             <i data-lucide="undo-dot"></i>
                             Restore Default Layout
                         </a>
-                        <a href="#" id="toggle-console">
-                            <i data-lucide="square-chevron-right"></i>
-                            Show/Hide Console
-                        </a>
                     </div>
                 </div>
                 <a class="menu-item" href="#" id="compile">
@@ -75,14 +71,14 @@
                 <div class="dropdown">
                     <div class="menu-item">Links</div>
                     <div class="dropdown-content">
-                        <a target="_blank" href="https://patreon.com/PGEtinker">
-                            <i data-lucide="circle-dollar-sign"></i>
-                            Become a Supporter
-                        </a>
                         <a href="#" id="news-and-updates">
                             <i data-lucide="badge-plus"></i>    
                             What's New
                         </a>
+                        <a target="_blank" href="https://patreon.com/PGEtinker">
+                            <i data-lucide="circle-dollar-sign"></i>
+                            Become a Supporter
+                        </a>
                         <a target="_blank" href="https://github.com/Moros1138/PGEtinker">
                             <i data-lucide="github"></i>
                             PGEtinker on Github

routes/api.php

@@ -53,6 +53,13 @@
                 break;
             }
 
+            $lines[$i] = preg_replace(
+                '/\[(.*)\]\((.*)\)/',
+                "<a href=\"$2\" target=\"_blank\">$1</a>",
+                $lines[$i],
+                1
+            );
+
             $tokens = explode(" ", $lines[$i]);
             if($tokens[0] == "-")
             {

tests/Browser/QuickTest.php

@@ -71,7 +71,8 @@ public function testLoadsDefaultCodeOnClick(): void
 
             $browser->mouseover("@settings-menu");
             $browser->click("#default-code");
-            $browser->assertSee("Hello, PGE");
+            $browser->pause(100);
+            $browser->assertSee("class Example : public olc::PixelGameEngine");
         });
     }