Adds responsive UX for mobile Editor

Drag and drop gui windows should not affect camera drags
Adds window blur event to reset all pointer states
Adds retry if Prism Live not available ( for now )
Do not treat two-finger mobile touch as single pointer events
Prevents default 
Adds guard for empty example selection
Removes global game reference
Ensures camera shake event prevents default
Adds Github and Discord links to Playground

mantra-client/public/examples/terrain/infinite-maze.js

@@ -45,6 +45,8 @@ game.start(function () {
 
   console.log("tileMap", tileMap)
 
-  game.systems.tile.createLayer(tileMap, 16, 16)
+  game.systems.tile.createLayer(tileMap, 16, 16);
+
+  game.setBackground('#000000');
 
 });

mantra-examples/public/terrain/infinite-maze.js

@@ -45,6 +45,8 @@ game.start(function () {
 
   console.log("tileMap", tileMap)
 
-  game.systems.tile.createLayer(tileMap, 16, 16)
+  game.systems.tile.createLayer(tileMap, 16, 16);
+
+  game.setBackground('#000000');
 
 });

mantra-game/Game.js

@@ -354,9 +354,10 @@ class Game {
   }
 
   shakeCamera(intensity, duration) {
+    let game = this;
     this.graphics.forEach(function (graphicsInterface) {
       if (graphicsInterface.cameraShake) {
-        graphicsInterface.shakeCamera(intensity, duration);
+        graphicsInterface.shakeCamera({intensity, duration});
       }
     });
   }

mantra-game/plugins/code/lib/inflateCode.js

@@ -55,9 +55,19 @@ export default function inflateCode(entityElement, entityData) {
   return entityElement;
 }
 
+// Check for cached content before fetching
 function fetchSourceCode(src, codeElement, entityElement, game, entityData) {
-  if (!this.fetchSourceHandles[src]) {
-    this.fetchSourceHandles[src] = fetch(src).then(handleFetchResponse.bind(this, src, codeElement, entityElement, game, entityData)).catch(handleFetchError.bind(null, src, codeElement));
+  if (this.fetchSourceHandles[src]) {
+    const cache = this.fetchSourceHandles[src];
+    if (cache.content) {
+      updateCodeElements(src, cache.content, codeElement, entityElement, game, entityData);
+    } else if (cache.error) {
+      handleFetchError(src, codeElement, cache.error);
+    }
+  } else {
+    this.fetchSourceHandles[src] = fetch(src)
+      .then(handleFetchResponse.bind(this, src, codeElement, entityElement, game, entityData))
+      .catch(handleFetchError.bind(null, src, codeElement));
   }
   codeElement.setAttribute('data-src', src);
 }
@@ -79,16 +89,19 @@ function handleFetchError(src, codeElement, error) {
 function updateCodeElements(src, content, codeElement, entityElement, game, entityData) {
   document.querySelectorAll(`code[data-src="${src}"]`).forEach(el => {
 
-    console.log('elel', el)
-    if (window.Prism && window.Prism.Live) {
-      let textarea = updateOrCreateTextarea(el, content, entityElement);
-      if (textarea.fresh) {
-        console.log("textareatextarea", textarea)
-        new Prism.Live(textarea);
-        console.log('nnnnn')
-        attachTextareaEvents(textarea, game);
-
+    let textarea = updateOrCreateTextarea(el, content, entityElement);
+
+    if (usePrism) {
+     function tryPrism () {
+        if (window.Prism && window.Prism.Live) {
+          let textarea = updateOrCreateTextarea(el, content, entityElement);
+          new Prism.Live(textarea);
+          attachTextareaEvents(textarea, game);
+        } else {
+          setTimeout(tryPrism, 100);
+        }
       }
+      tryPrism();
     } else {
       el.textContent = content;
     }
@@ -119,7 +132,6 @@ function updateOrCreateTextarea(el, content, entityElement) {
 }
 
 function attachTextareaEvents(textarea, game) {
-  console.log('bind')
   textarea.addEventListener('mousedown', () => {
     game.data.camera.draggingAllowed = false;
     game.data.camera.mouseWheelZoomEnabled = false;

mantra-game/plugins/graphics-css/lib/camera/cameraShake.js

@@ -1,5 +1,7 @@
 // cameraShake.js - Marak Squires 2023
 export default function cameraShake({ initialIntensity = 100, duration = 777 }) {
+
+  let game = this.game;
   let gameViewport = document.getElementById('gameHolder');
   if (!gameViewport) {
     console.log('Warning: could not find gameHolder div, cannot apply camera shake');

mantra-game/plugins/gui-editor/Editor.css

@@ -485,6 +485,8 @@ pre {
 
   padding: 0;
   font-size: 18px;
+  min-width: 190px;
+  overflow: hidden;
 }
 
 .traffic-light-container {
@@ -512,12 +514,17 @@ pre {
   height: 50%;
 }
 
+#eventTable td {
+  overflow: hidden;
+}
+
 #eventsView {
   top: 160px;
   right: 30px;
   z-index: 1000;
-  width: 30%;
-  height: 60%;
+  width: 300px;
+  min-width: 300px;
+  height: 600px;
   resize: both;
   overflow: auto;
   position: absolute;
@@ -527,8 +534,9 @@ pre {
   top: 120px;
   left: 20px;
   z-index: 1000;
-  width: 30%;
-  height: 60%;
+  width: 300px;
+  min-width: 300px;
+  height: 600px;
   resize: both;
   overflow: auto;
   position: absolute;
@@ -571,10 +579,11 @@ pre {
   top: 120px;
   left: 25vw;
   z-index: 1000;
-  width: 550px;
-  min-width: 460px;
+  width: 40vw;
+  font-size: 28px;
+  min-width: 560px;
   min-height: 200px;
-  height: 60%;
+  height: 60vh;
   resize: both;
   overflow: auto;
   position: absolute;
@@ -940,4 +949,27 @@ button[type="submit"]:disabled {
   padding: 20px;
   border: 1px solid #ccc;
   margin: 20px;
+}
+
+
+@media (max-width: 768px) {
+  .menu-item {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+    padding-top: 10px !important;
+    padding-bottom: 5px !important;
+
+    margin: 2px 4px !important;
+  }
+  .menu-item-text {
+    font-size: 16px !important;
+  }
+
+  .menu-item-text img {
+    width: 16px !important;
+    height: 16px !important;
+
+  }
+
+
 }