Added toy display

This commit is contained in:
thepaperpilot 2022-12-22 11:26:23 -06:00
parent 8bbf727fd2
commit 65539d7f46
2 changed files with 71 additions and 27 deletions

29
src/data/layers/Toy.vue Normal file
View file

@ -0,0 +1,29 @@
<template>
<div class="toy">
<img :src="image" />
<ResourceVue :resource="resource" :color="color" style="font-size: large" />
</div>
</template>
<script setup lang="ts">
import { Resource } from "features/resources/resource";
import ResourceVue from "features/resources/Resource.vue";
defineProps<{
resource: Resource;
image: string;
color: string;
}>();
</script>
<style scoped>
.toy {
width: 80px;
display: flex;
flex-direction: column;
margin: 10px !important;
}
.toy img {
width: 100%;
aspect-ratio: 1/1;
}
</style>

View file

@ -3,51 +3,56 @@ import { Assets } from "@pixi/assets";
import { Container } from "@pixi/display";
import { Graphics } from "@pixi/graphics";
import { Sprite } from "@pixi/sprite";
import HotkeyVue from "components/Hotkey.vue";
import Row from "components/layout/Row.vue";
import Spacer from "components/layout/Spacer.vue";
import Modal from "components/Modal.vue";
import { createCollapsibleModifierSections } from "data/common";
import { main } from "data/projEntry";
import { createBar, GenericBar } from "features/bars/bar";
import { jsx } from "features/feature";
import { createHotkey, GenericHotkey } from "features/hotkey";
import { Resource } from "features/resources/resource";
import { createTab } from "features/tabs/tab";
import { createTabFamily } from "features/tabs/tabFamily";
import Tooltip from "features/tooltips/Tooltip.vue";
import { globalBus } from "game/events";
import { createLayer } from "game/layers";
import { createAdditiveModifier, createSequentialModifier } from "game/modifiers";
import { noPersist, Persistent, persistent, State } from "game/persistence";
import Decimal, { format, formatWhole } from "util/bignum";
import { Direction } from "util/common";
import { render } from "util/vue";
import { computed, ComputedRef, reactive, ref, watchEffect } from "vue";
import coal from "./coal";
import _block from "./factory-components/block.svg";
import _blockMaker from "./factory-components/blockMaker.svg";
import _clothes from "./factory-components/clothes.svg";
import _clothesMaker from "./factory-components/clothesmaker.svg";
import _conveyor from "./factory-components/conveyor.png";
import _cursor from "./factory-components/cursor.svg";
import _delete from "./factory-components/delete.svg";
import _wood from "./factory-components/log.svg";
import _plank from "./factory-components/plank.svg";
import _rotateLeft from "./factory-components/rotateLeft.svg";
import _rotateRight from "./factory-components/rotateRight.svg";
import _wood from "./factory-components/log.svg";
import _block from "./factory-components/block.svg";
import _blockMaker from "./factory-components/blockMaker.svg";
import _cloth from "./factory-components/shed.svg";
import _dye from "./factory-components/shed.svg";
import _clothes from "./factory-components/clothes.svg";
import _clothesMaker from "./factory-components/clothesmaker.svg";
import _plastic from "./factory-components/shed.svg";
import _metal from "./factory-components/shed.svg";
import _plankMaker from "./factory-components/sawmill.svg";
import {
default as _cloth,
default as _dye,
default as _metal,
default as _plastic
} from "./factory-components/shed.svg";
import _thread from "./factory-components/thread.svg";
import _threadMaker from "./factory-components/threadmaker.svg";
import _truck from "./factory-components/truck.svg";
import _truckMaker from "./factory-components/truckmaker.svg";
import _plankMaker from "./factory-components/sawmill.svg";
import _plank from "./factory-components/plank.svg";
import _threadMaker from "./factory-components/threadmaker.svg";
import _thread from "./factory-components/thread.svg";
import _wheelMaker from "./factory-components/wheelmaker.svg";
import _wheel from "./factory-components/wheel.svg";
import _wheelMaker from "./factory-components/wheelmaker.svg";
import Factory from "./Factory.vue";
import "./styles/factory.css";
import coal from "./coal";
import { render } from "util/vue";
import { createTab } from "features/tabs/tab";
import { createTabFamily } from "features/tabs/tabFamily";
import { createAdditiveModifier, createSequentialModifier } from "game/modifiers";
import { main } from "data/projEntry";
import { createCollapsibleModifierSections } from "data/common";
import Modal from "components/Modal.vue";
import { createBar, GenericBar } from "features/bars/bar";
import HotkeyVue from "components/Hotkey.vue";
import { createHotkey, GenericHotkey } from "features/hotkey";
import Tooltip from "features/tooltips/Tooltip.vue";
import Toy from "./Toy.vue";
import toys from "./toys";
import { Resource } from "features/resources/resource";
const id = "factory";
@ -1274,6 +1279,16 @@ const factory = createLayer(id, () => {
</button>
</div>
{render(dayProgress)}
<Spacer />
<Row>
<Toy resource={toys.clothes} image={_clothes} color="lightblue" />
<Toy
resource={toys.woodenBlocks}
image={_block}
color="cornflowerblue"
/>
<Toy resource={toys.trucks} image={_truck} color="cadetblue" />
</Row>
</>
))
})),