refactor: hotbar input
This commit is contained in:
parent
43dbb7b7ca
commit
4d1d857be1
|
@ -1,5 +1,6 @@
|
|||
import './index.scss';
|
||||
|
||||
import {useLatus} from '@latus/react/client';
|
||||
import classnames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
@ -10,8 +11,10 @@ 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) => (index + 1) % 10;
|
||||
const hotkeyForSlot = (index) => keyMap[`HotbarSlot${index}`];
|
||||
const activeSlotIndex = usePropertyChange(selfEntity, 'activeSlotIndex');
|
||||
const itemSlice = useInventorySlice(selfEntity, 0, 10);
|
||||
const itemSlots = itemSlice.map((item, i) => (
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.hotbar {
|
||||
position: absolute;
|
||||
width: 85%;
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
left: 50%;
|
||||
top: 2%;
|
||||
|
@ -26,7 +26,12 @@
|
|||
|
||||
.hotbar__key {
|
||||
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;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
|
|
|
@ -16,36 +16,16 @@ export default () => class Controllable extends Trait {
|
|||
for (let i = 0; i < inputStream.length; i++) {
|
||||
const {action, value} = inputStream[i];
|
||||
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) {
|
||||
case 'HotbarSlot1':
|
||||
this.entity.activeSlotIndex = 0;
|
||||
case 'HotbarSlotNext':
|
||||
this.entity.activeSlotIndex = (this.entity.activeSlotIndex + 1) % 10;
|
||||
break;
|
||||
case 'HotbarSlot2':
|
||||
this.entity.activeSlotIndex = 1;
|
||||
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;
|
||||
case 'HotbarSlotPrevious':
|
||||
this.entity.activeSlotIndex = (this.entity.activeSlotIndex + 9) % 10;
|
||||
break;
|
||||
case 'MoveUp':
|
||||
this._movementVector[1] -= normalized;
|
||||
|
|
Loading…
Reference in New Issue
Block a user