refactor: input

app/src/react/components/play/hotbar/index.jsx

@@ -1,6 +1,5 @@
 import './index.scss';
 
-import {useLatus} from '@latus/react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -11,10 +10,13 @@ import usePropertyChange from 'hooks/use-property-change';
 import useInventorySlice from 'hooks/use-inventory-slice';
 
 const HotbarComponent = (props) => {
-  const latus = useLatus();
-  const {keyMap} = latus.get('@avocado/input');
   const {selfEntity} = props;
-  const hotkeyForSlot = (index) => keyMap[`HotbarSlot${index}`];
+  const {inputActions} = selfEntity;
+  const keys = [];
+  for (let i = 0; i < 10; ++i) {
+    const {index} = (inputActions[`HotbarSlot${i}`] || []).find(({type}) => 'key' === type) || {};
+    keys[i] = 'undefined' === typeof index ? null : index;
+  }
   const activeSlotIndex = usePropertyChange(selfEntity, 'activeSlotIndex');
   const itemSlice = useInventorySlice(selfEntity, 0, 10);
   const itemSlots = itemSlice.map((item, i) => (
@@ -34,7 +36,7 @@ const HotbarComponent = (props) => {
         return false;
       }}
     >
-      <div className="hotbar__key">{hotkeyForSlot(i)}</div>
+      <div className="hotbar__key">{keys[i]}</div>
     </ItemSlot>
   ));
   return (
@@ -51,6 +53,7 @@ const HotbarComponent = (props) => {
 HotbarComponent.propTypes = {
   selfEntity: PropTypes.shape({
     activeSlotIndex: PropTypes.number,
+    inputActions: PropTypes.shape({}),
   }).isRequired,
 };
 

app/src/react/components/play/index.jsx

@@ -1,6 +1,6 @@
 import './index.scss';
 
-import {InputNormalizer} from '@avocado/input';
+import {InputNormalizer} from '@avocado/input/client';
 import {setSelfEntity, useSelfEntity} from '@humus/core';
 import {useDispatch} from '@latus/redux';
 import {useSocket} from '@latus/socket';
@@ -33,7 +33,7 @@ const Play = () => {
     inputNormalizer.listen(window.document.body);
     selfEntity.listenForInput(inputNormalizer);
     selfEntity.actionRegistry.setTransformerFor('UseItem', (type) => (
-      'keyDown' === type ? selfEntity.activeSlotIndex : -1
+      (-1 !== ['buttonPress', 'keyDown'].indexOf(type)) ? selfEntity.activeSlotIndex : -1
     ));
     const inputHandle = setInterval(() => {
       const inputStream = selfEntity.drainInput();

packages/core/src/traits/controllable.js

@@ -70,26 +70,32 @@ export default () => class Controllable extends decorate(Trait) {
           {type: 'key', index: '0'},
         ],
         HotbarSlotNext: [
-          {type: 'key', index: 'WheelDown'},
+          {type: 'button', index: 5},
+          {type: 'wheel', index: 'down'},
         ],
         HotbarSlotPrevious: [
-          {type: 'key', index: 'WheelUp'},
+          {type: 'button', index: 4},
+          {type: 'wheel', index: 'up'},
         ],
         MoveUp: [
+          {type: 'button', index: 12},
           {type: 'key', index: 'w'},
         ],
         MoveLeft: [
+          {type: 'button', index: 14},
           {type: 'key', index: 'a'},
         ],
         MoveDown: [
+          {type: 'button', index: 13},
           {type: 'key', index: 's'},
         ],
         MoveRight: [
+          {type: 'button', index: 15},
           {type: 'key', index: 'd'},
         ],
         UseItem: [
-          {type: 'key', index: 'ArrowLeft'},
           {type: 'button', index: 0},
+          {type: 'key', index: 'ArrowLeft'},
         ],
         Interact: [
           {type: 'key', index: 'e'},
@@ -111,6 +117,10 @@ export default () => class Controllable extends decorate(Trait) {
     this.#actionRegistry.stopListening();
   }
 
+  get inputActions() {
+    return this.params.actions;
+  }
+
   set inputStream(inputStream) {
     for (let i = 0; i < inputStream.length; i++) {
       const {action, value} = inputStream[i];
@@ -121,10 +131,14 @@ export default () => class Controllable extends decorate(Trait) {
       }
       switch (action) {
         case 'HotbarSlotNext':
-          this.entity.activeSlotIndex = (this.entity.activeSlotIndex + 1) % 10;
+          if (value) {
+            this.entity.activeSlotIndex = (this.entity.activeSlotIndex + 1) % 10;
+          }
           break;
         case 'HotbarSlotPrevious':
-          this.entity.activeSlotIndex = (this.entity.activeSlotIndex + 9) % 10;
+          if (value) {
+            this.entity.activeSlotIndex = (this.entity.activeSlotIndex + 9) % 10;
+          }
           break;
         case 'MoveUp':
           this.controllableMovementY -= normalized;