An online poker tracker for PokerTH (https://pokerth.net). Continuation of https://github.com/Pik-9/PokerTH-Tracker https://finda.fish
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

158 lines
4.0 KiB

<template>
<v-app>
<Ocean :relativeScrollPosition="relativeScrollPosition" />
<v-container ref="main" v-scroll="onScroll">
<v-row>
<v-col align="center">
<v-img :src="require('@/assets/Logo.svg')" max-width="500px" max-height="500px" />
</v-col>
</v-row>
<v-row v-for="(card, index) in cards" :key="index">
<v-col align="center">
<div ref="displayCards">
<v-card class="fullpage" max-width="500" :style="xTrans[index]">
<v-img v-if="card.image" contain :src="card.image" max-width="500" />
<v-card-title>{{ $t(card.title) }}</v-card-title>
<v-card-text v-html="$t(card.text)" />
<v-card-actions v-if="card.actions">
<v-btn
v-for="(act, actIndex) in card.actions"
:key="actIndex"
nuxt
text
:to="act.link"
:color="act.color"
>
{{ $t(act.caption) }}
</v-btn>
</v-card-actions>
</v-card>
</div>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
<script>
import Ocean from '@/components/ocean.vue';
export default {
layout: 'landing',
components: {
Ocean,
},
data() {
return {
relativeScrollPosition: 0,
cards: [
{
title: 'title-finda-fish',
text: 'text-welcome',
translate: 0,
},
{
title: 'title-tracking-what',
text: 'text-tracker',
/* eslint-disable-next-line global-require */
image: require('@/assets/poker1.jpg'),
translate: 0,
},
{
title: 'title-online-tracking',
text: 'text-online',
translate: 0,
},
{
title: 'title-how-works',
text: 'text-how-works',
/* eslint-disable-next-line global-require */
image: require('@/assets/poker2.jpg'),
actions: [
{
caption: 'button-get-me-there',
link: '/overview',
color: 'accent',
},
],
translate: 0,
},
{
title: 'title-log-donations',
text: 'text-log-donations',
actions: [
{
caption: 'button-upload-files',
link: '/submit',
color: 'secondary',
},
],
translate: 0,
},
{
title: 'title-what-get',
text: 'text-what-get',
translate: 0,
},
{
title: 'title-enjoy',
text: 'text-enjoy',
/* eslint-disable-next-line global-require */
image: require('@/assets/poker3.jpg'),
actions: [
{
caption: 'button-get-started',
link: '/overview',
color: 'accent',
},
],
translate: 0,
},
],
};
},
computed: {
xTrans() {
return this.cards.map((card) => `transform: translateX(${card.translate * 2}px)`);
},
},
methods: {
/* eslint-disable-next-line no-unused-vars */
onScroll(scrollEvent) {
const hw = window.innerHeight;
// Let the text cards float.
this.$refs.displayCards.forEach((dCard, index) => {
const rect = dCard.getBoundingClientRect();
const deltaM = rect.top + ((rect.height - hw) / 2);
this.cards[index].translate = ((-1) ** index) * deltaM;
});
// Scroll over the ocean svg.
const absScroll = this.$refs.main.getBoundingClientRect().top;
const mainHeight = this.$refs.main.scrollHeight;
const windowHeight = window.innerHeight;
this.relativeScrollPosition = ((-1) * absScroll) / (mainHeight - windowHeight);
},
},
};
</script>
<style>
body {
padding: 0;
margin: 0;
}
.fullpage {
margin-top: 50vh;
margin-bottom: 50vh;
}
</style>