ReadY for Review - Quadraticlands diplomacy (a medley of Aditya/Richard/Owocki Code)

app/assets/v2/js/pages/profile-trust.js

@@ -2076,6 +2076,77 @@ Vue.component('facebook-verify-modal', {
   }
 });
 
+Vue.component('qd-modal', {
+  delimiters: [ '[[', ']]' ],
+  data: function() {
+    return {
+      validationError: '',
+      forceStep: false,
+      awaitingResponse: false
+    };
+  },
+  props: {
+    showValidation: {
+      type: Boolean,
+      required: false,
+      'default': false
+    },
+    service: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    step() {
+      return this.forceStep || this.validationStep;
+    }
+  },
+  template: `
+    <b-modal id="twitter-modal" @hide="dismissVerification()" :visible="showValidation" size="lg" body-class="p-0" center hide-header hide-footer>
+      <template v-slot:default="{ hide }">
+        <div class="modal-content p-0">
+          <div class="top rounded-top p-2 text-center" style="background: #0e0333;">
+            <div class="w-100">
+              <button @click="dismissVerification()" type="button" class="close position-absolute mt-2 text-white" style="right: 1rem" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="bg-white d-flex mt-4 mx-auto p-1 rounded-circle" style="width: 74px; height: 74px;">
+              <img class="m-auto w-100" src="/static/v2/images/quadraticlands/mission/diplomacy.svg" alt="QL Diplomacy Logo">
+            </div>
+            <h3 class="text-white my-4"> Verify with Quadratic Diplomacy </h3>
+          </div>
+          <div class="font-smaller-1 line-height-3 spacer-px-4 spacer-px-lg-6 spacer-py-5">
+            <div class="mb-4 text-left">
+              <p class="mb-4 font-subheader text-left">
+                Use your GTC to strengthen Gitcoin Grants!
+              </p>
+              <p class="mb-4 font-subheader text-left">
+                WHY: The Foundation of Gitcoin Grants is Quadratic Funding, which is itself dependant upon sybil & fraud resistence.
+              </p>
+
+              <button @click="goToVerification" role="button" class="btn btn-primary mb-2 mt-5 px-5 float-right">
+                Verify Now
+              </button>
+            </div>
+          </div>
+        </div>
+      </template>
+    </b-modal>`,
+  methods: {
+    dismissVerification() {
+      this.$emit('modal-dismissed');
+      setTimeout(() => {
+        this.forceStep = false;
+      }, 1000);
+    },
+    goToVerification() {
+      window.open('/quadraticlands/mission/diplomacy', '_blank')
+      this.dismissVerification();
+    }
+  }
+});
+
 if (document.getElementById('gc-trust-manager-app')) {
 
   const trustManagerApp = new Vue({

app/assets/v2/js/quadraticlands/app.js

@@ -26,6 +26,14 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   }
 
+  // make noprovider icon also open the menue.
+  const noproviderIcon = document.getElementById('noproviderIcon');
+
+  noproviderIcon.addEventListener('click', () => {
+    walletProvider.classList.toggle('active');
+  });
+
+
   // inside the wallet menu i reused the .provider class
   // what was initial there to display all providers
   // now with other functions like "change wallet, pick wallet, disconnect"

app/assets/v2/js/quadraticlands/mission/diplomacy/hero.js

@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // random floor polygones coloring on diplomacy image
+  polygones = document.querySelectorAll('svg #hero polygon, svg #hero path');
+  polygones.forEach((p) => {
+    p.setAttribute('data-kinetics-attraction', '');
+    p.setAttribute('data-kinetics-attraction-chance', getRandomFloat(0.3, 1));
+    p.setAttribute('data-kinetics-attraction-force', getRandomFloat(0.7, 1.3));
+    p.setAttribute('data-kinetics-attraction-grow', getRandomInt(1, 4));
+    p.setAttribute('data-tone-click-random', '');
+    p.style.cursor = 'pointer';
+  });
+
+  initToneJs();
+  window.kinetics = new Kinetics();
+  window.kinetics.interactionHook();
+  last = 0;
+  animate_diplomacy();
+});
+
+function animate_diplomacy(now) {
+  if (!last || now - last >= 60) {
+    polygone = polygones[Math.floor(Math.random() * polygones.length)];
+    polygone.animate(
+      { fill: [ '#9760FF', '#FA72AF', '#7AFFF7', '#9760FF' ] },
+      {
+        duration: 500,
+        delay: 0,
+        iterations: 1
+      }
+    );
+
+    last = now;
+  }
+
+  requestAnimationFrame(animate_diplomacy);
+}

app/assets/v2/js/quadraticlands/mission/diplomacy/index.js

@@ -0,0 +1,22 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+  // create hyperlinks to rooms
+  rooms = document.querySelectorAll('[data-roomlink]');
+  rooms.forEach((room) => {
+    room.addEventListener('click', () => {
+      window.location.href = room.dataset.roomlink;
+    });
+  });
+
+  // show submit button on user input of create room input field
+  const create_room = document.getElementById('create_room');
+  const create_room_button = document.getElementById('create_room_button');
+
+  create_room.addEventListener('input', () => {
+    if (create_room.value == '') {
+      create_room_button.classList.add('disabled');
+    } else {
+      create_room_button.classList.remove('disabled');
+    }
+  });
+});