From 24d4e8c81f51c03551d05fdb4c38faa267d36e09 Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Tue, 26 Dec 2023 16:07:08 +0100
Subject: [PATCH 01/12] Added login comp and login page

---
 src/components/elements/LoginComponent.vue | 12 ++++++++++++
 src/components/partials/PageMenu.vue       |  7 ++-----
 src/layouts/AppLayout.vue                  |  2 +-
 src/router/index.ts                        |  7 +++++++
 src/views/LoginPage.vue                    | 11 +++++++++++
 5 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 src/components/elements/LoginComponent.vue
 create mode 100644 src/views/LoginPage.vue

diff --git a/src/components/elements/LoginComponent.vue b/src/components/elements/LoginComponent.vue
new file mode 100644
index 00000000..c5f5bcf1
--- /dev/null
+++ b/src/components/elements/LoginComponent.vue
@@ -0,0 +1,12 @@
+<template>
+  <router-link to="login" class="my-auto">
+    <button class="text-white font-bold uppercase flex hover:underline">
+      <img class="h-8 pr-4" :src="Profile" alt="CC logo" />
+      <a class="my-auto">Login / Sign up</a>
+    </button>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import Profile from "@/assets/figma/Profile.png";
+</script>
diff --git a/src/components/partials/PageMenu.vue b/src/components/partials/PageMenu.vue
index afc49934..bff29307 100644
--- a/src/components/partials/PageMenu.vue
+++ b/src/components/partials/PageMenu.vue
@@ -9,10 +9,7 @@
         >Download Gameclient</RouterCCButton
       >
     </div>
-    <button class="my-auto text-white font-bold uppercase flex hover:underline">
-      <img class="h-8 pr-4" :src="Profile" alt="CC logo" />
-      <a class="my-auto">Login / Sign up</a>
-    </button>
+    <LoginComponent/>
     <button class="my-auto" @click="toggleBar">
       <img class="h-14 md:hidden" :src="Menu" alt="Menu button" />
     </button>
@@ -42,11 +39,11 @@
 
 <script setup lang="ts">
 import CCLogo from "@/assets/figma/CCLogo.png";
-import Profile from "@/assets/figma/Profile.png";
 import Menu from "@/assets/figma/Menu.svg";
 import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 import { reactive } from "vue";
 import RouterCCButton from "@/components/elements/CCButton/RouterCCButton.vue";
+import LoginComponent from "@/components/elements/LoginComponent.vue";
 
 type NavigationElement = {
   routeName: string;
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index a121ce5f..78328953 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -3,7 +3,7 @@
     <PageHeader />
     <PageMenu />
     <main>
-      <div class="footer__content">
+      <div>
         <router-view />
       </div>
     </main>
diff --git a/src/router/index.ts b/src/router/index.ts
index 2202d04f..1a4f7e57 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -14,6 +14,7 @@ const UserView = () => import('@/views/UserView.vue')
 const CardView = () => import('@/views/AdvancedCardViewPage.vue')
 const GameclientAuthz = () => import("@/views/GameClientAuthzPage.vue")
 const Demo = () => import("@/views/Demo.vue")
+const Login = () => import("@/views/LoginPage.vue")
 
 const routes = [
   {
@@ -22,6 +23,12 @@ const routes = [
     meta: {layout: "Default"},
     component: AboutPage
   },
+  {
+    path: '/login',
+    name: 'Login',
+    meta: {layout: "Default"},
+    component: Login
+  },
   {
     path: '/roadmap',
     name: 'Roadmap',
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
new file mode 100644
index 00000000..f71c9907
--- /dev/null
+++ b/src/views/LoginPage.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="bg-black flex flex-col h-[100%]">   
+    <div class="flex-1 m-auto text-center h-[100%]">
+      <h2 class="text-white text-5xl font-bold p-7">Login / Sign Up</h2>
+      <BaseCCButton>Login with keplr</BaseCCButton>
+    </div> 
+  </div>
+</template>
+<script setup lang="ts">
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+</script>

From e54c5e13749585d00cf576eea335e694aa6a472c Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Thu, 28 Dec 2023 11:42:13 +0100
Subject: [PATCH 02/12] login page works now

---
 package-lock.json                          |  8 +-
 package.json                               |  2 +-
 src/components/elements/LoginComponent.vue | 18 +++-
 src/components/modals/HCaptchaModal.vue    |  2 +-
 src/def-composables/useLogin.ts            | 99 ++++++++++++++++++++++
 src/views/LoginPage.vue                    | 61 +++++++++++--
 6 files changed, 175 insertions(+), 15 deletions(-)
 create mode 100644 src/def-composables/useLogin.ts

diff --git a/package-lock.json b/package-lock.json
index 3e5782f7..33b539af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@cosmjs/launchpad": "^0.27.0",
         "@cosmjs/proto-signing": "^0.27.1",
         "@cosmjs/stargate": "^0.27.1",
-        "@hcaptcha/vue3-hcaptcha": "^1.0.1",
+        "@hcaptcha/vue3-hcaptcha": "^1.3.0",
         "@headlessui/tailwindcss": "^0.2.0",
         "@headlessui/vue": "^1.7.16",
         "@ignt/vue-library": "^0.4.3",
@@ -751,9 +751,9 @@
       }
     },
     "node_modules/@hcaptcha/vue3-hcaptcha": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@hcaptcha/vue3-hcaptcha/-/vue3-hcaptcha-1.0.1.tgz",
-      "integrity": "sha512-WFA11dW9aXtMdbKSDTkwR3g5uEl2EU1J0sIbHWhWn53LJkqmvDnU/nZX02nOY8cZM/nOJ1+ZTqW0nkE+3baDRw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@hcaptcha/vue3-hcaptcha/-/vue3-hcaptcha-1.3.0.tgz",
+      "integrity": "sha512-IEonS6JiYdU7uy6aeib8cYtMO4nj8utwStbA9bWHyYbOvOvhpkV+AW8vfSKh6SntYxqle/TRwhv+kU9p92CfsA==",
       "dependencies": {
         "vue": "^3.2.19"
       },
diff --git a/package.json b/package.json
index d59459c8..9c21a2e8 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "@cosmjs/launchpad": "^0.27.0",
     "@cosmjs/proto-signing": "^0.27.1",
     "@cosmjs/stargate": "^0.27.1",
-    "@hcaptcha/vue3-hcaptcha": "^1.0.1",
+    "@hcaptcha/vue3-hcaptcha": "^1.3.0",
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.16",
     "@ignt/vue-library": "^0.4.3",
diff --git a/src/components/elements/LoginComponent.vue b/src/components/elements/LoginComponent.vue
index c5f5bcf1..85af5941 100644
--- a/src/components/elements/LoginComponent.vue
+++ b/src/components/elements/LoginComponent.vue
@@ -1,12 +1,22 @@
 <template>
-  <router-link to="login" class="my-auto">
-    <button class="text-white font-bold uppercase flex hover:underline">
-      <img class="h-8 pr-4" :src="Profile" alt="CC logo" />
+    <button class="text-white font-bold uppercase flex hover:underline my-auto" @click="tryLogin">
+      <img
+        class="h-8 pr-4"
+        :src="loggedIn ? loggedInProfilePic : Profile"
+        alt="PP"
+      />
       <a class="my-auto">Login / Sign up</a>
     </button>
-  </router-link>
 </template>
 
 <script setup lang="ts">
 import Profile from "@/assets/figma/Profile.png";
+import { useProfilePic } from "@/def-composables/useProfilePic";
+import { useLoggedIn } from "@/def-composables/useLoggedIn";
+import {useLogin} from "@/def-composables/useLogin";
+
+const { loggedInProfilePic } = useProfilePic();
+const { loggedIn } = useLoggedIn();
+const { tryLogin } = useLogin()
+
 </script>
diff --git a/src/components/modals/HCaptchaModal.vue b/src/components/modals/HCaptchaModal.vue
index 4dce00ba..4a73fbf7 100644
--- a/src/components/modals/HCaptchaModal.vue
+++ b/src/components/modals/HCaptchaModal.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha'
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha/types'
 import { env } from "@/env"
 import { useAddress } from "@/def-composables/useAddress";
 import { useNotifications } from "@/def-composables/useNotifications";
diff --git a/src/def-composables/useLogin.ts b/src/def-composables/useLogin.ts
new file mode 100644
index 00000000..a7133359
--- /dev/null
+++ b/src/def-composables/useLogin.ts
@@ -0,0 +1,99 @@
+import useKeplr from "@/def-composables/useKeplr";
+import {useRouter} from "vue-router";
+import {useAddress} from "@/def-composables/useAddress";
+import {env} from "@/env";
+import {useNotifications} from "@/def-composables/useNotifications";
+import type {Key} from "@keplr-wallet/types";
+import {useClient} from "@/composables/useClient";
+import {useQuery} from "@/def-composables/useQuery";
+import {useLoggedIn} from "@/def-composables/useLoggedIn";
+import { Client } from "decentralcardgame-cardchain-client-ts";
+
+const useLoginInstance = () => {
+  const {connectToKeplr, isKeplrAvailable, getKeplrAccParams} = useKeplr()
+  const router = useRouter()
+  const {address} = useAddress()
+  const {notifyFail, notifyInfo, notifySuccess} = useNotifications()
+  const { queryQUser } = useQuery()
+  
+  const tryLogin = () => {
+    signUpRequired().then((required) => {
+      console.log(required)
+      if (!required) {
+        login()
+      } else {
+        router.push("Login")}
+    })
+  }
+  
+  const login = () => {
+      console.log("logging in")
+      connectToKeplr(console.log, console.log)
+  }
+  
+  const signUpRequired = async () => {
+    if (isKeplrAvailable.value) {
+      const client = new Client(env);
+      await client.useKeplr();
+      const [account] = await client.signer!.getAccounts()
+      try {
+        await queryQUser(account.address)
+        return false
+      }
+      catch(e) {
+        return true
+      }
+    }
+    return true
+  }
+  
+  const onVerify = (res: any) => {
+    console.log(res)
+    return getKeplrAccParams(env.chainId).then((value: Key) => {
+      const data = {
+        address: value.bech32Address,
+        token: res,
+        alias: value.name,
+      };
+      
+      console.log(data)
+
+      const request = new Request(env.faucetNode, {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+      
+      return fetch(request).then((response) => {
+        console.log("response", response);
+
+        if (response.status === 401) {
+          notifyFail("Error", "Error captcha. Please reload page.");
+          return;
+        } else if (response.status === 402) {
+          notifyFail("Error", "You have already claimed tokens");
+          return;
+        } else if (response.status === 403) {
+          notifyFail("Error", "Probably the incorrect address");
+          return;
+        } else {
+          notifySuccess("Success", "Registered Account");
+          return;
+        }
+      });
+    });
+  };
+  
+  return {login, signUpRequired, tryLogin, onVerify}
+}
+
+let loginInstance: ReturnType<typeof useLoginInstance>;
+
+export const useLogin = () => {
+  if (!loginInstance) {
+    loginInstance = useLoginInstance();
+  }
+  return loginInstance;
+};
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index f71c9907..0cfa4217 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -1,11 +1,62 @@
 <template>
-  <div class="bg-black flex flex-col h-[100%]">   
-    <div class="flex-1 m-auto text-center h-[100%]">
-      <h2 class="text-white text-5xl font-bold p-7">Login / Sign Up</h2>
-      <BaseCCButton>Login with keplr</BaseCCButton>
-    </div> 
+  <div class="bg-black flex flex-col">
+    <div class="my-[25rem] text-center">
+      <h2 class="text-white text-5xl font-bold p-7">
+        {{ state.signUp ? "Sign up" : "Log in" }}
+      </h2>
+      <BaseCCButton v-if="!state.signUp" @click="login"
+        >Login with keplr
+      </BaseCCButton>
+      <div v-else>
+        <div v-if="isKeplrAvailable" class="flex flex-col justify-center">
+          <p class="text-white p-7">You have to sign up first</p>
+          <vue-hcaptcha
+            :sitekey="state.siteKey"
+            @verify="(res) => {onVerify(res).then(checkSignUp)}"
+            class="mx-auto"
+          />
+        </div>
+        <div v-else>
+          <p class="text-white p-7">
+            To log in you first need download and install the
+            <a href="https://www.keplr.app" class="underline">keplr wallet</a>
+            browser extension
+          </p>
+          <a href="https://www.keplr.app/download" class="mx-auto">
+            <BaseCCButton :type="ButtonType.TEAL"> Download Keplr</BaseCCButton>
+          </a>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
 import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
+import useKeplr from "@/def-composables/useKeplr";
+import { ButtonType } from "@/components/elements/CCButton/ButtonType";
+import { useLogin } from "@/def-composables/useLogin";
+import { onMounted, reactive } from "vue";
+import { env } from "@/env";
+
+const { isKeplrAvailable } = useKeplr();
+const { login, signUpRequired, onVerify } = useLogin();
+
+const initialState: {
+  signUp: Boolean;
+  siteKey: string;
+} = {
+  signUp: false,
+  siteKey: env.faucetSiteKey,
+};
+
+const state = reactive(initialState);
+
+const checkSignUp = () => {
+  console.log("yes")
+  signUpRequired().then((value) => (state.signUp = value));
+}
+
+onMounted(checkSignUp);
+
 </script>

From 3525f6a69226266a2ac140dd3f5aab546a783263 Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Fri, 29 Dec 2023 00:08:29 +0100
Subject: [PATCH 03/12] Added auto login

---
 src/components/elements/LoginComponent.vue | 31 +++++++++++++++-------
 src/def-composables/useLogin.ts            | 20 +++++++++-----
 src/views/LoginPage.vue                    | 18 ++++---------
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/components/elements/LoginComponent.vue b/src/components/elements/LoginComponent.vue
index 85af5941..f4713df2 100644
--- a/src/components/elements/LoginComponent.vue
+++ b/src/components/elements/LoginComponent.vue
@@ -1,22 +1,33 @@
 <template>
-    <button class="text-white font-bold uppercase flex hover:underline my-auto" @click="tryLogin">
-      <img
-        class="h-8 pr-4"
-        :src="loggedIn ? loggedInProfilePic : Profile"
-        alt="PP"
-      />
-      <a class="my-auto">Login / Sign up</a>
-    </button>
+  <button
+    class="text-white font-bold uppercase flex hover:underline my-auto"
+    @click="tryLogin"
+  >
+    <img
+      class="h-8 pr-4"
+      :src="loggedIn ? loggedInProfilePic : Profile"
+      alt="PP"
+    />
+    <a class="my-auto">{{isSignUpRequired ? "Log in / Sign up" : loggedIn ? "Profile" : "Login"}}</a>
+  </button>
 </template>
 
 <script setup lang="ts">
 import Profile from "@/assets/figma/Profile.png";
 import { useProfilePic } from "@/def-composables/useProfilePic";
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
-import {useLogin} from "@/def-composables/useLogin";
+import { useLogin } from "@/def-composables/useLogin";
+import {onMounted} from "vue";
 
 const { loggedInProfilePic } = useProfilePic();
 const { loggedIn } = useLoggedIn();
-const { tryLogin } = useLogin()
+const { tryLogin, isSignUpRequired, checkSignUpRequired } = useLogin();
 
+onMounted(() => {
+  checkSignUpRequired().then(value => {
+    if (!value) {
+      tryLogin()
+    }
+  })
+})
 </script>
diff --git a/src/def-composables/useLogin.ts b/src/def-composables/useLogin.ts
index a7133359..f96c7393 100644
--- a/src/def-composables/useLogin.ts
+++ b/src/def-composables/useLogin.ts
@@ -4,17 +4,16 @@ import {useAddress} from "@/def-composables/useAddress";
 import {env} from "@/env";
 import {useNotifications} from "@/def-composables/useNotifications";
 import type {Key} from "@keplr-wallet/types";
-import {useClient} from "@/composables/useClient";
 import {useQuery} from "@/def-composables/useQuery";
-import {useLoggedIn} from "@/def-composables/useLoggedIn";
 import { Client } from "decentralcardgame-cardchain-client-ts";
+import { ref } from "vue";
 
 const useLoginInstance = () => {
   const {connectToKeplr, isKeplrAvailable, getKeplrAccParams} = useKeplr()
   const router = useRouter()
-  const {address} = useAddress()
   const {notifyFail, notifyInfo, notifySuccess} = useNotifications()
   const { queryQUser } = useQuery()
+  const isSignUpRequired = ref(true)
   
   const tryLogin = () => {
     signUpRequired().then((required) => {
@@ -47,16 +46,20 @@ const useLoginInstance = () => {
     return true
   }
   
+  const checkSignUpRequired = () => {
+    return signUpRequired().then(value => {
+      isSignUpRequired.value = value
+      return value
+    })
+  }
+
   const onVerify = (res: any) => {
-    console.log(res)
     return getKeplrAccParams(env.chainId).then((value: Key) => {
       const data = {
         address: value.bech32Address,
         token: res,
         alias: value.name,
       };
-      
-      console.log(data)
 
       const request = new Request(env.faucetNode, {
         method: "POST",
@@ -68,6 +71,7 @@ const useLoginInstance = () => {
       
       return fetch(request).then((response) => {
         console.log("response", response);
+        checkSignUpRequired()
 
         if (response.status === 401) {
           notifyFail("Error", "Error captcha. Please reload page.");
@@ -86,7 +90,9 @@ const useLoginInstance = () => {
     });
   };
   
-  return {login, signUpRequired, tryLogin, onVerify}
+  checkSignUpRequired()
+
+  return {login, checkSignUpRequired, isSignUpRequired, tryLogin, onVerify}
 }
 
 let loginInstance: ReturnType<typeof useLoginInstance>;
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index 0cfa4217..04afa205 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -2,9 +2,9 @@
   <div class="bg-black flex flex-col">
     <div class="my-[25rem] text-center">
       <h2 class="text-white text-5xl font-bold p-7">
-        {{ state.signUp ? "Sign up" : "Log in" }}
+        {{ isSignUpRequired ? "Sign up" : "Log in" }}
       </h2>
-      <BaseCCButton v-if="!state.signUp" @click="login"
+      <BaseCCButton v-if="!isSignUpRequired" @click="login"
         >Login with keplr
       </BaseCCButton>
       <div v-else>
@@ -12,7 +12,7 @@
           <p class="text-white p-7">You have to sign up first</p>
           <vue-hcaptcha
             :sitekey="state.siteKey"
-            @verify="(res) => {onVerify(res).then(checkSignUp)}"
+            @verify="onVerify"
             class="mx-auto"
           />
         </div>
@@ -40,23 +40,15 @@ import { onMounted, reactive } from "vue";
 import { env } from "@/env";
 
 const { isKeplrAvailable } = useKeplr();
-const { login, signUpRequired, onVerify } = useLogin();
+const { checkSignUpRequired, login, isSignUpRequired, onVerify } = useLogin();
 
 const initialState: {
-  signUp: Boolean;
   siteKey: string;
 } = {
-  signUp: false,
   siteKey: env.faucetSiteKey,
 };
 
 const state = reactive(initialState);
 
-const checkSignUp = () => {
-  console.log("yes")
-  signUpRequired().then((value) => (state.signUp = value));
-}
-
-onMounted(checkSignUp);
-
+onMounted(checkSignUpRequired);
 </script>

From e0df41d221963b84b40eda27352e92076f5e20f8 Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Fri, 29 Dec 2023 00:17:20 +0100
Subject: [PATCH 04/12] removed captcha modal

---
 src/components/modals/HCaptchaModal.vue | 90 -------------------------
 1 file changed, 90 deletions(-)
 delete mode 100644 src/components/modals/HCaptchaModal.vue

diff --git a/src/components/modals/HCaptchaModal.vue b/src/components/modals/HCaptchaModal.vue
deleted file mode 100644
index 4a73fbf7..00000000
--- a/src/components/modals/HCaptchaModal.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <transition name="modal-fade">
-    <div class="modal__backdrop" style="z-index: 1000;">
-      <vue-hcaptcha :sitekey="siteKey" @verify="onVerify" />
-    </div>
-  </transition>
-</template>
-
-<script lang="ts">
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha/types'
-import { env } from "@/env"
-import { useAddress } from "@/def-composables/useAddress";
-import { useNotifications } from "@/def-composables/useNotifications";
-import useKeplr from '@/def-composables/useKeplr';
-import type { Key } from '@keplr-wallet/types';
-
-
-export default {
-  name: 'HCaptchaModal',
-  components: {
-    VueHcaptcha
-  },
-  props: {
-  },
-  data() {
-    return {
-      siteKey: env.faucetSiteKey
-    }
-  },
-  watch: {
-  },
-  created() {
-  },
-  mounted() {
-  },
-  setup() {
-    const { address } = useAddress()
-    const { notifySuccess, notifyFail } = useNotifications()
-    const { getKeplrAccParams } = useKeplr()
-
-    return { address, notifySuccess, notifyFail, getKeplrAccParams }
-  },
-  methods: {
-    onVerify(res) {
-      console.log("res", res)
-      console.log(env)
-      this.$emit('close')
-
-      this.getKeplrAccParams(env.chainId).then((value: Key) => {
-
-        const data = {
-          address: this.address,
-          token: res,
-          alias: value.name
-        }
-
-        const request = new Request(env.faucetNode, {
-          method: 'POST',
-          headers: {
-            'Accept': 'application/json'
-          },
-          body: JSON.stringify(data)
-        })
-
-        fetch(request).then(response => {
-          console.log("response", response)
-
-          if (response.status === 401) {
-            this.notifyFail('Error', 'Error captcha. Please reload page.')
-            return
-          }
-          else if (response.status === 402) {
-            this.notifyFail('Error', 'You have already claimed tokens')
-            return
-          }
-          else if (response.status === 403) {
-            this.notifyFail('Error', 'Probably the incorrect address')
-            return
-          }
-          else {
-            this.notifySuccess('Success', 'Registered Account')
-            return
-          }
-        })
-      })
-    }
-  }
-}
-
-</script>

From ca27b604637ae307ee17dff1816771bec304d79c Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Sun, 31 Dec 2023 18:17:58 +0100
Subject: [PATCH 05/12] Added base userview

---
 src/components/elements/CCProfileIcon.vue     |  12 --
 src/components/elements/LoginComponent.vue    |  14 +-
 src/def-composables/useLogin.ts               |   6 +
 src/router/index.ts                           |   2 +-
 src/views/{UserView.vue => UserView 1.vue}    |   0
 src/views/UserView/UserView.vue               | 198 ++++++++++++++++++
 .../UserView/UserViewHeadingContainer.vue     |   6 +
 7 files changed, 219 insertions(+), 19 deletions(-)
 delete mode 100644 src/components/elements/CCProfileIcon.vue
 rename src/views/{UserView.vue => UserView 1.vue} (100%)
 create mode 100644 src/views/UserView/UserView.vue
 create mode 100644 src/views/UserView/UserViewHeadingContainer.vue

diff --git a/src/components/elements/CCProfileIcon.vue b/src/components/elements/CCProfileIcon.vue
deleted file mode 100644
index 5a09fcfc..00000000
--- a/src/components/elements/CCProfileIcon.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="ppImage">
-    <img :src="loggedInProfilePic" alt="Avatar">
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useProfilePic } from "@/def-composables/useProfilePic";
-
-const { loggedInProfilePic } = useProfilePic()
-
-</script>
\ No newline at end of file
diff --git a/src/components/elements/LoginComponent.vue b/src/components/elements/LoginComponent.vue
index f4713df2..abc9ddba 100644
--- a/src/components/elements/LoginComponent.vue
+++ b/src/components/elements/LoginComponent.vue
@@ -8,7 +8,9 @@
       :src="loggedIn ? loggedInProfilePic : Profile"
       alt="PP"
     />
-    <a class="my-auto">{{isSignUpRequired ? "Log in / Sign up" : loggedIn ? "Profile" : "Login"}}</a>
+    <a class="my-auto">{{
+      isSignUpRequired ? "Log in / Sign up" : loggedIn ? "Profile" : "Login"
+    }}</a>
   </button>
 </template>
 
@@ -17,17 +19,17 @@ import Profile from "@/assets/figma/Profile.png";
 import { useProfilePic } from "@/def-composables/useProfilePic";
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
 import { useLogin } from "@/def-composables/useLogin";
-import {onMounted} from "vue";
+import { onMounted } from "vue";
 
 const { loggedInProfilePic } = useProfilePic();
 const { loggedIn } = useLoggedIn();
 const { tryLogin, isSignUpRequired, checkSignUpRequired } = useLogin();
 
 onMounted(() => {
-  checkSignUpRequired().then(value => {
+  checkSignUpRequired().then((value) => {
     if (!value) {
-      tryLogin()
+      tryLogin();
     }
-  })
-})
+  });
+});
 </script>
diff --git a/src/def-composables/useLogin.ts b/src/def-composables/useLogin.ts
index f96c7393..a2e21c81 100644
--- a/src/def-composables/useLogin.ts
+++ b/src/def-composables/useLogin.ts
@@ -7,6 +7,7 @@ import type {Key} from "@keplr-wallet/types";
 import {useQuery} from "@/def-composables/useQuery";
 import { Client } from "decentralcardgame-cardchain-client-ts";
 import { ref } from "vue";
+import {useLoggedIn} from "@/def-composables/useLoggedIn";
 
 const useLoginInstance = () => {
   const {connectToKeplr, isKeplrAvailable, getKeplrAccParams} = useKeplr()
@@ -14,8 +15,13 @@ const useLoginInstance = () => {
   const {notifyFail, notifyInfo, notifySuccess} = useNotifications()
   const { queryQUser } = useQuery()
   const isSignUpRequired = ref(true)
+  const {loggedIn} = useLoggedIn()
+  const {address} = useAddress()
   
   const tryLogin = () => {
+    if (loggedIn.value) {
+      router.push({name: "UserView", params: {id: address.value}})
+    }
     signUpRequired().then((required) => {
       console.log(required)
       if (!required) {
diff --git a/src/router/index.ts b/src/router/index.ts
index 1a4f7e57..fb8e6e07 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,7 +10,7 @@ const LandingPage = () => import('@/views/LandingPage.vue')
 const ImprintPage = () => import('@/views/ImprintPage.vue')
 const TeamPage = () => import('@/views/TeamPage.vue')
 const VotingPage = () => import('@/views/VotingPage.vue')
-const UserView = () => import('@/views/UserView.vue')
+const UserView = () => import('@/views/UserView/UserView.vue')
 const CardView = () => import('@/views/AdvancedCardViewPage.vue')
 const GameclientAuthz = () => import("@/views/GameClientAuthzPage.vue")
 const Demo = () => import("@/views/Demo.vue")
diff --git a/src/views/UserView.vue b/src/views/UserView 1.vue
similarity index 100%
rename from src/views/UserView.vue
rename to src/views/UserView 1.vue
diff --git a/src/views/UserView/UserView.vue b/src/views/UserView/UserView.vue
new file mode 100644
index 00000000..3ef29053
--- /dev/null
+++ b/src/views/UserView/UserView.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="flex bg-black text-white justify-center p-16">
+    <div class="text-center">
+      <div class="p-24">
+        <img :src="state.img" class="w-64" alt="Profile pic" />
+      </div>
+      <UserViewHeadingContainer>
+        <template v-slot:heading>Council status</template>
+        <template v-slot:body>{{ user.CouncilStatus }}</template>
+      </UserViewHeadingContainer>
+      <div>
+        <UserViewHeadingContainer v-for="coin in normalizeCoins(coins)">
+          <template v-slot:heading
+            ><a class="uppercase">{{ coin.denom }}</a> Balance
+          </template>
+          <template v-slot:body>{{ coin.amount }}</template>
+        </UserViewHeadingContainer>
+      </div>
+    </div>
+    <div class="text-left">
+      <h1 class="text-4xl text-white font-bold pb-12">
+        {{ state.userIsUser ? "My Account" : state.user.alias }}
+      </h1>
+      <div class="grid grid-cols-3 gap-16">
+        <UserViewHeadingContainer>
+          <template v-slot:heading>Wallet</template>
+          <template v-slot:body>
+            <b>Address</b> <br />{{ state.addr }}
+          </template>
+        </UserViewHeadingContainer>
+        <UserViewHeadingContainer>
+          <template v-slot:heading>My Cards</template>
+          <template v-slot:body>
+            <b
+              >{{ state.user.ownedCardSchemes.length }} Card Frame{{
+                state.user.ownedCardSchemes.length == 1 ? "" : "s"
+              }}</b
+            >
+            <div
+              v-for="[arr, name] in [
+                [state.user.ownedCardSchemes, 'Master Card'],
+                [state.user.cards, 'Card'],
+              ]"
+              class="pb-6"
+            >
+              <p class="pb-3">
+                <b
+                  >{{ arr.length }} {{ name
+                  }}{{ arr.length == 1 ? "" : "s" }}</b
+                >
+              </p>
+              <RouterCCButton>View in gallery</RouterCCButton>
+            </div>
+          </template>
+        </UserViewHeadingContainer>
+        <UserViewHeadingContainer>
+          <template v-slot:heading>Recent Activity</template>
+          <template v-slot:body>
+            <RouterCCButton :to="{name: 'Vote'}">Go to Voting</RouterCCButton>
+          </template>
+        </UserViewHeadingContainer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAddress } from "@/def-composables/useAddress";
+import { useLoggedIn } from "@/def-composables/useLoggedIn";
+import { useQuery } from "@/def-composables/useQuery";
+import { validAddress } from "@/utils/validation";
+import { useTx } from "@/def-composables/useTx";
+import { useProfilePic } from "@/def-composables/useProfilePic";
+import type { Coin } from "@/model/Coin";
+import { normalizeCoins } from "@/utils/utils";
+import { computed, type ComputedRef, onMounted, reactive, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useUser } from "@/def-composables/useUser";
+import { User } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/user";
+import UserViewHeadingContainer from "@/views/UserView/UserViewHeadingContainer.vue";
+import RouterCCButton from "@/components/elements/CCButton/RouterCCButton.vue";
+
+const { queryQUser, queryAllBalances } = useQuery();
+const { registerForCouncil, rewokeCouncilRegistration } = useTx();
+const { address } = useAddress();
+const { loggedIn } = useLoggedIn();
+const { getImg } = useProfilePic();
+const { user, coins, queryCoins, queryUser } = useUser();
+const { loggedInProfilePic } = useProfilePic();
+const route = useRoute();
+const router = useRouter();
+
+const initialState: {
+  isChooseModalVisible: boolean;
+  isAirdropsModalVisible: boolean;
+  isModalVisible: boolean;
+  isGrantModalVisible: boolean;
+  addr: string;
+  user: User;
+  coins: Array<Coin>;
+  userIsUser: ComputedRef<boolean>;
+  img: string;
+} = {
+  isChooseModalVisible: false,
+  isAirdropsModalVisible: false,
+  isModalVisible: false,
+  isGrantModalVisible: false,
+  addr: "",
+  user: User.fromPartial({}),
+  coins: new Array<Coin>(),
+  userIsUser: computed(() => loggedIn.value && state.addr == address.value),
+  img: "jaja",
+};
+
+const state = reactive(initialState);
+
+watch(user, (val) => {
+  if (state.userIsUser) state.user = val;
+});
+watch(coins, (val) => {
+  if (state.userIsUser) state.coins = normalizeCoins(val);
+});
+watch(loggedInProfilePic, (val) => {
+  if (state.userIsUser) state.img = val;
+});
+
+const init = () => {
+  state.addr = route.params.id.toString();
+
+  if (state.userIsUser) {
+    state.user = user.value;
+    state.coins = normalizeCoins(coins.value);
+    state.img = loggedInProfilePic.value;
+  }
+
+  if (!validAddress(state.addr)) {
+    router.push({ name: "NotFound" });
+  }
+
+  router.push({ name: "UserView", params: { id: state.addr } });
+  getUser();
+  getCoins();
+};
+
+onMounted(init);
+
+const getUser = () => {
+  if (state.userIsUser) {
+    queryUser();
+  } else {
+    queryQUser(state.addr).then((user) => {
+      state.user = user;
+      getImg(state.user, state.addr).then((img) => {
+        state.img = img;
+      });
+    });
+  }
+};
+
+const getCoins = () => {
+  if (state.userIsUser) {
+    queryCoins();
+  } else {
+    queryAllBalances(state.addr).then((coins) => {
+      state.coins = normalizeCoins(coins.balances);
+    });
+  }
+};
+
+const register = () => registerForCouncil(getUser, console.log);
+const deRegister = () => rewokeCouncilRegistration(getUser, console.log);
+const showModal = () => {
+  state.isModalVisible = true;
+};
+const closeModal = () => {
+  state.isModalVisible = false;
+  getCoins();
+};
+const showGrantModal = () => {
+  state.isGrantModalVisible = true;
+};
+const closeGrantModal = () => {
+  state.isGrantModalVisible = false;
+};
+const showChooseModal = () => {
+  state.isChooseModalVisible = true;
+};
+const closeChooseModal = () => {
+  state.isChooseModalVisible = false;
+  getUser();
+};
+const showAirdropsModal = () => {
+  state.isAirdropsModalVisible = true;
+};
+const closeAirdropsModal = () => {
+  state.isAirdropsModalVisible = false;
+};
+</script>
diff --git a/src/views/UserView/UserViewHeadingContainer.vue b/src/views/UserView/UserViewHeadingContainer.vue
new file mode 100644
index 00000000..73bd90e2
--- /dev/null
+++ b/src/views/UserView/UserViewHeadingContainer.vue
@@ -0,0 +1,6 @@
+<template>
+  <div class="py-3">
+    <h2 class="text-3xl font-bold"><slot name="heading"></slot></h2>
+    <p><slot name="body"></slot></p>
+  </div>
+</template>
\ No newline at end of file

From ca5d6ff404da4c63e673138f9f45f92f488e9eba Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Sun, 14 Jan 2024 22:25:16 +0100
Subject: [PATCH 06/12] Added profilepic component and made userview more
 mobild friendly

---
 package-lock.json                             |  6 ++--
 .../elements/CCButton/RouterCCButton.vue      |  2 +-
 src/components/elements/LoginComponent.vue    |  6 ++--
 .../elements/ProfilePicComponent.vue          | 26 ++++++++++++++++
 src/views/UserView/UserView.vue               | 30 ++++++++++++++-----
 5 files changed, 56 insertions(+), 14 deletions(-)
 create mode 100644 src/components/elements/ProfilePicComponent.vue

diff --git a/package-lock.json b/package-lock.json
index 33b539af..0737f55b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2227,9 +2227,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001481",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
-      "integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==",
+      "version": "1.0.30001576",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz",
+      "integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==",
       "dev": true,
       "funding": [
         {
diff --git a/src/components/elements/CCButton/RouterCCButton.vue b/src/components/elements/CCButton/RouterCCButton.vue
index ee162226..1ea1c9dc 100644
--- a/src/components/elements/CCButton/RouterCCButton.vue
+++ b/src/components/elements/CCButton/RouterCCButton.vue
@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { ButtonType } from "@/components/elements/CCButton/ButtonType";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -20,5 +21,4 @@ const props = withDefaults(
   }
 );
 
-import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 </script>
diff --git a/src/components/elements/LoginComponent.vue b/src/components/elements/LoginComponent.vue
index abc9ddba..656e7e8d 100644
--- a/src/components/elements/LoginComponent.vue
+++ b/src/components/elements/LoginComponent.vue
@@ -3,8 +3,9 @@
     class="text-white font-bold uppercase flex hover:underline my-auto"
     @click="tryLogin"
   >
-    <img
-      class="h-8 pr-4"
+    <ProfilePicComponent
+      class="h-8 w-8 mr-4"
+      size="8"
       :src="loggedIn ? loggedInProfilePic : Profile"
       alt="PP"
     />
@@ -20,6 +21,7 @@ import { useProfilePic } from "@/def-composables/useProfilePic";
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
 import { useLogin } from "@/def-composables/useLogin";
 import { onMounted } from "vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
 
 const { loggedInProfilePic } = useProfilePic();
 const { loggedIn } = useLoggedIn();
diff --git a/src/components/elements/ProfilePicComponent.vue b/src/components/elements/ProfilePicComponent.vue
new file mode 100644
index 00000000..6f23b366
--- /dev/null
+++ b/src/components/elements/ProfilePicComponent.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    :class="[
+      'overflow-hidden',
+      'rounded-full',
+      'w-' + props.size,
+      'h-' + props.size,
+    ]"
+  >
+    <img :src="src" class="-pt-[10%] w-[100%] object-contain" :alt="alt" />
+  </div>
+</template>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    src: any;
+    size: number;
+    alt: string;
+  }>(),
+  {
+    src: {},
+    size: 64,
+    alt: "",
+  }
+);
+</script>
diff --git a/src/views/UserView/UserView.vue b/src/views/UserView/UserView.vue
index 3ef29053..a82dc717 100644
--- a/src/views/UserView/UserView.vue
+++ b/src/views/UserView/UserView.vue
@@ -1,12 +1,22 @@
 <template>
   <div class="flex bg-black text-white justify-center p-16">
-    <div class="text-center">
-      <div class="p-24">
-        <img :src="state.img" class="w-64" alt="Profile pic" />
+    <div class="text-center pr-24">
+      <div class="py-24">
+        <ProfilePicComponent :src="state.img" size="64" class="mx-auto h-64 w-64" alt="Profile pic" />
       </div>
       <UserViewHeadingContainer>
         <template v-slot:heading>Council status</template>
-        <template v-slot:body>{{ user.CouncilStatus }}</template>
+        <template v-slot:body>
+          <p>{{ user.CouncilStatus }}</p>
+          <BaseCCButton v-if="state.userIsUser" @click="state.user.CouncilStatus == 'unavailable' ? register() : deRegister()">
+            {{
+              state.user.CouncilStatus == "unavailable"
+                ? "Register for"
+                : "Deregister from"
+            }}
+            council
+          </BaseCCButton>
+        </template>
       </UserViewHeadingContainer>
       <div>
         <UserViewHeadingContainer v-for="coin in normalizeCoins(coins)">
@@ -18,14 +28,16 @@
       </div>
     </div>
     <div class="text-left">
-      <h1 class="text-4xl text-white font-bold pb-12">
+      <h1 class="text-5xl text-white font-bold pb-12">
         {{ state.userIsUser ? "My Account" : state.user.alias }}
       </h1>
-      <div class="grid grid-cols-3 gap-16">
+      <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16">
         <UserViewHeadingContainer>
           <template v-slot:heading>Wallet</template>
           <template v-slot:body>
-            <b>Address</b> <br />{{ state.addr }}
+            <b>Address</b> <br />{{ state.addr }}<br />
+            <br />
+            <b>Alias</b> <br />{{ state.user.alias }}
           </template>
         </UserViewHeadingContainer>
         <UserViewHeadingContainer>
@@ -56,7 +68,7 @@
         <UserViewHeadingContainer>
           <template v-slot:heading>Recent Activity</template>
           <template v-slot:body>
-            <RouterCCButton :to="{name: 'Vote'}">Go to Voting</RouterCCButton>
+            <RouterCCButton :to="{ name: 'Vote' }">Go to Voting</RouterCCButton>
           </template>
         </UserViewHeadingContainer>
       </div>
@@ -79,6 +91,8 @@ import { useUser } from "@/def-composables/useUser";
 import { User } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/user";
 import UserViewHeadingContainer from "@/views/UserView/UserViewHeadingContainer.vue";
 import RouterCCButton from "@/components/elements/CCButton/RouterCCButton.vue";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
 
 const { queryQUser, queryAllBalances } = useQuery();
 const { registerForCouncil, rewokeCouncilRegistration } = useTx();

From 80d70d380038d0a4e9b1f8dbf403c24b0f13e2df Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Sun, 14 Jan 2024 23:51:21 +0100
Subject: [PATCH 07/12] made login page viewport relative and very nice

---
 src/views/LoginPage.vue | 54 ++++++++++++++++++++++-------------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index 04afa205..33586d84 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -1,30 +1,34 @@
 <template>
-  <div class="bg-black flex flex-col">
-    <div class="my-[25rem] text-center">
-      <h2 class="text-white text-5xl font-bold p-7">
-        {{ isSignUpRequired ? "Sign up" : "Log in" }}
-      </h2>
-      <BaseCCButton v-if="!isSignUpRequired" @click="login"
-        >Login with keplr
-      </BaseCCButton>
-      <div v-else>
-        <div v-if="isKeplrAvailable" class="flex flex-col justify-center">
-          <p class="text-white p-7">You have to sign up first</p>
-          <vue-hcaptcha
-            :sitekey="state.siteKey"
-            @verify="onVerify"
-            class="mx-auto"
-          />
-        </div>
+  <div class="bg-black flex flex-col h-[80vh] sm:h-[85vh]">
+    <div class="text-center my-auto">
+      <div class="-mt-40">
+        <h2 class="text-white text-5xl font-bold p-7">
+          {{ isSignUpRequired ? "Sign up" : "Log in" }}
+        </h2>
+        <BaseCCButton v-if="!isSignUpRequired" @click="login"
+          >Login with keplr
+        </BaseCCButton>
         <div v-else>
-          <p class="text-white p-7">
-            To log in you first need download and install the
-            <a href="https://www.keplr.app" class="underline">keplr wallet</a>
-            browser extension
-          </p>
-          <a href="https://www.keplr.app/download" class="mx-auto">
-            <BaseCCButton :type="ButtonType.TEAL"> Download Keplr</BaseCCButton>
-          </a>
+          <div v-if="isKeplrAvailable" class="flex flex-col justify-center">
+            <p class="text-white p-7">You have to sign up first</p>
+            <vue-hcaptcha
+              :sitekey="state.siteKey"
+              @verify="onVerify"
+              class="mx-auto"
+            />
+          </div>
+          <div v-else>
+            <p class="text-white p-7">
+              To log in you first need download and install the
+              <a href="https://www.keplr.app" class="underline">keplr wallet</a>
+              browser extension
+            </p>
+            <a href="https://www.keplr.app/download" class="mx-auto">
+              <BaseCCButton :type="ButtonType.TEAL">
+                Download Keplr</BaseCCButton
+              >
+            </a>
+          </div>
         </div>
       </div>
     </div>

From 67e099b022050cf906527a805016818010963cb9 Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Mon, 15 Jan 2024 15:23:32 +0100
Subject: [PATCH 08/12] Added PBChooser

---
 src/assets/figma/close.svg                    |  13 +++
 src/assets/figma/edit.png                     | Bin 0 -> 18389 bytes
 .../elements/CCButton/BaseCCButton.vue        |   2 +-
 .../elements/ProfilePicComponent.vue          |   4 +-
 src/components/modals/ChoosePBModal.vue       |  90 +++++++++++-------
 src/components/modals/ModalFrame.vue          |  35 +++++++
 src/components/partials/PageMenu.vue          |   2 +-
 src/def-composables/useCards.ts               |   6 +-
 src/def-composables/useProfilePic.ts          |   2 +-
 src/views/UserView/UserView.vue               |  28 +++++-
 tailwind.config.js                            |   3 +
 11 files changed, 139 insertions(+), 46 deletions(-)
 create mode 100644 src/assets/figma/close.svg
 create mode 100644 src/assets/figma/edit.png
 create mode 100644 src/components/modals/ModalFrame.vue

diff --git a/src/assets/figma/close.svg b/src/assets/figma/close.svg
new file mode 100644
index 00000000..4a36357a
--- /dev/null
+++ b/src/assets/figma/close.svg
@@ -0,0 +1,13 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="X 1" clip-path="url(#clip0_1428_45)">
+<g id="Layer 1">
+<path id="Vector" d="M14.138 -0.00175452L-0.00415039 14.1404L2.11717 16.2617L16.2593 2.11957L14.138 -0.00175452Z" fill="white"/>
+<path id="Vector_2" d="M2.11717 -0.0016914L-0.00415039 2.11963L14.138 16.2618L16.2593 14.1404L2.11717 -0.0016914Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1428_45">
+<rect width="16.26" height="16.26" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/figma/edit.png b/src/assets/figma/edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..c05cd6f4aebae4e5bc1d46439957804a18c0bc69
GIT binary patch
literal 18389
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
N*+@;NT-iY5{y$$!opJyG

literal 0
HcmV?d00001

diff --git a/src/components/elements/CCButton/BaseCCButton.vue b/src/components/elements/CCButton/BaseCCButton.vue
index fe793770..a9c8ba23 100644
--- a/src/components/elements/CCButton/BaseCCButton.vue
+++ b/src/components/elements/CCButton/BaseCCButton.vue
@@ -64,7 +64,7 @@ const getButtonColor = () => {
     case ButtonType.TEAL:
       return "bg-[#40C1C7]";
     case ButtonType.RED:
-      return "bg-[#D82027]";
+      return "bg-cc-red";
   }
 };
 </script>
diff --git a/src/components/elements/ProfilePicComponent.vue b/src/components/elements/ProfilePicComponent.vue
index 6f23b366..1dd56cd4 100644
--- a/src/components/elements/ProfilePicComponent.vue
+++ b/src/components/elements/ProfilePicComponent.vue
@@ -14,13 +14,13 @@
 const props = withDefaults(
   defineProps<{
     src: any;
-    size: number;
+    size: number | string;
     alt: string;
   }>(),
   {
     src: {},
     size: 64,
-    alt: "",
+    alt: "Profile Pic",
   }
 );
 </script>
diff --git a/src/components/modals/ChoosePBModal.vue b/src/components/modals/ChoosePBModal.vue
index 57f3628b..67d9e503 100644
--- a/src/components/modals/ChoosePBModal.vue
+++ b/src/components/modals/ChoosePBModal.vue
@@ -1,43 +1,51 @@
 <template>
-  <transition name="modal-fade">
-    <div class="modal__backdrop" style="z-index: 1000">
-      <div
-        aria-describedby="modalDescription"
-        aria-labelledby="modalTitle"
-        class="modal"
-        role="dialog"
-      >
-        <header id="modalTitle" class="modal__header">
-          <slot name="header"> Choose profile card</slot>
-          <button
-            aria-label="Close modal"
-            type="button"
-            class="btn--close"
-            @click="close"
-          >
-            x
-          </button>
-        </header>
-        <div class="modal__body input--transfer">
-          <div v-for="obj in state.images" :key="obj" class="sppBox">
-            <img :src="obj.img" @click="send(obj.id)" />
-          </div>
-        </div>
-      </div>
+  <ModalFrame
+    heading="Choose Profile Card"
+    class="max-w-[100rem]"
+    @close="emit('close')"
+  >
+    <div class="overflow-y-auto flex flex-wrap gap-8 max-h-[50rem] m-16">
+      <ProfilePicComponent
+        v-for="obj in state.images"
+        :key="obj.id"
+        :src="obj.img"
+        size="40"
+        :class="
+          ['w-40', 'h-40'].concat(
+            obj.id == state.choosen ? ['border-cc-red', 'border-8'] : []
+          )
+        "
+        :alt="'Pic' + obj.id"
+        @click="choose(obj.id)"
+      />
     </div>
-  </transition>
+    <BaseCCButton
+      :type="ButtonType.RED"
+      @click="send"
+      class="mx-auto text-center"
+      >Save</BaseCCButton
+    >
+  </ModalFrame>
 </template>
 
 <script setup lang="ts">
+import { useAddress } from "@/def-composables/useAddress";
 import { useUser } from "@/def-composables/useUser";
 import { useTx } from "@/def-composables/useTx";
+import { useProfilePic } from "@/def-composables/useProfilePic";
 import type { Card } from "@/model/Card";
 import { onMounted, reactive } from "vue";
 import { useCards } from "@/def-composables/useCards";
+import ModalFrame from "@/components/modals/ModalFrame.vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 
+const { address } = useAddress()
+const { getDefaultImg } = useProfilePic()
 const { setProfileCard } = useTx();
 const { queryUser } = useUser();
-const { getCard } = useCards()
+const { getCard } = useCards();
 const emit = defineEmits(["close"]);
 
 class Pic {
@@ -53,23 +61,29 @@ class Pic {
 const props = withDefaults(
   defineProps<{
     cardIds: number[];
+    current: number;
   }>(),
   {
     cardIds: () => [],
+    current: 0,
   }
 );
 
 const initialState: {
   images: Array<Pic>;
+  choosen: number;
 } = {
-  images: new Array<Pic>(),
+  images: [new Pic(0, getDefaultImg(address.value))],
+  choosen: 0,
 };
 
 const state = reactive(initialState);
 
-onMounted(() => {
-  props.cardIds.map(id => loadCard(id))
-})
+onMounted(async () => {
+  state.choosen = props.current;
+  console.log("choosen " + state.choosen);
+  props.cardIds.forEach((id) => loadCard(id));
+});
 
 const loadCard = (id: number) => {
   getCard(id).then((card: Card) => {
@@ -77,18 +91,22 @@ const loadCard = (id: number) => {
       state.images.push(new Pic(id, card.image));
     }
   });
-}
+};
+
+const close = () => emit("close");
 
-const close = () => emit("close")
+const choose = (id: number) => {
+  state.choosen = id;
+};
 
-const send = (id: number) => {
+const send = () => {
   setProfileCard(
-    id,
+    state.choosen,
     (res) => {
       queryUser();
       close();
     },
     console.log
   );
-}
+};
 </script>
diff --git a/src/components/modals/ModalFrame.vue b/src/components/modals/ModalFrame.vue
new file mode 100644
index 00000000..ff244e7a
--- /dev/null
+++ b/src/components/modals/ModalFrame.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="fixed top-0 flex h-[100vh] w-[100%] bg-black/50">
+    <div :class="['p-10', 'z-100', 'm-auto'].concat(props.class)">
+      <header class="flex text-white text-4xl my-2 font-bold">
+        <p class="grow my-auto">{{ heading }}</p>
+        <button @click="emit('close')" class="group">
+          <img
+            :src="closeImg"
+            alt="close"
+            class="h-12 group-hover:drop-shadow-md"
+          />
+        </button>
+      </header>
+      <div class="bg-neutral-800 p-8">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import closeImg from "@/assets/figma/close.svg";
+
+const props = withDefaults(
+  defineProps<{
+    heading: string;
+    class: string[];
+  }>(),
+  {
+    heading: "Lorem impsum dolor",
+    class: () => [],
+  }
+);
+
+const emit = defineEmits(["close"]);
+</script>
diff --git a/src/components/partials/PageMenu.vue b/src/components/partials/PageMenu.vue
index bff29307..7a2def2e 100644
--- a/src/components/partials/PageMenu.vue
+++ b/src/components/partials/PageMenu.vue
@@ -16,7 +16,7 @@
   </div>
   <div
     :class="[
-      'bg-[#D82027]',
+      'bg-cc-red',
       'flex',
       'flex-row',
       'uppercase',
diff --git a/src/def-composables/useCards.ts b/src/def-composables/useCards.ts
index 9e8a740b..60e62c5a 100644
--- a/src/def-composables/useCards.ts
+++ b/src/def-composables/useCards.ts
@@ -13,11 +13,11 @@ const updateCard = async (id: number) => {
   return card
 }
 
-const getCard = async (id: number) => {
+const getCard = (id: number) => {
   if (Object.keys(state.value).includes(""+id)) {
-    return state.value[id]
+    return Promise.resolve(state.value[id])
   }
-  return await updateCard(id)
+  return updateCard(id)
 }
 
 export const useCards = () => {
diff --git a/src/def-composables/useProfilePic.ts b/src/def-composables/useProfilePic.ts
index 06c57a1b..9f4641d8 100644
--- a/src/def-composables/useProfilePic.ts
+++ b/src/def-composables/useProfilePic.ts
@@ -35,7 +35,7 @@ const useProfilePicInstance = () => {
     }
   };
 
-  return { getImg, loggedInProfilePic };
+  return { getImg, getDefaultImg, loggedInProfilePic };
 }
 
 let instance: ReturnType<typeof useProfilePicInstance>;
diff --git a/src/views/UserView/UserView.vue b/src/views/UserView/UserView.vue
index a82dc717..0c3ca2f5 100644
--- a/src/views/UserView/UserView.vue
+++ b/src/views/UserView/UserView.vue
@@ -2,13 +2,29 @@
   <div class="flex bg-black text-white justify-center p-16">
     <div class="text-center pr-24">
       <div class="py-24">
-        <ProfilePicComponent :src="state.img" size="64" class="mx-auto h-64 w-64" alt="Profile pic" />
+        <div class="mx-auto h-64 w-64 relative group">
+          <ProfilePicComponent :src="state.img" size="64" alt="Profile pic" />
+          <button
+            v-if="state.userIsUser"
+            @click="showChooseModal"
+            class="absolute top-0 left-0 right-0 bottom-0 m-auto w-10 invisible group-hover:visible"
+          >
+            <img :src="editImg" alt="edit" class="hover:drop-shadow-md" />
+          </button>
+        </div>
       </div>
       <UserViewHeadingContainer>
         <template v-slot:heading>Council status</template>
         <template v-slot:body>
           <p>{{ user.CouncilStatus }}</p>
-          <BaseCCButton v-if="state.userIsUser" @click="state.user.CouncilStatus == 'unavailable' ? register() : deRegister()">
+          <BaseCCButton
+            v-if="state.userIsUser"
+            @click="
+              state.user.CouncilStatus == 'unavailable'
+                ? register()
+                : deRegister()
+            "
+          >
             {{
               state.user.CouncilStatus == "unavailable"
                 ? "Register for"
@@ -74,6 +90,12 @@
       </div>
     </div>
   </div>
+  <ChoosePBModal
+    v-if="state.isChooseModalVisible"
+    :cardIds="state.user.ownedPrototypes"
+    :current="state.user.profileCard"
+    @close="closeChooseModal"
+  />
 </template>
 
 <script setup lang="ts">
@@ -93,6 +115,8 @@ import UserViewHeadingContainer from "@/views/UserView/UserViewHeadingContainer.
 import RouterCCButton from "@/components/elements/CCButton/RouterCCButton.vue";
 import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
+import editImg from "@/assets/figma/edit.png";
+import ChoosePBModal from "@/components/modals/ChoosePBModal.vue";
 
 const { queryQUser, queryAllBalances } = useQuery();
 const { registerForCouncil, rewokeCouncilRegistration } = useTx();
diff --git a/tailwind.config.js b/tailwind.config.js
index c53eb5b1..f3e77870 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      colors: {
+        'cc-red': '#D82027',
+      },
       fontFamily: {
         sans: [
           'Roboto',

From 76c6fb784bf2e49d6ad697e32ff5e7a5ff7cea6b Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Mon, 15 Jan 2024 15:33:24 +0100
Subject: [PATCH 09/12] Cleaned up

---
 .../elements/CCButton/RouterCCButton.vue      |   1 -
 src/components/modals/ChoosePBModal.vue       |   8 +-
 src/components/partials/PageMenu.vue          |   6 +-
 src/views/LoginPage.vue                       |   4 +-
 src/views/UserView 1.vue                      | 265 ------------------
 5 files changed, 9 insertions(+), 275 deletions(-)
 delete mode 100644 src/views/UserView 1.vue

diff --git a/src/components/elements/CCButton/RouterCCButton.vue b/src/components/elements/CCButton/RouterCCButton.vue
index 1ea1c9dc..19b27f17 100644
--- a/src/components/elements/CCButton/RouterCCButton.vue
+++ b/src/components/elements/CCButton/RouterCCButton.vue
@@ -20,5 +20,4 @@ const props = withDefaults(
     type: ButtonType.YELLOW,
   }
 );
-
 </script>
diff --git a/src/components/modals/ChoosePBModal.vue b/src/components/modals/ChoosePBModal.vue
index 67d9e503..4d9114e5 100644
--- a/src/components/modals/ChoosePBModal.vue
+++ b/src/components/modals/ChoosePBModal.vue
@@ -23,8 +23,8 @@
       :type="ButtonType.RED"
       @click="send"
       class="mx-auto text-center"
-      >Save</BaseCCButton
-    >
+      >Save
+    </BaseCCButton>
   </ModalFrame>
 </template>
 
@@ -41,8 +41,8 @@ import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
 import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 
-const { address } = useAddress()
-const { getDefaultImg } = useProfilePic()
+const { address } = useAddress();
+const { getDefaultImg } = useProfilePic();
 const { setProfileCard } = useTx();
 const { queryUser } = useUser();
 const { getCard } = useCards();
diff --git a/src/components/partials/PageMenu.vue b/src/components/partials/PageMenu.vue
index 7a2def2e..46536447 100644
--- a/src/components/partials/PageMenu.vue
+++ b/src/components/partials/PageMenu.vue
@@ -6,10 +6,10 @@
     <a class="grow" />
     <div class="my-auto max-md:hidden">
       <RouterCCButton :type="ButtonType.RED"
-        >Download Gameclient</RouterCCButton
-      >
+        >Download Gameclient
+      </RouterCCButton>
     </div>
-    <LoginComponent/>
+    <LoginComponent />
     <button class="my-auto" @click="toggleBar">
       <img class="h-14 md:hidden" :src="Menu" alt="Menu button" />
     </button>
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index 33586d84..ad60e993 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -25,8 +25,8 @@
             </p>
             <a href="https://www.keplr.app/download" class="mx-auto">
               <BaseCCButton :type="ButtonType.TEAL">
-                Download Keplr</BaseCCButton
-              >
+                Download Keplr
+              </BaseCCButton>
             </a>
           </div>
         </div>
diff --git a/src/views/UserView 1.vue b/src/views/UserView 1.vue
deleted file mode 100644
index 69961d18..00000000
--- a/src/views/UserView 1.vue	
+++ /dev/null
@@ -1,265 +0,0 @@
-<template>
-  <div align="center">
-    <div class="ppBox">
-      <div v-show="state.img">
-        <div class="ppImage">
-          <img :src="state.img" />
-        </div>
-        <button v-if="state.userIsUser" @click="showChooseModal">
-          <img src="@/assets/edit.svg" />
-        </button>
-      </div>
-    </div>
-    <div class="dataBox ccbutton">
-      <h2 class="header__h2">Account details</h2>
-      <button
-        v-if="state.userIsUser"
-        type="button"
-        class="btn"
-        @click="showAirdropsModal"
-      >
-        Claim airdrops
-      </button>
-      <br /><br />
-
-      <div>
-        Address: {{ state.addr }}<br />
-        Name: {{ state.user.alias }}<br />
-        Owned card frames: {{ state.user.ownedCardSchemes.length }} <br />
-        Owned prototypes:
-        <router-link :to="{ name: 'Gallery', query: { owner: state.addr } }">
-          {{ state.user.ownedPrototypes.length }}
-        </router-link>
-        <br />
-        Owned cards:
-        <router-link
-          :to="{ name: 'Gallery', query: { cardList: state.user.cards } }"
-        >
-          {{ state.user.cards.length }}
-        </router-link>
-      </div>
-      <br />
-
-      <div>
-        Council status: {{ state.user.CouncilStatus }} <br />
-        <div v-if="state.userIsUser" style="display: inline">
-          <button
-            v-if="state.user.CouncilStatus == 'unavailable'"
-            @click="register()"
-          >
-            Register for council
-          </button>
-          <button
-            v-if="state.user.CouncilStatus == 'available'"
-            @click="deRegister()"
-          >
-            Deregister from council
-          </button>
-        </div>
-      </div>
-
-      <br />
-      <div>
-        Vote rights: {{ state.user.votableCards.length }} <br />
-        <button v-if="state.userIsUser" @click="$router.push({ name: 'Vote' })">
-          Vote
-        </button>
-      </div>
-      <br />
-
-      <div>
-        Balance:
-        <div class="coinBox">
-          <div v-for="coin in state.coins" :key="coin">
-            {{ coin.pretty() }}
-            <br />
-          </div>
-        </div>
-        <br />
-        <button
-          v-if="state.userIsUser"
-          type="button"
-          class="btn"
-          @click="showModal"
-        >
-          Transfer
-        </button>
-      </div>
-      <br />
-      <div>
-        <button
-          v-if="state.userIsUser"
-          type="button"
-          class="btn"
-          @click="showGrantModal"
-        >
-          Manage authorisations
-        </button>
-      </div>
-      <br />
-      <TransferModal v-show="state.isModalVisible" @close="closeModal" />
-      <GrantModal v-if="state.isGrantModalVisible" @close="closeGrantModal" />
-      <ChoosePBModal
-        v-if="state.isChooseModalVisible"
-        :cardIds="state.user.ownedPrototypes"
-        @close="closeChooseModal"
-      />
-      <AirdropsModal
-        v-if="state.isAirdropsModalVisible"
-        :airdrops="state.user.airDrops ? state.user.airDrops : {}"
-        @close="closeAirdropsModal"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import TransferModal from "../components/modals/TransferModal.vue";
-import ChoosePBModal from "../components/modals/ChoosePBModal.vue";
-import GrantModal from "../components/modals/GrantModal.vue";
-import AirdropsModal from "../components/modals/AirdropsModal.vue";
-import { useAddress } from "@/def-composables/useAddress";
-import { useLoggedIn } from "@/def-composables/useLoggedIn";
-import { useQuery } from "@/def-composables/useQuery";
-import { validAddress } from "@/utils/validation";
-import { useTx } from "@/def-composables/useTx";
-import { useProfilePic } from "@/def-composables/useProfilePic";
-import type { Coin } from "@/model/Coin";
-import { normalizeCoins } from "@/utils/utils";
-import {
-  computed,
-  type ComputedRef,
-  onMounted,
-  reactive,
-  watch,
-} from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useUser } from "@/def-composables/useUser";
-import { User } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/user";
-
-const { queryQUser, queryAllBalances } = useQuery();
-const { registerForCouncil, rewokeCouncilRegistration } = useTx();
-const { address } = useAddress();
-const { loggedIn } = useLoggedIn();
-const { getImg } = useProfilePic();
-const { user, coins, queryCoins, queryUser } = useUser();
-const { loggedInProfilePic } = useProfilePic();
-const route = useRoute();
-const router = useRouter();
-
-const initialState: {
-  isChooseModalVisible: boolean;
-  isAirdropsModalVisible: boolean;
-  isModalVisible: boolean;
-  isGrantModalVisible: boolean;
-  addr: string;
-  user: User;
-  coins: Array<Coin>;
-  userIsUser: ComputedRef<boolean>;
-  img: string;
-} = {
-  isChooseModalVisible: false,
-  isAirdropsModalVisible: false,
-  isModalVisible: false,
-  isGrantModalVisible: false,
-  addr: "",
-  user: User.fromPartial({}),
-  coins: new Array<Coin>(),
-  userIsUser: computed(() => loggedIn.value && state.addr == address.value),
-  img: "jaja",
-};
-
-const state = reactive(initialState);
-
-watch(user, (val) => {
-  if (state.userIsUser) state.user = val;
-});
-watch(coins, (val) => {
-  if (state.userIsUser) state.coins = normalizeCoins(val);
-});
-watch(loggedInProfilePic, (val) => {
-  if (state.userIsUser) state.img = val;
-});
-
-const init = () => {
-  let id = route.params.id.toString();
-  if (id === "me") {
-    if (loggedIn.value) {
-      state.addr = address.value;
-    } else {
-      console.log("You're not logged in");
-      router.push({ name: "NotFound" });
-    }
-  } else {
-    state.addr = id;
-  }
-
-  if (state.userIsUser) {
-    state.user = user.value;
-    state.coins = normalizeCoins(coins.value);
-    state.img = loggedInProfilePic.value;
-  }
-
-  if (!validAddress(state.addr)) {
-    router.push({ name: "NotFound" });
-  }
-
-  router.push({ name: "UserView", params: { id: state.addr } });
-  getUser();
-  getCoins();
-};
-
-onMounted(init);
-
-const getUser = () => {
-  if (state.userIsUser) {
-    queryUser();
-  } else {
-    queryQUser(state.addr).then((user) => {
-      state.user = user;
-      getImg(state.user, state.addr).then((img) => {
-        state.img = img;
-      });
-    });
-  }
-};
-
-const getCoins = () => {
-  if (state.userIsUser) {
-    queryCoins();
-  } else {
-    queryAllBalances(state.addr).then((coins) => {
-      state.coins = normalizeCoins(coins.balances);
-    });
-  }
-};
-
-const register = () => registerForCouncil(getUser, console.log);
-const deRegister = () => rewokeCouncilRegistration(getUser, console.log);
-const showModal = () => {
-  state.isModalVisible = true;
-};
-const closeModal = () => {
-  state.isModalVisible = false;
-  getCoins();
-};
-const showGrantModal = () => {
-  state.isGrantModalVisible = true;
-};
-const closeGrantModal = () => {
-  state.isGrantModalVisible = false;
-};
-const showChooseModal = () => {
-  state.isChooseModalVisible = true;
-};
-const closeChooseModal = () => {
-  state.isChooseModalVisible = false;
-  getUser();
-};
-const showAirdropsModal = () => {
-  state.isAirdropsModalVisible = true;
-};
-const closeAirdropsModal = () => {
-  state.isAirdropsModalVisible = false;
-};
-</script>

From fd4bb20fd1c732b6aca406e96161d0d831c0b1a2 Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Wed, 24 Jan 2024 20:12:10 +0100
Subject: [PATCH 10/12] Added matches overview

---
 src/views/UserView/UserView.vue | 76 +++++++++++++++++++++------------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/views/UserView/UserView.vue b/src/views/UserView/UserView.vue
index 0c3ca2f5..6ccee397 100644
--- a/src/views/UserView/UserView.vue
+++ b/src/views/UserView/UserView.vue
@@ -18,6 +18,7 @@
         <template v-slot:body>
           <p>{{ user.CouncilStatus }}</p>
           <BaseCCButton
+            :type="ButtonType.YELLOW"
             v-if="state.userIsUser"
             @click="
               state.user.CouncilStatus == 'unavailable'
@@ -77,17 +78,44 @@
                   }}{{ arr.length == 1 ? "" : "s" }}</b
                 >
               </p>
-              <RouterCCButton>View in gallery</RouterCCButton>
+              <RouterCCButton :type="ButtonType.YELLOW"
+                >View in gallery
+              </RouterCCButton>
             </div>
           </template>
         </UserViewHeadingContainer>
         <UserViewHeadingContainer>
           <template v-slot:heading>Recent Activity</template>
           <template v-slot:body>
-            <RouterCCButton :to="{ name: 'Vote' }">Go to Voting</RouterCCButton>
+            <RouterCCButton :type="ButtonType.YELLOW" :to="{ name: 'Vote' }"
+              >Go to Voting
+            </RouterCCButton>
           </template>
         </UserViewHeadingContainer>
       </div>
+      <UserViewHeadingContainer class="pt-8">
+        <template v-slot:heading>Play History</template>
+        <template v-slot:body>
+          <div class="flex flex-wrap">
+            <UserViewHeadingContainer
+              class="pr-16"
+              v-for="(match, key) in state.matches"
+              :key="key"
+            >
+              <template v-slot:heading>Match {{ key }}</template>
+              <template v-slot:body>
+                {{
+                  (match.playerA.addr == state.addr &&
+                    match.outcome == "AWon") ||
+                  (match.playerB.addr == state.addr && match.outcome == "BWon")
+                    ? "WIN"
+                    : "LOSE"
+                }}
+              </template>
+            </UserViewHeadingContainer>
+          </div>
+        </template>
+      </UserViewHeadingContainer>
     </div>
   </div>
   <ChoosePBModal
@@ -111,14 +139,16 @@ import { computed, type ComputedRef, onMounted, reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useUser } from "@/def-composables/useUser";
 import { User } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/user";
+import { Match } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/match";
 import UserViewHeadingContainer from "@/views/UserView/UserViewHeadingContainer.vue";
 import RouterCCButton from "@/components/elements/CCButton/RouterCCButton.vue";
 import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
 import editImg from "@/assets/figma/edit.png";
 import ChoosePBModal from "@/components/modals/ChoosePBModal.vue";
+import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 
-const { queryQUser, queryAllBalances } = useQuery();
+const { queryQUser, queryAllBalances, queryQMatches } = useQuery();
 const { registerForCouncil, rewokeCouncilRegistration } = useTx();
 const { address } = useAddress();
 const { loggedIn } = useLoggedIn();
@@ -130,24 +160,20 @@ const router = useRouter();
 
 const initialState: {
   isChooseModalVisible: boolean;
-  isAirdropsModalVisible: boolean;
-  isModalVisible: boolean;
-  isGrantModalVisible: boolean;
   addr: string;
   user: User;
   coins: Array<Coin>;
   userIsUser: ComputedRef<boolean>;
   img: string;
+  matches: { [key: string]: Match };
 } = {
   isChooseModalVisible: false,
-  isAirdropsModalVisible: false,
-  isModalVisible: false,
-  isGrantModalVisible: false,
   addr: "",
   user: User.fromPartial({}),
   coins: new Array<Coin>(),
   userIsUser: computed(() => loggedIn.value && state.addr == address.value),
   img: "jaja",
+  matches: {},
 };
 
 const state = reactive(initialState);
@@ -178,6 +204,7 @@ const init = () => {
   router.push({ name: "UserView", params: { id: state.addr } });
   getUser();
   getCoins();
+  getMatches();
 };
 
 onMounted(init);
@@ -205,21 +232,20 @@ const getCoins = () => {
   }
 };
 
+const getMatches = () => {
+  queryQMatches({ containsUsers: state.addr, "ignore.outcome": true }).then(
+    (res) => {
+      state.matches = {}
+      res.matches.forEach((value: Match, idx: number) => {
+        state.matches[res.matchesList[idx]] = value;
+      });
+    }
+  );
+};
+
 const register = () => registerForCouncil(getUser, console.log);
 const deRegister = () => rewokeCouncilRegistration(getUser, console.log);
-const showModal = () => {
-  state.isModalVisible = true;
-};
-const closeModal = () => {
-  state.isModalVisible = false;
-  getCoins();
-};
-const showGrantModal = () => {
-  state.isGrantModalVisible = true;
-};
-const closeGrantModal = () => {
-  state.isGrantModalVisible = false;
-};
+
 const showChooseModal = () => {
   state.isChooseModalVisible = true;
 };
@@ -227,10 +253,4 @@ const closeChooseModal = () => {
   state.isChooseModalVisible = false;
   getUser();
 };
-const showAirdropsModal = () => {
-  state.isAirdropsModalVisible = true;
-};
-const closeAirdropsModal = () => {
-  state.isAirdropsModalVisible = false;
-};
 </script>

From 147e1cd2fe81d1f70a37915f4f954224d5349031 Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Thu, 25 Jan 2024 21:03:03 +0100
Subject: [PATCH 11/12] Userview more mobile friendly

---
 src/views/UserView/UserView.vue | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/views/UserView/UserView.vue b/src/views/UserView/UserView.vue
index 6ccee397..3746dc7c 100644
--- a/src/views/UserView/UserView.vue
+++ b/src/views/UserView/UserView.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="flex bg-black text-white justify-center p-16">
-    <div class="text-center pr-24">
+  <div
+    class="flex bg-black text-white md:space-x-24 justify-center md:px-16 py-16 max-md:flex-wrap"
+  >
+    <div class="text-center">
+      <h1 class="md:hidden text-5xl font-bold pb-12">
+        {{ heading }}
+      </h1>
       <div class="py-24">
         <div class="mx-auto h-64 w-64 relative group">
           <ProfilePicComponent :src="state.img" size="64" alt="Profile pic" />
@@ -44,9 +49,9 @@
         </UserViewHeadingContainer>
       </div>
     </div>
-    <div class="text-left">
-      <h1 class="text-5xl text-white font-bold pb-12">
-        {{ state.userIsUser ? "My Account" : state.user.alias }}
+    <div class="text-center md:text-left">
+      <h1 class="max-md:hidden text-5xl font-bold pb-12">
+        {{ heading }}
       </h1>
       <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16">
         <UserViewHeadingContainer>
@@ -96,9 +101,8 @@
       <UserViewHeadingContainer class="pt-8">
         <template v-slot:heading>Play History</template>
         <template v-slot:body>
-          <div class="flex flex-wrap">
+          <div class="grid gap-8 md:grid-cols-4">
             <UserViewHeadingContainer
-              class="pr-16"
               v-for="(match, key) in state.matches"
               :key="key"
             >
@@ -178,6 +182,10 @@ const initialState: {
 
 const state = reactive(initialState);
 
+const heading = computed(() => {
+  return state.userIsUser ? "My Account" : state.user.alias;
+});
+
 watch(user, (val) => {
   if (state.userIsUser) state.user = val;
 });
@@ -235,7 +243,7 @@ const getCoins = () => {
 const getMatches = () => {
   queryQMatches({ containsUsers: state.addr, "ignore.outcome": true }).then(
     (res) => {
-      state.matches = {}
+      state.matches = {};
       res.matches.forEach((value: Match, idx: number) => {
         state.matches[res.matchesList[idx]] = value;
       });

From ed27a40c14bcae2edc5041caad1872569e3fbe95 Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Thu, 25 Jan 2024 21:20:26 +0100
Subject: [PATCH 12/12] fixed mobile

---
 src/views/UserView/UserView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/UserView/UserView.vue b/src/views/UserView/UserView.vue
index 3746dc7c..8c96be7a 100644
--- a/src/views/UserView/UserView.vue
+++ b/src/views/UserView/UserView.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex bg-black text-white md:space-x-24 justify-center md:px-16 py-16 max-md:flex-wrap"
+    class="md:flex bg-black text-white md:space-x-24 justify-center md:px-16 py-16"
   >
     <div class="text-center">
       <h1 class="md:hidden text-5xl font-bold pb-12">