From 4f095c9b336d1cbd6da6712e4dc89b429cb4bc74 Mon Sep 17 00:00:00 2001
From: Patrick <patrick.wieth@googlemail.com>
Date: Sun, 10 Mar 2024 11:12:02 +0100
Subject: [PATCH] play page implement and linked to it on other pages

---
 src/components/modals/AirdropsModal.vue |  2 +-
 src/router/index.ts                     | 12 +++++++---
 src/views/AboutPage.vue                 |  2 +-
 src/views/LandingPage.vue               | 29 ++++++++++++++++--------
 src/views/Learn.vue                     |  2 +-
 src/views/Play.vue                      | 30 +++++++++++++++++++++++++
 6 files changed, 62 insertions(+), 15 deletions(-)
 create mode 100644 src/views/Play.vue

diff --git a/src/components/modals/AirdropsModal.vue b/src/components/modals/AirdropsModal.vue
index 47e4ec57..fe21d419 100644
--- a/src/components/modals/AirdropsModal.vue
+++ b/src/components/modals/AirdropsModal.vue
@@ -96,7 +96,7 @@ export default {
         create: {
           text: "Create a ",
           linkText: "card draft.",
-          linkData: 'New Card'
+          linkData: 'CardCreator'
         },
         vote: {
           text: "Vote for a ",
diff --git a/src/router/index.ts b/src/router/index.ts
index 365360e5..a4345179 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,7 +2,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
 
 const GalleryPage = () => import("@/views/GalleryPage.vue");
 const VotingResultsPage = () => import("@/views/VotingResultsPage.vue");
-const NewCardPage = () => import("@/views/CardCreatorPage.vue");
+const CardCreator = () => import("@/views/CardCreatorPage.vue");
 const AboutPage = () => import("@/views/AboutPage.vue");
 const NotFound = () => import("@/views/NotFound.vue");
 const RoadmapPage = () => import("@/views/RoadmapPage.vue");
@@ -16,6 +16,7 @@ const GameclientAuthz = () => import("@/views/GameClientAuthzPage.vue");
 const Demo = () => import("@/views/Demo.vue");
 const Login = () => import("@/views/LoginPage.vue");
 const Learn = () => import("@/views/Learn.vue");
+const Play = () => import("@/views/Play.vue");
 
 const routes = [
   {
@@ -50,8 +51,8 @@ const routes = [
   },
   {
     path: "/cardCreator",
-    name: "New Card",
-    component: NewCardPage,
+    name: "CardCreator",
+    component: CardCreator,
     meta: { layout: "Default" },
   },
   {
@@ -65,6 +66,11 @@ const routes = [
     name: "Learn",
     component: Learn,
   },
+  {
+    path: "/play",
+    name: "Play",
+    component: Play,
+  },
   {
     path: "/team",
     name: "Team",
diff --git a/src/views/AboutPage.vue b/src/views/AboutPage.vue
index 78ee49f6..9d7f17f7 100644
--- a/src/views/AboutPage.vue
+++ b/src/views/AboutPage.vue
@@ -59,7 +59,7 @@
           Crowd Control gives you full ownership. And we mean it.
           You own the cards which you acquire through play and participation.
           And furthermore you own the card prototypes which you design and create. Go to the
-          <router-link :to="{ name: 'New Card' }">
+          <router-link :to="{ name: 'CardCreator' }">
             Card Creator
           </router-link>
           to start creating.
diff --git a/src/views/LandingPage.vue b/src/views/LandingPage.vue
index 93106007..9499ed6a 100644
--- a/src/views/LandingPage.vue
+++ b/src/views/LandingPage.vue
@@ -25,7 +25,7 @@
             >
               CREATE CARDS
             </RouterCCButton>
-            <RouterCCButton :type="ButtonType.BLACK" to="/p">
+            <RouterCCButton :type="ButtonType.BLACK" to="/play">
               Play the game
             </RouterCCButton>
           </div>
@@ -75,18 +75,29 @@
           </div>
         </div>
         <div class="flex pt-20 justify-evenly sm:px-32 flex-wrap gap-4">
-          <div v-for="cardBack in cardBacks" class="relative hover:scale-105">
-            <img
-              alt="cardback"
-              :src="cardBack.cardBack"
-              class="h-[20rem] drop-shadow-glowRed"
-            />
+                   
+          <div 
+            v-for="cardBack in cardBacks" 
+            class="relative hover:scale-105"
+            @click="router.push('/cardCreator')"
+          >
+            <router-link
+              :to="{ name: cardBack.route}"
+            >
+              <img
+                alt="cardback"
+                :src="cardBack.cardBack"
+                class="h-[20rem] drop-shadow-glowRed"
+              />
+            </router-link>
             <div class="absolute top-52 left-0 right-0 text-center">
               <p class="text-3xl font-bold">
                 {{ cardBack.heading }}
               </p>
               <p>{{ cardBack.text }}</p>
             </div>
+
+            
           </div>
         </div>
       </div>
@@ -139,8 +150,8 @@ type CardBack = {
 };
 
 const cardBacks: CardBack[] = [
-  { cardBack: cardBack1, heading: "CREATE", text: "Assets, Games, Worlds" },
-  { cardBack: cardBack2, heading: "PLAY", text: "Games, Characters, Stories" },
+  { cardBack: cardBack1, heading: "CREATE", text: "Assets, Games, Worlds", route: "CardCreator" },
+  { cardBack: cardBack2, heading: "PLAY", text: "Games, Characters, Stories", route: "Play" },
   { cardBack: cardBack3, heading: "VOTE", text: "Balance, Decide, Govern" },
   { cardBack: cardBack4, heading: "OWN", text: "Earn, Collect, Trade" },
 ];
diff --git a/src/views/Learn.vue b/src/views/Learn.vue
index bb58b5b6..3f40e5eb 100644
--- a/src/views/Learn.vue
+++ b/src/views/Learn.vue
@@ -14,7 +14,7 @@
             <BaseCCButton
               :type="ButtonType.RED"
             >
-              Open GitBook 
+              Open GitBook
             </BaseCCButton> 
             </a>
         </div>
diff --git a/src/views/Play.vue b/src/views/Play.vue
new file mode 100644
index 00000000..e0e0dad3
--- /dev/null
+++ b/src/views/Play.vue
@@ -0,0 +1,30 @@
+<template>
+  <div >
+    <FadeTeaser>
+      <div class="px-0 py-40 flex text-center justify-center">
+        <div>
+          <p class="text-5xl font-black text-red-600 font-lg">
+            Play the Game!
+          </p>
+          <p class="py-10 text-xl font-medium font-lg">
+            Our alpha version is currently in development <br>
+            and not publicly released :( <br>
+            We only do closed playtests at the moment. <br>
+            The button below will do nothing.
+          </p>
+            <BaseCCButton
+              :type="ButtonType.RED"
+            >
+              Download Gameclient
+            </BaseCCButton>
+        </div>
+      </div>
+    </FadeTeaser>
+  </div>
+</template>
+
+<script setup lang="ts">
+import FadeTeaser from "@/components/elements/FadeTeaser.vue";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import { ButtonType } from "@/components/elements/CCButton/ButtonType";
+</script>