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.
 
 

348 lines
16 KiB

<template>
<div ref="background" class="ocean_bg">
<svg viewBox="0 0 1680 3150" ref="board">
<defs id="defs2" >
<linearGradient id="wave3" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="#5599FF" />
<stop offset="95%" stop-color="#5599FF" stop-opacity="0" />
</linearGradient>
<linearGradient id="wave2" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="#0055D4" />
<stop offset="95%" stop-color="#0055D4" stop-opacity="0" />
</linearGradient>
<linearGradient id="wave1" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="#0000AA" />
<stop offset="50%" stop-color="#37ABC8" stop-opacity="0.6" />
<stop offset="95%" stop-color="#00FFCC" stop-opacity="0.2" />
</linearGradient>
<radialGradient id="bubble">
<stop offset="0%" stop-color="white" stop-opacity=0 />
<stop offset="100%" stop-color="white" stop-opacity=1 />
</radialGradient>
</defs>
<symbol id="seagrass" width="400" height="400" viewBox="0 0 400 400">
<path
fill="none"
stroke="#78a628"
stroke-width="10"
stroke-linecap="round"
>
<animate
attributeName="d"
values="m 191.49029,370.55837 c -29.03432,-8.86596 -58.06982,-17.73228
-71.97905,-31.26856 -13.90923,-13.53628 -12.691,-31.74235 1.55643,-50.69401
14.24743,-18.95167 41.52267,-38.64669 45.34681,-62.19963 3.82414,-23.55293
-15.80322,-50.96356 -41.21788,-72.48682 C 99.781943,132.38609 68.581233,116.75189
50.746581,100.91445 32.911929,85.077023 28.44501,69.036735 23.97767,52.994938;m
191.49029,370.55837 c -22.33413,-8.57871 -44.66902,-17.15771 -58.57835,-30.69399
-13.90932,-13.53629 -19.39111,-32.02951 -14.28492,-46.57825 5.10619,-14.54875
20.79966,-25.15066 21.03458,-42.00347 0.23492,-16.85281 -14.98928,-39.9558
-34.6133,-66.02574 C 85.424281,159.18698 61.402179,130.15271 55.675735,102.49354
49.949292,74.834368 62.519582,48.5526 75.090328,22.269879;M 191.49029,370.55837
C 142.45107,369.2537 93.411799,367.94902 79.502344,354.41241 65.592889,340.8758
86.815476,315.10825 109.72561,301.4695 c 22.91014,-13.63875 47.50488,-15.14795
47.73948,-32.00083 0.2346,-16.85288 -23.89088,-49.04859 -42.07969,-55.68805
-18.188806,-6.63946 -30.437757,12.27897 -45.256998,28.26733 -14.819241,15.98835
-32.20765,29.04533 -49.596567,42.10269;m 191.49029,370.55837 c -29.03432,-8.86596
-58.06982,-17.73228 -71.97905,-31.26856 -13.90923,-13.53628 -12.691,-31.74235
1.55643,-50.69401 14.24743,-18.95167 41.52267,-38.64669 45.34681,-62.19963
3.82414,-23.55293 -15.80322,-50.96356 -41.21788,-72.48682 C 99.781943,132.38609
68.581233,116.75189 50.746581,100.91445 32.911929,85.077023 28.44501,69.036735
23.97767,52.994938"
dur="5273ms"
repeatCount="indefinite"
/>
</path>
<path
fill="none"
stroke="#78a628"
stroke-width="10"
stroke-linecap="round"
>
<animate
attributeName="d"
values="m 191.49029,370.55837 c -0.74447,-35.4643 -1.48895,-70.92962
-10.96401,-91.67449 -9.47506,-20.74488 -27.68114,-26.76844 -37.834,-43.04586
-10.15287,-16.27742 -12.25094,-42.80819 -7.81783,-67.95256 4.43312,-25.14438
15.39734,-48.90024 11.60757,-70.084585 C 142.69225,76.616534 124.14781,58.004385
105.602,39.390863;m 191.49029,370.55837 c -0.74447,-35.4643 -1.48895,-70.92962
-0.91424,-93.20582 0.57471,-22.27619 2.46869,-31.36246 -6.19962,-47.64011
-8.66831,-16.27765 -27.89891,-39.74508 -35.43102,-60.24723 -7.5321,-20.50215
-3.36375,-38.03621 -3.56442,-61.47025 -0.20068,-23.434034 -4.77078,-52.76624
-9.34116,-82.100158;m 191.49029,370.55837 c -0.74447,-35.4643 -1.48895,-70.92962
-0.91424,-93.20582 0.57471,-22.27619 2.46869,-31.36246 11.6035,-49.93775
9.13482,-18.57528 25.5094,-46.63691 17.97852,-67.13879 -7.53088,-20.50188
-38.96771,-33.44172 -63.33791,-35.43536 -24.3702,-1.99363 -41.67036,6.96005
-58.97124,15.91411;m 191.49029,370.55837 c -0.74447,-35.4643 -1.48895,-70.92962
-10.96401,-91.67449 -9.47506,-20.74488 -27.68114,-26.76844 -37.834,-43.04586
-10.15287,-16.27742 -12.25094,-42.80819 -7.81783,-67.95256 4.43312,-25.14438
15.39734,-48.90024 11.60757,-70.084585 C 142.69225,76.616534 124.14781,58.004385
105.602,39.390863"
dur="5279ms"
repeatCount="indefinite"
/>
</path>
<path
fill="none"
stroke="#78a628"
stroke-width="10"
stroke-linecap="round"
>
<animate
attributeName="d"
values="m 191.49029,370.55837 c 58.40992,-29.57719 116.81941,-59.15417
125.21187,-95.05923 8.39247,-35.90507 -33.23107,-78.13772 -44.33128,-112.28391
-11.10021,-34.1462 8.32407,-60.2032 32.82555,-78.443754 24.50148,-18.240556
54.07789,-28.663362 83.6543,-39.08617;m 191.49029,370.55837 c 22.22847,-35.98973
44.45665,-71.97901 52.84956,-107.88454 8.39291,-35.90553 2.94953,-71.7253
15.97105,-88.69019 13.02152,-16.96489 44.50527,-15.07322 62.01859,-39.91801
17.51331,-24.84478 21.0553,-76.424937 24.59742,-128.0070275;m 191.49029,370.55837
c 22.22847,-35.98973 44.45665,-71.97901 76.82756,-80.31789 32.37092,-8.33888
74.87977,10.97265 87.90037,-5.99174 13.0206,-16.96438 -3.44777,-70.20332
-14.60165,-111.51214 -11.15388,-41.30882 -16.99193,-70.68316 -22.83032,-100.059215;m
191.49029,370.55837 c 58.40992,-29.57719 116.81941,-59.15417 125.21187,-95.05923
8.39247,-35.90507 -33.23107,-78.13772 -44.33128,-112.28391 -11.10021,-34.1462
8.32407,-60.2032 32.82555,-78.443754 24.50148,-18.240556 54.07789,-28.663362
83.6543,-39.08617"
dur="5281ms"
repeatCount="indefinite"
/>
</path>
<path
fill="none"
stroke="#007328"
stroke-width="10"
stroke-linecap="round"
>
<animate
attributeName="d"
values="m 191.49029,370.55837 c -9.20398,-14.55044 -18.4087,-29.10205
-0.94621,-36.41228 17.46249,-7.31024 61.59017,-7.37792 92.92649,-21.55744
31.33631,-14.17952 49.8808,-42.46999 61.65754,-76.68328 11.77674,-34.21328
16.78512,-74.34784 16.81909,-105.75231 0.034,-31.404466 -4.90675,-54.077445
-23.45147,-69.40791 C 319.95102,45.414684 287.80277,37.428382 255.65269,29.441627;m
191.49029,370.55837 c -9.20398,-14.55044 -18.4087,-29.10205 2.404,-32.67918
20.8127,-3.57714 71.6394,3.82077 102.88035,-6.19495 31.24095,-10.01572
42.89373,-37.44421 39.78705,-57.10872 -3.10667,-19.66452 -20.97378,-31.56299
-23.38146,-59.37863 -2.40768,-27.81564 10.6457,-71.54497 9.56959,-106.11439
-1.0761,-34.569427 -16.28278,-59.975804 -31.49046,-85.383872;m 191.49029,370.55837
c -9.20398,-14.55044 -18.4087,-29.10205 -12.28946,-54.31151 6.11925,-25.20946
27.56211,-61.07375 47.46139,-56.10922 19.89929,4.96453 38.25196,50.75636
63.7644,65.11895 25.51244,14.3626 58.18168,-2.70436 67.11727,-45.49922
8.93559,-42.79487 -5.86343,-111.31381 -31.97019,-140.04535 -26.10676,-28.73153
-63.51926,-17.6706 -100.93317,-6.60926;m 191.49029,370.55837 c -9.20398,-14.55044
-18.4087,-29.10205 -0.94621,-36.41228 17.46249,-7.31024 61.59017,-7.37792
92.92649,-21.55744 31.33631,-14.17952 49.8808,-42.46999 61.65754,-76.68328
11.77674,-34.21328 16.78512,-74.34784 16.81909,-105.75231 0.034,-31.404466
-4.90675,-54.077445 -23.45147,-69.40791 C 319.95102,45.414684 287.80277,37.428382
255.65269,29.441627"
dur="5297ms"
repeatCount="indefinite"
/>
</path>
<path
fill="none"
stroke="#007328"
stroke-width="10"
stroke-linecap="round"
>
<animate
attributeName="d"
values="m 191.49029,370.55837 c -31.5387,-25.44751 -63.07848,-50.89589
-82.50372,-86.19232 -19.425244,-35.29644 -26.734735,-80.43937 -22.13231,-112.5213
4.602425,-32.08194 21.1165,-51.10017 45.8552,-54.78855 24.73871,-3.68837
57.69914,7.95268 77.15705,8.39247 19.45791,0.43978 25.41379,-10.32142
14.95735,-23.07945 C 214.36742,89.611194 187.49823,74.856839 160.62733,60.101539;m
191.49029,370.55837 c -28.6673,-29.27605 -57.33501,-58.55251 -72.74037,-85.04318
-15.40536,-26.49067 -17.54618,-50.19301 -9.73719,-71.26777 7.809,-21.07476
25.56699,-39.51834 39.58469,-55.65042 14.0177,-16.13208 24.29352,-29.95086
39.11055,-38.60434 14.81703,-8.65347 34.17297,-12.14036 43.38549,-27.626007
9.21252,-15.485649 8.282,-42.970059 7.35144,-70.456046;m 191.49029,370.55837
c 4.16243,-43.63366 8.32485,-87.26732 6.41646,-122.51613 -1.9084,-35.24881
-9.88774,-62.10967 -18.49405,-76.00554 -8.60631,-13.89588 -17.83928,-14.82402
-25.31075,-28.4191 -7.47147,-13.59509 -13.1797,-39.85655 -5.01544,-57.316664
8.16427,-17.460116 30.19976,-26.115418 39.65206,-36.432197 9.45231,-10.316778
6.32043,-22.295402 3.18818,-34.275444;m 191.49029,370.55837 c -31.5387,-25.44751
-63.07848,-50.89589 -82.50372,-86.19232 -19.425244,-35.29644 -26.734735,-80.43937
-22.13231,-112.5213 4.602425,-32.08194 21.1165,-51.10017 45.8552,-54.78855
24.73871,-3.68837 57.69914,7.95268 77.15705,8.39247 19.45791,0.43978 25.41379,-10.32142
14.95735,-23.07945 C 214.36742,89.611194 187.49823,74.856839 160.62733,60.101539"
dur="5303ms"
repeatCount="indefinite"
/>
</path>
<path
fill="none"
stroke="#007328"
stroke-width="10"
stroke-linecap="round"
>
<animate
attributeName="d"
values="m 191.49029,370.55837 c -6.15882,-33.16298 -12.31786,-66.32711
-39.45871,-69.37319 -27.14086,-3.04609 -75.261722,24.02613 -103.857351,25.68479
-28.59563,1.65867 -37.664817,-22.0972 -36.988214,-54.21292 0.676603,-32.11571
11.099404,-72.58867 31.74274,-111.33722 C 63.57209,122.57128 94.434417,85.550027
125.29745,48.527929;M 191.49029,370.55837 C 185.33147,337.39539 179.17243,304.23126
159.45018,284.38677 139.72792,264.54229 106.44351,258.01876 84.499709,249.43549
62.555906,240.85222 51.955521,230.20948 49.568782,214.7965 47.182043,199.38353
53.010432,179.20251 61.401829,149.54713 69.793226,119.89175 80.746844,80.764765
91.700869,41.636326;m 191.49029,370.55837 c -6.15882,-33.16298 -12.31786,-66.32711
-2.70294,-94.73854 9.61492,-28.41142 35.00245,-52.06753 35.12235,-75.43921
0.1199,-23.37169 -25.02884,-46.45708 -47.85099,-56.22304 -22.82216,-9.76596
-43.31474,-6.2102 -66.0802,13.86037 -22.765456,20.07058 -47.800618,56.65395
-72.836134,93.23783;m 191.49029,370.55837 c -6.15882,-33.16298 -12.31786,-66.32711
-39.45871,-69.37319 -27.14086,-3.04609 -75.261722,24.02613 -103.857351,25.68479
-28.59563,1.65867 -37.664817,-22.0972 -36.988214,-54.21292 0.676603,-32.11571
11.099404,-72.58867 31.74274,-111.33722 C 63.57209,122.57128 94.434417,85.550027
125.29745,48.527929"
dur="5309ms"
repeatCount="indefinite"
/>
</path>
</symbol>
<path
d="M 1680 500 V 1050 H 0 V 500 Q 56 450 112 500 t 112 0 t 112 0 t 112 0 t 112 0 t 112
0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 Z"
fill="url('#wave3')"
>
<animate
attributeName="d"
values="M 1680 500 V 1050 H 0 V 500 Q 56 450 112 500 t 112 0 t 112 0 t 112 0 t 112 0
t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 Z;M
1680 500 V 1050 H 0 V 500 Q 56 550 112 500 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0
t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 Z;M 1680 500
V 1050 H 0 V 500 Q 56 450 112 500 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t
112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 t 112 0 Z"
dur="3s"
repeatCount="indefinite"
/>
</path>
<path
d="M 1680 650 V 1050 H 0 V 650 Q 105 750 210 650 t 210 0 t 210 0 t 210 0 t 210 0 t 210
0 t 210 0 t 210 0 Z"
fill="url('#wave2')"
>
<animate
attributeName="d"
values="M 1680 650 V 1050 H 0 V 650 Q 105 750 210 650 t 210 0 t 210 0 t 210 0 t 210
0 t 210 0 t 210 0 t 210 0 Z;M 1680 650 V 1050 H 0 V 650 Q 105 550 210 650 t 210 0
t 210 0 t 210 0 t 210 0 t 210 0 t 210 0 t 210 0 Z;M 1680 650 V 1050 H 0 V 650 Q 105
750 210 650 t 210 0 t 210 0 t 210 0 t 210 0 t 210 0 t 210 0 t 210 0 Z"
dur="2500ms"
repeatCount="indefinite"
/>
</path>
<path
id="wave3"
d="M 1680 800 V 3150 H 0 V 800 Q 168 650 336 800 t 336 0 t 336 0 t 336 0 t 336 0 Z"
fill="url('#wave1')"
>
<animate
attributeName="d"
values="M 1680 800 V 3150 H 0 V 800 Q 168 650 336 800 t 336 0 t 336 0 t 336 0 t 336
0 Z;M 1680 800 V 3150 H 0 V 800 Q 168 950 336 800 t 336 0 t 336 0 t 336 0 t 336 0
Z;M 1680 800 V 3150 H 0 V 800 Q 168 650 336 800 t 336 0 t 336 0 t 336 0 t 336 0 Z"
dur="2s"
repeatCount="indefinite"
/>
</path>
<circle
fill="url('#bubble')"
v-for="(bbl, index) in bubbles"
:key="index"
:cx="bbl.x"
:cy="bbl.y"
:r="bbl.r"
/>
<use xlink:href="#seagrass" x="20" y="2750" />
<use xlink:href="#seagrass" x="440" y="2750" />
<use xlink:href="#seagrass" x="860" y="2750" />
<use xlink:href="#seagrass" x="1280" y="2750" />
</svg>
</div>
</template>
<script>
let bblUp;
export default {
name: 'Ocean',
props: {
relativeScrollPosition: {
type: Number,
required: true,
},
},
watch: {
relativeScrollPosition() {
const maxHeight = this.$refs.board.clientHeight - window.innerHeight;
this.$refs.background.scrollTop = Math.round(maxHeight * this.relativeScrollPosition);
},
},
data() {
return {
bubbles: [],
};
},
mounted() {
const rand = (upper, lower) => Math.floor(Math.random() * (upper - lower) + lower);
// Create bubbles.
this.bubbles = Array.from({ length: 12 }, () => ({
x: rand(100, 1580),
y: rand(1000, 3050),
r: rand(10, 30),
}));
// Let the bubbles float up.
bblUp = setInterval(() => {
this.bubbles.forEach((bbl) => {
/* eslint-disable-next-line no-param-reassign */
bbl.y = (bbl.y <= 1000 ? 3050 : bbl.y - 4);
});
}, 40);
},
beforeUnmount() {
// Clear the intervals.
clearInterval(bblUp);
},
};
</script>
<style>
.ocean_bg {
position: fixed;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.ocean_bg svg {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
</style>