thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2025-02-16 09:31:43 +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" 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 >= 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 <img
v-if="day >= 2" v-if="day >= 2"
:src="coal" :src="coal"
@ -21,8 +41,11 @@
style="left: 72%; bottom: 8%; width: 40px; height: 40px" 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 >= 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
<div v-if="day >= 4" class="scene-bubble" style="left: 50%; bottom: 38%"> 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 >= 4" :src="paper" class="scene-item" />
<img v-if="day >= 5" :src="boxes" class="scene-item" /> <img v-if="day >= 5" :src="boxes" class="scene-item" />
<img v-if="day >= 9" :src="plastic" 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 oil from "./symbols/oil.png";
import plastic from "./symbols/plastic.png"; import plastic from "./symbols/plastic.png";
import dyes from "./symbols/dyes.png"; import dyes from "./symbols/dyes.png";
import management from "./symbols/elfManagement.png";
import advManagement from "./symbols/workshopMansion.png";
defineProps<{ defineProps<{
day: number; day: number;
@ -52,8 +77,9 @@ defineProps<{
<style scoped> <style scoped>
.scene { .scene {
width: 600px; width: 600px;
height: 300px;
position: relative; position: relative;
max-width: 95%;
aspect-ratio: 2/1;
} }
.scene::after { .scene::after {
@ -69,8 +95,8 @@ defineProps<{
} }
.scene-item { .scene-item {
width: 80px; width: 13.3%;
height: 80px; height: 26.6%;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
@ -78,7 +104,7 @@ defineProps<{
.scene-bubble { .scene-bubble {
position: absolute; position: absolute;
background: white; background: white;
height: 60px; height: 20%;
padding: 5px; padding: 5px;
border-radius: 10px; border-radius: 10px;
} }
@ -96,8 +122,9 @@ defineProps<{
} }
.scene-bubble .scene-item { .scene-bubble .scene-item {
height: 60px; height: calc(100% - 10px);
width: 60px; width: unset;
aspect-ratio: 1/1;
position: static; position: static;
} }
</style> </style>