Add script debugger pane to World view, when game is run while this i…

…s open allows inspecting currently running scripts, setting breakpoints and updating live variable values

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add shortcut to search scenes when in world mode by pressing `/`
 - Add support from adding sound effects to a project by dragging files into project window (to match how this works for other asset types)
 - Add native Mac ARM support for M1/M2/M3+ devices
+- Add script debugger pane to World view, when game is run while this is open allows inspecting currently running scripts, setting breakpoints and updating live variable values
 
 ### Changed
 

appData/wasm/binjgb/css/style.css

@@ -319,3 +319,49 @@ body {
     opacity: 0.5;
   }
 }
+
+#debug {
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  padding:10px;
+  position:fixed;
+  top:0px;
+  left:0px;
+  right:0px;
+  bottom:0px;
+  background:rgba(0,0,0,0.5);
+}
+
+#debug div {
+  background: white;
+  color: black;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  transform: position;
+  font-size: 11px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  display: flex;
+  align-items: center;
+}
+
+#debug span {
+  padding: 5px 8px;
+}
+
+#debug button {
+  background: transparent;
+  border: none;
+  border-left: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+#debug button:hover {
+  background: #eee;
+}
+
+#debug button:active {
+  background: #ddd;
+}

appData/wasm/binjgb/index.html

@@ -31,4 +31,5 @@
     </script>
     <script src="binjgb.js"></script>
     <script src="js/script.js"></script>
+    <script src="js/debugger.js"></script>
 </body>