feat: positional usage

This commit is contained in:
cha0s 2024-07-25 10:47:52 -05:00
parent 557c8285ba
commit 0439c52076
2 changed files with 32 additions and 30 deletions

View File

@ -8,7 +8,7 @@ export default class Wielder extends Component {
const {Inventory, Wielder} = ecs.get(this.entity);
return Inventory.item(Wielder.activeSlot + 1);
}
useActiveItem(state) {
useActiveItem([state, where]) {
const entity = ecs.get(this.entity);
const {Ticking} = entity;
const activeItem = this.activeItem();
@ -19,6 +19,7 @@ export default class Wielder extends Component {
script = script.clone();
script.context.ecs = ecs;
script.context.item = activeItem;
script.context.where = where;
script.context.wielder = entity;
Ticking.add(script.ticker());
}

View File

@ -1,4 +1,4 @@
import {memo, useEffect, useRef, useState} from 'react';
import {memo, useCallback, useEffect, useRef, useState} from 'react';
import {useClient, usePacket} from '@/react/context/client.js';
import {useDebug} from '@/react/context/debug.js';
@ -166,10 +166,6 @@ function Ui({disconnected}) {
}
break;
}
case ' ': {
actionPayload = {type: 'use', value: KEY_MAP[type]};
break;
}
case 'Tab': {
if ('keyDown' === type) {
if (isInventoryOpen) {
@ -433,6 +429,30 @@ function Ui({disconnected}) {
document.body.removeEventListener('contextmenu', onContextMenu);
};
}, []);
const computePosition = useCallback(({clientX, clientY}) => {
if (!gameRef.current || !mainEntity) {
return;
}
const {top, left, width} = gameRef.current.getBoundingClientRect();
const master = ecs.get(1);
if (!master) {
return;
}
const {Camera} = ecs.get(mainEntity);
const size = width / RESOLUTION.x;
const camera = {
x: ((Camera.x * scale) - (RESOLUTION.x / 2)),
y: ((Camera.y * scale) - (RESOLUTION.y / 2)),
}
return {
x: (((clientX - left) / size) + camera.x) / scale,
y: (((clientY - top) / size) + camera.y) / scale,
};
}, [
ecs,
mainEntity,
scale,
]);
return (
<div
className={styles.ui}
@ -458,39 +478,19 @@ function Ui({disconnected}) {
event.preventDefault();
return;
}
const where = computePosition(event);
switch (event.button) {
case 0:
if (devtoolsIsOpen) {
if (!gameRef.current || !mainEntity) {
return;
}
const {top, left, width} = gameRef.current.getBoundingClientRect();
const master = ecs.get(1);
if (!master) {
return;
}
const {Camera} = ecs.get(mainEntity);
const size = width / RESOLUTION.x;
const client = {
x: (event.clientX - left) / size,
y: (event.clientY - top) / size,
};
const camera = {
x: ((Camera.x * scale) - (RESOLUTION.x / 2)),
y: ((Camera.y * scale) - (RESOLUTION.y / 2)),
}
devEventsChannel.invoke(
'click',
{
x: (client.x + camera.x) / scale,
y: (client.y + camera.y) / scale,
},
where,
);
}
else {
client.send({
type: 'Action',
payload: {type: 'use', value: 1},
payload: {type: 'use', value: [1, where]},
});
}
break;
@ -511,11 +511,12 @@ function Ui({disconnected}) {
event.preventDefault();
return;
}
const where = computePosition(event);
switch (event.button) {
case 0:
client.send({
type: 'Action',
payload: {type: 'use', value: 0},
payload: {type: 'use', value: [0, where]},
});
break;
case 2: