ESM tutorial fixes (#777)

* Enhance JSON loading tutorial with ESM examples and tabbed interface for better clarity and organization

* Enhance Google Ads tutorial with tabbed interface for Classic and ESM code examples

* Enhance custom shaders tutorial with tabbed interface for Classic and ESM code examples

* Refactor custom shaders tutorial to remove redundant comments and clarify resource types for shaders and textures

* Enhance animated textures tutorial with tabbed interface for Classic and ESM code examples

* linting

* Update loading-json.md

Co-authored-by: Copilot <[email protected]>

* Update custom-shaders.md

---------

Co-authored-by: Copilot <[email protected]>

Author: marklundin

docs/tutorials/animated-textures.md

@@ -4,6 +4,9 @@ tags: [animation, textures]
 thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/405882/831708-image-75.jpg
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 <div className='iframe-container'>
     <iframe src="https://playcanv.as/p/BM93v05L/" title="Animated Textures" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
@@ -16,6 +19,9 @@ It can be very useful to animate a material that has been applied to a surface.
 
 The square plane in the example uses the script `scrolling-texture.js` to constantly move the UV offset every frame. For example, this can be used to simulate flowing water. The update loop is displayed below.
 
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 ScrollingTexture.prototype.update = function(dt) {
     var velocity = ScrollingTexture.tmpVec2;
@@ -36,6 +42,32 @@ ScrollingTexture.prototype.update = function(dt) {
 };
 ```
 
+</TabItem>
+<TabItem  value="esm" label="ESM">
+
+```javascript
+update(dt) {
+    const velocity = ScrollingTexture.tmpVec2;
+    const offset = ScrollingTexture.tmpOffset;
+
+    // Calculate how much to offset the texture
+    // Speed * dt
+    velocity.set(this.speed.x, this.speed.y);
+    velocity.scale(dt);
+
+    // Update the diffuse and normal map offset values
+    offset.copy(this.material.diffuseMapOffset);
+    offset.add(velocity);
+
+    this.material.diffuseMapOffset = offset;
+    this.material.normalMapOffset = offset;
+    this.material.update();
+};
+```
+
+</TabItem>
+</Tabs>
+
 We calculate the required offset into a temporary vector `tmp`. This is simply: `speed * timeStep`. Then we add this offset to the offset property for both the diffuse map and the normal map by modifying the `diffuseMapOffset` and `normalMapOffset` properties. These values are `pc.Vec2`s which shift the UV co-ordinates used to map the texture to the surface. If you are using other maps (e.g. emissive) you will also need to update these offset properties as well. Finally we call `material.update()` to propagate the changes into the shader.
 
 This is a simple straightforward method to modify a material's offset and scroll a texture. It does have one downside which is this code modifies the actual material's properties. So if you have multiple models in a scene with the same material, they will all be affected.

docs/tutorials/custom-shaders.md

@@ -140,6 +140,9 @@ this.material.setParameter('uDiffuseMap', diffuseTexture);
 The effect demonstrated in this tutorial is achieved using a height map texture. We access the texture from the asset registry using the code above. At the
 top of our script we have declared a script attribute called 'maps' which allows us to set a texture from the PlayCanvas Editor:
 
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 CustomShader.attributes.add('vs', {
     type: 'asset',
@@ -166,6 +169,46 @@ CustomShader.attributes.add('heightMap', {
 });
 ```
 
+</TabItem>
+<TabItem  value="esm" label="ESM">
+
+```javascript
+/**
+ * @attribute
+ * @title Vertex Shader
+ * @type {Asset}
+ * @resource shader
+ */
+vs;
+
+/**
+ * @attribute
+ * @title Fragment Shader
+ * @type {Asset}
+ * @resource shader
+ */
+fs;
+
+/**
+ * @attribute
+ * @title Diffuse Map
+ * @type {Asset}
+ * @resource texture
+ */
+diffuseMap;
+
+/**
+ * @attribute
+ * @title Height Map
+ * @type {Asset}
+ * @resource texture
+ */
+heightMap;
+```
+
+</TabItem>
+</Tabs>
+
 When our height map texture is loaded we can set the uniform `uHeightMap` to be the `pc.Texture` object.
 
 ## Updating uniforms
@@ -235,8 +278,6 @@ export class CustomShader extends Script {
     static scriptName = "customShader";
 
     /**
-     * Vertex Shader
-     * 
      * @attribute
      * @title Vertex Shader
      * @type {Asset}
@@ -245,8 +286,6 @@ export class CustomShader extends Script {
     vs = null;
 
     /**
-     * Fragment Shader
-     * 
      * @attribute
      * @title Fragment Shader
      * @type {Asset}
@@ -255,8 +294,6 @@ export class CustomShader extends Script {
     fs = null;
 
     /**
-     * Diffuse Map
-     * 
      * @attribute
      * @title Diffuse Map
      * @type {Asset}
@@ -265,8 +302,6 @@ export class CustomShader extends Script {
     diffuseMap = null;
 
     /**
-     * Height Map
-     * 
      * @attribute
      * @title Height Map
      * @type {Asset}

docs/tutorials/google-ads-for-games.md

@@ -4,6 +4,9 @@ tags: [scripts, monetization, games]
 thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/889020/CDC848-image-75.jpg
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 Links for this tutorial:
 
 - [Flappy Bird Demo][flappy-bird-ads-demo]
@@ -46,6 +49,9 @@ Go to the [Google H5 Ad Tutorial (Start)][tutorial-template-start] project dashb
 
 This is a simple project where it's ready for us to add the button click callbacks to show the ads in the `ui-controller.js` script:
 
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 // ...
 // initialize code called once per entity
@@ -75,6 +81,37 @@ UiController.prototype.initialize = function() {
 };
 ```
 
+</TabItem>
+<TabItem  value="esm" label="ESM">
+
+```javascript
+// ...
+// initialize code called once per entity
+initialize() {
+    this.rewardedGivenPanelEntity.enabled = false;
+    this.rewardedAdButtonEntity.button.active = false;
+
+    const onRefresh = () => {}
+
+    this.refreshButtonEntity.button.on('click', onRefresh)
+
+    this.interstitialAdButtonEntity.button.on('click', (e) => {
+
+    });
+
+    this.rewardedAdButtonEntity.button.on('click', (e) => {
+
+    });
+
+    this.okRewardButtonEntity.button.on('click', (e) => {
+        
+    });
+};
+```
+
+</TabItem>
+</Tabs>
+
 The first step is to add the Google SDK integration files which we can do by copying the folder 'Google H5 Games Ads' from the [Flappy Bird project][flappy-bird-ads-demo].
 
 ![](/img/tutorials/google-afg/copy-afg-folder.gif)
@@ -202,6 +239,9 @@ Let's start with adding an interstitial ad to the project.
 
 Add the following code to the interstitial ad button click event callback in `ui-controller.js`:
 
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 // ...
 this.interstitialAdButtonEntity.button.on('click', function(e) {
@@ -336,6 +376,9 @@ var onRefresh = function () {
 // ...
 ```
 
+</TabItem>
+</Tabs>
+
 When the refresh button is pressed, we disable the reward button entity so that it isn't shown to the player and we are in a known state.
 
 In the `beforeReward` callback, we keep a reference to the function to show the ad and enable the reward button as we know we can show an ad to the player.
@@ -367,9 +410,6 @@ Let's see it in action:
 
 The completed `ui-controller.js` file should look like this:
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 <Tabs defaultValue="classic" groupId='script-code'>
 <TabItem  value="esm" label="ESM">
 

docs/tutorials/loading-json.md

@@ -3,6 +3,8 @@ title: Loading JSON Data
 tags: [loading]
 thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/405827/G8YF23-image-75.jpg
 ---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 <div className="iframe-container">
     <iframe src="https://playcanv.as/p/cHnXIXoN/" title="Loading JSON Data" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
@@ -12,6 +14,43 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4058
 
 ## Loading JSON from an asset
 
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem  value="esm" label="ESM">
+
+```javascript
+
+/**
+ * @attribute
+ * @title Character Data
+ * @type {Asset}
+ * @resource json
+ */
+characterData = null;
+
+parseCharacterData(data) {
+    const names = [];
+
+    // Read the character data from the JSON asset and return a list of names
+    const characters = data.characters;
+    for (let character of characters) {
+        names.push(character.firstName + ' ' + character.lastName);
+    }
+
+    return names;
+}
+
+//...
+
+// Get JSON data from a project asset
+const characterData = this.characterData.resource;
+
+// Parse JSON data
+const names = this.parseCharacterData(characterData);
+```
+
+</TabItem>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 Game.attributes.add('characterData', {
     type: 'asset',
@@ -42,12 +81,38 @@ var characterData = this.characterData.resource;
 var names = this.parseCharacterData(characterData);
 ```
 
+</TabItem>
+</Tabs>
+
 You can see in the code above that all you need to do to load JSON data from an asset in your project is to use a Script Attribute of type 'asset' or to retrieve the asset from the asset registry, then access the `resource` property. For an asset of type `json` the data will already be parsed into a standard javascript object when you access the `resource` property.
 
 Once you have the javascript object you can access the data as normal. For example, looping through properties as in `parseCharacterData`.
 
 ## Loading JSON from a remote server
 
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem  value="esm" label="ESM">
+
+```javascript
+async function loadJsonFromRemote(url, callback) {
+    const res = await fetch(url);
+    const json = await res.json();
+    callback(json);
+}
+
+//...
+
+// load JSON from a remote server
+loadJsonFromRemote("https://api.github.com/", (data) => {
+    // display JSON data from remote server
+    el = document.querySelector("#xhr-json");
+    el.textContent = JSON.stringify(data, null, 4);
+});
+```
+
+</TabItem>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 Game.prototype.loadJsonFromRemote = function (url, callback) {
     var xhr = new XMLHttpRequest();
@@ -68,6 +133,9 @@ this.loadJsonFromRemote("https://api.github.com/", function (data) {
 });
 ```
 
+</TabItem>
+</Tabs>
+
 In this code we are using the XMLHttpRequest object (which is part of the standard web browser API) to request JSON data from a URL, in this case the Github API.
 
 After receiving the `"load"` event we parse the JSON data using `JSON.parse` (another part of the standard web browser API) and return the data via the `callback` function.
@@ -76,9 +144,6 @@ Note, that the call to `loadJsonFromRemote` is **asynchronous**.
 
 Here is the full code listing:
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 <Tabs defaultValue="classic" groupId='script-code'>
 <TabItem  value="esm" label="ESM">