135 council

.env.development

@@ -1,7 +1,8 @@
-VUE_APP_API_COSMOS=https://cardchain.crowdcontrol.network/cosmos
-VUE_APP_WS_TENDERMINT=wss://cardchain.crowdcontrol.network/tendermint/websocket
-VUE_APP_API_TENDERMINT=https://cardchain.crowdcontrol.network/tendermint/
-VUE_APP_FAUCET=https://cardchain.crowdcontrol.network/faucet/claimTokens
+#VUE_APP_API_COSMOS=https://cardchain.crowdcontrol.network/cosmos
+#VUE_APP_WS_TENDERMINT=wss://cardchain.crowdcontrol.network/tendermint/websocket
+#VUE_APP_API_TENDERMINT=https://cardchain.crowdcontrol.network/tendermint/
+#VUE_APP_FAUCET=https://cardchain.crowdcontrol.network/faucet/claimTokens
+
 VUE_APP_FAUCET_SITEKEY="ea68532a-a9e6-4f99-9361-db90a3071b72"
 VUE_APP_ADDRESS_PREFIX=cc
 VUE_APP_CHAIN_ID=Cardchain
@@ -10,12 +11,12 @@ VUE_APP_CARDIMG_MAXKB=500
 VUE_APP_UCREDITS_FACTOR=1000000
 NODE_VERSION=v12.18.3
 
-VUE_APP_API_COSMOS_FALLBACK=https://cardchain2.crowdcontrol.network/cosmos
-VUE_APP_WS_TENDERMINT_FALLBACK=wss://cardchain2.crowdcontrol.network/tendermint/websocket
-VUE_APP_API_TENDERMINT_FALLBACK=https://cardchain2.crowdcontrol.network/tendermint/
-VUE_APP_FAUCET_FALLBACK=https://cardchain2.crowdcontrol.network/faucet/claimTokens
+#VUE_APP_API_COSMOS_FALLBACK=https://cardchain2.crowdcontrol.network/cosmos
+#VUE_APP_WS_TENDERMINT_FALLBACK=wss://cardchain2.crowdcontrol.network/tendermint/websocket
+#VUE_APP_API_TENDERMINT_FALLBACK=https://cardchain2.crowdcontrol.network/tendermint/
+#VUE_APP_FAUCET_FALLBACK=https://cardchain2.crowdcontrol.network/faucet/claimTokens
 
-#VUE_APP_API_COSMOS=http://localhost:1317
-#VUE_APP_WS_TENDERMINT=ws://localhost:26657/websocket
-#VUE_APP_API_TENDERMINT=http://localhost:26657
-#VUE_APP_FAUCET="http://localhost:4500/claimTokens"
+VUE_APP_API_COSMOS=http://localhost:1317
+VUE_APP_WS_TENDERMINT=ws://localhost:26657/websocket
+VUE_APP_API_TENDERMINT=http://localhost:26657
+VUE_APP_FAUCET="http://localhost:4500/claimTokens"

src/components/elements/CardComponent.vue

@@ -23116,13 +23116,14 @@ import * as R from 'ramda'
 //import * as svg1 from 'save-svg-as-png'
 import { icon } from '@/components/utils/utils.js'
 import { emptyCard } from '../utils/utils'
+import { Card } from "@/model/Card";
 
 export default {
   name: 'CardComponent',
   props: {
     model: {
-      type: Object,
-      default: emptyCard
+      type: Card,
+      default: new Card()
     },
     imageURL: {
       type: String,
@@ -23222,6 +23223,7 @@ export default {
     let firstLetterToLower = string => {
       return string[0].toLowerCase() + string.substring(1)
     }
+    console.log(this.model)
     this.model.Keywords.forEach(ability => {
       ability.forEach(keyword => {
         this.keywordDescriptions = R.concat(this.keywordDescriptions,

src/components/elements/CardCouncilVotingComponent.vue

@@ -0,0 +1,97 @@
+<template>
+  <div align="center">
+    <div class="voter ccbutton">
+      <br>
+      <h1>Card Council</h1>
+      <p>Peer-review new player cards.</p>
+      <br>
+      <council-component
+        :council-id="councilId"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CouncilComponent from "@/components/elements/CouncilComponent.vue";
+
+export default {
+  name: "CardCouncilVotingComponent",
+  components: { CouncilComponent },
+  data() {
+    return {
+      councilId: null,
+    };
+  },
+  watch: {
+    "$store.state.common.wallet.selectedAddress": function() {
+      if (this.$store.getters["getLoggedIn"]) {
+        this.init();
+      }
+    }
+  },
+  mounted() {
+    console.log("loggedin? ", this.$store.getters["getLoggedIn"]);
+    if (this.$store.getters["getLoggedIn"]) {
+      this.init();
+    } else {
+      this.notifyInfo("Not logged in", "You must login to be able to vote.");
+    }
+  },
+  methods: {
+    init() {
+      this.$cardChain.getUserInfo(this.$store.getters["common/wallet/address"])
+        .then(res => {
+          console.log(res)
+          if (["openCouncil", "startedCouncil"].includes(res.councilParticipation.status)) {
+            this.councilId = res.councilParticipation.council
+          }
+        })
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+
+.InfoContainer {
+  padding: 2em;
+  background-color: $main-color-c;
+  display: grid;
+  box-shadow: $border-thickness-bold * 1.5 $border-thickness-bold * 1.5 0 $minor-color-c;
+  grid-template-columns: repeat(auto-fit, minmax(15em, 25em));
+  grid-template-rows: auto;
+  grid-column-gap: 2rem;
+  grid-row-gap: 2rem;
+  width: max-content;
+  max-width: 100%;
+}
+
+.Info {
+  text-align: left;
+  width: 15em;
+  h3 {
+    color: black;
+  }
+}
+
+.ELement {
+  position: relative;
+  flex-grow: 1;
+  max-width: 25em;
+}
+
+.voter {
+  min-height: 10vh;
+}
+
+.FlavourText {
+  font-style: italic;
+}
+
+:deep(p) {
+  color: black;
+}
+
+</style>

src/components/elements/CouncilComponent.vue

@@ -0,0 +1,142 @@
+<template>
+  <div align="center">
+    <div class="InfoContainer">
+      <council-participant-component
+        v-if="councilId != null"
+        class="ELement Info"
+        :council="council"
+      />
+      <council-info-component
+        v-if="councilId != null"
+        class="ELement Info"
+        :council="council"
+      />
+      <info-component
+        v-if="councilId != null"
+        class="ELement Info"
+        :card="card"
+      />
+      <div
+        v-if="councilId != null"
+        class="ELement"
+      >
+        <CardComponent
+          :model="card"
+          :image-u-r-l="card.image"
+        />
+      </div>
+      <div
+        v-if="councilId == null"
+        class="ELement"
+      >
+        <img
+          style="max-width:25em;"
+          src="@/assets/icon/noCard.png"
+        >
+        <br><br>
+        <p>
+          It seams like you have voted on all cards you've encountered. Come back here, when you've played more matches.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CardComponent from "@/components/elements/CardComponent";
+import InfoComponent from "@/components/elements/VotingComponents/InfoComponent.vue";
+import CouncilParticipantComponent from "@/components/elements/VotingComponents/CouncilParticipantComponent.vue";
+import CouncilInfoComponent from "@/components/elements/VotingComponents/CouncilInfoComponent.vue";
+import { Council } from "@/model/Council";
+import { Card } from "@/model/Card";
+
+export default {
+  name: "CouncilComponent",
+  components: { InfoComponent, CardComponent, CouncilParticipantComponent, CouncilInfoComponent },
+  props: {
+    councilId: {
+      type: Number,
+      default() {
+        return null;
+      }
+    }
+  },
+  data() {
+    return {
+      council: new Council(),
+      card: new Card(),
+    };
+  },
+  watch: {
+    councilId: {
+      handler() {
+        this.init();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      if (this.councilId != null) {
+      this.$cardChain.getCouncil(this.councilId)
+        .then(res => {
+          this.council = res;
+          console.log("####", res)
+          this.$cardChain.getCard(this.council.cardId)
+          .then(res => {
+            this.card = res
+          })
+        });
+      }
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+
+.InfoContainer {
+  padding: 2em;
+  background-color: $main-color-c;
+  display: grid;
+  box-shadow: $border-thickness-bold * 1.5 $border-thickness-bold * 1.5 0 $minor-color-c;
+  grid-template-columns: repeat(auto-fit, minmax(15em, 25em));
+  grid-template-rows: auto;
+  grid-column-gap: 2rem;
+  grid-row-gap: 2rem;
+  width: max-content;
+  max-width: 100%;
+}
+
+.Info {
+  text-align: left;
+  width: 15em;
+
+  h3 {
+    color: black;
+  }
+}
+
+.ELement {
+  position: relative;
+  flex-grow: 1;
+  max-width: 25em;
+}
+
+.voter {
+  min-height: 10vh;
+}
+
+.FlavourText {
+  font-style: italic;
+}
+
+:deep(p) {
+  color: black;
+}
+
+</style>