326 gallery fixes

src/components/elements/GalleryComponent.vue

@@ -6,21 +6,35 @@
     <div
       v-for="card in state.cards"
       :key="card.id"
-      class="hover:scale-110 drop-shadow-glowCCYellow"
+      class="transition duration-500 hover:scale-110 hover:duration-300"
+      :class="shadowClass(card)"
       @click="emit('cardClicked', card.id)"
     >
       <div>
         <CardComponent :model="card" />
       </div>
     </div>
   </div>
+
+  <div class="mt-12 flex flex-row justify-center items-center">
+    <BaseCCButton
+      :type="Color.RED"
+      @click="load()"
+      :class="{ invisible: !loadButtonVisible }"
+    >
+      Reckless Card Loading
+    </BaseCCButton>
+  </div>
 </template>
 
 <script setup lang="ts">
+import * as R from "ramda";
 import { computed, onBeforeUnmount, onMounted, reactive, watch } from "vue";
 import { useCards } from "@/def-composables/useCards";
 import { Card } from "@/model/Card";
 import CardComponent from "@/components/elements/CardComponent.vue";
+import { Color } from "@/components/utils/color";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 
 const { getCard } = useCards();
 const emit = defineEmits(["cardClicked"]);
@@ -54,11 +68,35 @@ const cardIdsOnPage = computed(() => {
   return props.allCardIds.slice(0, state.cardsOnPage);
 });
 
+
+const shadowClass = (card) => {
+  let classes = 0
+  R.forEachObjIndexed(entry => {
+    if (entry) classes++;
+  }, card.Class)
+  if (classes > 1) return {
+    'drop-shadow-glowCCYellow': true,
+  }
+  else return {
+    'drop-shadow-glowCCRed': card.Class.Culture,
+    'drop-shadow-glowCCBlue': card.Class.Technology,
+    'drop-shadow-glowCCGreen': card.Class.Nature,
+    'drop-shadow-glowCCPurple': card.Class.Mysticism
+    }
+};
+
 onMounted(() => {
   state.cardsOnPage = props.cardsPerPage;
-  window.addEventListener("scroll", onScroll);
 });
 
+let loadButtonVisible = true;
+
+const load = () => {
+  state.cardsOnPage += 10;
+  loadButtonVisible = false;
+  window.addEventListener("scroll", onScroll);
+};
+
 onBeforeUnmount(() => {
   window.removeEventListener("scroll", onScroll);
 });

src/components/partials/PageFooter.vue

@@ -35,7 +35,7 @@
           </router-link>
         </div>
         <div>
-          <a href="https://crowdcontrol-network.gitbook.io/"> GitBook </a>
+          <a href="https://crowdcontrol-network.gitbook.io/" target="_blank"> GitBook </a>
         </div>
         <div>
           <router-link :to="{ name: 'Team' }">
@@ -49,7 +49,7 @@
         </div>
         <div>
           <a
-            href="https://github.com/DecentralCardGame/whitepaper/blob/master/whitepaper.pdf"
+            href="https://github.com/DecentralCardGame/whitepaper/blob/master/whitepaper.pdf" target="_blank"
           >
             Whitepaper
           </a>
@@ -66,7 +66,7 @@
           Social
         </div>
 
-        <a href="https://discord.gg/ZKKbhUs">
+        <a href="https://discord.gg/ZKKbhUs" target="_blank">
           <div class="flex flex-row space-x-2 items-center">
             <div>
               <picture>
@@ -89,7 +89,7 @@
           </div>
         </a>
 
-        <a href="https://twitter.com/CrowdControlNet">
+        <a href="https://twitter.com/CrowdControlNet" target="_blank">
           <div class="flex flex-row space-x-2 items-center">
             <div>
               <picture>
@@ -112,7 +112,7 @@
           </div>
         </a>
 
-        <a href="https://github.com/DecentralCardGame">
+        <a href="https://github.com/DecentralCardGame" target="_blank">
           <div class="flex flex-row space-x-2 items-center">
             <div>
               <picture>
@@ -135,7 +135,7 @@
           </div>
         </a>
 
-        <a href="https://t.me/DecentralCardNetwork">
+        <a href="https://t.me/DecentralCardNetwork" target="_blank">
           <div class="flex flex-row space-x-2 items-center">
             <div>
               <picture>

src/router/index.ts

@@ -5,6 +5,7 @@ const VotingResultsPage = () => import("@/views/VotingResultsPage.vue");
 const CardCreator = () => import("@/views/CardCreatorPage.vue");
 const NotFound = () => import("@/views/NotFound.vue");
 const RoadmapPage = () => import("@/views/About/RoadmapPage.vue");
+const WhitepaperPage = () => import("@/views/About/WhitepaperPage.vue");
 const LandingPage = () => import("@/views/LandingPage.vue");
 const ImprintPage = () => import("@/views/ImprintPage.vue");
 const TeamPage = () => import("@/views/About/TeamPage.vue");
@@ -78,6 +79,12 @@ const routes = [
     meta: { layout: "Default" },
     component: RoadmapPage,
   },
+  {
+    path: "/about/whitepaper",
+    name: "Whitepaper",
+    meta: { layout: "Default" },
+    component: WhitepaperPage,
+  },
   {
     path: "/imprint",
     name: "Imprint",

src/views/About/TeamPage.vue

@@ -26,6 +26,8 @@
         </p>
         <br>
         <p>
+          Stefi Rescheleit<br>
+          Benny Renz<br>
           Harold Zellner<br>
           Thilo Billerbeck <br>
           Andy Frankenberger <br>
@@ -48,6 +50,7 @@ import kosta from "@/assets/team/kosta.webp";
 import benny from "@/assets/team/benny.webp";
 import stefi from "@/assets/team/stefi.webp";
 import noah from "@/assets/team/noah.webp";
+import clarissa from "@/assets/team/clarissa.webp";
 import logo from "@/assets/figma/CCLogo.png";
 
 const items: { pic: any; name: string; desc: string }[] = [
@@ -57,9 +60,9 @@ const items: { pic: any; name: string; desc: string }[] = [
   { pic: peer, name: "Peer", desc: "Blockchain Dev" },
   { pic: niko, name: "Niko", desc: "Unity Dev" },
   { pic: jannik, name: "Jannik", desc: "Game Design" },
+  { pic: clarissa, name: "Clarissa", desc: "Music Composition" },
   { pic: kosta, name: "Kosta", desc: "2D Artist" },
-  { pic: benny, name: "Benny", desc: "2D / 3D Artist" },
-  { pic: stefi, name: "Stefi", desc: "2D Artist" },
   { pic: noah, name: "Noah", desc: "Game Design" },
+
 ];
 </script>