From c4887d3701be037a6af1dba24552e5aa3d30ad76 Mon Sep 17 00:00:00 2001 From: Moros Smith Date: Tue, 25 Jun 2024 22:35:49 -0400 Subject: [PATCH 1/7] important on .hidden class --- resources/css/app.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/app.scss b/resources/css/app.scss index 4496f9e..e8352c1 100644 --- a/resources/css/app.scss +++ b/resources/css/app.scss @@ -124,7 +124,7 @@ a:focus { display: flex !important; } -.hidden { display: none; } +.hidden { display: none !important; } .lm_content { overflow: visible !important; From 51a9f99ab41a261a81e89fdb048b9eb76a16cf51 Mon Sep 17 00:00:00 2001 From: Moros Smith Date: Tue, 25 Jun 2024 22:38:31 -0400 Subject: [PATCH 2/7] loading container defaults to flex --- resources/css/app/loading.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/app/loading.scss b/resources/css/app/loading.scss index dfcfc3b..6e802b0 100644 --- a/resources/css/app/loading.scss +++ b/resources/css/app/loading.scss @@ -1,5 +1,5 @@ #pgetinker-loading { - display: none; + display: flex; position: absolute; top: 49px; bottom: 0; From f249b54dbf5d0c992e56a7bf5eb307103953e31b Mon Sep 17 00:00:00 2001 From: Moros Smith Date: Tue, 25 Jun 2024 22:38:43 -0400 Subject: [PATCH 3/7] call reconnectHandler immediately --- resources/js/components/EditorPanel.js | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/js/components/EditorPanel.js b/resources/js/components/EditorPanel.js index fdc054f..9e6969f 100644 --- a/resources/js/components/EditorPanel.js +++ b/resources/js/components/EditorPanel.js @@ -123,6 +123,7 @@ export default class EditorPanel if(this.autoConnect) { this.reconnectInterval = setInterval(reconnectHandler, 5000); + reconnectHandler(); } this.monacoWrapper.getEditor().setValue(code); From 98f6de8cbcd96a9ec865a7002740c202419596b2 Mon Sep 17 00:00:00 2001 From: Moros Smith Date: Tue, 25 Jun 2024 22:52:58 -0400 Subject: [PATCH 4/7] add actual preloader! --- resources/js/app-preload.ts | 44 ++++++++++++++++++++++++++++++++++ resources/js/app.ts | 38 +++++------------------------ resources/views/home.blade.php | 2 +- vite.config.ts | 2 +- 4 files changed, 52 insertions(+), 34 deletions(-) create mode 100644 resources/js/app-preload.ts diff --git a/resources/js/app-preload.ts b/resources/js/app-preload.ts new file mode 100644 index 0000000..901c509 --- /dev/null +++ b/resources/js/app-preload.ts @@ -0,0 +1,44 @@ +import { conformStorage, getStorageValue, setStorageValue, removeStorageKey } from './lib/storage'; +import './lib/lucide'; + +// @ts-ignore +import agreeDialog from './lib/agreeDialog'; + +conformStorage(); + +const preloader = () => +{ + import("./app.ts") + .then((object) => + { + const PGEtinker = object.default; + + new PGEtinker(); + }) + .catch((reason) => + { + console.log(reason); + }); +}; + +if(!getStorageValue("agreed-to-terms")) +{ + agreeDialog() + .then(() => + { + setStorageValue("agreed-to-terms", true); + preloader(); + }) + .catch(() => + { + removeStorageKey("code"); + removeStorageKey("theme"); + removeStorageKey("layout"); + removeStorageKey("version"); + window.location.pathname = "/disagree"; + }); +} +else +{ + preloader(); +} diff --git a/resources/js/app.ts b/resources/js/app.ts index f1fc87b..761e47f 100644 --- a/resources/js/app.ts +++ b/resources/js/app.ts @@ -1,11 +1,9 @@ import './lib/bootstrap'; import { conformStorage, getStorageValue, setStorageValue, removeStorageKey } from './lib/storage'; import './lib/goldenLayout'; -import './lib/lucide'; + import version from "./lib/version"; // @ts-ignore -import agreeDialog from './lib/agreeDialog'; -// @ts-ignore import mobileMenuDialog from './lib/mobileMenuDialog'; // @ts-ignore import newsDialog from './lib/newsDialog'; @@ -34,7 +32,7 @@ import { createToast, ToastType } from './lib/createToast'; declare function GoldenLayout(...args: any[]): void; -class PGEtinker +export default class PGEtinker { consolePanel; editorPanel; @@ -51,7 +49,6 @@ class PGEtinker constructor() { - conformStorage(); this.consolePanel = new ConsolePanel(this); this.compilerOutputPanel = new CompilerOutputPanel(this); @@ -150,29 +147,9 @@ class PGEtinker newsDialog(); }); - if(!getStorageValue("agreed-to-terms")) - { - agreeDialog() - .then(() => - { - setStorageValue("agreed-to-terms", true); - this.SetupLayout(); - }) - .catch(() => - { - removeStorageKey("code"); - removeStorageKey("theme"); - removeStorageKey("layout"); - removeStorageKey("version"); - window.location.pathname = "/disagree"; - }); - } - else - { - this.SetupLayout(); - this.setActiveTab("editor"); - this.setActiveTab("problems"); - } + this.SetupLayout(); + this.setActiveTab("editor"); + this.setActiveTab("problems"); } setActiveTab(id: string) @@ -397,7 +374,7 @@ class PGEtinker async SetupLayout() { - document.querySelector("#pgetinker-loading")!.classList.toggle("display-flex", true); + document.querySelector("#pgetinker-loading")!.classList.toggle("hidden", false); await this.editorPanel.onPreInit(); @@ -417,7 +394,6 @@ class PGEtinker setStorageValue("layout", this.layout.toConfig()); } }); - this.layout.on("initialised", async() => { this.layoutInitialized = true; @@ -436,7 +412,6 @@ class PGEtinker setTimeout(() => { - document.querySelector("#pgetinker-loading")!.classList.toggle("display-flex", false); this.setActiveTab("editor"); }, 500) }); @@ -481,4 +456,3 @@ class PGEtinker } } -new PGEtinker(); diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 52d7bd1..5758216 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -37,7 +37,7 @@ - @vite('resources/js/app.ts') + @vite('resources/js/app-preload.ts')
diff --git a/vite.config.ts b/vite.config.ts index 828ef60..08692ce 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -29,7 +29,7 @@ export default defineConfig({ 'resources/css/disagreed.scss', 'resources/js/disagreed.js', 'resources/css/app.scss', - 'resources/js/app.ts' + 'resources/js/app-preload.ts' ], refresh: true, }), From 9ddbe0aa943f133e217925cdf3707e60d5fc36f2 Mon Sep 17 00:00:00 2001 From: Moros Smith Date: Tue, 25 Jun 2024 22:54:20 -0400 Subject: [PATCH 5/7] revamp theme updater timing is everything, it takes vscode some time to complete the update process, so we check that it's done before applying the rest of the theme updates, which happens rather quickly. --- resources/js/app.ts | 42 ++++++++++++++++++++++++++++++------------ 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/resources/js/app.ts b/resources/js/app.ts index 761e47f..17d56ef 100644 --- a/resources/js/app.ts +++ b/resources/js/app.ts @@ -437,22 +437,40 @@ export default class PGEtinker // update editor theme await this.editorPanel.updateConfiguration(); - setTimeout(() => + // + const isVsCodeTheme = () => { - document.body.classList.toggle("dark", !light); - document.body.classList.toggle("light", light); - - // update golden layout theme - let goldenLayoutDarkThemeStyle = document.querySelector("#goldenlayout-dark-theme")! as HTMLLinkElement; - let goldenLayoutLightThemeStyle = document.querySelector("#goldenlayout-light-theme")! as HTMLLinkElement; + return document.body.classList.contains(`vscode-theme-defaults-themes-${theme}_modern-json`); + } - goldenLayoutDarkThemeStyle.disabled = light; - goldenLayoutLightThemeStyle.disabled = !light; + let updateInterval : NodeJS.Timeout; + + const updatehandler = () => + { + if(isVsCodeTheme()) + { + clearInterval(updateInterval); + + document.body.classList.toggle("dark", !light); + document.body.classList.toggle("light", light); - // update player theme - this.playerPanel.setTheme(theme); - }, 200); + // update golden layout theme + let goldenLayoutDarkThemeStyle = document.querySelector("#goldenlayout-dark-theme")! as HTMLLinkElement; + let goldenLayoutLightThemeStyle = document.querySelector("#goldenlayout-light-theme")! as HTMLLinkElement; + + goldenLayoutDarkThemeStyle.disabled = light; + goldenLayoutLightThemeStyle.disabled = !light; + + // update player theme + this.playerPanel.setTheme(theme); + + document.querySelector("#pgetinker-loading")!.classList.toggle("hidden", true); + return; + } + + } + updateInterval = setInterval(updatehandler, 50); } } From 65f53b3880d1b72c27b720367e9a217fcf7c5a7c Mon Sep 17 00:00:00 2001 From: Moros Smith Date: Tue, 25 Jun 2024 22:54:34 -0400 Subject: [PATCH 6/7] update browser tests to account for a working preloader --- tests/Browser/BrowserTest.php | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/tests/Browser/BrowserTest.php b/tests/Browser/BrowserTest.php index 532907e..6f71c83 100644 --- a/tests/Browser/BrowserTest.php +++ b/tests/Browser/BrowserTest.php @@ -41,7 +41,8 @@ public function testAgreeRevealsTheApplication(): void $browser->click("#i-agree"); - $browser->waitUntilMissing("#pgetinker-loading"); + $browser->waitUntilMissing("#pgetinker-loading", 10); + $browser->assertMissing("#pgetinker-loading"); $browser->assertSee("News and Updates"); }); @@ -52,7 +53,8 @@ public function testDismissesNewsAndUpdates(): void $this->browse(function(Browser $browser) { $browser->visit("/"); - $browser->waitUntilMissing("#pgetinker-loading"); + $browser->waitUntilMissing("#pgetinker-loading", 10); + $browser->assertMissing("#pgetinker-loading"); $browser->click(".footer .ok"); $browser->waitUntilMissing(".dialog"); @@ -66,7 +68,8 @@ public function testLoadsDefaultCodeOnClick(): void $this->browse(function(Browser $browser) { $browser->visit("/"); - $browser->waitUntilMissing("#pgetinker-loading"); + $browser->waitUntilMissing("#pgetinker-loading", 10); + $browser->assertMissing("#pgetinker-loading"); $browser->click("@settings-menu"); @@ -86,7 +89,8 @@ public function testSelectsLightTheme(): void $this->browse(function(Browser $browser) { $browser->visit("/"); - $browser->waitUntilMissing("#pgetinker-loading"); + $browser->waitUntilMissing("#pgetinker-loading", 10); + $browser->assertMissing("#pgetinker-loading"); $browser->click("@settings-menu"); @@ -107,7 +111,8 @@ public function testCompilesOnClick(): void $this->browse(function(Browser $browser) { $browser->visit("/"); - $browser->waitUntilMissing("#pgetinker-loading"); + $browser->waitUntilMissing("#pgetinker-loading", 10); + $browser->assertMissing("#pgetinker-loading"); $browser->click("#start-stop"); $browser->waitFor("#player-panel .iframe-container iframe", 10); @@ -120,7 +125,8 @@ public function testSharesOnClick(): void $this->browse(function(Browser $browser) { $browser->visit("/"); - $browser->waitUntilMissing("#pgetinker-loading"); + $browser->waitUntilMissing("#pgetinker-loading", 10); + $browser->assertMissing("#pgetinker-loading"); $browser->mouseover("@sharing-menu"); $browser->click("#share"); @@ -128,6 +134,10 @@ public function testSharesOnClick(): void $shareUrl = $browser->value("#share-url"); $browser->visit($shareUrl); + + $browser->waitUntilMissing("#pgetinker-loading", 10); + $browser->assertMissing("#pgetinker-loading"); + $browser->assertSee("C++ Editor"); }); } From 6530856145f3fc91b7ec733397a84615b0b4d7ca Mon Sep 17 00:00:00 2001 From: Moros Smith Date: Tue, 25 Jun 2024 22:57:07 -0400 Subject: [PATCH 7/7] remove unused imports --- resources/js/app.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/app.ts b/resources/js/app.ts index 17d56ef..5194a94 100644 --- a/resources/js/app.ts +++ b/resources/js/app.ts @@ -1,5 +1,5 @@ import './lib/bootstrap'; -import { conformStorage, getStorageValue, setStorageValue, removeStorageKey } from './lib/storage'; +import { getStorageValue, setStorageValue } from './lib/storage'; import './lib/goldenLayout'; import version from "./lib/version";