Feat/ms launch (#21)

* instructions

* instructions finished and many fixes

* enhance store vuex fetch

* frontend-common mixin and vuex

* drag n drop feedback

* fix MS

* fix MS

* same improvements on PP

* remove not used method

frontend-common/mixin/game.js

@@ -48,13 +48,12 @@ const mxGame = {
       "fetchRaffleDenomSplit"
     ]),
 
-    // TODO: fetchUser()
-
     async fetchOnce() {
       await this.initUser();
 
       await this.fetchGameConfig();
       await this.fetchGameState();
+      await this.fetchAllPlayersAllocations() // this is also included in the fetchInterval, we do it twice only the first App render
 
       // Init signer and querier
       if (this.userAddress) {
@@ -74,7 +73,12 @@ const mxGame = {
       await this.fetchRaffle()
       await this.fetchRaffleWinner()
       // TODO: await this.fetchRaffleDenomSplit()
-      await this.fetchGameActivity()
+      // try catch to ignore game activity errors
+      try {
+        this.fetchGameActivity()
+      } catch (e) {
+        console.log(e)
+      }
     },
 
     updateCurrentTime() {

frontend-common/store/index.js

@@ -3,8 +3,8 @@ import {AminoTypes} from "@cosmjs/stargate";
 import {CosmWasmClient, SigningCosmWasmClient} from "@cosmjs/cosmwasm-stargate";
 import {Registry} from "@cosmjs/proto-signing";
 import {cosmosAminoConverters, cosmosProtoRegistry, cosmwasmAminoConverters, cosmwasmProtoRegistry} from "osmojs";
-import mxChain from "../mixin/chain";
 import axios from "axios";
+import mxChain from "../mixin/chain";
 
 const mxChainUtils = {
   methods: mxChain.methods
@@ -21,7 +21,7 @@ export default createStore({
       address: null,
       balance: null,
       cw721balance: [],
-      allocations: [],
+      // allocations: [],
       reallocations: null
     },
 
@@ -53,9 +53,9 @@ export default createStore({
       return state.user.signer;
     },
 
-    userQuerier(state) {
-      return state.user.querier;
-    },
+    // userQuerier(state) {
+    //   return state.user.querier;
+    // },
 
     userAddress(state) {
       return state.user.address;
@@ -70,7 +70,9 @@ export default createStore({
     },
 
     playerAllocations(state) {
-      return state.user.allocations
+      // This is not a state per say, we want to match the addy by userAddy in the mega list
+      const foundAllocations = state.allPlayersAllocations.find(a => a[0] === state.user.address)
+      return foundAllocations ? foundAllocations[1].filter(allocation => allocation.amount !== "0") : []
     },
 
     playerReallocations(state) {
@@ -151,10 +153,6 @@ export default createStore({
       state.user.cw721balance = balance;
     },
 
-    setPlayerAllocations(state, allocations) {
-      state.user.allocations = allocations;
-    },
-
     setPlayerReallocations(state, reallocations) {
       state.user.reallocations = reallocations;
     },
@@ -215,13 +213,10 @@ export default createStore({
 
   actions: {
     async initUser({commit}) {
-      // TODO:
-      //  This should be separated. Or a user coming with locked wallet will get stuck on Loading.
-      //  Remove querier from here and create initSigner and initQuerier.
       const chainId = process.env.VUE_APP_CHAIN_ID;
 
       if (!window.keplr) {
-        alert("Please install keplr extension");
+        alert("Please install keplr extension")
       } else {
         await window.keplr.enable(chainId);
 
@@ -270,20 +265,6 @@ export default createStore({
       );
       commit("setUserBalance", mxChainUtils.methods.displayAmount(Number(balance.amount)));
 
-      // Player Allocations
-      const allocationsResponse = await state.user.querier.queryContractSmart(
-        process.env.VUE_APP_CONTRACT,
-        {
-          player_allocations: {
-            address: state.user.address
-          }
-        }
-      );
-      // TODO: This could be avoided in favor of allPlayersAllocation.find(address => this.user) (pseudo code)
-      // Filter out allocations where the amount is "0"
-      const filteredAllocations = allocationsResponse.allocations.filter(allocation => allocation.amount !== "0");
-      commit("setPlayerAllocations", filteredAllocations);
-
       // Player Reallocations
       const reallocationsResponse = await state.user.querier.queryContractSmart(
         process.env.VUE_APP_CONTRACT,

frontend-ms/src/components/Game/PotItemComponent.vue

@@ -15,7 +15,8 @@
 
     <div class="pot-item position-relative mb-3" @click="onPotClick(pot.pot_id)">
       <img class="pot-highlight-image w-100 position-absolute"
-           :class="utils.selectedPot === pot.pot_id ? 'd-block' : ''" :src="imagePotHighlight" alt="Pot Item"/>
+           :class="utils.selectedPot === pot.pot_id ? 'd-block highlight' : ''" :src="imagePotHighlight"
+           alt="Pot Item"/>
       <img class="pot-image w-100 position-relative" :src="currentPotImage" alt="Pot Item"/>
     </div>
 
@@ -25,20 +26,20 @@
 
     <div class="allocations card p-1" :data-pot-id="pot.pot_id">
       <draggable
-        v-model="allPotsAllocations"
-        group="allocations"
-        @start="onDragStart"
-        @end="onDragEnd"
-        item-key="key"
-        class="draggable-container"
+          v-model="allPotsAllocations"
+          group="allocations"
+          @start="onDragStart"
+          @end="onDragEnd"
+          item-key="key"
+          class="draggable-container"
       >
         <template #item="{ element }">
-          <div class="draggable-item bg-primary" v-if="Number(element.amount)">
+          <div :class="['draggable-item', drag && 'dragged']" v-if="Number(element.amount)">
             <div class="draggable-item-text">
               {{
                 !drag
-                  ? displayAmount(element.amount)
-                  : displayAmount(element.amount * (1 - gameConfig.fee_reallocation / 100))
+                    ? displayAmount(element.amount)
+                    : displayAmount(element.amount * (1 - gameConfig.fee_reallocation / 100))
               }}
               <CoinComponent class="d-inline"/>
             </div>
@@ -52,7 +53,6 @@
   </div>
 </template>
 
-
 <script>
 import {mapGetters, mapMutations} from "vuex";
 import mxPot from "../../../../frontend-common/mixin/pot";
@@ -98,11 +98,11 @@ export default {
       // Including only the allocation for this specific pot
       const allocationForThisPot = this.playerAllocations.find(a => a.pot_id === this.pot.pot_id);
       return allocationForThisPot
-        ? [{
-          key: `allocation-${this.pot.pot_id}`,
-          amount: allocationForThisPot.amount,
-        }]
-        : [];
+          ? [{
+            key: `allocation-${this.pot.pot_id}`,
+            amount: allocationForThisPot.amount,
+          }]
+          : [];
     },
 
     currentPotImage() {
@@ -145,27 +145,44 @@ export default {
     },
 
     onDragStart() {
-      this.drag = true
+      this.drag = true;
+      const fromPotId = this.pot.pot_id;
+
+      const originalAmount = this.allPotsAllocations[0]?.amount || 0;
+      const newAmount = originalAmount * (1 - this.gameConfig.fee_reallocation / 100);
+      this.$emit('dragStateChange', { dragging: true, fromPotId, originalAmount, newAmount });
     },
 
     onDragEnd(event) {
+      this.drag = false;
+
       const fromPotId = this.pot.pot_id;
 
       // Retrieve the pot_id from the new container after dragging ends
       const toPotElement = event.to.closest('.allocations');
       const toPotId = toPotElement ? Number(toPotElement.dataset.potId) : null;
-      if (!toPotId) throw new Error("Something went wrong.")
-      this.drag = false
+      if (!toPotId) throw new Error("Something went wrong.");
 
-      this.$emit('endReallocation', {fromPotId, toPotId});
+      const originalAmount = this.allPotsAllocations[0]?.amount || 0;
+      const newAmount = originalAmount * (1 - this.gameConfig.fee_reallocation / 100);
+
+      this.$emit('dragStateChange', { dragging: false, fromPotId, originalAmount, newAmount }); // just for ui feedback to user
+      this.$emit('endReallocation', { fromPotId, toPotId }); // to cast tx
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+@import "@/assets/style";
+
+.pot-highlight-image.highlight {
+  opacity: 1;
+  transform: scale(1.15);
+}
+
 .pot-item:hover {
-  .pot-highlight-image {
+  .pot-highlight-image:not(.highlight) {
     opacity: 1;
     transform: scale(1.1);
   }
@@ -187,6 +204,7 @@ export default {
   min-height: 2em;
 
   .draggable-item {
+    background-color: $pp-color-5;
     min-height: 2em;
 
     .draggable-item-text {

frontend-ms/src/components/Game/PotsComponent.vue

@@ -1,10 +1,23 @@
 <template>
   <div class="pots-component position-relative">
     <div class="row justify-content-center">
-      <PotItemComponent :pot="pot" v-for="pot in pots" :key="pot.id" @endReallocation="onReallocateTokens"/>
+      <PotItemComponent
+          :pot="pot"
+          v-for="pot in pots"
+          :key="pot.id"
+          @endReallocation="onReallocateTokens"
+          @dragStateChange="onDragStateChange"
+      />
 
-      <div v-if="userAddress" class=" mt-3">
-        <p class="text-center">You have reallocated funds {{playerReallocations}} out of the {{gameConfig.reallocations_limit}} times allowed.</p>
+      <div v-if="userAddress" class="mt-3 text-center">
+        <p v-if="dragging">
+          You are reallocating {{ displayAmount(dragInfo.originalAmount)}} <CoinComponent/> <u>from the {{ getPotName(dragInfo.fromPotId) }} Pot</u><br>
+          A fee of {{ gameConfig.fee }}% will be applied, so <u>you will move {{ displayAmount(dragInfo.newAmount) }} <CoinComponent/></u>
+        </p>
+        <p v-else>
+          Allocations can be dragged and dropped between pots<br>
+          You have reallocated <u>{{ playerReallocations }} out of {{ gameConfig.reallocations_limit }}</u> times allowed
+        </p>
       </div>
     </div>
   </div>
@@ -16,13 +29,26 @@ import PotItemComponent from "@/components/Game/PotItemComponent.vue";
 import mxToast from "../../../../frontend-common/mixin/toast";
 import mxChain from "../../../../frontend-common/mixin/chain";
 import mxGame from "../../../../frontend-common/mixin/game";
+import CoinComponent from "@/components/Common/CoinComponent.vue";
+import mxPot from "../../../../frontend-common/mixin/pot";
 
 export default {
   name: "PotsComponent",
 
-  mixins: [mxChain, mxToast, mxGame],
+  mixins: [mxChain, mxToast, mxGame, mxPot],
 
-  components: {PotItemComponent},
+  components: {CoinComponent, PotItemComponent},
+
+  data() {
+    return {
+      dragging: false,
+      dragInfo: {
+        fromPotId: null,
+        originalAmount: 0,
+        newAmount: 0,
+      }
+    }
+  },
 
   computed: {
     ...mapGetters(['pots', "playerReallocations", "userAddress", "gameConfig"]),
@@ -46,6 +72,11 @@ export default {
         this.toast.error(`${this.cleanErrorMessage(e.message)}`)
       }
       this.isBusy = false
+    },
+
+    onDragStateChange(dragState) {
+      this.dragging = dragState.dragging;
+      this.dragInfo = { ...this.dragInfo, ...dragState };
     }
   }
 };