mirror of
https://github.com/thepaperpilot/Advent-Incremental.git
synced 2024-11-21 08:12:41 +00:00
Infinite grid
This commit is contained in:
ducdat0507
parent
c92eb6ab3b
commit
317712bdbe
5 changed files with 196 additions and 7799 deletions
7731
package-lock.json
generated
7731
package-lock.json
generated
File diff suppressed because it is too large
Load diff
17
package.json
17
package.json
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { Application } from "@pixi/app";
|
||||
import { onMounted, shallowRef } from "vue";
|
||||
import { blockAmts } 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,7 +23,10 @@ onMounted(() => {
|
|||
</script>
|
||||
<style scoped>
|
||||
.factoryDisp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
@ -23,15 +24,6 @@ const day = 20;
|
|||
|
||||
// 20x20 block size
|
||||
// TODO: unhardcode stuff
|
||||
const size = {
|
||||
width: 1000,
|
||||
height: 340
|
||||
};
|
||||
export const blockAmts = {
|
||||
w: 50,
|
||||
h: 17
|
||||
};
|
||||
|
||||
function roundDownTo(num: number, multiple: number) {
|
||||
return Math.floor(num / multiple) * multiple;
|
||||
}
|
||||
|
|
@ -43,6 +35,8 @@ function getRelativeCoords(e: MouseEvent) {
|
|||
};
|
||||
}
|
||||
|
||||
const blockSize = 50;
|
||||
|
||||
interface FactoryComponent {
|
||||
directionIn: Direction | undefined;
|
||||
directionOut: Direction | undefined;
|
||||
|
|
@ -86,76 +80,98 @@ 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 | "">("");
|
||||
const components: Ref<unknown[][]> = persistent(
|
||||
Array(blockAmts.h)
|
||||
.fill(undefined)
|
||||
.map(() => Array(blockAmts.w).fill(undefined))
|
||||
);
|
||||
const components: Ref<Record<string, unknown>> = persistent({});
|
||||
|
||||
// pixi
|
||||
const app = new Application(size);
|
||||
const app = new Application({
|
||||
backgroundAlpha: 0
|
||||
});
|
||||
const graphicContainer = new Graphics();
|
||||
const spriteContainer = new Container();
|
||||
let blockWidth = 0;
|
||||
let blockHeight = 0;
|
||||
app.stage.addChild(graphicContainer, spriteContainer);
|
||||
|
||||
globalBus.on("update", () => {
|
||||
blockWidth = app.screen.width / blockAmts.w;
|
||||
blockHeight = app.screen.height / blockAmts.h;
|
||||
});
|
||||
|
||||
// draw graphics
|
||||
function updateGraphics() {
|
||||
app.resize();
|
||||
graphicContainer.clear();
|
||||
|
||||
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),
|
||||
roundDownTo(mouseCoords.y, blockHeight),
|
||||
blockWidth,
|
||||
blockHeight
|
||||
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) {
|
||||
if (compSelected.value === "") {
|
||||
console.warn("You haven't hovered over anything, trickster!");
|
||||
return;
|
||||
|
||||
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;
|
||||
}
|
||||
let { x, y } = getRelativeCoords(e);
|
||||
x = roundDownTo(x, blockWidth) / blockWidth;
|
||||
y = roundDownTo(y, blockHeight) / blockHeight;
|
||||
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;
|
||||
basicData.sprite.y = y;
|
||||
basicData.sprite.width = blockWidth;
|
||||
basicData.sprite.height = blockHeight;
|
||||
spriteContainer.addChild(basicData.sprite);
|
||||
}
|
||||
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");
|
||||
}
|
||||
|
|
@ -170,59 +186,44 @@ const factory = createLayer(id, () => {
|
|||
day,
|
||||
color,
|
||||
minWidth: 700,
|
||||
minimizable: false,
|
||||
style: { overflow: "hidden" },
|
||||
draggable: false,
|
||||
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 === ""
|
||||
? undefined
|
||||
: FACTORY_COMPONENTS[whatIsHovered.value].description}
|
||||
</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 white"
|
||||
: ""
|
||||
}}
|
||||
onMouseenter={() => onComponentHover(key)}
|
||||
onMouseleave={() => onComponentHover("")}
|
||||
onClick={() => onCompClick(key)}
|
||||
></img>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<Factory
|
||||
application={app}
|
||||
onMousemove={onMouseMove}
|
||||
onClick={onClick}
|
||||
onMouseenter={onMouseEnter}
|
||||
onMouseleave={onMouseLeave}
|
||||
/>
|
||||
</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>
|
||||
)),
|
||||
components
|
||||
|
|
|
|||
|
|
@ -1,16 +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;
|
||||
|
||||
.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);
|
||||
}
|
||||
Loading…
Reference in a new issue