Adds title support to Image

Adds alt and title to image links on Playground
yantra-core · Feb 28, 2024 · a73f718 · a73f718
1 parent 1da0726
commit a73f718
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/mantra-game/plugins/graphics-css/lib/entity/inflate/inflateImage.js b/mantra-game/plugins/graphics-css/lib/entity/inflate/inflateImage.js
@@ -17,6 +17,16 @@ export default function inflateImage(entityElement, entityData) {
     }
   }
 
+  if (entityData.meta && entityData.meta.alt) {
+    element.alt = entityData.meta.alt;
+  } else {
+    element.alt = entityData.meta.src || 'Image ' + entityData.id;
+  }
+
+  if (entityData.meta && entityData.meta.title) {
+    element.title = entityData.meta.title;
+  }
+
   // Optional: Apply default and custom styles
   applyImageStyles(element, entityData);
 

diff --git a/mantra-game/plugins/image/Image.js b/mantra-game/plugins/image/Image.js
@@ -25,6 +25,7 @@ export default class Image {
     // Ensure meta is defined and contains src and alt
     entityData.meta = entityData.meta || {};
     entityData.meta.src = entityData.src || entityData.meta.src || ''; // Default src if none provided
+    entityData.meta.title = entityData.title || entityData.meta.title || ''; // Default title if none provided
     entityData.meta.alt = entityData.alt || entityData.meta.alt || ''; // Default alt if none provided
     // Return the entity configuration
     return {

diff --git a/mantra-worlds/Playground/Playground.js b/mantra-worlds/Playground/Playground.js
@@ -92,10 +92,11 @@ export default class Playground {
     // Remark: These images could also be buttons with textures, or ents with in-line textures
     let githubImageLink = game.make()
     .Image({
+      alt: 'Mantra.js Github',
       src: src
     })
     .pointerdown(function (context, event) {
-      // opens new link to AYYO Discord
+      // opens new link to Mantra.js Github
       event.preventDefault();
       window.open('https://github.com/yantra-core/Mantra.js', '_blank');
     })
@@ -108,6 +109,7 @@ export default class Playground {
 
     let discordImageLink = game.make()
     .Image({
+      alt: 'AYYO Discord',
       src: 'https://yantra.gg/mantra/img/game/env/discord-voice-dark.png'
     })
     .pointerdown(function (context, event) {