refactor: input
This commit is contained in:
cha0s
parent
b9428658b5
commit
e8ba520a5c
|
|
@ -9,9 +9,9 @@ import Entity from './entity.jsx';
|
|||
|
||||
export default function Entities({
|
||||
camera,
|
||||
monopolizers,
|
||||
scale,
|
||||
setChatMessages,
|
||||
setMonopolizers,
|
||||
}) {
|
||||
const [entities, setEntities] = useState({});
|
||||
usePacket('EcsChange', async () => {
|
||||
|
|
@ -65,7 +65,7 @@ export default function Entities({
|
|||
},
|
||||
};
|
||||
if (dialogues[key].monopolizer) {
|
||||
setMonopolizers((monopolizers) => [...monopolizers, monopolizer]);
|
||||
monopolizers.push(monopolizer);
|
||||
}
|
||||
dialogues[key].onClose = () => {
|
||||
setEntities((entities) => ({
|
||||
|
|
@ -73,14 +73,10 @@ export default function Entities({
|
|||
[id]: ecs.rebuild(id),
|
||||
}));
|
||||
if (dialogues[key].monopolizer) {
|
||||
setMonopolizers((monopolizers) => {
|
||||
const index = monopolizers.indexOf(monopolizer);
|
||||
if (-1 === index) {
|
||||
return monopolizers;
|
||||
}
|
||||
const index = monopolizers.indexOf(monopolizer);
|
||||
if (-1 !== index) {
|
||||
monopolizers.splice(index, 1);
|
||||
return [...monopolizers];
|
||||
});
|
||||
}
|
||||
}
|
||||
delete dialogues[key];
|
||||
};
|
||||
|
|
@ -96,7 +92,7 @@ export default function Entities({
|
|||
...updating,
|
||||
};
|
||||
});
|
||||
}, [setChatMessages, setMonopolizers]);
|
||||
}, [monopolizers, setChatMessages]);
|
||||
useEcsTick(onEcsTick);
|
||||
const renderables = [];
|
||||
for (const id in entities) {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ function Ui({disconnected}) {
|
|||
const [scale, setScale] = useState(2);
|
||||
const [Components, setComponents] = useState();
|
||||
const [Systems, setSystems] = useState();
|
||||
const [monopolizers, setMonopolizers] = useState([]);
|
||||
const monopolizers = useRef([]);
|
||||
const [message, setMessage] = useState('');
|
||||
const [chatIsOpen, setChatIsOpen] = useState(false);
|
||||
const [chatHistory, setChatHistory] = useState([]);
|
||||
|
|
@ -58,7 +58,7 @@ function Ui({disconnected}) {
|
|||
const [chatMessages, setChatMessages] = useState({});
|
||||
const [pendingMessage, setPendingMessage] = useState('');
|
||||
const [hotbarIsHidden, setHotbarIsHidden] = useState(true);
|
||||
const [hotbarHideHandle, setHotbarHideHandle] = useState();
|
||||
const hotbarHideHandle = useRef();
|
||||
const [isInventoryOpen, setIsInventoryOpen] = useState(false);
|
||||
const [externalInventory, setExternalInventory] = useState();
|
||||
const [externalInventorySlots, setExternalInventorySlots] = useState();
|
||||
|
|
@ -95,196 +95,137 @@ function Ui({disconnected}) {
|
|||
clearTimeout(handle);
|
||||
};
|
||||
}, [disconnected]);
|
||||
useEffect(() => {
|
||||
return addKeyListener(document.body, ({type, payload}) => {
|
||||
if (chatInputRef.current) {
|
||||
chatInputRef.current.focus();
|
||||
return;
|
||||
}
|
||||
let actionPayload;
|
||||
switch (payload) {
|
||||
case 'w': {
|
||||
actionPayload = {type: 'moveUp', value: KEY_MAP[type]};
|
||||
break;
|
||||
}
|
||||
case 'a': {
|
||||
actionPayload = {type: 'moveLeft', value: KEY_MAP[type]};
|
||||
break;
|
||||
}
|
||||
case 's': {
|
||||
actionPayload = {type: 'moveDown', value: KEY_MAP[type]};
|
||||
break;
|
||||
}
|
||||
case 'd': {
|
||||
actionPayload = {type: 'moveRight', value: KEY_MAP[type]};
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (actionPayload) {
|
||||
client.send({
|
||||
type: 'Action',
|
||||
payload: actionPayload,
|
||||
});
|
||||
}
|
||||
});
|
||||
}, [
|
||||
client,
|
||||
]);
|
||||
const keepHotbarOpen = useCallback(() => {
|
||||
if (!isInventoryOpen) {
|
||||
setHotbarIsHidden(false);
|
||||
if (hotbarHideHandle) {
|
||||
clearTimeout(hotbarHideHandle);
|
||||
if (hotbarHideHandle.current) {
|
||||
clearTimeout(hotbarHideHandle.current);
|
||||
}
|
||||
setHotbarHideHandle(setTimeout(() => {
|
||||
hotbarHideHandle.current = setTimeout(() => {
|
||||
setHotbarIsHidden(true);
|
||||
}, 4000));
|
||||
}, 4000);
|
||||
}
|
||||
}, [hotbarHideHandle, isInventoryOpen]);
|
||||
}, [isInventoryOpen]);
|
||||
useEffect(() => {
|
||||
return addKeyListener(document.body, ({event, type, payload}) => {
|
||||
if ('Escape' === payload && 'keyDown' === type && chatInputRef.current) {
|
||||
setChatIsOpen(false);
|
||||
return addKeyListener(document.body, ({event, payload, type}) => {
|
||||
const actionMap = {
|
||||
'd': {type: 'moveRight'},
|
||||
's': {type: 'moveDown'},
|
||||
'a': {type: 'moveLeft'},
|
||||
'w': {type: 'moveUp'},
|
||||
'e': {type: 'interact'},
|
||||
'1': {type: 'changeSlot', payload: 1},
|
||||
'2': {type: 'changeSlot', payload: 2},
|
||||
'3': {type: 'changeSlot', payload: 3},
|
||||
'4': {type: 'changeSlot', payload: 4},
|
||||
'5': {type: 'changeSlot', payload: 5},
|
||||
'6': {type: 'changeSlot', payload: 6},
|
||||
'7': {type: 'changeSlot', payload: 7},
|
||||
'8': {type: 'changeSlot', payload: 8},
|
||||
'9': {type: 'changeSlot', payload: 9},
|
||||
'0': {type: 'changeSlot', payload: 10},
|
||||
'`': {type: 'openInventory'},
|
||||
'-': {type: 'zoomOut'},
|
||||
'+': {type: 'zoomIn'},
|
||||
'=': {type: 'zoomIn'},
|
||||
'F3': {type: 'debug'},
|
||||
'F4': {type: 'devtools'},
|
||||
'Enter': {type: 'openChat'},
|
||||
'Escape': {type: 'closeChat'},
|
||||
};
|
||||
const action = actionMap[payload];
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
if (chatInputRef.current) {
|
||||
if ('closeChat' === action.type && 'keyDown' === type) {
|
||||
setChatIsOpen(false);
|
||||
return;
|
||||
}
|
||||
chatInputRef.current.focus();
|
||||
return;
|
||||
}
|
||||
let actionPayload;
|
||||
switch (payload) {
|
||||
case '-':
|
||||
switch (action.type) {
|
||||
case 'interact': {
|
||||
if ('keyDown' === type) {
|
||||
setScale((scale) => scale > 1 ? scale - 1 : 1);
|
||||
}
|
||||
break;
|
||||
case '=':
|
||||
case '+':
|
||||
if ('keyDown' === type) {
|
||||
setScale((scale) => scale < 4 ? Math.floor(scale + 1) : 4);
|
||||
}
|
||||
break;
|
||||
case 'F3': {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
if ('keyDown' === type) {
|
||||
setDebug((debug) => !debug);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'F4': {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
if ('keyDown' === type) {
|
||||
setDevtoolsIsOpen(!devtoolsIsOpen);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case '`': {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
if ('keyDown' === type) {
|
||||
if (isInventoryOpen) {
|
||||
setHotbarIsHidden(true);
|
||||
}
|
||||
else {
|
||||
setHotbarIsHidden(false);
|
||||
if (hotbarHideHandle) {
|
||||
clearTimeout(hotbarHideHandle);
|
||||
}
|
||||
}
|
||||
setIsInventoryOpen(!isInventoryOpen);
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'Enter': {
|
||||
if ('keyDown' === type) {
|
||||
setChatIsOpen(true);
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'e': {
|
||||
if (KEY_MAP[type]) {
|
||||
if (monopolizers.length > 0) {
|
||||
monopolizers[0].trigger();
|
||||
if (monopolizers.current.length > 0) {
|
||||
monopolizers.current[0].trigger();
|
||||
break;
|
||||
}
|
||||
}
|
||||
actionPayload = {type: 'interact', value: KEY_MAP[type]};
|
||||
break;
|
||||
}
|
||||
case '1': {
|
||||
case 'moveRight':
|
||||
case 'moveDown':
|
||||
case 'moveLeft':
|
||||
case 'moveUp': {
|
||||
actionPayload = {type: action.type, value: 'keyDown' === type ? 1 : 0};
|
||||
break;
|
||||
}
|
||||
case 'changeSlot': {
|
||||
if ('keyDown' === type) {
|
||||
keepHotbarOpen();
|
||||
actionPayload = {type: 'changeSlot', value: 1};
|
||||
actionPayload = {type: 'changeSlot', value: action.payload};
|
||||
}
|
||||
break;
|
||||
}
|
||||
case '2': {
|
||||
if ('keyDown' === type) {
|
||||
keepHotbarOpen();
|
||||
actionPayload = {type: 'changeSlot', value: 2};
|
||||
case 'openInventory': {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
break;
|
||||
if ('keyDown' === type) {
|
||||
setIsInventoryOpen((isInventoryOpen) => {
|
||||
if (isInventoryOpen) {
|
||||
setHotbarIsHidden(true);
|
||||
}
|
||||
else {
|
||||
setHotbarIsHidden(false);
|
||||
if (hotbarHideHandle.current) {
|
||||
clearTimeout(hotbarHideHandle.current);
|
||||
}
|
||||
}
|
||||
return !isInventoryOpen;
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
case '3': {
|
||||
case 'zoomIn': {
|
||||
if ('keyDown' === type) {
|
||||
keepHotbarOpen();
|
||||
actionPayload = {type: 'changeSlot', value: 3};
|
||||
setScale((scale) => scale < 4 ? Math.floor(scale + 1) : 4);
|
||||
}
|
||||
break;
|
||||
return;
|
||||
}
|
||||
case '4': {
|
||||
case 'zoomOut': {
|
||||
if ('keyDown' === type) {
|
||||
keepHotbarOpen();
|
||||
actionPayload = {type: 'changeSlot', value: 4};
|
||||
setScale((scale) => scale > 1 ? scale - 1 : 1);
|
||||
}
|
||||
break;
|
||||
return;
|
||||
}
|
||||
case '5': {
|
||||
if ('keyDown' === type) {
|
||||
keepHotbarOpen();
|
||||
actionPayload = {type: 'changeSlot', value: 5};
|
||||
case 'debug': {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
break;
|
||||
if ('keyDown' === type) {
|
||||
setDebug((debug) => !debug);
|
||||
}
|
||||
return;
|
||||
}
|
||||
case '6': {
|
||||
if ('keyDown' === type) {
|
||||
keepHotbarOpen();
|
||||
actionPayload = {type: 'changeSlot', value: 6};
|
||||
case 'devtools': {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
break;
|
||||
if ('keyDown' === type) {
|
||||
setDevtoolsIsOpen((devtoolsIsOpen) => !devtoolsIsOpen);
|
||||
}
|
||||
return;
|
||||
}
|
||||
case '7': {
|
||||
case 'openChat': {
|
||||
if ('keyDown' === type) {
|
||||
keepHotbarOpen();
|
||||
actionPayload = {type: 'changeSlot', value: 7};
|
||||
setChatIsOpen(true);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case '8': {
|
||||
if ('keyDown' === type) {
|
||||
keepHotbarOpen();
|
||||
actionPayload = {type: 'changeSlot', value: 8};
|
||||
}
|
||||
break;
|
||||
}
|
||||
case '9': {
|
||||
if ('keyDown' === type) {
|
||||
keepHotbarOpen();
|
||||
actionPayload = {type: 'changeSlot', value: 9};
|
||||
}
|
||||
break;
|
||||
}
|
||||
case '0': {
|
||||
if ('keyDown' === type) {
|
||||
keepHotbarOpen();
|
||||
actionPayload = {type: 'changeSlot', value: 10};
|
||||
}
|
||||
break;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (actionPayload) {
|
||||
|
|
@ -294,20 +235,11 @@ function Ui({disconnected}) {
|
|||
});
|
||||
}
|
||||
});
|
||||
}, [
|
||||
client,
|
||||
devtoolsIsOpen,
|
||||
hotbarHideHandle,
|
||||
isInventoryOpen,
|
||||
keepHotbarOpen,
|
||||
monopolizers,
|
||||
setDebug,
|
||||
setScale,
|
||||
]);
|
||||
}, [client, keepHotbarOpen, setDebug]);
|
||||
const onEcsChangePacket = useCallback(() => {
|
||||
refreshEcs();
|
||||
mainEntityRef.current = undefined;
|
||||
setMonopolizers([]);
|
||||
monopolizers.current = [];
|
||||
}, [refreshEcs, mainEntityRef]);
|
||||
usePacket('EcsChange', onEcsChangePacket);
|
||||
const onTickPacket = useCallback(async (payload, client) => {
|
||||
|
|
@ -348,8 +280,8 @@ function Ui({disconnected}) {
|
|||
setExternalInventorySlots(newInventorySlots);
|
||||
setIsInventoryOpen(true);
|
||||
setHotbarIsHidden(false);
|
||||
if (hotbarHideHandle) {
|
||||
clearTimeout(hotbarHideHandle);
|
||||
if (hotbarHideHandle.current) {
|
||||
clearTimeout(hotbarHideHandle.current);
|
||||
}
|
||||
}
|
||||
else if (update.Inventory.closed) {
|
||||
|
|
@ -363,7 +295,7 @@ function Ui({disconnected}) {
|
|||
}
|
||||
}
|
||||
}
|
||||
}, [hotbarHideHandle, mainEntityRef]);
|
||||
}, [mainEntityRef]);
|
||||
useEcsTick(onEcsTick);
|
||||
const onEcsTickParticles = useCallback((payload, ecs) => {
|
||||
if (!('1' in payload) || particleWorker) {
|
||||
|
|
@ -492,8 +424,8 @@ function Ui({disconnected}) {
|
|||
}
|
||||
break;
|
||||
case 2:
|
||||
if (monopolizers.length > 0) {
|
||||
monopolizers[0].trigger();
|
||||
if (monopolizers.current.length > 0) {
|
||||
monopolizers.current[0].trigger();
|
||||
break;
|
||||
}
|
||||
client.send({
|
||||
|
|
@ -532,12 +464,12 @@ function Ui({disconnected}) {
|
|||
}
|
||||
if (!isInventoryOpen) {
|
||||
setHotbarIsHidden(false);
|
||||
if (hotbarHideHandle) {
|
||||
clearTimeout(hotbarHideHandle);
|
||||
if (hotbarHideHandle.current) {
|
||||
clearTimeout(hotbarHideHandle.current);
|
||||
}
|
||||
setHotbarHideHandle(setTimeout(() => {
|
||||
hotbarHideHandle.current = setTimeout(() => {
|
||||
setHotbarIsHidden(true);
|
||||
}, 4000));
|
||||
}, 4000);
|
||||
}
|
||||
if (event.deltaY > 0) {
|
||||
client.send({
|
||||
|
|
@ -556,7 +488,7 @@ function Ui({disconnected}) {
|
|||
>
|
||||
<Pixi
|
||||
camera={camera}
|
||||
monopolizers={monopolizers}
|
||||
monopolizers={monopolizers.current}
|
||||
particleWorker={particleWorker}
|
||||
scale={scale}
|
||||
/>
|
||||
|
|
@ -599,7 +531,7 @@ function Ui({disconnected}) {
|
|||
camera={camera}
|
||||
scale={scale}
|
||||
setChatMessages={setChatMessages}
|
||||
setMonopolizers={setMonopolizers}
|
||||
monopolizers={monopolizers.current}
|
||||
/>
|
||||
{chatIsOpen && (
|
||||
<Chat
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user