Implemented calendar

This commit is contained in:
thepaperpilot 2022-11-30 23:07:03 -06:00
parent aab58cd6a0
commit 22cf0ade3b
4 changed files with 178 additions and 7 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

View file

@ -64,12 +64,12 @@ function tryUnlock() {
<style scoped>
.day {
width: 90px;
height: 90px;
flex: 13% 0 0;
position: relative;
display: flex;
background-color: var(--raised-background);
margin: 40px;
aspect-ratio: 1;
margin: 5%;
}
.door-enter-from::before,
@ -162,7 +162,7 @@ function tryUnlock() {
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
font-size: x-large;
font-size: large;
pointer-events: none;
user-select: none;
backface-visibility: hidden;
@ -171,7 +171,7 @@ function tryUnlock() {
.icon,
.icon .material-icons {
font-size: xxx-large;
font-size: xx-large;
pointer-events: none;
display: flex;
user-select: none;
@ -200,6 +200,6 @@ function tryUnlock() {
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.2;
font-size: 500%;
font-size: 400%;
}
</style>

23
src/data/advent.css Normal file
View file

@ -0,0 +1,23 @@
.advent {
width: 80%;
background: url(./adventCalendarGameJamCalandar.png);
background-size: contain;
display: flex;
flex-direction: column;
padding-top: 28%;
padding-left: 10%;
padding-right: 10%;
background-repeat: no-repeat;
aspect-ratio: 3151 / 4190;
}
.advent > .table {
width: 100%;
}
.advent > .table > .row {
width: 100%;
margin: 0;
justify-content: space-around;
margin-bottom: -5%;
}

View file

@ -15,6 +15,7 @@ import trees from "./layers/trees";
import { createLazyProxy } from "util/proxies";
import { Computable, convertComputable, ProcessedComputable } from "util/computed";
import Modal from "components/Modal.vue";
import "./advent.css";
export interface Day extends VueFeature {
day: number;
@ -104,6 +105,153 @@ export const main = createLayer("main", function (this: BaseLayer) {
layer: null,
symbol: "🧝",
story: "With this unbelievably large workshop complete, it's time to get the elves to work! But it appears they've forgotten how to make toys over the last 11 months - guess it's time to setup training sessions!"
})),
createDay(() => ({
day: 4,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 5,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 6,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 7,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 8,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 9,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 10,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 11,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 12,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 13,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 14,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 15,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 16,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 17,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 18,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 19,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 20,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 21,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 22,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 23,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
})),
createDay(() => ({
day: 24,
shouldNotify: false,
layer: null,
symbol: "",
story: ""
}))
];
@ -135,7 +283,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
<div>Offline Time: {formatTime(player.offlineTime)}</div>
) : null}
<Spacer />
<div style="width: 700px">
<div class="advent">
{days
.reduce(
(acc, curr) => {