thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2024-11-22 00:21:34 +00:00
Code Issues Releases Activity Actions

Add mastered effect to ribbon days

Browse source
This commit is contained in:
thepaperpilot 2022-12-16 01:05:38 -06:00
parent 6725fc850f
commit 93038164e6
1 changed files with 41 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/data/Day.vue
View file

@ -1,9 +1,10 @@
<template>
<div
class="day feature dontMerge opened"
:class="{ mastered: unref(mastered) }"
:class="{ mastered: unref(mastered), wallpaper: day < 8 }"
v-if="opened.value"
>
<div class="ribbon" v-if="day >= 8" />
<Tooltip :display="layers[layer ?? '']?.name ?? ''" :direction="Direction.Up" yoffset="5px">
<Transition appear name="door">
<div class="doors" @click="emit('openLayer')">
@ -95,7 +96,7 @@ function tryUnlock() {
rgb(0 0 0 / 13%) 0px 0px 3px inset, rgb(0 0 0 / 13%) 0px 0px 0px 3px inset;
}
.mastered.day {
.mastered.day.wallpaper {
background: linear-gradient(
225deg,
rgb(255, 76, 76) 10.8%,
@ -202,8 +203,8 @@ function tryUnlock() {
right: 0;
}
.mastered .doors::before,
.mastered .doors::after {
.mastered.wallpaper .doors::before,
.mastered.wallpaper .doors::after {
background: linear-gradient(
225deg,
rgb(255, 76, 76) 10.8%,
@ -225,6 +226,42 @@ function tryUnlock() {
);
}
.mastered .ribbon {
position: absolute;
top: -2px;
left: 0px;
width: calc(100% + 0px);
height: calc(100% + 4px);
overflow: hidden;
pointer-events: none;
user-select: none;
z-index: 11;
}
.mastered .ribbon::after {
content: "🎀";
position: absolute;
top: -5px;
left: -5px;
font-size: xx-large;
transform: rotateZ(-45deg);
z-index: 1;
}
.mastered .ribbon::before {
content: "";
width: calc(100% - 24px);
height: 100%;
border: solid darkred 8px;
transform: rotateZ(45deg);
position: absolute;
top: 0;
left: 0;
border-top: none;
border-bottom: none;
z-index: 1;
}
.date {
position: absolute;
top: 50%;