Playground fixes for debug.html, frame.html and full.html (#17372)

docEdub · web-flow · commit 9f4c32506ca2 · 2025-10-30T22:50:57.000Z
When the new playground was implemented, the secondary html files
(debug.html, frame.html and full.html) broke due to the compilation hash
being inserted into the `babylon.playground.{hash}.js` filename. These
secondary html files were still pointing to the non-hash
`babylon.playground.js` file, which is no longer being built, but may
still be cached.

This change updates the secondary html files to use the correct
`babylon.playground.{hash}.js` filename.

This change also fixes a scss deprecation warning for the color
`lighten` function by replacing it with `color.adjust`.
diff --git a/packages/tools/playground/debug.html b/packages/tools/playground/debug.html
@@ -9,7 +9,7 @@
                 dataLayer.push(arguments);
             }
             gtag("js", new Date());
-
+            window.__PLAYGROUND_BUNDLE__ = "<%= PLAYGROUND_BUNDLE %>";
             gtag("config", "UA-41767310-2");
         </script>
         <title>Babylon.js Playground debug endpoint</title>
diff --git a/packages/tools/playground/frame.html b/packages/tools/playground/frame.html
@@ -9,7 +9,7 @@
                 dataLayer.push(arguments);
             }
             gtag("js", new Date());
-
+            window.__PLAYGROUND_BUNDLE__ = "<%= PLAYGROUND_BUNDLE %>";
             gtag("config", "UA-41767310-2");
         </script>
         <title>Babylon.js Playground</title>
diff --git a/packages/tools/playground/full.html b/packages/tools/playground/full.html
@@ -1,5 +1,5 @@
 ﻿<!doctype html>
-<html>
+<html lang="en">
     <head>
         <!-- Google tag (gtag.js) -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
@@ -9,7 +9,7 @@
                 dataLayer.push(arguments);
             }
             gtag("js", new Date());
-
+            window.__PLAYGROUND_BUNDLE__ = "<%= PLAYGROUND_BUNDLE %>";
             gtag("config", "UA-41767310-2");
         </script>
         <title>Babylon.js Playground</title>
diff --git a/packages/tools/playground/src/scss/editor.scss b/packages/tools/playground/src/scss/editor.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .pg-monaco-wrapper {
     --pg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
     --pg-bar-height: 30px;
@@ -249,7 +251,7 @@
         background: #3f3461;
     }
     &:hover {
-        background: lighten(#3f3461, 10%);
+        background: color.adjust(#3f3461, $lightness: 10%);
     }
 
     // svg {
diff --git a/packages/tools/playground/webpack.config.js b/packages/tools/playground/webpack.config.js
@@ -108,6 +108,30 @@ module.exports = (env) => {
         },
         plugins: [
             ...plugins,
+            new HtmlWebpackPlugin({
+                template: path.resolve(__dirname, "debug.html"),
+                filename: "debug.html",
+                templateParameters: (compilation) => ({
+                    PLAYGROUND_BUNDLE: `babylon.playground.${compilation.hash}.js`,
+                }),
+                inject: false,
+            }),
+            new HtmlWebpackPlugin({
+                template: path.resolve(__dirname, "frame.html"),
+                filename: "frame.html",
+                templateParameters: (compilation) => ({
+                    PLAYGROUND_BUNDLE: `babylon.playground.${compilation.hash}.js`,
+                }),
+                inject: false,
+            }),
+            new HtmlWebpackPlugin({
+                template: path.resolve(__dirname, "full.html"),
+                filename: "full.html",
+                templateParameters: (compilation) => ({
+                    PLAYGROUND_BUNDLE: `babylon.playground.${compilation.hash}.js`,
+                }),
+                inject: false,
+            }),
             new HtmlWebpackPlugin({
                 template: path.resolve(__dirname, "index.html"),
                 templateParameters: (compilation) => ({

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`dataLayer.push(arguments);`
`10`	`10`	`}`
`11`	`11`	`gtag("js", new Date());`
`12`		`-`
	`12`	`+ window.__PLAYGROUND_BUNDLE__ = "<%= PLAYGROUND_BUNDLE %>";`
`13`	`13`	`gtag("config", "UA-41767310-2");`
`14`	`14`	`</script>`
`15`	`15`	`<title>Babylon.js Playground debug endpoint</title>`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "sass:color";`
	`2`	`+`
`1`	`3`	`.pg-monaco-wrapper {`
`2`	`4`	`--pg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;`
`3`	`5`	`--pg-bar-height: 30px;`
`@@ -249,7 +251,7 @@`
`249`	`251`	`background: #3f3461;`
`250`	`252`	`}`
`251`	`253`	`&:hover {`
`252`		`- background: lighten(#3f3461, 10%);`
	`254`	`+ background: color.adjust(#3f3461, $lightness: 10%);`
`253`	`255`	`}`
`254`	`256`
`255`	`257`	`// svg {`