Merge pull request #258 from DecentralCardGame/257-advanced-cardview

Added dvanced caardview and Compact addresscomponent

src/components/elements/CompactAddressComponent.vue

@@ -0,0 +1,35 @@
+<template>
+  <router-link
+    :to="{ name: 'UserView', params: { id: safeAddr } }"
+    class="hover:underline relative group"
+    >{{ shortenedAddr }}
+    <div
+      class="absolute z-10 invisible group-hover:visible bg-black rounded p-2"
+    >
+      {{ safeAddr }}
+    </div>
+  </router-link>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    addr: string;
+  }>(),
+  {
+    addr: "none",
+  }
+);
+
+const safeAddr = computed(() => {
+  return props.addr ? props.addr : "none";
+});
+
+const shortenedAddr = computed(() => {
+  const len = safeAddr.value.length;
+  return len > 11
+    ? safeAddr.value.slice(0, 5) + "..." + safeAddr.value.slice(len - 5, len)
+    : safeAddr;
+});
+</script>

src/components/elements/KeywordComponent.vue

@@ -5,13 +5,10 @@
       :key="index"
       class="Keywords"
     >
-      <p
-        class="Keyword"
-      >
+      <p class="font-bold">
         {{ keyword[0] }}
       </p>
       <p>{{ keyword[1] }}</p>
-      <br>
     </div>
   </div>
 </template>
@@ -21,41 +18,41 @@ import * as R from "ramda";
 import { useCardsRules } from "@/def-composables/useCardRules";
 import { onMounted, reactive, watch } from "vue";
 
-const { rules } = useCardsRules()
+const { rules } = useCardsRules();
 
-const props = withDefaults(defineProps<{
-  keywords: Array<Array<string>>
-}>(), {
-  keywords: () => [],
-})
+const props = withDefaults(
+  defineProps<{
+    keywords: Array<Array<string>>;
+  }>(),
+  {
+    keywords: () => [],
+  }
+);
 
 const initialState: {
-  keywordDescriptions: Array<Array<string>>
+  keywordDescriptions: Array<Array<string>>;
 } = {
-  keywordDescriptions: new Array<Array<string>>()
+  keywordDescriptions: new Array<Array<string>>(),
 };
 
 const state = reactive(initialState);
 
 const init = () => {
   state.keywordDescriptions = R.map(
-    (keyword) => [keyword, rules.value.definitions[firstLetterToLower(keyword as String)].description],
-  R.uniq(R.flatten(props.keywords))
-  )
-}
+    (keyword) => [
+      keyword,
+      rules.value.definitions[firstLetterToLower(keyword as String)]
+        .description,
+    ],
+    R.uniq(R.flatten(props.keywords))
+  );
+};
 
 const firstLetterToLower = (string: String) => {
   return string[0].toLowerCase() + string.substring(1);
-}
+};
 
 watch(props, init);
 
-onMounted(init)
-
+onMounted(init);
 </script>
-
-<style>
-.Keyword {
-  font-weight: bold;
-}
-</style>

src/components/elements/ModalInner.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <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>
+</template>
+
+<script setup lang="ts">
+import closeImg from "@/assets/figma/close.svg";
+
+const props = withDefaults(
+  defineProps<{
+    heading: string;
+  }>(),
+  {
+    heading: "Lorem impsum dolor",
+  }
+);
+
+const emit = defineEmits(["close"]);
+</script>

src/components/modals/ModalFrame.vue

@@ -1,24 +1,15 @@
 <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>
+    <ModalInner
+      :class="['p-10', 'z-100', 'm-auto'].concat(props.class)"
+      @close="emit('close')"
+    >
+      <slot></slot>
+    </ModalInner>
   </div>
 </template>
 <script setup lang="ts">
-import closeImg from "@/assets/figma/close.svg";
+import ModalInner from "@/components/elements/ModalInner.vue";
 
 const props = withDefaults(
   defineProps<{