john/timekeeper
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

feat: custom key art w/ animations

Browse source
This commit is contained in:
pskfyi 2022-01-14 23:13:20 -08:00 • committed by pskfyi
commit 42bc01739a
9 changed files with 520 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

76
components/KeyArtStage.vue
View file

@ -1,6 +1,16 @@
<template>
<div class="p-8 relative">
<div class="key-art absolute top-8 left-0 right-0" />
<div class="relative">
<div
class="key-art absolute top-0 left-0 right-0"
:class="{
instruments: $route.path === '/',
apprentices: $route.path === '/apprentices',
missions: $route.path === '/missions',
timeMachine: $route.path === '/timemachine',
timeMagic: $route.path === '/timemagic',
wisdom: $route.path === '/wisdom',
}"
/>
<div
class="absolute top-0 bottom-0 left-0 right-0 flex flex-col items-center justify-center"
:class="`text-${$store.getters.activeTab.darkColor}`"
@ -15,7 +25,9 @@
/>
<span class="fas fa-hourglass-half text-xl pl-2 md:text-3xl md:pt-1" />
</span>
<span class="spare-time-explanation text-sm md:text-lg select-none">
<span
class="spare-time-explanation text-sm md:text-xl select-none mt-2 font-bold"
>
Tap to gain
<b><span class="fas fa-hourglass-half" /> Spare Time</b>
</span>
@ -30,6 +42,9 @@ export default {
return this.$store.getters.suffixedDecimalText(this.$store.state.currency)
},
},
mounted() {
console.log(this.$route)
},
methods: {
click() {
if (this.$store.state.gameStopped) return
@ -48,12 +63,55 @@ export default {
<style scoped>
.key-art {
background: url('https://freesvg.org/img/johnny_automatic_hourglass.png');
background-size: contain;
background-repeat: no-repeat;
background-repeat: repeat;
background-position: center;
opacity: 0.4;
height: calc(100% - 4rem); /* 4rem = top padding + bottom padding */
opacity: 0.3;
margin-top: -3rem;
height: calc(100% + 3rem);
transition: background-image 2000ms, background-position 2000ms,
background-size 2000ms;
}
.key-art.instruments {
background: url('/Instruments.svg');
--size: 230px;
background-size: var(--size) var(--size);
background-position-x: -30px;
background-position-y: 24px;
}
.key-art.apprentices {
background: url('/Apprentices.svg');
--size: 275px;
background-size: var(--size) var(--size);
background-position-x: -15px;
background-position-y: 7px;
}
.key-art.missions {
background: url('/Missions.svg');
--size: 275px;
background-size: var(--size) var(--size);
background-position-x: -44px;
background-position-y: 7px;
}
.key-art.timeMachine {
background: url('/TimeMachine.svg');
--size: 380px;
background-size: var(--size) var(--size);
background-position-x: 0;
background-position-y: 7px;
}
.key-art.timeMagic {
background: url('/TimeMagic.svg');
--size: 176px;
background-size: var(--size) var(--size);
background-position-x: -3px;
background-position-y: -21px;
}
.key-art.wisdom {
background: url('/Wisdom.svg');
--size: 153px;
background-size: var(--size) var(--size);
background-position-x: 42px;
background-position-y: -21px;
}
.spare-time {
--color: rgba(2555, 255, 255, 0.5);
@ -62,7 +120,7 @@ export default {
transition: color 2000ms;
}
.spare-time-explanation {
--color: rgba(2555, 255, 255, 0.2);
--color: rgba(2555, 255, 255, 0.5);
box-shadow: 0px 0px 10px 10px var(--color);
background: var(--color);
transition: color 2000ms;

2
components/TimeHeader.vue
View file

@ -1,6 +1,6 @@
<template>
<header
class="grid grid-cols-3 w-full font-semibold h-10 m-auto md:relative rounded-bl-full rounded-br-full px-4"
class="grid grid-cols-3 w-full font-semibold h-10 m-auto relative rounded-bl-full rounded-br-full px-4 z-10"
:class="colorClasses"
>
<div class="text-center pt-2 pb-1 border-r border-gray-600 select-none">