Add 'Games' page

briqNFT · Dec 12, 2023 · 08e08f9 · 08e08f9
1 parent 6d23bbb
commit 08e08f9
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 0 deletions.
diff --git a/src/Dispatch.ts b/src/Dispatch.ts
@@ -21,6 +21,7 @@ import BoxPageVue_ from './components/builder/genesis/BoxPage.vue';
 import SetPageVue_ from './components/builder/genesis/SetPage.vue';
 import Collections_ from '@/components/collections/ManageCollection.vue';
 import BuyBriqsVue from '@/components/BuyBriqs.vue';
+import GamesListingVue from './components/GamesListing.vue';
 
 import { userPurchaseStore } from '@/builder/UserPurchase';
 
@@ -40,5 +41,6 @@ export const BoxPageVue = BoxPageVue_;
 export const SetPageVue = SetPageVue_;
 export const Collections = Collections_;
 export const BuyBriqs = BuyBriqsVue;
+export const GamesListing = GamesListingVue;
 
 userPurchaseStore.setup();
diff --git a/src/Routes.ts b/src/Routes.ts
@@ -99,6 +99,14 @@ export const routes = [
             return loader.ProfilePageVue;
         },
     },
+    {
+        path: '/games',
+        name: 'Games',
+        component: async () => {
+            await loadExtraPages();
+            return loader.GamesListing;
+        },
+    },
     {
         path: '/themes',
         name: 'ThemesListing',

diff --git a/src/assets/briqmas_forest_splash.jpg b/src/assets/briqmas_forest_splash.jpg
diff --git a/src/components/GamesListing.vue b/src/components/GamesListing.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import Header from '@/components/landing_page/Header.vue';
+import Footer from '@/components/landing_page/Footer.vue';
+import briqout_logo from '@/assets/briqout/briqout-logo.png?url';
+import briqmas_forest_splash from '@/assets/briqmas_forest_splash.jpg?url';
+
+const appList = [
+    {
+        name: 'briqout',
+        route: { name: 'briqout' },
+        splash_high: briqout_logo,
+        splash_low: briqout_logo,
+        style: 'bg-contain',
+    },
+    {
+        name: 'briqmas forest',
+        route: { name: 'BriqMas Forest' },
+        splash_high: briqmas_forest_splash,
+        splash_low: briqmas_forest_splash,
+        style: 'bg-cover',
+    },
+
+]
+</script>
+
+
+<style scoped>
+.popOver > div {
+    @apply relative top-0 transition-all duration-300;
+}
+.popOver:hover > div {
+    @apply top-[-0.5rem] shadow-lg;
+}
+</style>
+
+<template>
+    <Header/>
+    <div class="container m-auto min-h-screen">
+        <h3 class="mt-10 mb-4">Games</h3>
+        <div class="mb-4 grid md:grid-cols-2 xl:grid-cols-3 gap-6">
+            <RouterLink class="popOver" v-for="theme of appList" :key="theme.name" :to="theme.route">
+                <div class="h-[16rem] flex flex-col justify-center items-center gap-2 rounded-lg relative">
+                    <div class="absolute pointer-events-none overflow-hidden rounded-lg h-full w-full">
+                        <div
+                            :class="`w-full h-full bg-origin-content bg-center bg-no-repeat bg-grad-lightest border rounded-lg ${theme.style}`"
+                            :style="{ backgroundImage: `url(${theme.splash_high}), url(${theme.splash_low})` }"/>
+                    </div>
+                    <h4 class="text-md text-white absolute bottom-3 left-4">{{ theme.name }}</h4>
+                </div>
+            </RouterLink>
+            <!--
+            <div class="h-[16rem] flex flex-col justify-center items-center gap-2 bg-grad-lightest border border-grad-light rounded-lg">
+                <p class="text-primary">New themes</p>
+                <h3>COMING SOON</h3>
+                <briqIcon width="1.25rem"/>
+            </div>
+            -->
+        </div>
+    </div>
+    <Footer/>
+</template>
diff --git a/src/components/builder/genesis/ThemesListing.vue b/src/components/builder/genesis/ThemesListing.vue
@@ -55,11 +55,13 @@ const { themeSplashSrc } = useThemeURLs();
                     <h4 class="text-md text-white absolute bottom-3 left-4">{{ genesisStore.themedata[theme]._data?.name }}</h4>
                 </div>
             </RouterLink>
+            <!--
             <div class="h-[16rem] flex flex-col justify-center items-center gap-2 bg-grad-lightest border border-grad-light rounded-lg">
                 <p class="text-primary">New themes</p>
                 <h3>COMING SOON</h3>
                 <briqIcon width="1.25rem"/>
             </div>
+            -->
         </div>
     </div>
     <Footer/>

diff --git a/src/components/landing_page/Header.vue b/src/components/landing_page/Header.vue
@@ -79,6 +79,9 @@ onMounted(() => {
                 <routerLink class="hidden sm:block" to="/get_briqs">
                     <p class="hover:text-primary text-sm md:text-md font-medium brea">Get&nbsp;briqs</p>
                 </routerLink>
+                <routerLink class="hidden sm:block" to="/games">
+                    <p class="hover:text-primary text-sm md:text-md font-medium brea">Games</p>
+                </routerLink>
                 <div v-if="APP_ENV === 'dev'" class="hidden lg:block text-info-info font-semibold px-2 py-1">DEV ENV - FOR TESTING ONLY</div>
                 <div v-else-if="APP_ENV !== 'prod'" class="hidden lg:block text-primary font-semibold px-2 py-1">STAGING ENV - FOR TESTING ONLY</div>
             </div>