Merge pull request #12315 from zfox23/commerce_SendMoneyNearbyParticle

Commerce: Send Money Nearby particle effect!

interface/resources/qml/hifi/commerce/wallet/sendMoney/SendMoney.qml

@@ -58,6 +58,9 @@ Item {
 
             if (result.status === 'success') {
                 root.nextActiveView = 'paymentSuccess';
+                if (sendPubliclyCheckbox.checked && sendMoneyStep.referrer === "nearby") {
+                    sendSignalToWallet({method: 'sendMoney_sendPublicly', recipient: sendMoneyStep.selectedRecipientNodeID, amount: parseInt(amountTextField.text)});
+                }
             } else {
                 root.nextActiveView = 'paymentFailure';
             }
@@ -104,6 +107,12 @@ Item {
         }
     }
 
+    HifiCommerceCommon.CommerceLightbox {
+        id: lightboxPopup;
+        visible: false;
+        anchors.fill: parent;
+    }
+
     // Send Money Home BEGIN
     Item {
         id: sendMoneyHome;
@@ -921,7 +930,7 @@ Item {
                 id: optionalMessage;
                 property int maximumLength: 72;
                 property string previousText: text;
-                placeholderText: "<i>Optional Message (" + maximumLength + " character limit)</i>";
+                placeholderText: "<i>Optional Public Message (" + maximumLength + " character limit)</i>";
                 font.family: firaSansSemiBold.name;
                 font.pixelSize: 20;
                 // Anchors
@@ -971,16 +980,54 @@ Item {
 
         HifiControlsUit.CheckBox {
             id: sendPubliclyCheckbox;
-            visible: false; // FIXME ONCE PARTICLE EFFECTS ARE IN
-            text: "Send Publicly"
+            visible: sendMoneyStep.referrer === "nearby";
+            checked: Settings.getValue("sendMoneyNearbyPublicly", true);
+            text: "Show Effect"
             // Anchors
             anchors.top: messageContainer.bottom;
             anchors.topMargin: 16;
             anchors.left: parent.left;
             anchors.leftMargin: 20;
-            anchors.right: parent.right;
-            anchors.rightMargin: 16;
-            boxSize: 24;
+            width: 110;
+            boxSize: 28;
+            onCheckedChanged: {
+                Settings.setValue("sendMoneyNearbyPublicly", checked);
+            }
+        }
+        RalewaySemiBold {
+            id: sendPubliclyCheckboxHelp;
+            visible: sendPubliclyCheckbox.visible;
+            text: "[?]";
+            // Anchors
+            anchors.left: sendPubliclyCheckbox.right;
+            anchors.leftMargin: 8;
+            anchors.verticalCenter: sendPubliclyCheckbox.verticalCenter;
+            height: 30;
+            width: paintedWidth;
+            // Text size
+            size: 18;
+            // Style
+            color: hifi.colors.blueAccent;
+            MouseArea {
+                enabled: sendPubliclyCheckboxHelp.visible;
+                anchors.fill: parent;
+                hoverEnabled: true;
+                onEntered: {
+                    parent.color = hifi.colors.blueHighlight;
+                }
+                onExited: {
+                    parent.color = hifi.colors.blueAccent;
+                }
+                onClicked: {
+                    lightboxPopup.titleText = "Send Money Effect";
+                    lightboxPopup.bodyImageSource = "../wallet/sendMoney/images/send-money-effect-sm.jpg"; // Path relative to CommerceLightbox.qml
+                    lightboxPopup.bodyText = "Enabling this option will create a particle effect between you and " +
+                        "your recipient that is visible to everyone nearby.";
+                    lightboxPopup.button1text = "CLOSE";
+                    lightboxPopup.button1method = "root.visible = false;"
+                    lightboxPopup.visible = true;
+                }
+            }
         }
 
         Item {
@@ -1538,6 +1585,8 @@ Item {
         sendMoneyStep.selectedRecipientProfilePic = "";
         amountTextField.text = "";
         optionalMessage.text = "";
+        sendPubliclyCheckbox.checked = Settings.getValue("sendMoneyNearbyPublicly", true);
+        sendMoneyStep.referrer = "";
     }
 
     //

scripts/system/commerce/wallet.js

@@ -527,6 +527,80 @@
     //
     //***********************************************
 
+    var sendMoneyRecipient;
+    var sendMoneyParticleEffectUpdateTimer;
+    var particleEffectTimestamp;
+    var sendMoneyParticleEffect;
+    var SEND_MONEY_PARTICLE_TIMER_UPDATE = 250;
+    var SEND_MONEY_PARTICLE_EMITTING_DURATION = 3000;
+    var SEND_MONEY_PARTICLE_LIFETIME_SECONDS = 8;
+    var SEND_MONEY_PARTICLE_PROPERTIES = {
+        accelerationSpread: { x: 0, y: 0, z: 0 },
+        alpha: 1,
+        alphaFinish: 1,
+        alphaSpread: 0,
+        alphaStart: 1,
+        azimuthFinish: 0,
+        azimuthStart: -6,
+        color: { red: 143, green: 5, blue: 255 },
+        colorFinish: { red: 255, green: 0, blue: 204 },
+        colorSpread: { red: 0, green: 0, blue: 0 },
+        colorStart: { red: 0, green: 136, blue: 255 },
+        emitAcceleration: { x: 0, y: 0, z: 0 }, // Immediately gets updated to be accurate
+        emitDimensions: { x: 0, y: 0, z: 0 },
+        emitOrientation: { x: 0, y: 0, z: 0 },
+        emitRate: 4,
+        emitSpeed: 2.1,
+        emitterShouldTrail: true,
+        isEmitting: 1,
+        lifespan: SEND_MONEY_PARTICLE_LIFETIME_SECONDS + 1, // Immediately gets updated to be accurate
+        lifetime: SEND_MONEY_PARTICLE_LIFETIME_SECONDS + 1,
+        maxParticles: 20,
+        name: 'hfc-particles',
+        particleRadius: 0.2,
+        polarFinish: 0,
+        polarStart: 0,
+        radiusFinish: 0.05,
+        radiusSpread: 0,
+        radiusStart: 0.2,
+        speedSpread: 0,
+        textures: "http://hifi-content.s3.amazonaws.com/alan/dev/Particles/Bokeh-Particle-HFC.png",
+        type: 'ParticleEffect'
+    };
+
+    function updateSendMoneyParticleEffect() {
+        var timestampNow = Date.now();
+        if ((timestampNow - particleEffectTimestamp) > (SEND_MONEY_PARTICLE_LIFETIME_SECONDS * 1000)) {
+            deleteSendMoneyParticleEffect();
+            return;
+        } else if ((timestampNow - particleEffectTimestamp) > SEND_MONEY_PARTICLE_EMITTING_DURATION) {
+            Entities.editEntity(sendMoneyParticleEffect, {
+                isEmitting: 0
+            });
+        } else if (sendMoneyParticleEffect) {
+            var recipientPosition = AvatarList.getAvatar(sendMoneyRecipient).position;
+            var distance = Vec3.distance(recipientPosition, MyAvatar.position);
+            var accel = Vec3.subtract(recipientPosition, MyAvatar.position);
+            accel.y -= 3.0;
+            var life = Math.sqrt(2 * distance / Vec3.length(accel));
+            Entities.editEntity(sendMoneyParticleEffect, {
+                emitAcceleration: accel,
+                lifespan: life
+            });
+        }
+    }
+
+    function deleteSendMoneyParticleEffect() {
+        if (sendMoneyParticleEffectUpdateTimer) {
+            Script.clearInterval(sendMoneyParticleEffectUpdateTimer);
+            sendMoneyParticleEffectUpdateTimer = null;
+        }
+        if (sendMoneyParticleEffect) {
+            sendMoneyParticleEffect = Entities.deleteEntity(sendMoneyParticleEffect);
+        }
+        sendMoneyRecipient = null;
+    }
+
     // Function Name: fromQml()
     //
     // Description:
@@ -534,6 +608,7 @@
     //    in the format "{method, params}", like json-rpc. See also sendToQml().
     var isHmdPreviewDisabled = true;
     var MARKETPLACES_INJECT_SCRIPT_URL = Script.resolvePath("../html/js/marketplacesInject.js");
+
     function fromQml(message) {
         switch (message.method) {
             case 'passphrasePopup_cancelClicked':
@@ -605,6 +680,19 @@
                 }
                 removeOverlays();
                 break;
+            case 'sendMoney_sendPublicly':
+                deleteSendMoneyParticleEffect();
+                sendMoneyRecipient = message.recipient;
+                var amount = message.amount;
+                var props = SEND_MONEY_PARTICLE_PROPERTIES;
+                props.parentID = MyAvatar.sessionUUID;
+                props.position = MyAvatar.position;
+                props.position.y += 0.2;
+                sendMoneyParticleEffect = Entities.addEntity(props, true);
+                particleEffectTimestamp = Date.now();
+                updateSendMoneyParticleEffect();
+                sendMoneyParticleEffectUpdateTimer = Script.setInterval(updateSendMoneyParticleEffect, SEND_MONEY_PARTICLE_TIMER_UPDATE);
+                break;
             default:
                 print('Unrecognized message from QML:', JSON.stringify(message));
         }
@@ -706,6 +794,7 @@
     function shutdown() {
         button.clicked.disconnect(onButtonClicked);
         tablet.removeButton(button);
+        deleteSendMoneyParticleEffect();
         if (tablet) {
             tablet.screenChanged.disconnect(onTabletScreenChanged);
             if (onWalletScreen) {

scripts/system/marketplaces/marketplaces.js

@@ -578,6 +578,7 @@ var selectionDisplay = null; // for gridTool.js to ignore
             case 'refreshConnections':
             case 'enable_ChooseRecipientNearbyMode':
             case 'disable_ChooseRecipientNearbyMode':
+            case 'sendMoney_sendPublicly':
                 // NOP
                 break;
             default: