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

factory is now full screen

Browse source
This commit is contained in:
circle-gon 2022-12-16 21:18:17 +00:00
parent a23198cc4d
commit 2200ba8b3c
5 changed files with 84 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/Layer.vue
View file

@ -131,14 +131,6 @@ export default defineComponent({
</script>
<style scoped>
.layer-container {
min-width: 100%;
min-height: 100%;
margin: 0;
flex-grow: 1;
display: flex;
isolation: isolate;
}
.layer-tab:not(.minimized) {
padding-top: 20px;
@ -214,26 +206,4 @@ export default defineComponent({
right: 18px;
pointer-events: none;
}
.goBack {
position: sticky;
top: 10px;
left: 10px;
line-height: 30px;
margin-top: -50px;
margin-left: -35px;
border: none;
background: var(--background);
box-shadow: var(--background) 0 2px 3px 5px;
border-radius: 50%;
color: var(--foreground);
font-size: 30px;
cursor: pointer;
z-index: 7;
}
.goBack:hover {
transform: scale(1.1, 1.1);
text-shadow: 0 0 7px var(--foreground);
}
</style>

50
src/data/layers/Factory.vue
View file

@ -1,22 +1,22 @@
<template>
<div>
<div>Info on components</div>
<div class="componentDisp">
<div class="componentSelect">
<div class="i">
<h2>Components!</h2>
</div>
</div>
<div
ref="element"
class="factoryDisp"
@click="e => $emit('click', e)"
@mousemove="e => $emit('mouseMove', e)"
@mouseenter="e => $emit('mouseEnter', e)"
@mouseleave="e => $emit('mouseLeave', e)"
/>
</div>
</div>
<table>
<tr>
<td>Info</td>
</tr>
<tr>
<td class="components">Components! go brrrrrrr</td>
<td>
<div
ref="element"
class="factoryDisp"
@click="e => $emit('click', e)"
@mousemove="e => $emit('mouseMove', e)"
@mouseenter="e => $emit('mouseEnter', e)"
@mouseleave="e => $emit('mouseLeave', e)"
/>
</td>
</tr>
</table>
</template>
<script setup lang="ts">
import type { Application } from "@pixi/app";
@ -43,17 +43,11 @@ onMounted(() => {
});
</script>
<style scoped>
.componentDisp {
display: flex;
border: 2px solid grey;
align-items: stretch;
}
.componentSelect {
flex-grow: 1;
border: 2px solid green;
}
.factoryDisp {
flex-grow: 1;
border: 2px solid green;
}
.components {
width: 20%
}
</style>

43
src/data/layers/factory.tsx
View file

@ -9,6 +9,7 @@ import conveyor from "./factory-components/conveyor.png";
import { reactive, Ref, ref, watchEffect } from "vue";
import { Direction } from "util/common";
import { persistent } from "game/persistence";
import player from "game/player";
const id = "factory";
@ -116,40 +117,26 @@ const factory = createLayer(id, () => {
function onMouseLeave() {
isMouseHoverShown.value = false;
}
const factoryDisp = jsx(() => (
<Modal
modelValue={isFactoryShown.value}
update:modelValue={(v: boolean) => (isFactoryShown.value = v)}
v-slots={{
header: () => <h2>{name}</h2>,
body: () => (
<Factory
application={app}
onMouseMove={onMouseMove}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
)
}}
/>
));
function goBack() {
player.tabs.splice(0, Infinity, "main")
}
return {
name,
day,
color,
minWidth: 700,
minimizable: false,
display: jsx(() => (
<>
<button
class="button"
style="display: inline-block;"
onClick={() => (isFactoryShown.value = true)}
>
Open the Factory
</button>
{factoryDisp()}
</>
<div class="layer-container">
<button class="goBack" onClick={goBack}>❌</button>
<Factory
application={app}
onMouseMove={onMouseMove}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
</div>
)),
components
};

30
src/data/projEntry.tsx
View file

@ -32,7 +32,7 @@ import paper from "./layers/paper";
import plastic from "./layers/plastic";
import trees from "./layers/trees";
import workshop from "./layers/workshop";
import factory from "./layers/factory"
import factory from "./layers/factory";
import wrappingPaper from "./layers/wrapping-paper";
import boxesSymbol from "./symbols/cardboardBox.png";
import clothSymbol from "./symbols/cloth.png";
@ -131,21 +131,27 @@ export const main = createLayer("main", function (this: BaseLayer) {
},
onOpenLayer() {
recentlyUpdated.value = false;
// 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each
if (window.matchMedia("(min-width: 1468px)").matches) {
// Desktop, allow multiple tabs to be open
if (player.tabs.includes(layer ?? "trees")) {
const index = player.tabs.lastIndexOf(layer ?? "trees");
player.tabs.splice(index, 1);
// should not be full screen
if (layer !== "factory") {
// 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each
if (window.matchMedia("(min-width: 1468px)").matches) {
// Desktop, allow multiple tabs to be open
if (player.tabs.includes(layer ?? "trees")) {
const index = player.tabs.lastIndexOf(layer ?? "trees");
player.tabs.splice(index, 1);
} else {
player.tabs.push(layer ?? "trees");
main.minimized.value = true;
}
} else {
player.tabs.push(layer ?? "trees");
main.minimized.value = true;
// Mobile, use single tab mode
player.tabs.splice(1, Infinity, layer ?? "trees");
}
layers[layer ?? "trees"]!.minimized.value = false;
} else {
// Mobile, use single tab mode
player.tabs.splice(1, Infinity, layer ?? "trees");
player.tabs.splice(0, Infinity, layer)
}
layers[layer ?? "trees"]!.minimized.value = false;
},
onUnlockLayer() {
if (layer) {

29
src/main.css
View file

@ -137,3 +137,32 @@ ul {
background: #070710;
}
.goBack {
position: sticky;
top: 10px;
left: 10px;
line-height: 30px;
margin-top: -50px;
margin-left: -35px;
border: none;
background: var(--background);
box-shadow: var(--background) 0 2px 3px 5px;
border-radius: 50%;
color: var(--foreground);
font-size: 30px;
cursor: pointer;
z-index: 7;
}
.goBack:hover {
transform: scale(1.1, 1.1);
text-shadow: 0 0 7px var(--foreground);
}
.layer-container {
min-width: 100%;
min-height: 100%;
margin: 0;
flex-grow: 1;
display: flex;
isolation: isolate;
}