mirror of
https://github.com/thepaperpilot/Advent-Incremental.git
synced 2024-11-22 00:21:34 +00:00
Implemented calendar
This commit is contained in:
parent
aab58cd6a0
commit
22cf0ade3b
4 changed files with 178 additions and 7 deletions
BIN
public/adventCalendarGameJamCalandar.png
Normal file
BIN
public/adventCalendarGameJamCalandar.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.2 MiB |
|
@ -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
23
src/data/advent.css
Normal 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%;
|
||||
}
|
|
@ -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) => {
|
||||
|
|
Loading…
Reference in a new issue