thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2024-11-24 17:31:54 +00:00
Code Issues Releases Activity Actions

Merge branch 'main' into day-17-toys

Browse source
This commit is contained in:
ducdat0507 2022-12-20 16:24:42 +07:00
commit be092fcada
7 changed files with 124 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
src/data/Day.vue
View file

@ -1,12 +1,16 @@
<template>
<div
class="day feature dontMerge opened"
:class="{ mastered: unref(mastered), wallpaper: day < 8 }"
:class="{
mastered: unref(mastered),
masteryLock,
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">
<Transition appear :name="masteryLock ? 'door-close' : 'door'">
<div class="doors" @click="emit('openLayer')">
<div class="date">Dec<br />{{ day }}</div>
<div class="date">Dec<br />{{ day }}</div>
@ -33,7 +37,7 @@
<div v-if="main.day.value === day && !canOpen" class="timer">
{{
main.timeUntilNewDay.value < 0
? "NYI, sorry"
? "Not Ready"
: formatTime(main.timeUntilNewDay.value, 0)
}}
</div>
@ -49,9 +53,11 @@ import { layers } from "game/layers";
import { Direction } from "util/common";
import { formatTime } from "util/break_eternity";
import { ProcessedComputable } from "util/computed";
import type { Ref } from "vue";
import { Ref, Transition } from "vue";
import { computed, unref } from "vue";
import { main } from "./projEntry";
import coal from "./layers/coal";
import dyes from "./layers/dyes";
const props = defineProps<{
day: number;
@ -77,6 +83,17 @@ const canOpen = computed(
new Date().getDate() >= props.day
);
const isMastering = main.isMastery;
const includeMastery = computed(
() =>
props.mastered.value ||
main.currentlyMastering.value == layers[props.layer ?? ""] ||
["wrappingPaper", "ribbon"].includes(props.layer || "") ||
(coal.mastered.value && props.layer == "elves") ||
(dyes.mastered.value && props.layer == "elves")
);
const masteryLock = computed(() => isMastering.value && !includeMastery.value);
function tryUnlock() {
if (canOpen.value) {
emit("unlockLayer");
@ -94,11 +111,8 @@ function tryUnlock() {
margin: 5%;
}
.mastered.day {
box-shadow: rgb(0 0 0 / 25%) 0px 0px 0px 3px inset;
}
.mastered.day.wallpaper {
box-shadow: rgb(0 0 0 / 25%) 0px 0px 0px 3px inset;
background: linear-gradient(
225deg,
rgb(255, 76, 76) 11.1%,
@ -115,56 +129,68 @@ function tryUnlock() {
.door-enter-from::before,
.door-enter-from::after,
.door-leave-to::before,
.door-leave-to::after {
.door-close-enter-to::before,
.door-close-enter-to::after {
transform: perspective(150px) rotateY(0) !important;
}
.door-enter-from .date,
.door-leave-to .date {
.door-close-enter-to .date {
transform: translate(-50%, -50%) perspective(150px) rotateY(0) !important;
}
.door-enter-active::before,
.door-enter-active::after,
.door-leave-active::before,
.door-leave-active::after {
.door-close-enter-active::before,
.door-close-enter-active::after {
z-index: 2;
}
.door-enter-active .date,
.door-leave-active .date {
.door-close-enter-active .date {
z-index: 3;
}
.day.opened .doors::before,
.day.opened .doors::after,
.day.opened .doors .date {
.day .doors::before,
.day .doors::after,
.day .doors .date {
transition: 1s;
}
.day.opened .doors::before {
transform-origin: left;
transform: perspective(150px) rotateY(-135deg);
}
.day.opened .doors::after {
transform-origin: right;
}
.day.opened:not(.masteryLock) .doors::before {
transform: perspective(150px) rotateY(-135deg);
}
.day.opened:not(.masteryLock) .doors::after {
transform: perspective(150px) rotateY(135deg);
}
.day.opened .doors .date:first-child {
transform-origin: left;
transform: translate(-50%, -50%) perspective(150px) rotateY(-135deg);
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.day.opened .doors .date:last-child {
transform-origin: right;
transform: translate(-50%, -50%) perspective(150px) rotateY(135deg);
clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);
}
.day.opened:not(.masteryLock) .doors .date:first-child {
transform: translate(-50%, -50%) perspective(150px) rotateY(-135deg);
}
.day.opened:not(.masteryLock) .doors .date:last-child {
transform: translate(-50%, -50%) perspective(150px) rotateY(135deg);
}
.tooltip-container,
.doors {
position: absolute;
@ -186,6 +212,7 @@ function tryUnlock() {
width: 50%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.doors::before {
@ -198,6 +225,20 @@ function tryUnlock() {
right: 0;
}
.masteryLock {
cursor: not-allowed;
}
.masteryLock > * {
pointer-events: none;
}
.masteryLock > * > :not(.doors) {
opacity: 0;
}
.masteryLock .icon {
transition-duration: 0.2s;
transition-delay: 0.8s;
}
.mastered.wallpaper .doors::before,
.mastered.wallpaper .doors::after {
background: linear-gradient(
@ -228,6 +269,7 @@ function tryUnlock() {
.mastered .ribbon::after {
content: "🎀";
color: red;
position: absolute;
top: -5px;
left: -5px;
@ -260,7 +302,7 @@ function tryUnlock() {
pointer-events: none;
user-select: none;
backface-visibility: hidden;
width: 100%;
width: calc(100% - 14px);
}
.timer {
@ -310,5 +352,6 @@ function tryUnlock() {
transform: translate(-50%, -50%);
opacity: 0.2;
font-size: 400%;
z-index: 2;
}
</style>

7
src/data/advent.css
View file

@ -12,6 +12,13 @@
aspect-ratio: 3151 / 4190;
}
.advent.decorating {
filter: hue-rotate(-150deg);
}
.advent.decorating > * {
filter: hue-rotate(150deg);
}
.advent > .table {
width: 100%;
}

2
src/data/layers/ribbon.tsx
View file

@ -193,7 +193,7 @@ const layer = createLayer(id, () => {
direction: Direction.Right,
width: 600,
height: 25,
fillStyle: `backgroundColor: ${color}`,
fillStyle: "animation: 15s ribbon-bar linear infinite",
progress: () => (main.day.value === day ? Decimal.div(main.masteredDays.value - 6, 5) : 1),
display: jsx(() =>
main.day.value === day ? (

28
src/data/layers/styles/day-gradients.css
View file

@ -14,17 +14,14 @@
);
}
}
@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
rgb(255, 255, 255) 30px 40px
);
}
to {
@ -32,11 +29,22 @@
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
rgb(255, 255, 255) 30px 40px
);
}
}
@keyframes ribbon-bar {
from {
background: 0 0 / 114px 114px repeat repeating-linear-gradient(-45deg,
darkred 0 10px,
#af0000 10px 20px
);
}
to {
background: 114px 0px / 114px 114px repeat repeating-linear-gradient(-45deg,
darkred 0 10px,
#af0000 10px 20px
);
}
}

5
src/data/layers/trees.tsx
View file

@ -799,7 +799,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
});
const netSaplingGain = computed(() =>
Decimal.sub(computedAutoCuttingAmount.value, computedAutoPlantingAmount.value)
Decimal.sub(
Decimal.mul(computedAutoCuttingAmount.value, mastered.value ? 2 : 1),
computedAutoPlantingAmount.value
)
);
const netTreeGain = computed(() =>
Decimal.sub(computedAutoPlantingAmount.value, computedAutoCuttingAmount.value)

41
src/data/projEntry.tsx
View file

@ -203,7 +203,11 @@ export const main = createLayer("main", function (this: BaseLayer) {
const completed = main.day.value > day;
loreScene.value = completed ? day - 1 : -1;
const title = unref(layers[layer ?? "trees"]?.name ?? "");
loreTitle.value = completed ? `${title} - Completed!` : title;
loreTitle.value = mastered.value
? `${title} - Decorated!`
: completed
? `${title} - Completed!`
: title;
loreBody.value = completed
? unref(mastered)
? `${story}<hr style="
@ -246,7 +250,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
completedStory:
"Santa looks at all the wood you've gathered and tells you you've done well! He says you should take the rest of the day off so you're refreshed for tomorrow's work. Good Job!",
masteredStory:
"As you repeat the basic actions again, you feel like you've learned something that you didn't know the first time around. Santa is impressed at your new knowledge and inspires you to attempt this with more jobs."
"As you repeat the basic actions again, you feel like you've learned something that you didn't know the first time around. Santa is impressed at your new knowledge and inspires you to attempt this with more jobs. Great Job!"
})),
createDay(() => ({
day: 2,
@ -257,7 +261,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
completedStory:
"The workshop complete, Santa once again dismisses you for the day. With a strong foundation, this workshop should suffice for supporting future work toward this impossible mission. Good Job!",
masteredStory:
"As you attempt to build the workshop again with your newfound experiences and resources, you realize you could have built the workshop a little bit better. As you keep building and building, you realize that you could've built it without wasting any resources."
"As you attempt to build the workshop again with your newfound experiences and resources, you realize you could have built the workshop a little bit better. As you keep building and building, you realize that you could've built it without wasting any resources. Great Job!"
})),
createDay(() => ({
day: 3,
@ -268,7 +272,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
completedStory:
"Santa looks at all the coal you've gathered and tells you you've done well! He says you should take the rest of the day off so you're refreshed for tomorrow's work. Good Job!",
masteredStory:
"It's another typical day, attempting to redo your work again, but this time for coal. While doing this tedious task, an elf comes up to you. It gives you a improved blueprint on how to make small fires. You try it, and you realize that it's a lot more efficent than your old buildings designs. You thank the elf, and resume your work."
"It's another typical day, attempting to redo your work again, but this time for coal. While doing this tedious task, an elf comes up to you. It gives you a improved blueprint on how to make small fires. You try it, and you realize that it's a lot more efficent than your old buildings designs. You thank the elf, and resume your work. Great Job!"
})),
createDay(() => ({
day: 4,
@ -279,7 +283,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
completedStory:
"The workshop now hums with the bustling elves working on everything. They can take it from here - you deserve a break after such a long day! Good Job!",
masteredStory:
"This place feels a lot more better, with less naughty elves who are more excited than ever before to do something! As you collapse into a chair thinking of all of your hard work, Santa comes by yet again to congratulate you on your hard work. You feel a pang of jealousy as Santa is taking all the credit for your work, but you decide that saving Christmas is worth it."
"This place feels a lot more better, with less naughty elves who are more excited than ever before to do something! As you collapse into a chair thinking of all of your hard work, Santa comes by yet again to congratulate you on your hard work. You feel a pang of jealousy as Santa is taking all the credit for your work, but you decide that saving Christmas is worth it. Great Job!"
})),
createDay(() => ({
day: 5,
@ -290,7 +294,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
completedStory:
"You look upon your rivers of book pulp as you hand out stacks of papers to elves to read through. You've continued getting closer and closer to preparing for Christmas, and can go to bed satisfied with your progress. Good Job!",
masteredStory:
"Paper. Who knew it could be so versatile? As you slowly but surely improve your skills on making paper, you find more efficent ways to make it, and as a bonus, it's also environmentally friendly (which kinda makes up for you chopping a bit too many trees)! As you pass this information along to Santa's elves, they become more excited. Good Job!"
"Paper. Who knew it could be so versatile? As you slowly but surely improve your skills on making paper, you find more efficent ways to make it, and as a bonus, it's also environmentally friendly (which kinda makes up for you chopping a bit too many trees)! As you pass this information along to Santa's elves, they become more excited. Great Job!"
})),
createDay(() => ({
day: 6,
@ -312,7 +316,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
completedStory:
"The sounds of drills and metal clanging join the already loud din as yet another piece of the puzzle fits into place. You're making solid progress, Good Job!",
masteredStory:
"Cling clang clang clang. The sounds of even more drills hit your ears. As you fondly look back at the terrific work you've done, you become more motivated to work harder. Just then, Santa appears in front of you and you scream. He says, \"I see you're working hard. I suggest that you take a break.\" You thank Santa for the break, sit in a chair made by the elves as a gift, and relax."
"Cling clang clang clang. The sounds of even more drills hit your ears. As you fondly look back at the terrific work you've done, you become more motivated to work harder. Just then, Santa appears in front of you and you scream. He says, \"I see you're working hard. I suggest that you take a break.\" You thank Santa for the break, sit in a chair made by the elves as a gift, and relax. Great Job!"
})),
createDay(() => ({
day: 8,
@ -322,7 +326,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
story: "Another resource you're going to need for gifts is cloth! Fortunately you think this should be pretty easy to prepare using a sheep farm - and as you've already proven with the tree farm, that's something you can handle!",
completedStory:
"You fall into a pile of wool, sighing contentedly as you look at all the progress you've made today. Good Job!",
masteredStory: ""
masteredStory:
"You're able to bundle yourself in layer after layer of clothing. You watch as everything happens together, harmoniously. Great Job!"
})),
createDay(() => ({
day: 9,
@ -332,7 +337,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
story: "Looks like you just need one more thing before the toy factory can start running: plastic! Every toy nowadays is made with plastic! But wait, how are you going to get plastic? What can make plastic? Wait that's right, oil! You figured out you might as well repurpose your coal and ore drills into something that can get you oil, but unfortunately you'll need to mine much deeper that you're currently doing, so let's get to work!",
completedStory:
"It took a while, but you finally got enough oil for the next step! You deserve a good rest after all this digging work - tomorrow will be a busy day! Good Job!",
masteredStory: ""
masteredStory:
"Oil shoots into the air like never before. Physics itself seems to be broken, as there's no other explanation for how you can make everything perfectly efficient without any kind of loss whatsoever. But to be fair, there's probably already a bit of physics shenanigans going on in a typical Christmas anyways. Great Job!"
})),
createDay(() => ({
day: 10,
@ -342,7 +348,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
story: "Now that plenty of oil has been prepared, it's time to start refining it into plastic! This should be incredibly useful not only for toys, but making tools and other items!",
completedStory:
"You've started refining massive amounts of oil into slightly less massive amounts of plastic. You have a slight pang of regret thinking of the environmental impact, but ultimately decide Christmas is worth it. Good Job!",
masteredStory: ""
masteredStory:
"You're now making more plastic than you know what to do with. You'll be able to make so many toys with all of this! Great Job!"
})),
createDay(() => ({
day: 11,
@ -352,7 +359,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
story: "To make toys, we're going to need some color to make them look nice and enticing! We can't just give kids clear toys after all! To add some color to our toys, we'll need some dyes!",
completedStory:
"After all that effort, you finally have a rainbow of dyes to choose from! Now the children won't be able to resist the toys you have to offer, once you get them made of course... Good Job!",
masteredStory: ""
masteredStory:
"You remember back to when making various dyes was such a painful process, and contrast it to now where everything is trivialized and you even have more uses for all the dyes! Great Job!"
})),
createDay(() => ({
day: 12,
@ -382,7 +390,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
story: "Fully prepared to start working on presents, you realize you don't actually know what to make! You ask Santa and he points at a massive pile of letters hiding just off-camera. Those are all the letters to Santa that need to be processed, sorted, and categorized appropriately so every kid gets what they need!",
completedStory:
"The letters are sorted! You have a slight feeling you may have rushed a little, and suddenly understand why sometimes you don't get everything you asked Santa for every year, or even the occasional bad gift. You sympathetically pat Santa on the back as you head to bed for the day. Good Job!",
masteredStory: ""
masteredStory:
"Finally, you've become the letter processing machine you always knew you could be. There's nothing anyone can do to stop you from processing every gosh darn letter to Santa there is. Great Job!"
})),
createDay(() => ({
day: 15,
@ -535,7 +544,13 @@ export const main = createLayer("main", function (this: BaseLayer) {
<div>Offline Time: {formatTime(player.offlineTime)}</div>
) : null}
<Spacer />
<div class="advent">
{isMastery.value ? (
<>
<div>Now decorating {currentlyMastering.value?.name}</div>
<Spacer />
</>
) : null}
<div class={{ advent: true, decorating: isMastery.value }}>
{days
.reduce(
(acc, curr) => {

3
src/main.css
View file

@ -150,11 +150,12 @@ ul {
}
.decoration-effect:not(.ribbon) {
border-image: 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 ) 12/10px;
border-image: 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) 12/10px;
}
.decoration-effect.ribbon::before {
content: "🎀";
color: red;
position: absolute;
top: -20px;
left: -20px;