cha0s/humus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: hotbar input

Browse Source
This commit is contained in:
cha0s 2021-01-20 07:43:20 -06:00
parent 43dbb7b7ca
commit 4d1d857be1
3 changed files with 19 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/src/react/components/play/hotbar/index.jsx
View File

@ -1,5 +1,6 @@
import './index.scss'; import './index.scss';
import {useLatus} from '@latus/react/client';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
@ -10,8 +11,10 @@ import usePropertyChange from 'hooks/use-property-change';
import useInventorySlice from 'hooks/use-inventory-slice'; import useInventorySlice from 'hooks/use-inventory-slice';
const HotbarComponent = (props) => { const HotbarComponent = (props) => {
const latus = useLatus();
const {keyMap} = latus.get('@avocado/input');
const {selfEntity} = props; const {selfEntity} = props;
const hotkeyForSlot = (index) => (index + 1) % 10; const hotkeyForSlot = (index) => keyMap[`HotbarSlot${index}`];
const activeSlotIndex = usePropertyChange(selfEntity, 'activeSlotIndex'); const activeSlotIndex = usePropertyChange(selfEntity, 'activeSlotIndex');
const itemSlice = useInventorySlice(selfEntity, 0, 10); const itemSlice = useInventorySlice(selfEntity, 0, 10);
const itemSlots = itemSlice.map((item, i) => ( const itemSlots = itemSlice.map((item, i) => (

9
app/src/react/components/play/hotbar/index.scss
View File

@ -2,7 +2,7 @@
.hotbar { .hotbar {
position: absolute; position: absolute;
width: 85%; width: 70%;
height: 100px; height: 100px;
left: 50%; left: 50%;
top: 2%; top: 2%;
@ -26,7 +26,12 @@
.hotbar__key { .hotbar__key {
color: white; color: white;
text-shadow: 0.25px 0.25px 0 black; text-shadow:
0px 0px 2px black,
0px 0px 2px black,
0px 0px 2px black,
0px 0px 2px black
;
font-family: joystix; font-family: joystix;
position: absolute; position: absolute;
top: -6px; top: -6px;

36
packages/core/src/traits/controllable.js
View File

@ -16,36 +16,16 @@ export default () => class Controllable extends Trait {
for (let i = 0; i < inputStream.length; i++) { for (let i = 0; i < inputStream.length; i++) {
const {action, value} = inputStream[i]; const {action, value} = inputStream[i];
const normalized = 0 === value ? -1 : 1; const normalized = 0 === value ? -1 : 1;
const hotbarMatch = action.match(/^HotbarSlot(\d)/);
if (hotbarMatch) {
this.entity.activeSlotIndex = (parseInt(hotbarMatch[1], 10) + 10) % 10;
}
switch (action) { switch (action) {
case 'HotbarSlot1': case 'HotbarSlotNext':
this.entity.activeSlotIndex = 0; this.entity.activeSlotIndex = (this.entity.activeSlotIndex + 1) % 10;
break; break;
case 'HotbarSlot2': case 'HotbarSlotPrevious':
this.entity.activeSlotIndex = 1; this.entity.activeSlotIndex = (this.entity.activeSlotIndex + 9) % 10;
break;
case 'HotbarSlot3':
this.entity.activeSlotIndex = 2;
break;
case 'HotbarSlot4':
this.entity.activeSlotIndex = 3;
break;
case 'HotbarSlot5':
this.entity.activeSlotIndex = 4;
break;
case 'HotbarSlot6':
this.entity.activeSlotIndex = 5;
break;
case 'HotbarSlot7':
this.entity.activeSlotIndex = 6;
break;
case 'HotbarSlot8':
this.entity.activeSlotIndex = 7;
break;
case 'HotbarSlot9':
this.entity.activeSlotIndex = 8;
break;
case 'HotbarSlot0':
this.entity.activeSlotIndex = 9;
break; break;
case 'MoveUp': case 'MoveUp':
this._movementVector[1] -= normalized; this._movementVector[1] -= normalized;