thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2025-03-14 01:51:40 +00:00
Code Issues Releases Activity Actions

Make the focus highlight more visible

Browse source
This commit is contained in:
ducdat0507 2022-12-14 15:42:28 +07:00
parent 363f4f3442
commit eb7bd1d13a
3 changed files with 64 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/data/layers/management.tsx
View file

@ -34,6 +34,9 @@ import paper from "./paper";
import plastic from "./plastic";
import trees from "./trees";
import oil from "./oil";
import "./styles/management.css";
const id = "management";
const day = 12;
const advancedDay = 13;
@ -175,18 +178,24 @@ const layer = createLayer(id, () => {
const bar = createBar(() => ({
direction: Direction.Right,
width: 160,
height: 12,
height: 14,
style: () => ({
"margin-top": "8px",
"box-shadow": focusTargets.value[elf.name]
? "0 0 12px " + (currentShown.value == elf.name ? "black" : "white")
"background": color,
"box-shadow":
currentShown.value == elf.name ? "0 0 12px black"
: focusTargets.value[elf.name] ? "0 0 12px white"
: ""
}),
baseStyle: "margin-top: 0",
fillStyle: () =>
focusTargets.value[elf.name]
? "margin-top: 0; transition-duration: 0s;"
: "margin-top: 0; transition-duration: 0s; background-color: var(--bought)",
baseStyle: "margin-top: -1px",
fillStyle: () => ({
"margin-top": "-1px",
"transition-duration": "0s",
"background": "white",
"animation": focusTargets.value[elf.name]
? ".5s focused-xp-bar linear infinite"
: "",
}),
borderStyle: () =>
Decimal.gte(level.value, schools.amount.value) ? "border-color: red" : "",
progress: () => Decimal.div(expToNextLevel.value, expRequiredForNextLevel.value),
@ -1218,6 +1227,7 @@ const layer = createLayer(id, () => {
borderStyle: `border-radius: 4px 4px 0 0`,
fillStyle: () => ({
background: focusTime.value > 0 ? color : "#7f7f00",
animation: focusTime.value > 0 ? "1s focused-focus-bar linear infinite" : "",
opacity: focusTime.value > 0 ? focusTime.value / 10 : 1,
transition: "none"
}),

21
src/data/layers/styles/management.css Normal file
View file

@ -0,0 +1,21 @@
@keyframes focused-focus-bar {
from {
background: 0 0 / 28px 28px repeat
repeating-linear-gradient(-45deg, red, red 10px, green 10px, green 20px);
}
to {
background: 28px 0px / 28px 28px repeat
repeating-linear-gradient(-45deg, red, red 10px, green 10px, green 20px);
}
}
@keyframes focused-xp-bar {
from {
background: 0 0 / 28px 28px repeat
repeating-linear-gradient(-45deg, yellow, yellow 10px, lime 10px, lime 20px);
}
to {
background: 28px 0px / 28px 28px repeat
repeating-linear-gradient(-45deg, yellow, yellow 10px, lime 10px, lime 20px);
}
}

44
src/features/bars/Bar.vue
View file

@ -14,17 +14,6 @@
...unref(classes)
}"
>
<div
class="overlayTextContainer border"
:style="[
{ width: unref(width) + 'px', height: unref(height) + 'px' },
unref(borderStyle) ?? {}
]"
>
<span v-if="component" class="overlayText" :style="unref(textStyle)">
<component :is="component" />
</span>
</div>
<div
class="border"
:style="[
@ -36,6 +25,17 @@
>
<div class="fill" :style="[barStyle, unref(style) ?? {}, unref(fillStyle) ?? {}]" />
</div>
<div
class="overlayTextContainer border"
:style="[
{ width: unref(width) + 'px', height: unref(height - 1) + 'px' },
unref(borderStyle) ?? {}
]"
>
<span v-if="component" class="overlayText" :style="unref(textStyle)">
<component :is="component" />
</span>
</div>
<MarkNode :mark="unref(mark)" />
<Node :id="id" />
</div>
@ -109,21 +109,21 @@ export default defineComponent({
};
switch (unref(direction)) {
case Direction.Up:
barStyle.clipPath = `inset(${normalizedProgress.value}% -2px -2px -2px)`;
barStyle.width = unwrapRef(width) + 2 + "px";
barStyle.clipPath = `inset(${normalizedProgress.value}% -1px -1px -1px)`;
barStyle.width = unwrapRef(width) + 1 + "px";
break;
case Direction.Down:
barStyle.clipPath = `inset(-2px -2px ${normalizedProgress.value}% -2px)`;
barStyle.width = unwrapRef(width) + 2 + "px";
barStyle.clipPath = `inset(-1px -1px ${normalizedProgress.value}% -1px)`;
barStyle.width = unwrapRef(width) + 1 + "px";
break;
case Direction.Right:
barStyle.clipPath = `inset(-2px ${normalizedProgress.value}% -2px -2px)`;
barStyle.clipPath = `inset(-1px ${normalizedProgress.value}% -1px -1px)`;
break;
case Direction.Left:
barStyle.clipPath = `inset(-2px -2px -2px ${normalizedProgress.value} + '%)`;
barStyle.clipPath = `inset(-1px -1px -1px ${normalizedProgress.value} + '%)`;
break;
case Direction.Default:
barStyle.clipPath = "inset(-2px 50% -2px -2px)";
barStyle.clipPath = "inset(-1px 50% -1px -1px)";
break;
}
return barStyle;
@ -148,10 +148,12 @@ export default defineComponent({
display: table;
overflow: hidden;
border-radius: 10px;
padding-bottom: 1px;
}
.overlayTextContainer {
position: absolute;
top: 0;
border-radius: 10px;
vertical-align: middle;
display: flex;
@ -168,13 +170,17 @@ export default defineComponent({
border-radius: 10px;
border-color: var(--foreground);
overflow: hidden;
margin: 0;
}
.border:not(.overlayTextContainer) {
margin: -1px 0 -1px -1px;
}
.fill {
position: absolute;
background-color: var(--foreground);
overflow: hidden;
padding: 2px 1px;
margin-left: -0.5px;
transition-duration: 0.2s;
z-index: 2;