Adds all categories with examples to Playground

Adds follow back to `GravityGardens` config
`Select.inflate()` will now style it’s parent element

mantra-game/plugins/entity/lib/layoutEntity.js

@@ -108,8 +108,8 @@ export default function layoutEntity(container, entityId) {
         return;
       }
 
-      let paddingTop = containerEnt.style.paddingTop || 20;
-      let paddingLeft = containerEnt.style.paddingLeft || -10;
+      let paddingTop = 0;
+      let paddingLeft = 0;
 
       // Set the starting position to the top-left corner of the container's bounding box
       let positionX = containerPosition.x - containerSize.width / 2 + paddingLeft;

mantra-game/plugins/graphics-css/lib/entity/inflate/inflateSelect.js

@@ -25,32 +25,66 @@ export default function inflateSelect(entityElement, entityData) {
   }
 
   // Apply default and custom styles
-  applySelectStyles(select, entityData);
+  applySelectStyles(entityElement, select, entityData);
 
   // Append the select element to the entityElement
   entityElement.appendChild(select);
 
   return entityElement;
 }
 
-function applySelectStyles(select, entityData) {
+function applySelectStyles(entityElement, select, entityData) {
 
   const defaultSelectStyles = {
     padding: '10px 15px',
     fontSize: '16px',
-    margin: '4px 2px',
     cursor: 'pointer',
-    borderRadius: '8px',
     backgroundColor: '#f2f2f2',
     color: 'black',
-    border: '1px solid #ccc',
+    border: 'none', // Ensure no border for the select element
+    borderRadius: '8px', // Optional: Match container's border-radius if desired
     appearance: 'none', // Removes default browser styling
-    transition: 'border-color 0.4s ease, box-shadow 0.4s ease',
+    transition: 'background-color 0.3s ease', // Smooth transition for background color
   };
-
+
+  const defaultSelectEntityHolderStyle = {
+    padding: '0', // Adjust padding to be handled by the select element inside
+    borderRadius: '8px', // Rounded corners for the container
+    backgroundColor: '#f2f2f2', // Match select background color
+    border: '1px solid #ccc', // Singular border on the container
+    'boxShadow': '0 2px 4px rgba(0,0,0,0.1)', // Subtle shadow for depth
+    transition: 'box-shadow 0.3s ease, border-color 0.3s ease', // Smooth transition for shadow and border color
+  };
+
   // Apply default styles
   Object.assign(select.style, defaultSelectStyles);
+  Object.assign(entityElement.style, defaultSelectEntityHolderStyle);
+
+  // Additional style adjustments for the focus state of the select element
+  select.addEventListener('focus', () => {
+    entityElement.style.borderColor = 'lightblue'; // Highlight border color on focus
+    entityElement.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)'; // Deeper shadow on focus
+  });
+
+  select.addEventListener('blur', () => {
+    entityElement.style.borderColor = '#ccc'; // Revert border color on blur
+    entityElement.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; // Revert shadow on blur
+  });
 
+  entityElement.addEventListener('mouseenter', () => {
+    entityElement.style.borderColor = 'lightblue'; // Highlight border color on hover
+    entityElement.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)'; // Deeper and more pronounced shadow for a "pop" effect
+    entityElement.style.transform = 'translateY(-2px)'; // Slightly raise the element for a 3D effect
+    entityElement.style.transition = 'all 0.2s ease-out'; // Smooth transition for all properties
+  });
+
+  entityElement.addEventListener('mouseleave', () => {
+    entityElement.style.borderColor = '#ccc'; // Revert border color on mouse leave
+    entityElement.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; // Revert shadow on mouse leave
+    entityElement.style.transform = 'translateY(0)'; // Reset the position of the element
+    entityElement.style.transition = 'all 0.2s ease-in'; // Smooth transition for all properties
+  });
+
   // Set width and height if provided
   if (entityData.width) {
     select.style.width = `${entityData.width}px`;

mantra-worlds/GravityGardens/GravityGardens.js

@@ -37,6 +37,9 @@ class GravityGardens {
     // we reset the game to clear any previous state
     game.reset();
 
+    game.data.camera.follow = true;
+
+
     this.createWorld();
     this.createFounts(game);
     this.bindEvents();
@@ -88,6 +91,7 @@ class GravityGardens {
     playerConfig = playerConfig.build();
 
     let player = game.createEntity(playerConfig);
+    game.setPlayerId(player.id);
 
     game.make()
       .type('WARP')

mantra-worlds/Playground/Playground.js

@@ -132,8 +132,8 @@ export default class Playground {
       style: { // supports CSS property names
         //padding: 0,
         margin: 0,
-        paddingLeft: -5,
-        paddingTop: -5,
+        paddingLeft: 0,
+        paddingTop: 0,
         // background: '#ff0000', // can also use Entity.color
         border: {
           color: '#000000',
@@ -171,8 +171,9 @@ export default class Playground {
 
     // Function to create a dropdown select with given options and append it to a specified container
     function createDropdown(primaryGameEmbed, options, containerId, dropdownTitle) {
+
       let optionsFormatted = options.map(item => ({
-        label: item.title, // Use the title as the option text
+        label: item.title.replace('<br/>', ''), // <-- legacy examples API can remove soon
         value: exampleRoot + 'examples/demo.html?source=' + item.url.replace('.html', '') // Concatenate the root path with the example URL
       }));
 
@@ -205,18 +206,6 @@ export default class Playground {
         //
         // Set all the other dropdowns to the first option
         //
-
-        // Remark: In order to do this through the ECS, we'd have to implement a non-bubbling update event,
-        // tests would need to be written first, this type of update action is self-ref and cascade.
-        // we also would be much better off using `onchange` event support instead of `afterUpdateEntity` for this
-        /*
-        let dropdowns = game.getEntitiesByType('SELECT');
-        dropdowns.forEach(dropdown => {
-          game.updateEntity(dropdown.id, {
-            value: ''
-          });
-        });
-        */
 
         //
         // Since the Playground is built using CSSGraphics, we can use the DOM to reset the dropdowns
@@ -230,6 +219,19 @@ export default class Playground {
           }
         });
 
+        // Remark: In order to do this through the ECS, we'd have to implement a non-bubbling update event,
+        // tests would need to be written first, this type of update action is self-ref and cascade.
+        // we also would be much better off using `onchange` event support instead of `afterUpdateEntity` for this
+        /*
+        let dropdowns = game.getEntitiesByType('SELECT');
+        dropdowns.forEach(dropdown => {
+          game.updateEntity(dropdown.id, {
+            value: ''
+          });
+        });
+        */
+
+
         //
         // Updates the IFrame src to the selected example
         //
@@ -257,16 +259,23 @@ export default class Playground {
         backgroundColor: categories.find(cat => cat.title === dropdownTitle)?.color || '#e0e0e0' // Use category color if available
       }).createEntity();
     }
-
-    // Iterate over categories and create a dropdown for each with its examples as options
     categories.forEach(category => {
-      // Filter examples that belong to the current category
-      let categoryExamples = examples.filter(example => example.category === category.name);
-
+      // Filter examples based on whether 'example.category' is an array or a string
+      let categoryExamples = examples.filter(example => {
+        if (Array.isArray(example.category)) {
+          // If 'example.category' is an array, check if it includes the current 'category.name'
+          return example.category.includes(category.name);
+        } else {
+          // If 'example.category' is a string, perform direct comparison
+          return example.category === category.name;
+        }
+      });
+
       // Create a dropdown for the current category with its examples
       createDropdown(primaryGameEmbed, categoryExamples, 'container-a', category.title); // Assume 'container-a' exists or is dynamically created for each category
     });
-
+
+
     // let addSceneButton = game.make().Button({ text: 'Load Example as Scene', disabled: true }).width(250).position(650, 500).createEntity();
     // let deployToYantraButton = game.make().Button({ text: 'Deploy to Yantra.gg' }).width(200).position(900, 500).createEntity();
     // let copyCodeButton = game.make().Button({ text: 'Copy Code' }).width(200).position(1000, 500).createEntity();