mirror of
https://github.com/thepaperpilot/Advent-Incremental.git
synced 2024-11-22 00:21:34 +00:00
Day progress bar gradients
This commit is contained in:
ducdat0507
parent
7dbce4eadc
commit
413ab4a498
16 changed files with 95 additions and 50 deletions
|
|
@ -92,28 +92,23 @@ function tryUnlock() {
|
|||
background-color: var(--raised-background);
|
||||
aspect-ratio: 1;
|
||||
margin: 5%;
|
||||
box-shadow: rgb(0 0 0 / 13%) 0px 3px 0px inset, rgb(0 0 0 / 13%) 3px 0px 0px inset,
|
||||
rgb(0 0 0 / 13%) 0px 0px 3px inset, rgb(0 0 0 / 13%) 0px 0px 0px 3px inset;
|
||||
}
|
||||
|
||||
.mastered.day {
|
||||
box-shadow: rgb(0 0 0 / 25%) 0px 0px 0px 3px inset;
|
||||
}
|
||||
|
||||
.mastered.day.wallpaper {
|
||||
background: linear-gradient(
|
||||
225deg,
|
||||
rgb(255, 76, 76) 10.8%,
|
||||
rgb(255, 255, 255) 11.1%,
|
||||
rgb(255, 255, 255) 21.9%,
|
||||
rgb(65, 255, 95) 22.2%,
|
||||
rgb(65, 255, 95) 33%,
|
||||
rgb(255, 255, 255) 33.3%,
|
||||
rgb(255, 255, 255) 44.1%,
|
||||
rgb(255, 76, 76) 44.4%,
|
||||
rgb(255, 76, 76) 55.2%,
|
||||
rgb(255, 255, 255) 55.5%,
|
||||
rgb(255, 255, 255) 66.3%,
|
||||
rgb(65, 255, 95) 66.6%,
|
||||
rgb(65, 255, 95) 77.4%,
|
||||
rgb(255, 255, 255) 77.7%,
|
||||
rgb(255, 255, 255) 88.5%,
|
||||
rgb(255, 76, 76) 11.1%,
|
||||
rgb(255, 255, 255) 11.1% 22.2%,
|
||||
rgb(65, 255, 95) 22.2% 33.3%,
|
||||
rgb(255, 255, 255) 33.3% 44.4%,
|
||||
rgb(255, 76, 76) 44.4% 55.5%,
|
||||
rgb(255, 255, 255) 55.5% 66.6%,
|
||||
rgb(65, 255, 95) 66.6% 77.7%,
|
||||
rgb(255, 255, 255) 77.7% 88.8%,
|
||||
rgb(255, 76, 76) 88.8%
|
||||
);
|
||||
}
|
||||
|
|
@ -207,21 +202,14 @@ function tryUnlock() {
|
|||
.mastered.wallpaper .doors::after {
|
||||
background: linear-gradient(
|
||||
225deg,
|
||||
rgb(255, 76, 76) 10.8%,
|
||||
rgb(255, 255, 255) 11.1%,
|
||||
rgb(255, 255, 255) 21.9%,
|
||||
rgb(65, 255, 95) 22.2%,
|
||||
rgb(65, 255, 95) 33%,
|
||||
rgb(255, 255, 255) 33.3%,
|
||||
rgb(255, 255, 255) 44.1%,
|
||||
rgb(255, 76, 76) 44.4%,
|
||||
rgb(255, 76, 76) 55.2%,
|
||||
rgb(255, 255, 255) 55.5%,
|
||||
rgb(255, 255, 255) 66.3%,
|
||||
rgb(65, 255, 95) 66.6%,
|
||||
rgb(65, 255, 95) 77.4%,
|
||||
rgb(255, 255, 255) 77.7%,
|
||||
rgb(255, 255, 255) 88.5%,
|
||||
rgb(255, 76, 76) 11.1%,
|
||||
rgb(255, 255, 255) 11.1% 22.2%,
|
||||
rgb(65, 255, 95) 22.2% 33.3%,
|
||||
rgb(255, 255, 255) 33.3% 44.4%,
|
||||
rgb(255, 76, 76) 44.4% 55.5%,
|
||||
rgb(255, 255, 255) 55.5% 66.6%,
|
||||
rgb(65, 255, 95) 66.6% 77.7%,
|
||||
rgb(255, 255, 255) 77.7% 88.8%,
|
||||
rgb(255, 76, 76) 88.8%
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ import { getFirstFeature, render, renderColJSX, renderJSX, VueFeature } from "ut
|
|||
import { Ref, watchEffect } from "vue";
|
||||
import { computed, unref } from "vue";
|
||||
import "./common.css";
|
||||
import "data/layers/styles/day-gradients.css";
|
||||
import { main } from "./projEntry";
|
||||
|
||||
/** An object that configures a {@link ResetButton} */
|
||||
|
|
@ -417,7 +418,12 @@ export function setUpDailyProgressTracker(options: {
|
|||
masteryGoal?: DecimalSource;
|
||||
name: string;
|
||||
day: number;
|
||||
color: string;
|
||||
background:
|
||||
| string
|
||||
| {
|
||||
gradient: string;
|
||||
duration: string;
|
||||
};
|
||||
textColor?: string;
|
||||
modal?: {
|
||||
show: Ref<boolean>;
|
||||
|
|
@ -442,7 +448,13 @@ export function setUpDailyProgressTracker(options: {
|
|||
direction: Direction.Right,
|
||||
width: 600,
|
||||
height: 25,
|
||||
fillStyle: { backgroundColor: options.color },
|
||||
/* eslint-disable prettier/prettier */
|
||||
fillStyle: typeof options.background == "string" ? {
|
||||
backgroundColor: options.background,
|
||||
} : {
|
||||
animation: options.background.duration + " " + options.background.gradient + " linear infinite",
|
||||
},
|
||||
/* eslint-enable prettier/prettier */
|
||||
textStyle: options.textColor ? { color: options.textColor } : undefined,
|
||||
progress: progressFunc,
|
||||
display: jsx(() =>
|
||||
|
|
|
|||
|
|
@ -630,7 +630,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
masteryGoal: 5e5,
|
||||
name,
|
||||
day,
|
||||
color,
|
||||
background: color,
|
||||
modal: {
|
||||
display: modifiersModal,
|
||||
show: showModifiersModal
|
||||
|
|
|
|||
|
|
@ -584,7 +584,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
goal: 1e3,
|
||||
name,
|
||||
day,
|
||||
color,
|
||||
background: color,
|
||||
textColor: "var(--feature-foreground)",
|
||||
modal: {
|
||||
show: showModifiersModal,
|
||||
|
|
|
|||
|
|
@ -986,7 +986,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
goal: 1e7,
|
||||
name,
|
||||
day,
|
||||
color: colorCoal,
|
||||
background: colorCoal,
|
||||
modal: {
|
||||
show: showModifiersModal,
|
||||
display: modifiersModal
|
||||
|
|
|
|||
|
|
@ -823,7 +823,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
goal: 6e4,
|
||||
name,
|
||||
day,
|
||||
color,
|
||||
background: color,
|
||||
textColor: "var(--feature-foreground)",
|
||||
modal: {
|
||||
show: showModifiersModal,
|
||||
|
|
|
|||
|
|
@ -264,7 +264,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
goal: 1e6,
|
||||
name,
|
||||
day,
|
||||
color,
|
||||
background: {
|
||||
gradient: "letters-bar",
|
||||
duration: "15s"
|
||||
},
|
||||
textColor: "var(--feature-foreground)",
|
||||
modal: {
|
||||
show: showModifiersModal,
|
||||
|
|
|
|||
|
|
@ -659,7 +659,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
goal: 25000,
|
||||
name,
|
||||
day,
|
||||
color,
|
||||
background: color,
|
||||
modal: {
|
||||
show: showModifiersModal,
|
||||
display: modifiersModal
|
||||
|
|
|
|||
|
|
@ -1080,7 +1080,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
goal: 250000,
|
||||
name,
|
||||
day,
|
||||
color,
|
||||
background: color,
|
||||
modal: {
|
||||
show: showModifiersModal,
|
||||
display: modifiersModal
|
||||
|
|
|
|||
|
|
@ -474,7 +474,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
masteryGoal: 5e7,
|
||||
name,
|
||||
day,
|
||||
color,
|
||||
background: color,
|
||||
textColor: "var(--feature-foreground)",
|
||||
modal: {
|
||||
show: showModifiersModal,
|
||||
|
|
|
|||
|
|
@ -304,7 +304,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
goal: 2.5e5,
|
||||
name,
|
||||
day,
|
||||
color,
|
||||
background: color,
|
||||
textColor: "var(--feature-foreground)",
|
||||
modal: {
|
||||
show: showModifiersModal,
|
||||
|
|
|
|||
42
src/data/layers/styles/day-gradients.css
Normal file
42
src/data/layers/styles/day-gradients.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
@keyframes letters-bar {
|
||||
from {
|
||||
background: 0 0 / auto 70% no-repeat linear-gradient(white, white), 0 0 / 113px 113px repeat
|
||||
repeating-linear-gradient(-45deg,
|
||||
red 0 20px, white 20px 40px,
|
||||
blue 40px 60px, white 60px 80px
|
||||
);
|
||||
}
|
||||
to {
|
||||
background: 0 0 / auto 70% no-repeat linear-gradient(white, white), 113px 0px / 113px 113px repeat
|
||||
repeating-linear-gradient(-45deg,
|
||||
red 0 20px, white 20px 40px,
|
||||
blue 40px 60px, white 60px 80px
|
||||
);
|
||||
}
|
||||
}
|
||||
@keyframes wrapping-paper-bar {
|
||||
from {
|
||||
background: 0 0 / 113px 113px repeat repeating-linear-gradient(-45deg,
|
||||
rgb(255, 76, 76) 0 10px,
|
||||
rgb(255, 255, 255) 10px 20px,
|
||||
rgb(65, 255, 95) 20px 30px,
|
||||
rgb(255, 255, 255) 30px 40px,
|
||||
rgb(255, 76, 76) 40px 50px,
|
||||
rgb(255, 255, 255) 50px 60px,
|
||||
rgb(65, 255, 95) 60px 70px,
|
||||
rgb(255, 255, 255) 70px 80px
|
||||
);
|
||||
}
|
||||
to {
|
||||
background: 113px 0 / 113px 113px repeat repeating-linear-gradient(-45deg,
|
||||
rgb(255, 76, 76) 0 10px,
|
||||
rgb(255, 255, 255) 10px 20px,
|
||||
rgb(65, 255, 95) 20px 30px,
|
||||
rgb(255, 255, 255) 30px 40px,
|
||||
rgb(255, 76, 76) 40px 50px,
|
||||
rgb(255, 255, 255) 50px 60px,
|
||||
rgb(65, 255, 95) 60px 70px,
|
||||
rgb(255, 255, 255) 70px 80px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
@keyframes focused-focus-bar {
|
||||
from {
|
||||
background: 0 0 / 28px 28px repeat
|
||||
repeating-linear-gradient(-45deg, red, red 10px, green 10px, green 20px);
|
||||
repeating-linear-gradient(-45deg, red 0 10px, green 10px 20px);
|
||||
}
|
||||
to {
|
||||
background: 28px 0px / 28px 28px repeat
|
||||
repeating-linear-gradient(-45deg, red, red 10px, green 10px, green 20px);
|
||||
repeating-linear-gradient(-45deg, red 0 10px, green 10px 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes focused-xp-bar {
|
||||
from {
|
||||
background: 0 0 / 28px 28px repeat
|
||||
repeating-linear-gradient(-45deg, yellow, yellow 10px, lime 10px, lime 20px);
|
||||
repeating-linear-gradient(-45deg, yellow 0 10px, lime 10px 20px);
|
||||
}
|
||||
to {
|
||||
background: 28px 0px / 28px 28px repeat
|
||||
repeating-linear-gradient(-45deg, yellow, yellow 10px, lime 10px, lime 20px);
|
||||
repeating-linear-gradient(-45deg, yellow 0 10px, lime 10px 20px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -819,7 +819,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
|
|||
goal: 1e4,
|
||||
name,
|
||||
day,
|
||||
color: colorDark,
|
||||
background: colorDark,
|
||||
modal: {
|
||||
show: showModifiersModal,
|
||||
display: modifiersModal
|
||||
|
|
|
|||
|
|
@ -366,7 +366,7 @@ const layer = createLayer(id, () => {
|
|||
direction: Direction.Right,
|
||||
width: 600,
|
||||
height: 25,
|
||||
fillStyle: `backgroundColor: ${color}`,
|
||||
fillStyle: `animation: 15s wrapping-paper-bar linear infinite`,
|
||||
textStyle: `color: var(--feature-foreground)`,
|
||||
progress: () => (main.day.value === day ? Decimal.div(masteredDays.value, 6) : 1),
|
||||
display: jsx(() =>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<div
|
||||
class="overlayTextContainer border"
|
||||
:style="[
|
||||
{ width: unref(width) + 'px', height: (unref(height) - 1) + 'px' },
|
||||
{ width: unref(width) - 1 + 'px', height: unref(height) - 1 + 'px' },
|
||||
unref(borderStyle) ?? {}
|
||||
]"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue