Skip to content

Commit

Permalink
Merge pull request #328 from DecentralCardGame/302-about-page
Browse files Browse the repository at this point in the history 
302 about page
  • Loading branch information
@patrickwieth
patrickwieth authored Nov 15, 2024
2 parents 386743e + 6ecd281 commit f9c7057
Show file tree
Hide file tree
Showing 9 changed files with 321 additions and 128 deletions.
Binary file added src/assets/team/clarissa.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/team/clarissa.webp
View file
Binary file not shown.
12 changes: 6 additions & 6 deletions src/components/partials/PageFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' }">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions src/router/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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",
Expand Down
238 changes: 120 additions & 118 deletions src/views/About/RoadmapPage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,60 @@
<template>
<div class="article-temp width-temp">
<div class="dual--column--flex--wrap">
<div class="dual--column--text">
<div class="qbox--container">
<p class="qbox--text">
Q1 2019
<div class="article-temp width-temp bg-black">
<div class="flex flex-col md:grid grid-cols-9 mx-auto text-white">
<div v-for="(section, index) in sections" :key="index"
class="flex md:contents"
:class="{ 'flex-row-reverse': index%2==0 }">
<!-- left -->
<div v-if="index%2==0"
class="bg-red-600 col-start-1 col-end-5 p-4 rounded-xl my-4 ml-auto shadow-md">
<h3 class="font-semibold text-lg mb-1"> {{ section.title }} </h3>
<p class="leading-tight text-justify">
<ul>
<li v-for="element in section.description" :key="element">
{{ element }}
</li>
</ul>
</p>
</div>
<h2>1. The Beginning</h2>
<div>
<BulletList
:text="[
'Develop the game rules and mechanics',
'Community owned collectible card game concepting',
'Technology: Cosmos Blockchain + Unity Gameclient',
]"
:type="['filled', 'filled', 'filled']"
/>
<div v-if="index%2==0"
class="col-start-5 col-end-6 md:mx-auto relative mr-10">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-red-600 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-red-600 shadow">
<div v-if="index==CCmarkerPos"
class="bg-white h-6 w-6 rounded-full shadow flex items-center justify-center ">
<img src="/src/assets/figma/CCLogoSmallInvert.png" alt="check">
</div>
</div>
</div>
<p class="text--big">
Contribute: You can join our team by contacting us on Telegram or
Discord.
</p>
</div>
</div>

<div class="dual--column--flex--wrap">
<div class="dual--column--text">
<div class="qbox--container">
<p class="qbox--text">
Q1 2021
</p>
</div>
<h2>2. The Crowd gets angry</h2>
<div>
<BulletList
:text="[
'Create cards with the Card Creator',
'Test the alpha game client',
'Manage cards on the blockchain (testnet)',
'Test buff/nerf mechanics via blockchain',
]"
:type="['filled', 'open', 'filled', 'filled']"
/>
</div>
<p class="text--big">
Contribute: Join the team, design cards or join the alpha tests.
</p>
</div>
</div>

<div class="dual--column--flex--wrap reverse-column">
<div class="dual--column--text">
<div class="qbox--container">
<p class="qbox--text">
Q1 2023
</p>
<!-- right -->
<div v-if="index%2==1"
class="col-start-5 col-end-6 mr-10 md:mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-red-600 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-red-600 shadow">
<div v-if="index==CCmarkerPos"
class="bg-white h-6 w-6 rounded-full shadow flex items-center justify-center ">
<img src="/src/assets/figma/CCLogoSmallInvert.png" alt="check">
</div>
</div>
</div>
<h2>3. The Revolution starts</h2>
<div>
<BulletList
:text="[
'Blockchain-ready game client is playable',
'Creation of Card Sets/Editions',
'Startup tests for the Mainnet',
'The alpha set + starter decks are finalized',
]"
:type="[]"
/>
</div>
<p class="text--big">
Contribute: Play the beta or join our team <br>
Rewarded: Succesful attempts to break our Game Client or Tokenomics.
</p>
</div>
</div>

<div class="dual--column--flex--wrap">
<div class="dual--column--text">
<div class="qbox--container">
<p class="qbox--text">
Q3 2024
<div v-if="index%2==1"
class="bg-red-600 col-start-6 col-end-10 p-4 rounded-xl my-4 mr-auto shadow-md">
<h3 class="font-semibold text-lg mb-1">{{ section.title }}</h3>
<p class="leading-tight text-justify">
<ul>
<li v-for="element in section.description" :key="element">
{{ element }}
</li>
</ul>
</p>
</div>
<h2>4. The Revolution unfolds</h2>
<div>
<BulletList
:text="[
'Mainnet launch',
'Airdrop to several groups',
'Maybe ICO / IDO / LBP',
'The alpha set + starter decks',
]"
:type="[]"
/>
</div>
<p class="text--big">
Contribute: Register for the airdrop and token sale.
</p>
</div>
</div>

<div>
<div class="dual--column--text">
<div class="qbox--container">
<p class="qbox--text">
Q1 2025
</p>
</div>
<h2>5. The Crowd is in Control</h2>
<div>
<BulletList
:text="[
'Game client is taken to the next level',
'User created tournament system',
'Continuous release of new sets via set election',
]"
:type="[]"
/>
</div>
<p class="text--big">
It's on you: Participate via card creation, governance votes and
playing. Give us your feedback!
</p>
</div>
<div class="h-12 bg-red-600">
</div>
</div>
</template>
Expand All @@ -135,7 +66,78 @@ export default {
name: "RoadmapPage",
components: { BulletList },
data() {
return {};
return {
CCmarkerPos: 2,
sections: [
{
title: "2026 - Cambrian Explosion",
description: [
"Release of new sets via set election",
"More games are added and use:",
" • Automatic balancing.",
" • User created game items.",
" • User created maps.",
" • User created campaigns."]
},
{
title: "2025 - The Crowd is in Control",
description: [
"Incentivized Testnet",
"Mainnet Launch",
"Game client is taken to the next level",
"Players can create their own dungeons/adventures.",
"Players wrap their own stories into campaigns.",
]
},
{
title: "2024 - The Revolution unfolds",
description: [
'Blockchain-ready game client is playable.',
'Startup tests for the Mainnet.',
'The alpha set + starter decks are finalized.',
'Players have created their own decks.',
'Public Play Togethers.',
'More Airdrops to contributors.']
},
{
title: "2023 - The Revolution starts",
description: [
"Airdrop to several groups.",
"Real users test the gameclient.",
"The alpha set + starter decks."]
},
{
title: "2022 - The Crowd gets angry",
description: [
'Cards are created with the Card Creator.',
'Public testnet goes live.',
'Manage cards on the blockchain.',
'Buff/nerf mechanics via blockchain.']
},
{
title: "2021 - First Prototypes",
description: [
"The game mechanics are working.",
"First game prototype in Unity.",
"Blockchain testnet is working."]
},
{
title: "2020 - Cosmos & Unity Tech",
description: [
"We pick and develop with Cosmos tech stack.",
"This means no fee. Full control over chain.",
"We pick Unity for the game engine."
]
},
{
title: "2019 - The Beginning",
description: [
"First concepts are evaluated.",
"How to prevent users destroying a game?",
"How can we revolutionize card games"
]
}]
};
},
mounted() {},
};
Expand Down
7 changes: 5 additions & 2 deletions src/views/About/TeamPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
</p>
<br>
<p>
Stefi Rescheleit<br>
Benny Renz<br>
Harold Zellner<br>
Thilo Billerbeck <br>
Andy Frankenberger <br>
Expand All @@ -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 }[] = [
Expand All @@ -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>
Loading

0 comments on commit f9c7057

Please sign in to comment.