dino-ge-playground 1.0.3

package/README.md

@@ -0,0 +1,35 @@
+# dino-ge-playground
+
+Interactive, live-editing playground and inspector for the **Dino GE** game engine.
+
+## Installation
+
+```bash
+npm install -g dino-ge-playground
+```
+
+## Usage
+
+Run the playground in any directory where you'd like to develop game scripts:
+
+```bash
+dino-ge-playground
+```
+
+Once running, access the editor and inspector at `http://localhost:3000`.
+
+### Features
+
+- **Live Code Editor:** Modify your game logic in real-time with an integrated Ace editor.
+- **Property Inspector:** Inspect and adjust game object properties while the engine is running.
+- **Hot Refresh:** Automatically apply changes to your scripts.
+- **Integrated Console:** Debug output directly in the playground UI.
+- **Snippet Library:** Quick access to standard Dino GE object templates.
+
+### Script Storage
+
+The playground saves your scripts (e.g., `script.js`) directly in the directory where the command is executed.
+
+## License
+
+MIT

package/console/index.css

@@ -0,0 +1,71 @@
+.console {
+  font-family: 'Courier New', Courier, monospace;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 150px;
+  background-color: #011627;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  margin: 0 1rem 1rem 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.console-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.title {
+  font-size: 0.8rem;
+  color: #43aa8b;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.clear-btn {
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: color 0.2s;
+}
+
+.clear-btn:hover {
+  color: #F94144;
+}
+
+.console-text {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.console-line {
+  display: flex;
+  align-items: flex-start;
+  font-size: 0.85rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+  padding-bottom: 2px;
+}
+
+.console-line pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: #d1d1d1;
+}
+
+.console-line span.bash {
+  color: #43aa8b;
+  margin-right: 0.75rem;
+  user-select: none;
+  font-weight: bold;
+}
+

package/console/index.js

@@ -0,0 +1,43 @@
+export default () => {
+  const container = document.createElement('div');
+  container.className = 'console';
+
+  const header = document.createElement('div');
+  header.className = 'console-header';
+
+  const title = document.createElement('b');
+  title.className = 'title';
+  title.innerHTML = 'Console';
+
+  const clearBtn = document.createElement('i');
+  clearBtn.className = 'fa-solid fa-trash-can clear-btn';
+  clearBtn.title = 'Clear Console';
+  clearBtn.onclick = () => {
+    consoleText.innerHTML = '';
+  };
+
+  const consoleText = document.createElement('div');
+  consoleText.innerHTML = '';
+  consoleText.className = 'console-text';
+
+  const originalLog = window.console.log;
+  window.console.log = (...args) => {
+    originalLog(...args);
+    const message = args
+      .map((arg) => (typeof arg === 'object' ? JSON.stringify(arg, null, 2) : arg))
+      .join(' ');
+    
+    const line = document.createElement('div');
+    line.className = 'console-line';
+    line.innerHTML = '<span class="bash">$</span><pre>' + message + '</pre>';
+    consoleText.appendChild(line);
+    consoleText.scrollTop = consoleText.scrollHeight;
+  };
+
+  header.appendChild(title);
+  header.appendChild(clearBtn);
+  container.appendChild(header);
+  container.appendChild(consoleText);
+
+  return container;
+};

package/editor/index.css

@@ -0,0 +1,94 @@
+.editor-container {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 40%;
+  max-width: 600px;
+  min-width: 300px;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.editor-container.collapsed {
+  transform: translateX(100%);
+}
+
+.toggle-sidebar {
+  position: absolute;
+  left: -2.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2.5rem;
+  height: 5rem;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-right: none;
+  border-radius: 1rem 0 0 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  color: white;
+  transition: background 0.2s;
+}
+
+.toggle-sidebar:hover {
+  background: rgba(67, 170, 139, 0.4);
+}
+
+.editor {
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+  background-color: #011627;
+  margin: 1rem;
+  border-radius: 0.5rem;
+  color: white;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.editor-textbox {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.editor h2 {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  font-size: 1rem;
+  color: #43aa8b;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  position: static;
+  width: auto;
+}
+
+.icons-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.icons-container i {
+  cursor: pointer;
+}
+
+

package/editor/index.js

@@ -0,0 +1,159 @@
+import sidebar from '../sidebar/index.js';
+import { getScript, updateScript } from '../helpers.js';
+import createConsole from '../console/index.js';
+import { updatePlayground } from '../index.js';
+
+let editorInstance = null;
+
+export const createEditor = () => {
+  const container = document.createElement('div');
+  container.className = 'editor-container collapsed';
+  container.appendChild(sidebar());
+
+  // Toggle Sidebar Button
+  const toggleBtn = document.createElement('div');
+  toggleBtn.className = 'toggle-sidebar';
+  toggleBtn.innerHTML = '<i class="fa-solid fa-chevron-left"></i>';
+  toggleBtn.onclick = () => {
+    container.classList.toggle('collapsed');
+    const icon = toggleBtn.querySelector('i');
+    if (container.classList.contains('collapsed')) {
+      icon.className = 'fa-solid fa-chevron-left';
+    } else {
+      icon.className = 'fa-solid fa-chevron-right';
+    }
+  };
+  container.appendChild(toggleBtn);
+
+  const div = document.createElement('div');
+  div.id = 'editor';
+  div.className = 'editor';
+
+  const banner = document.createElement('div');
+  banner.className = 'banner';
+
+  const title = document.createElement('h2');
+  title.innerText = 'Editor';
+  title.onclick = () => {
+    if (div.classList.contains('hidden')) {
+      div.classList.remove('hidden');
+    }
+  };
+
+  const iconsContainer = document.createElement('div');
+  iconsContainer.className = 'icons-container';
+
+  const save = document.createElement('i');
+  save.id = 'saveIcon';
+  save.className = 'fa-solid fa-cloud save';
+  save.onclick = async () => {
+    if (editorInstance) {
+      await updateScript(editorInstance.getValue(), false);
+      await updatePlayground();
+      await updateEditor(true);
+    }
+  };
+
+  const editorDiv = document.createElement('div');
+  editorDiv.id = 'editor-textbox';
+  editorDiv.className = 'editor-textbox';
+  editorDiv.style.width = '100%';
+  editorDiv.style.height = 'calc(100% - 40px)'; // Adjust for banner height
+
+  banner.appendChild(title);
+  iconsContainer.appendChild(save);
+  banner.appendChild(iconsContainer);
+  div.appendChild(banner);
+  div.appendChild(editorDiv);
+  container.appendChild(div);
+  container.appendChild(createConsole());
+
+  // Initialize Ace Editor after a short delay to ensure DOM attachment
+  setTimeout(() => {
+    /* global ace */
+    editorInstance = ace.edit('editor-textbox');
+    editorInstance.setTheme('ace/theme/tomorrow_night_eighties');
+    editorInstance.session.setMode('ace/mode/javascript');
+    editorInstance.setOptions({
+      fontSize: '10pt',
+      tabSize: 2,
+      useSoftTabs: true,
+      showPrintMargin: false,
+      wrap: true
+    });
+
+    // Save Command
+    editorInstance.commands.addCommand({
+      name: 'save',
+      bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
+      exec: function () {
+        save.click();
+      }
+    });
+  }, 0);
+
+  return container;
+};
+
+export const updateEditor = async (shouldFetchScript = true) => {
+  const saveIcon = document.getElementById('saveIcon');
+
+  if (saveIcon) {
+    saveIcon.classList.remove('save');
+    saveIcon.classList.add('saving');
+  }
+
+  let script = '';
+
+  if (shouldFetchScript) {
+    script = await getScript();
+  } else if (editorInstance) {
+    script = editorInstance.getValue();
+  }
+
+  const options = {
+    indent_size: 2,
+    space_in_empty_paren: false,
+    preserve_newlines: true
+  };
+
+  // Only beautify if fetched
+  if (shouldFetchScript && window.js_beautify) {
+    /* global js_beautify */
+    script = js_beautify(script, options) + '\n\n';
+  }
+
+  if (editorInstance && shouldFetchScript) {
+    // Preserve cursor/scroll position if possible
+    const pos = editorInstance.getCursorPosition();
+    editorInstance.setValue(script, -1);
+    editorInstance.moveCursorToPosition(pos);
+  }
+
+  if (saveIcon) {
+    saveIcon.classList.remove('saving');
+    saveIcon.classList.add('save');
+  }
+};
+
+export const insertTextToEditor = (text) => {
+  if (editorInstance) {
+    editorInstance.insert(text);
+    editorInstance.focus();
+  }
+};
+
+export const getEditorValue = () => {
+  if (editorInstance) {
+    return editorInstance.getValue();
+  }
+  return '';
+};
+
+export const setEditorValue = (text) => {
+  if (editorInstance) {
+    const pos = editorInstance.getCursorPosition();
+    editorInstance.setValue(text, -1);
+    editorInstance.moveCursorToPosition(pos);
+  }
+};

package/helpers.js

@@ -0,0 +1,75 @@
+export const createTextButton = (text, onclick) => {
+  const btn = document.createElement('button');
+  btn.textContent = text || 'Text';
+  btn.onclick = onclick;
+
+  document.body.appendChild(btn);
+};
+
+export const openDialog = ({ labelText = '' }) => {
+  const div = document.createElement('div');
+  const label = document.createElement('label');
+  label.textContent = labelText;
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.name = Date.now().toString();
+  input.id = Date.now().toString();
+  input.placeholder = labelText;
+
+  label.htmlFor = input.name;
+  label.hidden = true;
+
+  div.appendChild(label);
+  div.appendChild(input);
+
+  return div;
+};
+
+const createInitialFile = async (id) => {
+  const defaultContent = `import { Engine, Scene, Sprite, Vector2, Text } from 'dino-ge';
+
+// Your playground script starts here!
+`;
+  
+  await fetch(`/file/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify({
+      data: defaultContent,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return defaultContent;
+};
+
+export const getScript = async (id = 'script') => {
+  const res = await fetch(`/file/${id}`);
+
+  if (res.status === 404) {
+    return await createInitialFile(id);
+  } else if (res.status === 200) {
+    return await res.json();
+  } else {
+    window.alert('Error loading script');
+    return '';
+  }
+};
+
+export const updateScript = async (data, upsert = true, id = 'script') => {
+  const res = await fetch(`/file/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify({
+      data,
+      upsert,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  if (!res.ok) {
+    window.alert('Error updating script.');
+  }
+};

package/index.css

@@ -0,0 +1,66 @@
+html,
+body {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  background-color: black;
+}
+
+#canvas-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background-color: #1a1a1a;
+  z-index: 0;
+}
+
+.logo-container {
+  position: fixed;
+  z-index: 1000;
+  left: 1rem;
+  top: 1rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  padding: 0.5rem 1rem;
+  background: rgba(67, 170, 139, 0.2);
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(67, 170, 139, 0.4);
+  border-radius: 0.5rem;
+  color: #43aa8b;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.logo-container h1 {
+  margin: 0;
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 1.5rem;
+  position: fixed;
+  bottom: 2rem;
+  left: 2rem;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(5px);
+  padding: 0.75rem 1.25rem;
+  border-radius: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.action-buttons i {
+  font-size: 1.5rem;
+  color: white;
+  cursor: pointer;
+  transition: transform 0.1s ease, color 0.2s ease;
+}
+
+.action-buttons i:hover {
+  transform: scale(1.2);
+  color: #43aa8b;
+}

package/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.11/beautify.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.11/beautify-css.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.11/beautify-html.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.11/beautify.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.11/beautify-css.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.11/beautify-html.min.js"></script>
+    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ace.js" type="text/javascript" charset="utf-8"></script>
+    
+    <script src="https://kit.fontawesome.com/d4796734cb.js" crossorigin="anonymous"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "dino-ge": "/built/index.js"
+        }
+      }
+    </script>
+    <link rel="stylesheet" href="/sidebar/index.css">
+    <link rel="stylesheet" href="/editor/index.css">
+    <link rel="stylesheet" href="/console/index.css">
+    <link rel="stylesheet" href="/inspector/index.css">
+    <link rel="stylesheet" href="/index.css">
+    <script type="module" src="/index.js"></script>
+  </head>
+  <body>
+  </body>
+</html>

package/index.js

@@ -0,0 +1,128 @@
+import { createEditor, updateEditor, getEditorValue } from './editor/index.js';
+import { createInspector } from './inspector/index.js';
+import { getScript, updateScript } from './helpers.js';
+import * as Dino from 'dino-ge';
+
+// Expose all dino-ge classes to window for snippets and user scripts
+Object.assign(window, Dino);
+
+const { Engine } = Dino;
+
+let updateInspectorToggleState;
+
+window.onload = async () => {
+  const logo = makeLogo();
+  const editor = createEditor();
+  const inspector = createInspector(() => {
+    if (updateInspectorToggleState) updateInspectorToggleState(inspector, logo);
+  });
+
+  document.body.appendChild(logo);
+  document.body.appendChild(editor);
+  document.body.appendChild(inspector);
+
+  setupActionButtons(inspector, logo);
+
+  await updatePlayground();
+  await updateEditor();
+
+  Engine.paused = true;
+};
+
+export const updatePlayground = async () => {
+  Engine.destroyAll();
+  document.getElementById('script.js')?.remove();
+  document.getElementById('canvas-container')?.remove();
+
+  const script = document.createElement('script');
+  script.type = 'module';
+  script.innerHTML = await getScript();
+  script.id = 'script.js';
+  document.body.appendChild(script);
+};
+
+const makeLogo = () => {
+  const container = document.createElement('div');
+  container.className = 'logo-container';
+
+  const logo = document.createElement('h1');
+  logo.innerHTML = 'DINO-GE';
+
+  container.appendChild(logo);
+
+  return container;
+};
+
+const setupActionButtons = (inspector, logo) => {
+  const actionButtons = document.createElement('div');
+  actionButtons.className = 'action-buttons';
+
+  const inspectorToggle = document.createElement('i');
+  inspectorToggle.className = 'fa-solid fa-sliders';
+  inspectorToggle.title = 'Toggle Property Inspector';
+
+  updateInspectorToggleState = (insp, lg) => {
+    const isHidden = insp.classList.contains('hidden');
+    inspectorToggle.style.color = isHidden ? 'white' : '#43aa8b';
+    lg.style.display = isHidden ? 'block' : 'none';
+  };
+
+  const play = document.createElement('i');
+  play.className = 'fa-solid fa-play';
+  play.onclick = async () => {
+    Engine.paused = false;
+  };
+
+  const pause = document.createElement('i');
+  pause.className = 'fa-solid fa-pause';
+  pause.onclick = () => {
+    Engine.paused = true;
+    document.getElementById('canvas').style = 'cursor: default';
+  };
+
+  const refresh = document.createElement('i');
+  refresh.className = 'fa-solid fa-rotate';
+  refresh.title = 'Refresh (Ctrl+Enter)';
+  refresh.onclick = async () => {
+    await updateScript(getEditorValue(), false);
+    await updatePlayground();
+    await updateEditor(true);
+
+    if (Engine.paused) {
+      Engine.paused = false;
+    }
+  };
+
+  const debug = document.createElement('i');
+  debug.className = 'fa-solid fa-bug';
+  debug.title = 'Toggle Debug Mode';
+  debug.onclick = () => {
+    Engine.debug = !Engine.debug;
+    debug.style.color = Engine.debug ? '#F94144' : 'white';
+    
+    // Auto-open inspector if turning debug ON and inspector is hidden
+    if (Engine.debug && inspector.classList.contains('hidden')) {
+      inspectorToggle.click();
+    }
+  };
+
+  inspectorToggle.onclick = () => {
+    inspector.classList.toggle('hidden');
+    updateInspectorToggleState(inspector, logo);
+  };
+
+  actionButtons.appendChild(play);
+  actionButtons.appendChild(pause);
+  actionButtons.appendChild(refresh);
+  actionButtons.appendChild(debug);
+  actionButtons.appendChild(inspectorToggle);
+
+  document.body.appendChild(actionButtons);
+
+  // Keyboard Shortcuts
+  document.addEventListener('keydown', (e) => {
+    if (e.ctrlKey && e.key === 'Enter') {
+      refresh.click();
+    }
+  });
+};

package/inspector/index.css

@@ -0,0 +1,108 @@
+.inspector-container {
+  position: fixed;
+  left: 1rem;
+  top: 1rem;
+  bottom: 1rem;
+  width: 300px;
+  background: rgba(1, 22, 39, 0.95);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.5rem;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  z-index: 200;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
+  overflow: hidden;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.inspector-container.hidden {
+  transform: translateX(-120%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.inspector-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.inspector-header h2 {
+  margin: 0;
+  font-size: 1rem;
+  color: #43aa8b;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.inspector-body {
+  padding: 1rem;
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.inspector-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.inspector-section h3 {
+  margin: 0;
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 0.25rem;
+}
+
+.prop-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.prop-row label {
+  font-size: 0.85rem;
+  flex: 1;
+}
+
+.prop-row input[type="number"],
+.prop-row input[type="text"] {
+  flex: 2;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.85rem;
+  outline: none;
+  width: 100%;
+}
+
+.prop-row input:focus {
+  border-color: #43aa8b;
+}
+
+.prop-row input[type="checkbox"] {
+  accent-color: #43aa8b;
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.no-selection {
+  color: rgba(255, 255, 255, 0.5);
+  text-align: center;
+  margin-top: 2rem;
+  font-size: 0.9rem;
+}

package/inspector/index.js

@@ -0,0 +1,214 @@
+import Engine from '../../built/Engine.js';
+import { getEditorValue, setEditorValue } from '../editor/index.js';
+
+export const createInspector = (onClose) => {
+  const container = document.createElement('div');
+  container.className = 'inspector-container hidden'; // Hidden by default, toggleable
+
+  // Prevent clicks from falling through to the game canvas
+  container.addEventListener('mousedown', (e) => e.stopPropagation());
+  container.addEventListener('mouseup', (e) => e.stopPropagation());
+  container.addEventListener('click', (e) => e.stopPropagation());
+
+  const header = document.createElement('div');
+  header.className = 'inspector-header';
+  const title = document.createElement('h2');
+  title.innerText = 'Inspector';
+  
+  const closeBtn = document.createElement('i');
+  closeBtn.className = 'fa-solid fa-xmark';
+  closeBtn.style.cursor = 'pointer';
+  closeBtn.onclick = () => {
+    container.classList.add('hidden');
+    if (onClose) onClose();
+  };
+  
+  header.appendChild(title);
+  header.appendChild(closeBtn);
+
+  const body = document.createElement('div');
+  body.className = 'inspector-body';
+
+  const noSelection = document.createElement('div');
+  noSelection.className = 'no-selection';
+  noSelection.innerText = 'Toggle Debug Mode and click an object to inspect.';
+
+  const formContainer = document.createElement('div');
+  formContainer.className = 'inspector-form';
+  formContainer.style.display = 'none';
+  formContainer.style.flexDirection = 'column';
+  formContainer.style.gap = '1rem';
+
+  // Helper to create rows
+  const createRow = (labelText, type, propertyPath) => {
+    const row = document.createElement('div');
+    row.className = 'prop-row';
+    const label = document.createElement('label');
+    label.innerText = labelText;
+    const input = document.createElement('input');
+    input.type = type;
+    input.step = 'any';
+
+    // Update Engine when UI changes
+    input.addEventListener('input', (e) => {
+      const obj = Engine.selectedObject;
+      if (!obj) return;
+      
+      let val = type === 'checkbox' ? e.target.checked : e.target.value;
+      if (type === 'number') val = parseFloat(val);
+      
+      // Handle nested paths (e.g., 'position.x')
+      const paths = propertyPath.split('.');
+      if (paths.length === 2) {
+        obj[paths[0]][paths[1]] = val;
+      } else {
+        obj[propertyPath] = val;
+      }
+    });
+
+    // Update Editor when UI value is committed
+    input.addEventListener('change', (e) => {
+      const obj = Engine.selectedObject;
+      if (!obj || !obj.tag) return;
+      
+      let val = type === 'checkbox' ? e.target.checked : e.target.value;
+      if (type === 'number') val = parseFloat(val);
+
+      try {
+        const code = getEditorValue();
+        
+        // Find the tag: 'obj.tag' definition
+        const tagRegex = new RegExp(`tag:\\s*['"\`]${obj.tag}['"\`]`, 'g');
+        const match = tagRegex.exec(code);
+        
+        if (match) {
+          // Look 500 characters around the tag to find the object instantiation
+          const searchWindowStart = Math.max(0, match.index - 500);
+          const searchWindowEnd = Math.min(code.length, match.index + 500);
+          let snippet = code.substring(searchWindowStart, searchWindowEnd);
+          
+          let updatedSnippet = snippet;
+          const paths = propertyPath.split('.');
+          
+          if (paths.length === 2 && paths[0] === 'position') {
+            // Find position: new Vector2(x, y)
+            const posRegex = /position:\s*new\s*Vector2\s*\(\s*([^,]+)\s*,\s*([^)]+)\s*\)/;
+            const posMatch = posRegex.exec(snippet);
+            if (posMatch) {
+              const newX = paths[1] === 'x' ? val : posMatch[1].trim();
+              const newY = paths[1] === 'y' ? val : posMatch[2].trim();
+              updatedSnippet = snippet.replace(posRegex, `position: new Vector2(${newX}, ${newY})`);
+            }
+          } else {
+            // Find property: value
+            // Be careful to match the exact property name
+            const propRegex = new RegExp(`(\\b${propertyPath}\\s*:\\s*)([^,\\n}]+)`);
+            const propMatch = propRegex.exec(snippet);
+            if (propMatch) {
+              const formattedVal = typeof val === 'string' ? `'${val}'` : val;
+              updatedSnippet = snippet.replace(propRegex, `$1${formattedVal}`);
+            }
+          }
+          
+          if (snippet !== updatedSnippet) {
+            const newCode = code.substring(0, searchWindowStart) + updatedSnippet + code.substring(searchWindowEnd);
+            setEditorValue(newCode);
+          }
+        }
+      } catch(err) {
+        console.error('Failed to sync inspector changes to editor:', err);
+      }
+    });
+
+    row.appendChild(label);
+    row.appendChild(input);
+    return { row, input, propertyPath, type };
+  };
+
+  const sections = {
+    General: [
+      createRow('Tag', 'text', 'tag'),
+      createRow('Visible', 'checkbox', 'visible'),
+      createRow('Z-Index', 'number', 'zIndex')
+    ],
+    Transform: [
+      createRow('X', 'number', 'position.x'),
+      createRow('Y', 'number', 'position.y')
+      // Note: width/height are often getters depending on the shape, so we might skip editing them globally here, or handle specific subclasses if needed.
+    ],
+    Physics: [
+      createRow('Velocity X', 'number', 'velocity.x'),
+      createRow('Velocity Y', 'number', 'velocity.y'),
+      createRow('Accel X', 'number', 'acceleration.x'),
+      createRow('Accel Y', 'number', 'acceleration.y'),
+      createRow('Mass', 'number', 'mass'),
+      createRow('Is Static', 'checkbox', 'isStatic')
+    ]
+  };
+
+  const inputs = [];
+
+  for (const [sectionName, rows] of Object.entries(sections)) {
+    const section = document.createElement('div');
+    section.className = 'inspector-section';
+    const sectionTitle = document.createElement('h3');
+    sectionTitle.innerText = sectionName;
+    section.appendChild(sectionTitle);
+
+    rows.forEach(({ row, input, propertyPath, type }) => {
+      section.appendChild(row);
+      inputs.push({ input, propertyPath, type });
+    });
+
+    formContainer.appendChild(section);
+  }
+
+  body.appendChild(noSelection);
+  body.appendChild(formContainer);
+
+  container.appendChild(header);
+  container.appendChild(body);
+
+  // Update Loop
+  const updateLoop = () => {
+    if (!container.classList.contains('hidden')) {
+      const obj = Engine.selectedObject;
+
+      if (!Engine.debug || !obj) {
+        noSelection.style.display = 'block';
+        formContainer.style.display = 'none';
+        title.innerText = 'Inspector';
+      } else {
+        noSelection.style.display = 'none';
+        formContainer.style.display = 'flex';
+        title.innerText = `Inspector: ${obj.constructor.name}`;
+
+        inputs.forEach(({ input, propertyPath, type }) => {
+          // Skip updating if user is currently typing in this field
+          if (document.activeElement === input) return;
+
+          let val;
+          const paths = propertyPath.split('.');
+          if (paths.length === 2) {
+            val = obj[paths[0]][paths[1]];
+          } else {
+            val = obj[propertyPath];
+          }
+
+          if (type === 'checkbox') {
+            input.checked = !!val;
+          } else if (type === 'number') {
+            input.value = typeof val === 'number' ? val.toFixed(2) : 0;
+          } else {
+            input.value = val !== undefined ? val : '';
+          }
+        });
+      }
+    }
+    requestAnimationFrame(updateLoop);
+  };
+
+  requestAnimationFrame(updateLoop);
+
+  return container;
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "dino-ge-playground",
+  "version": "1.0.3",
+  "description": "Interactive, live-editing playground and inspector for Dino GE",
+  "bin": {
+    "dino-ge-playground": "server.js"
+  },
+  "type": "module",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js",
+    "build": "echo \"Nothing to build for playground\""
+  },
+  "files": [
+    "server.js",
+    "index.html",
+    "index.js",
+    "index.css",
+    "helpers.js",
+    "script.js",
+    "console/",
+    "editor/",
+    "inspector/",
+    "sidebar/",
+    "sprites/"
+  ],
+  "dependencies": {
+    "express": "^4.21.2",
+    "dino-ge": "^1.0.3"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.9"
+  },
+  "author": "Rich <richgled25@gmail.com>",
+  "license": "ISC"
+}

package/server.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+import express from 'express';
+import path from 'path';
+import fs from 'fs/promises';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const app = express();
+const PLAYGROUND_DIR = __dirname;
+
+let DINO_GE_DIST;
+try {
+  DINO_GE_DIST = path.join(path.dirname(require.resolve('dino-ge/package.json')), 'dist');
+} catch {
+  DINO_GE_DIST = path.join(__dirname, '../dino-ge/dist');
+}
+
+app.use(express.json());
+app.use('/', express.static(PLAYGROUND_DIR));
+app.use('/built', express.static(DINO_GE_DIST));
+
+const getFilePath = (id) => path.join(process.cwd(), `${id || 'script'}.js`);
+
+app.get('/file/:id', async (req, res) => {
+  try {
+    const file = await fs.readFile(getFilePath(req.params.id));
+    res.status(200).json(file.toString());
+  } catch (err) {
+    const status = err.code === 'ENOENT' ? 404 : 500;
+    res.status(status).json({ error: err.message });
+  }
+});
+
+app.put('/file/:id', async (req, res) => {
+  try {
+    const filePath = getFilePath(req.params.id);
+    const data = String(req.body.data);
+    if (req.body.upsert) {
+      await fs.appendFile(filePath, data);
+    } else {
+      await fs.writeFile(filePath, data);
+    }
+    res.status(200).json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+  console.log(`Dino GE Playground: http://localhost:${PORT}`);
+  console.log(`Scripts directory: ${process.cwd()}`);
+});

package/sidebar/index.css

@@ -0,0 +1,86 @@
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  min-height: fit-content;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.sidebar.minimized {
+  height: 2.5rem;
+  min-height: 2.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.sidebar-title {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.75rem;
+  color: #43aa8b;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 0;
+  font-weight: bold;
+}
+
+.sidebar-toggle-icon {
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 0.8rem;
+  transition: transform 0.3s ease;
+}
+
+.sidebar.minimized .sidebar-toggle-icon {
+  transform: rotate(-90deg);
+}
+
+.sidebar.minimized .snippet-btn {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.snippet-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #d1d1d1;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: left;
+}
+
+.snippet-btn i {
+  width: 1rem;
+  text-align: center;
+  color: #43aa8b;
+}
+
+.snippet-btn span {
+  font-size: 0.85rem;
+}
+
+.snippet-btn:hover {
+  background: rgba(67, 170, 139, 0.2);
+  border-color: rgba(67, 170, 139, 0.4);
+  color: white;
+}
+
+.snippet-btn:active {
+  transform: translateY(1px);
+}

package/sidebar/index.js

@@ -0,0 +1,87 @@
+import { insertTextToEditor } from '../editor/index.js';
+
+export default () => {
+  const sidebarDiv = document.createElement('div');
+  sidebarDiv.className = 'sidebar minimized';
+
+  const header = document.createElement('div');
+  header.className = 'sidebar-header';
+  header.onclick = () => {
+    sidebarDiv.classList.toggle('minimized');
+  };
+
+  const title = document.createElement('div');
+  title.className = 'sidebar-title';
+  title.innerText = 'Snippets';
+
+  const toggleIcon = document.createElement('i');
+  toggleIcon.className = 'fa-solid fa-chevron-down sidebar-toggle-icon';
+
+  header.appendChild(title);
+  header.appendChild(toggleIcon);
+  sidebarDiv.appendChild(header);
+
+  const snippets = [
+    { icon: 'fa-arrows-up-down-left-right', label: 'Vector2', code: 'new Vector2(0, 0)' },
+    { icon: 'fa-font', label: 'Text', code: `new Text({
+  tag: 'textObj',
+  text: 'Hello World',
+  fontSize: 30,
+  colour: 'white',
+  position: new Vector2(100, 100),
+  width: 200,
+  zIndex: 10
+});` },
+    { icon: 'fa-square', label: 'Rectangle', code: `new Rectangle({
+  tag: 'rectObj',
+  position: new Vector2(100, 100),
+  width: 50,
+  height: 50,
+  colour: '#43aa8b',
+  zIndex: 5
+});` },
+    { icon: 'fa-circle', label: 'Circle', code: `new Circle({
+  tag: 'circleObj',
+  position: new Vector2(100, 100),
+  radius: 25,
+  colour: '#F94144',
+  zIndex: 5
+});` },
+    { icon: 'fa-image', label: 'Sprite', code: `new Sprite({
+  tag: 'spriteObj',
+  img: dinoImg,
+  rows: 1,
+  cols: 24,
+  position: new Vector2(100, 100),
+  startCol: 0,
+  endCol: 4,
+  zIndex: 5
+});` },
+    { icon: 'fa-minus', label: 'Line', code: `new Line({
+  tag: 'lineObj',
+  width: 2,
+  p1: new Vector2(0, 0),
+  p2: new Vector2(100, 100),
+  zIndex: 1
+});` }
+  ];
+
+  snippets.forEach(s => {
+    sidebarDiv.appendChild(snippetFactory(s.icon, s.label, s.code));
+  });
+
+  return sidebarDiv;
+};
+
+function snippetFactory(iconClass, label, code) {
+  const btn = document.createElement('button');
+  btn.className = 'snippet-btn';
+  btn.title = label;
+  btn.innerHTML = `<i class="fa-solid ${iconClass}"></i><span>${label}</span>`;
+  
+  btn.onclick = () => {
+    insertTextToEditor(code);
+  };
+
+  return btn;
+}