thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2024-11-21 16:13:57 +00:00
Code Issues Releases Activity Actions

Update scene

Browse source
This commit is contained in:
thepaperpilot 2022-12-13 11:22:19 -06:00
parent cbeff79be4
commit ab89c2de09
1 changed files with 36 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/data/Scene.vue
View file

@ -7,7 +7,27 @@
style="left: 4%; bottom: 3%; width: 40px; height: 40px"
/>
<img v-if="day >= 0" :src="tree" class="scene-item" style="left: 10%; bottom: 10%" />
<img v-if="day >= 1" :src="workshop" class="scene-item" style="left: 40%; bottom: 12%" />
<img
v-if="day >= 12"
:src="advManagement"
class="scene-item"
style="left: 33%; bottom: 12%; width: 30%; height: 60%"
/>
<template v-else>
<img
v-if="day >= 11"
:src="management"
class="scene-item"
style="left: 28%; bottom: 12%"
/>
<img
v-if="day >= 1"
:src="workshop"
class="scene-item"
style="left: 40%; bottom: 12%"
/>
<img v-if="day >= 3" :src="elves" class="scene-item" style="left: 52%; bottom: 12%" />
</template>
<img
v-if="day >= 2"
:src="coal"
@ -21,8 +41,11 @@
style="left: 72%; bottom: 8%; width: 40px; height: 40px"
/>
<img v-if="day >= 8" :src="oil" class="scene-item" style="left: 80%; bottom: 6%" />
<img v-if="day >= 3" :src="elves" class="scene-item" style="left: 52%; bottom: 12%" />
<div v-if="day >= 4" class="scene-bubble" style="left: 50%; bottom: 38%">
<div
v-if="day >= 4"
class="scene-bubble"
:style="day >= 12 ? `left: 33%; bottom: 73%` : `left: 50%; bottom: 38%`"
>
<img v-if="day >= 4" :src="paper" class="scene-item" />
<img v-if="day >= 5" :src="boxes" class="scene-item" />
<img v-if="day >= 9" :src="plastic" class="scene-item" />
@ -43,6 +66,8 @@ import cloth from "./symbols/cloth.png";
import oil from "./symbols/oil.png";
import plastic from "./symbols/plastic.png";
import dyes from "./symbols/dyes.png";
import management from "./symbols/elfManagement.png";
import advManagement from "./symbols/workshopMansion.png";
defineProps<{
day: number;
@ -52,8 +77,9 @@ defineProps<{
<style scoped>
.scene {
width: 600px;
height: 300px;
position: relative;
max-width: 95%;
aspect-ratio: 2/1;
}
.scene::after {
@ -69,8 +95,8 @@ defineProps<{
}
.scene-item {
width: 80px;
height: 80px;
width: 13.3%;
height: 26.6%;
position: absolute;
z-index: 1;
}
@ -78,7 +104,7 @@ defineProps<{
.scene-bubble {
position: absolute;
background: white;
height: 60px;
height: 20%;
padding: 5px;
border-radius: 10px;
}
@ -96,8 +122,9 @@ defineProps<{
}
.scene-bubble .scene-item {
height: 60px;
width: 60px;
height: calc(100% - 10px);
width: unset;
aspect-ratio: 1/1;
position: static;
}
</style>