feat: positional usage
This commit is contained in:
parent
557c8285ba
commit
0439c52076
|
@ -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());
|
||||
}
|
||||
|
|
|
@ -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:
|
||||
|
|
Loading…
Reference in New Issue
Block a user