Kiosk update

#43 Add cancel button to main product screen
#42 Font / lettering changes for Product Screen // USD font change, Products remaining font change, Extra space for variant text, View full description, Left align “By proceeding to commit”
#41 Increase visibility for links //added blue font as suggested in round 1 of changes
#40 Integrate animation for transaction in process screen
#34 Do not reload images that have already been loaded (reuse the same Texture instance) //images only load once
#32 Revisit the Copy on the more info panel
#26 Add a loading message to display when images are not loaded on kiosk
#22 Non Token Gating Rendering // Kiosk Popup complete, still need to do product screen

library/docs/boson-dcl.kiosk.md

@@ -50,6 +50,7 @@ export declare class Kiosk extends Entity
 |  [specialEffects](./boson-dcl.kiosk.specialeffects.md) |  | Entity |  |
 |  [uiOpen](./boson-dcl.kiosk.uiopen.md) |  | boolean |  |
 |  [variations](./boson-dcl.kiosk.variations.md) |  | Variation\[\] |  |
+|  [waveAnimationSystem](./boson-dcl.kiosk.waveanimationsystem.md) | <code>static</code> | WaveAnimationSystem \| undefined |  |
 
 ## Methods
 

library/docs/boson-dcl.kiosk.waveanimationsystem.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@bosonprotocol/boson-dcl](./boson-dcl.md) &gt; [Kiosk](./boson-dcl.kiosk.md) &gt; [waveAnimationSystem](./boson-dcl.kiosk.waveanimationsystem.md)
+
+## Kiosk.waveAnimationSystem property
+
+<b>Signature:</b>
+
+```typescript
+static waveAnimationSystem: WaveAnimationSystem | undefined;
+```

library/etc/boson-dcl.api.md

@@ -267,6 +267,10 @@ export class Kiosk extends Entity {
     updateProductPrice(): void;
     // (undocumented)
     variations: Variation[];
+    // Warning: (ae-forgotten-export) The symbol "WaveAnimationSystem" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    static waveAnimationSystem: WaveAnimationSystem | undefined;
 }
 
 export { MetaTxConfig }

library/src/scene/kiosk/UIComponents/howItWorksLink.ts

@@ -12,9 +12,9 @@ export class HowItWorksLink extends Entity {
     this.howDoesItWorkPage = new HowDoesItWork(_kiosk, _parent);
 
     this.viewHowItWorksText = new TextShape("How it works?");
-    this.viewHowItWorksText.color = Color3.Purple();
+    this.viewHowItWorksText.color = Color3.Blue();
     this.viewHowItWorksText.fontSize = 4;
-    this.viewHowItWorksText.outlineColor = Color3.Purple();
+    this.viewHowItWorksText.outlineColor = Color3.Blue();
     this.viewHowItWorksText.outlineWidth = 0.25;
     this.addComponent(this.viewHowItWorksText);
     this.setParent(_parent);

library/src/scene/kiosk/UIComponents/lockComponent.ts

@@ -8,7 +8,6 @@ export class LockComponent {
   // artist image for lock
   artistEntity: Entity = new Entity();
   artistMat: Material = new Material();
-  artistTexture: Texture | undefined;
 
   // Artist background in case it has alpha
   artistFillEntity: Entity = new Entity();
@@ -87,6 +86,7 @@ export class LockComponent {
           _transform.position.y,
           _transform.position.z - 0.0008
         ),
+        rotation: Quaternion.Euler(180,180,0),
         scale: _transform.scale,
       })
     );
@@ -114,63 +114,66 @@ export class LockComponent {
       }
       if (targetImage) {
         if (targetImage.url != undefined) {
-          this.artistTexture = Helper.getIPFSImageTexture(targetImage.url);
-          this.artistMat.albedoTexture = this.artistTexture;
-          this.artistMat.emissiveIntensity = 1;
-          this.artistMat.emissiveColor = Color3.White();
-          this.artistMat.emissiveTexture = this.artistTexture;
-          this.artistMat.alphaTexture = new Texture(
-            "images/kiosk/ui/gate_mask.png"
-          );
-          this.artistMat.transparencyMode = 2;
-          this.artistEntity.addComponent(this.artistMat);
+          Helper.getIPFSImageTexture(targetImage.url).then((texture:Texture)=>{
+            this.artistMat.albedoTexture = texture;
+            this.artistMat.emissiveIntensity = 1;
+            this.artistMat.emissiveColor = Color3.White();
+            this.artistMat.emissiveTexture = texture;
+            this.artistMat.alphaTexture = new Texture(
+              "images/kiosk/ui/gate_mask.png"
+            );
+            this.artistMat.transparencyMode = 2;
+            this.artistEntity.addComponent(this.artistMat);
+          })
+
           if (targetImage.height && targetImage.width) {
             this.artistEntity.getComponent(Transform).scale.y =
               this.artistEntity.getComponent(Transform).scale.x *
               (targetImage.height / targetImage.width);
           }
         }
       }
-    }
 
-    //Lock
-    this.backgroundEntity = new Entity();
-    this.backgroundEntity.addComponent(new PlaneShape());
-    this.backgroundEntity.setParent(_parent);
-    this.backgroundEntity.addComponent(
-      new Transform({
-        position: new Vector3(
-          _transform.position.x,
-          _transform.position.y,
-          _transform.position.z - 0.0
-        ),
-        rotation: _transform.rotation,
-        scale: new Vector3(
-          _transform.scale.x * 1.2,
-          _transform.scale.y * 1.2,
-          0.01
-        ),
-      })
-    );
+      //Lock
+      this.backgroundEntity = new Entity();
+      this.backgroundEntity.addComponent(new PlaneShape());
+      this.backgroundEntity.setParent(_parent);
+      this.backgroundEntity.addComponent(
+        new Transform({
+          position: new Vector3(
+            _transform.position.x,
+            _transform.position.y,
+            _transform.position.z - 0.0
+          ),
+          rotation: _transform.rotation,
+          scale: new Vector3(
+            _transform.scale.x * 1.2,
+            _transform.scale.y * 1.2,
+            0.01
+          ),
+        })
+      );
 
-    this.lockMaterial = new Material();
-    this.lockTextureUnlocked = new Texture(
-      "images/kiosk/ui/gate_lock_tick.png"
-    );
-    this.lockTextureLocked = new Texture("images/kiosk/ui/gate_lock_cross.png");
+      this.lockMaterial = new Material();
+      this.lockTextureUnlocked = new Texture(
+        "images/kiosk/ui/gate_lock_tick.png"
+      );
+      this.lockTextureLocked = new Texture(
+        "images/kiosk/ui/gate_lock_cross.png"
+      );
 
-    this.lockMaterial.albedoTexture = this.lockTextureLocked;
-    this.lockMaterial.emissiveIntensity = 0.25;
-    this.lockMaterial.emissiveColor = Color3.White();
-    this.lockMaterial.emissiveTexture = this.lockTextureLocked;
-    this.lockMaterial.transparencyMode = 2;
-    this.backgroundEntity.addComponent(this.lockMaterial);
-    this.foregroundEntity.addComponent(this.lockMaterial);
+      this.lockMaterial.albedoTexture = this.lockTextureLocked;
+      this.lockMaterial.emissiveIntensity = 0.25;
+      this.lockMaterial.emissiveColor = Color3.White();
+      this.lockMaterial.emissiveTexture = this.lockTextureLocked;
+      this.lockMaterial.transparencyMode = 2;
+      this.backgroundEntity.addComponent(this.lockMaterial);
+      this.foregroundEntity.addComponent(this.lockMaterial);
 
-    this.setLock();
+      this.setLock();
+    }
   }
-
-  show() {
+  public show(): void {
     Helper.showAllEntities([
       this.artistEntity,
       this.backgroundEntity,
@@ -179,7 +182,7 @@ export class LockComponent {
     ]);
   }
 
-  hide() {
+  public hide(): void {
     Helper.hideAllEntities([
       this.artistEntity,
       this.backgroundEntity,
@@ -188,7 +191,7 @@ export class LockComponent {
     ]);
   }
 
-  setLock() {
+  public setLock(): void {
     if (this.locked) {
       this.lockMaterial.albedoTexture = this.lockTextureLocked;
       this.lockMaterial.emissiveTexture = this.lockTextureLocked;

library/src/scene/kiosk/UIComponents/variationComponent.ts

@@ -61,9 +61,6 @@ export class VariationComponent {
   option1VariationIndex = 0;
   option2VariationIndex = 0;
 
-  // debugName: Entity = new Entity();
-  // debugNameText: TextShape | undefined;
-
   // Options
   variationPrevMat: Material = new Material();
   variationPrevTexture: Texture | undefined;
@@ -179,7 +176,7 @@ export class VariationComponent {
     this.option1VariationTypeName.setParent(_parent);
     this.option1VariationTypeName.addComponent(
       new Transform({
-        position: new Vector3(0.32, 0.5, -0.002),
+        position: new Vector3(0.32, 0.52, -0.002),
         scale: new Vector3(0.05, 0.05, 0.05),
         rotation: Quaternion.Euler(0, 0, 0),
       })
@@ -255,37 +252,18 @@ export class VariationComponent {
     this.option2VariationTypeName.setParent(_parent);
     this.option2VariationTypeName.addComponent(
       new Transform({
-        position: new Vector3(0.82, 0.5, -0.002),
+        position: new Vector3(0.82, 0.52, -0.002),
         scale: new Vector3(0.05, 0.05, 0.05),
         rotation: Quaternion.Euler(0, 0, 0),
       })
     );
-
-    // // Debug text
-    // this.debugNameText = new TextShape("Loading");
-    // this.debugNameText.color = Color3.Black();
-    // this.debugNameText.fontSize = 16;
-    // this.debugNameText.hTextAlign = "left";
-    // this.debugName.addComponent(this.debugNameText);
-    // this.debugName.setParent(_parent);
-    // this.debugName.addComponent(
-    //   new Transform({
-    //     position: new Vector3(0.5, 0.95, -0.002),
-    //     scale: new Vector3(0.05, 0.05, 0.05),
-    //     rotation: Quaternion.Euler(0, 0, 0),
-    //   })
-    // );
   }
 
   show() {
     this.setValues(1);
     this.setImageArrowVisibility();
   }
 
-  hide() {
-    // implement
-  }
-
   calculateOptions() {
     this.kiosk.variations.forEach((variation) => {
       // Option 1
@@ -375,11 +353,7 @@ export class VariationComponent {
       }
     }
 
-    // for debugging
     this.kiosk.currentOfferID = variation.offerID.toString();
-    //if (this.debugNameText != undefined) {
-    //  this.debugNameText.value = "Offer ID:" + this.kiosk.currentOfferID;
-    //}
 
     this.option1VariationOptionNameText.value = variation.option1.option;
     this.option2VariationOptionNameText.value = variation.option2.option;

library/src/scene/kiosk/animation/waveAnimationSystem.ts

@@ -0,0 +1,104 @@
+export class Wave extends Entity {
+
+    material:Material
+    texture:Texture
+    scrollX:number = 0
+    speed: number = 0
+
+    constructor(_texturePath:string,_parent:Entity,_speed:number, _startOffset:number){
+        super()
+        this.scrollX = _startOffset
+        this.texture = new Texture(_texturePath,{hasAlpha: true, wrap:1})
+        this.material = new Material()
+        this.material.albedoTexture = this.texture
+        this.material.emissiveColor = Color3.White()
+        this.material.emissiveTexture = this.texture
+        this.material.emissiveIntensity = 0.3
+        this.material.roughness = 1
+        this.material.transparencyMode = 2
+
+        this.setParent(_parent)
+        this.addComponent(new PlaneShape())
+        this.addComponent(this.material)
+
+        this.speed = _speed
+    }
+
+    update(_dt:number){
+        this.scrollX+=_dt*this.speed
+       if(this.scrollX>1){
+           this.scrollX -=1
+       }
+        this.getComponent(PlaneShape).uvs = this.setUVs(this.scrollX,0)
+    }
+
+    setUVs(scrollX : number, scrollY : number) {
+        return [
+            // North side of unrortated plane
+            0 + scrollX, //lower-left corner
+            0 + scrollY,
+
+            1 + scrollX, //lower-right corner
+            0 + scrollY,
+
+            1 + scrollX, //upper-right corner
+            1 + scrollY,
+
+            0 + scrollX, //upper left-corner
+            1 + scrollY,
+
+            // South side of unrortated plane
+            1 + scrollX, // lower-right corner
+            0 + scrollY,
+
+            0 + scrollX, // lower-left corner
+            0+ scrollY,
+
+            0 + scrollX, // upper-left corner
+            1 + scrollY,
+
+            1 + scrollX, // upper-right corner
+            1 + scrollY,
+        ]
+        }
+}
+
+export class WaveAnimationSystem implements ISystem{    
+    waves:Wave[] = []
+
+    // wave parent
+    waveParent:Entity = new Entity()
+
+    constructor(){
+        this.waveParent.addComponent(new Transform({
+            position: new Vector3(0,-0.2,-0.05),
+            rotation: Quaternion.Euler(0,0,0),
+            scale: new Vector3(2,1,1)
+        }))
+
+        this.waves.push(new Wave("images/kiosk/ui/line1.png", this.waveParent, 0.8,1.5))
+        this.waves.push(new Wave("images/kiosk/ui/line2.png", this.waveParent, 0.6,1.1))
+        this.waves.push(new Wave("images/kiosk/ui/line3.png", this.waveParent, 0.5,1.3))
+        this.waves.push(new Wave("images/kiosk/ui/line4.png", this.waveParent, 0.5,0.9))
+
+    }
+
+    setNewParent(_parent:Entity){
+        this.waveParent.setParent(_parent)
+        if(!this.waveParent.isAddedToEngine()){
+            engine.addEntity(this.waveParent)
+        }
+    }
+
+    hide(){
+        if(this.waveParent.isAddedToEngine()){
+            engine.removeEntity(this.waveParent)
+        }
+    }
+
+    update(dt: number): void {
+        this.waves.forEach(wave => {
+            wave.update(dt)
+        });
+    }
+}