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

Implemented calendar

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/adventCalendarGameJamCalandar.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 MiB

12
src/data/Day.vue
View file

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

150
src/data/projEntry.tsx
View file

@ -15,6 +15,7 @@ import trees from "./layers/trees";
import { createLazyProxy } from "util/proxies"; import { createLazyProxy } from "util/proxies";
import { Computable, convertComputable, ProcessedComputable } from "util/computed"; import { Computable, convertComputable, ProcessedComputable } from "util/computed";
import Modal from "components/Modal.vue"; import Modal from "components/Modal.vue";
import "./advent.css";
export interface Day extends VueFeature { export interface Day extends VueFeature {
day: number; day: number;
@ -104,6 +105,153 @@ export const main = createLayer("main", function (this: BaseLayer) {
layer: null, layer: null,
symbol: "🧝", 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!" 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> <div>Offline Time: {formatTime(player.offlineTime)}</div>
) : null} ) : null}
<Spacer /> <Spacer />
<div style="width: 700px"> <div class="advent">
{days {days
.reduce( .reduce(
(acc, curr) => { (acc, curr) => {