thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2024-11-25 09:52:02 +00:00
Code Issues Releases Activity Actions

merge changes

Browse source
This commit is contained in:
circle-gon 2022-12-18 20:37:39 +00:00
commit 91015b4652
16 changed files with 253 additions and 7868 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7731
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

17
package.json
View file

@ -19,11 +19,28 @@
"@fontsource/roboto-mono": "^4.5.8",
"@pixi/app": "^6.5.8",
"@pixi/assets": "^6.5.8",
"@pixi/basis": "^6.5.8",
"@pixi/compressed-textures": "^6.5.8",
"@pixi/constants": "^6.5.8",
"@pixi/core": "^6.5.8",
"@pixi/display": "^6.5.8",
"@pixi/extensions": "^6.5.8",
"@pixi/graphics": "^6.5.8",
"@pixi/loaders": "^6.5.8",
"@pixi/math": "^6.5.8",
"@pixi/mesh": "^6.5.8",
"@pixi/particle-emitter": "^5.0.8",
"@pixi/runner": "^6.5.8",
"@pixi/settings": "^6.5.8",
"@pixi/sprite": "^6.5.8",
"@pixi/spritesheet": "^6.5.8",
"@pixi/text": "^6.5.8",
"@pixi/text-bitmap": "^6.5.8",
"@pixi/ticker": "^6.5.8",
"@pixi/utils": "^6.5.8",
"@vitejs/plugin-vue": "^2.3.3",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"eslint-plugin-vue": "^8.0.1",
"is-plain-object": "^5.0.0",
"lz-string": "^1.4.4",
"nanoevents": "^6.0.2",

6
src/components/Layer.vue
View file

@ -207,3 +207,9 @@ export default defineComponent({
pointer-events: none;
}
</style>
<style>
.layer-tab.minimized > * > .desc {
color: var(--accent1);
font-size: 30px;
}
</style>

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

@ -4,7 +4,6 @@
<script setup lang="ts">
import type { Application } from "@pixi/app";
import { onMounted, shallowRef } from "vue";
import {size} from "./factory"
import "lib/pixi";
const element = shallowRef<HTMLElement | null>(null);
@ -15,8 +14,8 @@ console.log(props.application);
onMounted(() => {
if (element.value !== null) {
element.value?.append(props.application.view);
//props.application.resizeTo = element.value;
//props.application.resize();
props.application.resizeTo = element.value;
props.application.resize();
} else {
throw new TypeError("This should not occur");
}
@ -24,10 +23,10 @@ onMounted(() => {
</script>
<style scoped>
.factoryDisp {
width: v-bind("size.width");
height: v-bind("size.height");
margin: 0;
padding: 0;
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>

7
src/data/layers/boxes.tsx
View file

@ -617,9 +617,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
<div>
{name} - {format(boxes.value)} {boxes.displayName}
</div>
))
{name}{" "}
<span class="desc">{format(boxes.value)} {boxes.displayName}</span>
</div>
)),
};
});

7
src/data/layers/cloth.tsx
View file

@ -613,9 +613,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
<div>
{name} - {format(cloth.value)} {cloth.displayName}
</div>
))
{name}{" "}
<span class="desc">{format(cloth.value)} {cloth.displayName}</span>
</div>
)),
};
});

7
src/data/layers/coal.tsx
View file

@ -1110,9 +1110,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
<div>
{name} - {format(coal.value)} {coal.displayName}
</div>
))
{name}{" "}
<span class="desc">{format(coal.value)} {coal.displayName}</span>
</div>
)),
};
});

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

@ -15,6 +15,7 @@ import player from "game/player";
import "./styles/factory.css";
import { globalBus } from "game/events";
import { Container } from "@pixi/display";
import { Matrix } from "@pixi/math";
const id = "factory";
@ -29,14 +30,6 @@ enum FactoryDirections {
None
}
type FactoryDirection = FactoryDirections | Direction;
export const size = {
width: 1000,
height: 345
};
const blockAmts = {
w: 50,
h: 17
};
function roundDownTo(num: number, multiple: number) {
return Math.floor(num / multiple) * multiple;
@ -48,9 +41,17 @@ function getRelativeCoords(e: MouseEvent) {
y: e.clientY - rect.top
};
}
async function createSprite(name: string) {
const sheet = await Assets.load(name);
return new Sprite(sheet);
const blockSize = 50;
interface FactoryComponent {
directionIn: Direction | undefined;
directionOut: Direction | undefined;
imageSrc: string;
name: string;
description: string;
type: string;
sprite: Sprite;
}
async function positionSprite(name: string, y: number, x: number, width: number, height: number) {
@ -157,35 +158,32 @@ const factory = createLayer(id, () => {
x: 0,
y: 0
});
const mapOffset = reactive({
x: 0,
y: 0
});
const isMouseHoverShown = ref(false);
const whatIsHovered = ref<FactoryCompNames | "">("");
const compSelected = ref<FactoryCompNames>("cursor");
const componentData: Ref<(FactoryComponent | null)[][]> = persistent(
const components: Ref<unknown[][]> = persistent(
Array(blockAmts.h)
.fill(undefined)
.map(() => Array(blockAmts.w).fill(null))
.map(() => Array(blockAmts.w).fill(undefined))
);
const components: (FactoryInternal | null)[][] = Array(blockAmts.h)
.fill(undefined)
.map(() => Array(blockAmts.w).fill(null));
window.components = components;
// pixi
const app = new Application(size);
const app = new Application({
backgroundAlpha: 0
});
const graphicContainer = new Graphics();
const spriteContainer = new Container();
const movingBlocks = new Container();
const blockWidth = ref(app.screen.width / blockAmts.w);
const blockHeight = ref(app.screen.height / blockAmts.h);
graphicContainer.zIndex = 1;
app.stage.addChild(graphicContainer, spriteContainer, movingBlocks);
app.stage.sortableChildren = true;
globalBus.on("update", diff => {
blockWidth.value = app.screen.width / blockAmts.w;
blockHeight.value = app.screen.height / blockAmts.h;
// will change soon:tm:
const tick = diff;
@ -216,13 +214,7 @@ const factory = createLayer(id, () => {
}
});
globalBus.on("onLoad", async () => {
for (const y of componentData.value.keys()) {
for (const x of componentData.value[y].keys()) {
changeFactoryComponent(y, x);
}
}
});
async function changeFactoryComponent(y: number, x: number) {
const comp = componentData.value[y][x];
@ -264,64 +256,76 @@ const factory = createLayer(id, () => {
// draw graphics
function updateGraphics() {
app.resize();
graphicContainer.clear();
if (isMouseHoverShown.value && compSelected.value !== "cursor") {
const { x, y } = {
x: roundDownTo(mouseCoords.x, blockWidth.value) / blockWidth.value,
y: roundDownTo(mouseCoords.y, blockHeight.value) / blockHeight.value
};
console.log(isMouseHoverShown.value, x, y);
graphicContainer.beginFill(components[y][x] !== null ? 0xff0000 : 0xffff00);
spriteContainer.x = mapOffset.x * blockSize + app.view.width / 2;
spriteContainer.y = mapOffset.y * blockSize + app.view.height / 2;
if (isMouseHoverShown.value) {
let { tx, ty } = spriteContainer.localTransform;
graphicContainer.beginFill(0x808080);
graphicContainer.drawRect(
roundDownTo(mouseCoords.x, blockWidth.value),
roundDownTo(mouseCoords.y, blockHeight.value),
blockWidth.value,
blockHeight.value
roundDownTo(mouseCoords.x - tx, blockSize) + tx,
roundDownTo(mouseCoords.y - ty, blockSize) + ty,
blockSize,
blockSize
);
}
}
watchEffect(updateGraphics);
function onMouseMove(e: MouseEvent) {
// some code to get the x and y coords relative to element
// https://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element
let pointerDown = ref(false), pointerDrag = ref(false);
function onFactoryPointerMove(e: PointerEvent) {
const { x, y } = getRelativeCoords(e);
mouseCoords.x = x;
mouseCoords.y = y;
}
async function onClick(e: MouseEvent) {
const coords = getRelativeCoords(e);
const x = roundDownTo(coords.x, blockWidth.value) / blockWidth.value;
const y = roundDownTo(coords.y, blockHeight.value) / blockHeight.value;
if (e.button === 0) {
// you shouldn't be putting down a mouse
if (compSelected.value === "cursor") return;
// should not already be placed
if (components[y][x] !== null) return;
const basicData = FACTORY_COMPONENTS[compSelected.value];
componentData.value[y][x] = {
type: compSelected.value,
ticksDone: 0,
consumptionStock: Object.fromEntries(
Object.entries(basicData.consumptionStock).map(i => [i[0], 0])
),
productionStock: Object.fromEntries(
Object.entries(basicData.productionStock).map(i => [i[0], 0])
)
};
await changeFactoryComponent(y, x);
} else if (e.button === 2) {
// right click
removeFactoryComponent(y, x);
if (pointerDown.value && (pointerDrag.value || Math.abs(e.movementX) > 2 || Math.abs(e.movementY) > 2)) {
pointerDrag.value = true;
mapOffset.x += e.movementX / blockSize;
mapOffset.y += e.movementY / blockSize;
}
}
function onMouseEnter() {
async function onFactoryPointerDown(e: PointerEvent) {
window.addEventListener("pointerup", onFactoryPointerUp);
pointerDown.value = true;
}
async function onFactoryPointerUp(e: PointerEvent) {
if (!pointerDrag.value) {
if (compSelected.value !== "") {
let { tx, ty } = spriteContainer.localTransform;
let { x, y } = getRelativeCoords(e);
x = roundDownTo(x - tx, blockSize) / blockSize;
y = roundDownTo(y - ty, blockSize) / blockSize;
const basicData = structuredClone(
FACTORY_COMPONENTS[compSelected.value]
) as FactoryComponent;
basicData.type = compSelected.value;
const sheet = await Assets.load(basicData.imageSrc);
basicData.sprite = new Sprite(sheet);
basicData.sprite.x = x * blockSize;
basicData.sprite.y = y * blockSize;
basicData.sprite.width = blockSize;
basicData.sprite.height = blockSize;
spriteContainer.addChild(basicData.sprite);
}
}
window.removeEventListener("pointerup", onFactoryPointerUp);
pointerDown.value = pointerDrag.value = false;
}
function onFactoryMouseEnter() {
isMouseHoverShown.value = true;
}
function onMouseLeave() {
function onFactoryMouseLeave() {
isMouseHoverShown.value = false;
}
function goBack() {
player.tabs.splice(0, Infinity, "main");
}
@ -338,71 +342,43 @@ const factory = createLayer(id, () => {
color,
minWidth: 700,
minimizable: false,
componentData,
style: { overflow: "hidden" },
display: jsx(() => (
<div class="layer-container">
<button class="goBack" onClick={goBack}>
❌
</button>
<table cellspacing="0" cellpadding="0" border="0" class="container">
<tr>
<td class="info" colspan="2">
<div style="min-height: 3em">
{whatIsHovered.value !== "" ? (
<>
<b>{FACTORY_COMPONENTS[whatIsHovered.value].name}</b>
<br />
{FACTORY_COMPONENTS[whatIsHovered.value].description}
</>
) : undefined}
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top" class="comps">
<h3>Components</h3>
<div>
{Object.entries(FACTORY_COMPONENTS).map(value => {
const key = value[0] as FactoryCompNames;
const item = value[1];
return (
<img
src={item.imageSrc}
style={{
width: "20%",
"aspect-ratio": "1",
border:
compSelected.value === key
? "1px solid green"
: ""
}}
onMouseenter={() => onComponentHover(key)}
onMouseleave={() => onComponentHover("")}
onClick={() => onCompClick(key)}
></img>
);
})}
</div>
</td>
<td
style={{
width: size.width,
height: size.height,
margin: 0,
padding: 0
}}
>
<Factory
application={app}
onMousemove={onMouseMove}
onMouseup={onClick}
onMouseenter={onMouseEnter}
onMouseleave={onMouseLeave}
onContextmenu={(e: MouseEvent) => e.preventDefault()}
/>
</td>
</tr>
</table>
<Factory
application={app}
onPointermove={onFactoryPointerMove}
onPointerdown={onFactoryPointerDown}
onPointerenter={onFactoryMouseEnter}
onPointerleave={onFactoryMouseLeave}
/>
<div cellspacing="0" cellpadding="0" border="0" class="container">
<div style="line-height: 2.5em; min-height: 2.5em">
{whatIsHovered.value === ""
? undefined
: FACTORY_COMPONENTS[whatIsHovered.value].description}
</div>
<div class="comps">
<div>
{Object.entries(FACTORY_COMPONENTS).map(value => {
const key = value[0] as FactoryCompNames;
const item = value[1];
return (
<img
src={item.imageSrc}
class={{ selected: compSelected.value === key }}
onMouseenter={() => onComponentHover(key)}
onMouseleave={() => onComponentHover("")}
onClick={() => onCompClick(key)}
></img>
);
})}
</div>
</div>
</div>
</div>
))
};

7
src/data/layers/letters.tsx
View file

@ -283,9 +283,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
<div>
{name} - {format(letters.value)} {letters.displayName}
</div>
))
{name}{" "}
<span class="desc">{format(letters.value)} {letters.displayName}</span>
</div>
)),
};
});

7
src/data/layers/metal.tsx
View file

@ -721,9 +721,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
<div>
{name} - {format(metal.value)} {metal.displayName}
</div>
))
{name}{" "}
<span class="desc">{format(metal.value)} {metal.displayName}</span>
</div>
)),
};
});

8
src/data/layers/oil.tsx
View file

@ -1283,9 +1283,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
}),
minimizedDisplay: jsx(() => (
<div>
{name} - {format(oil.value)} {oil.displayName}
</div>
))
{name}{" "}
<span class="desc">{format(oil.value)} {oil.displayName}</span>
</div>
)),
};
});

7
src/data/layers/paper.tsx
View file

@ -493,9 +493,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
<div>
{name} - {format(paper.value)} {paper.displayName}
</div>
))
{name}{" "}
<span class="desc">{format(paper.value)} {paper.displayName}</span>
</div>
)),
};
});

7
src/data/layers/plastic.tsx
View file

@ -356,9 +356,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
<div>
{name} - {format(plastic.value)} {plastic.displayName}
</div>
))
{name}{" "}
<span class="desc">{format(plastic.value)} {plastic.displayName}</span>
</div>
)),
};
});

45
src/data/layers/styles/factory.css
View file

@ -1,17 +1,40 @@
.factoryDisp {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: snow;
touch-action: none;
}
.factoryDisp canvas {
filter: drop-shadow(1px 1px 2px #0007);
}
.container {
width: 100%;
height: 100%;
position: absolute;
bottom: -5px;
height: 100px;
left: 10%;
right: 10%;
background: var(--raised-background);
border-radius: var(--border-radius) var(--border-radius) 0 0;
box-shadow: 0 2px 10px black;
margin: 0;
padding: 0;
}
.factoryDisp {
border-left: 1px solid white;
border-bottom: 1px solid white;
border-right: 1px solid white;
.comps > div > img {
width: 50px;
height: 50px;
}
.info {
border-bottom: 1px solid white;
}
.comps {
border-bottom: 1px solid white;
.comps > div > img.selected {
transform: translateY(-5px);
filter: drop-shadow(0 5px 5px #0007);
}

7
src/data/layers/trees.tsx
View file

@ -863,9 +863,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
<div>
{name} - {format(logs.value)} {logs.displayName}
</div>
))
{name}{" "}
<span class="desc">{format(logs.value)} {logs.displayName}</span>
</div>
)),
};
});

5
src/data/layers/workshop.tsx
View file

@ -333,9 +333,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
<div>
{name} - {format(foundationProgress.value)}% {foundationProgress.displayName}
{name}{" "}
<span class="desc">{formatWhole(foundationProgress.value)}% {foundationProgress.displayName}</span>
</div>
))
)),
};
});