flow: inventory and item usage!

client/app.js

@@ -251,9 +251,20 @@ export class App extends decorate(class {}) {
         const slotIndex = (parseInt(key) + 9) % 10;
         this.setActiveSlotIndex(slotIndex);
         break;
+      case 'ArrowLeft':
+        if (this.selfEntity) {
+          this.actionRegistry.state = this.actionRegistry.state.set(
+            'UseItem',
+            this.selfEntity.activeSlotIndex
+          );
+        }
+        break;
     }
   }
 
+  onKeyUp(key) {
+  }
+
   onPacket(packet) {
     if (!this.hasReceivedState) {
       this.renderIntoDom(document.querySelector('.app')).then(() => {
@@ -468,8 +479,10 @@ export class App extends decorate(class {}) {
 
   startProcessingInput() {
     const config = this.readConfig();
-    // Pointer input.
+    // Key input.
     this.stage.on('keyDown', this.onKeyDown, this);
+    this.stage.on('keyUp', this.onKeyUp, this);
+    // Pointer input.
     this.stage.on('pointerDown', this.onPointerDown, this);
     this.stage.on('pointerMove', this.onPointerMove, this);
     this.stage.on('pointerUp', this.onPointerUp, this);
@@ -486,6 +499,9 @@ export class App extends decorate(class {}) {
       if (this.actionState !== this.actionRegistry.state) {
         this.actionState = this.actionRegistry.state;
         this.socket.send(InputPacket.fromState(this.actionState));
+        this.actionRegistry.state = this.actionRegistry.state.delete(
+          'UseItem'
+        );
       }
     }, 1000 * config.inputFrequency);
     // Mouse/touch movement.

client/ui/hooks/use-event.js

@@ -0,0 +1,18 @@
+// 3rd party.
+import React, {useEffect} from 'react';
+
+export function useEvent(object, eventName, fn) {
+  useEffect(() => {
+    if (!object) {
+      return;
+    }
+    const onEvent = (...args) => {
+      fn(...args);
+    };
+    onEvent();
+    object.on(eventName, onEvent);
+    return () => {
+      object.off(eventName, onEvent);
+    };
+  }, [object]);
+}

client/ui/menu/hotbar.js

@@ -1,10 +1,12 @@
 // 3rd party.
 import classnames from 'classnames';
+import * as I from 'immutable';
 import React, {useEffect, useState} from 'react';
 // 2nd party.
 import {compose} from '@avocado/core';
 import contempo from 'contempo';
 // 1st party.
+import {useEvent} from '../hooks/use-event';
 import {usePropertyChange} from '../hooks/use-property-change';
 import ItemSlot from './item-slot';
 
@@ -43,49 +45,34 @@ const decorate = compose(
 const HotbarComponent = ({app}) => {
   const selfEntity = usePropertyChange(app, 'selfEntity');
   const activeSlotIndex = usePropertyChange(selfEntity, 'activeSlotIndex');
-  const [slotImageUris, setSlotImageUris] = useState({});
-  useEffect(() => {
-    if (!selfEntity) {
-      return;
-    }
-    const onInventoryChanged = () => {
-      const imageUris = {};
-      const itemPromises = [];
-      for (let i = 0; i < 10; i++) {
+  const [items, setItems] = useState(I.List());
+  useEvent(selfEntity, 'inventoryChanged', () => {
+    setItems(items.withMutations((items) => {
+      for (let i = 0; i < 10; ++i) {
         const item = selfEntity.itemInSlot(i);
         if (!item) {
           continue;
         }
-        itemPromises.push(item.then((item) => {
-          return item.hydrate().then(() => {
-            const image = item.imageForSlot(0);
-            if (image) {
-              imageUris[i] = image.uri;
-            }
-          });
+        if (!items.has(i)) {
+          items.set(i, I.Map());
+        }
+        items.set(i, items.get(i).withMutations((listItem) => {
+          listItem.set('backgroundImage', item.imageForSlot());
+          listItem.set('qty', item.qty);
         }));
       }
-      Promise.all(itemPromises).then(() => {
-        setSlotImageUris(imageUris);
-      })
-    };
-    selfEntity.on('inventoryChanged', onInventoryChanged);
-    onInventoryChanged();
-    return () => {
-      selfEntity.off('inventoryChanged', onInventoryChanged);
-    };
-  }, [selfEntity]);
-
+    }));
+  });
   const hotkeyForSlot = (index) => {
     return (index + 1) % 10;
   }
   const slots = [];
   for (let i = 0; i < 10; ++i) {
     const slot = <ItemSlot
-      backgroundImage={slotImageUris[i]}
       className={classnames(
         activeSlotIndex === i ? 'active' : '',
       )}
+      item={items.get(i)}
       key={i}
       onClick={(event) => {
         if (selfEntity) {

client/ui/menu/item-slot.js

@@ -1,6 +1,6 @@
 // 3rd party.
 import classnames from 'classnames';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 // 2nd party.
 import {compose} from '@avocado/core';
 import contempo from 'contempo';
@@ -30,12 +30,62 @@ const decorate = compose(
   background-size: contain;
   width: 100%;
   height: 100%;
+
+  image-rendering: optimizeSpeed;             /* Older versions of FF          */
+  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
+  image-rendering: -webkit-optimize-contrast; /* Safari                        */
+  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
+  image-rendering: pixelated;                 /* Awesome future-browsers       */
+  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
 }
+.item-slot-inner .qty {
+  color: white;
+  text-shadow: 0.25px 0.25px 0 black;
+  font-family: joystix;
+  position: absolute;
+  bottom: 0px;
+  right: 0.5px;
+  font-size: 5px;
+  line-height: 5px;
+}
+.qty.e3 {
+  font-size: 4px;
+}
+.qty.e4 {
+  font-size: 3px;
+  bottom: -1px;
+}
+
   `),
 );
 
 const ItemSlotComponent = (props) => {
-  const {backgroundImage, children, className, ...rest} = props;
+  const {children, className, item, ...rest} = props;
+  let backgroundImageUri;
+  let qty;
+  let qtyClass;
+  if (item) {
+    const backgroundImage = item.get('backgroundImage');
+    if (backgroundImage) {
+      backgroundImageUri = backgroundImage.uri;
+    }
+    qty = item.get('qty');
+    if (qty > 9999) {
+      qtyClass = 'e4';
+    }
+    else if (qty > 999) {
+      qtyClass = 'e3';
+    }
+    else if (qty > 99) {
+      qtyClass = 'e2';
+    }
+    else if (qty > 9) {
+      qtyClass = 'e1';
+    }
+    else {
+      qtyClass = 'e0';
+    }
+  }
   return <div
     {...rest}
     className={classnames(
@@ -46,8 +96,16 @@ const ItemSlotComponent = (props) => {
   >
     <div
       className="item-slot-inner"
-      style={{backgroundImage: `url(${backgroundImage})`}}
-    >{children}</div>
+      style={{
+        backgroundImage: backgroundImageUri && `url(${backgroundImageUri})`,
+      }}
+    >
+      {children}
+      {qty && <div className={classnames(
+        'qty',
+        qtyClass,
+      )}>{qty}</div>}
+    </div>
   </div>;
 }
 

common/traits/controllable.trait.js

@@ -16,6 +16,12 @@ export class Controllable extends Trait {
 
   set inputState(inputState) {
     this._inputState = I.Map(inputState);
+    if (AVOCADO_SERVER) {
+      if (inputState.has('UseItem')) {
+        const slotIndex = inputState.get('UseItem');
+        this.entity.useItemInSlot(slotIndex);
+      }
+    }
   }
 
   tick(elapsed) {

common/traits/item.trait.js

@@ -0,0 +1,76 @@
+import {behaviorItemFromJSON} from '@avocado/behavior';
+import {compose, TickingPromise} from '@avocado/core';
+import {StateProperty, Trait} from '@avocado/entity';
+import {Image} from '@avocado/graphics';
+
+const decorate = compose(
+  StateProperty('qty', {
+    track: true,
+  }),
+);
+
+export class Item extends decorate(Trait) {
+
+  static defaultParams() {
+    return {
+      itemActions: {
+        type: 'actions',
+        traversals: [],
+      },
+      slotImages: {
+        default: '/question-mark.png',
+      },
+    };
+  }
+
+  static defaultState() {
+    return {
+      qty: 1,
+    };
+  }
+
+  static type() {
+    return 'item';
+  }
+
+  constructor(entity, params, state) {
+    super(entity, params, state);
+    this._itemActions = behaviorItemFromJSON(this.params.itemActions);
+    this._slotImages = {};
+  }
+
+  hydrate() {
+    const promises = [];
+    for (const index in this.params.slotImages) {
+      promises.push(Image.load(this.params.slotImages[index]).then((image) => {
+        this._slotImages[index] = image;
+      }));
+    }
+    return Promise.all(promises);
+  }
+
+  get itemActions() {
+    return this._itemActions;
+  }
+
+  methods() {
+    return {
+
+      decrementQuantity: (amount = 1) => {
+        this.entity.qty -= amount;
+      },
+
+      imageForSlot: () => {
+        const qty = this.entity.qty;
+        if (this._slotImages[qty]) {
+          return this._slotImages[qty];
+        }
+        else {
+          return this._slotImages['default'];
+        }
+      },
+
+    };
+  }
+
+}

common/traits/receptacle.trait.js

@@ -0,0 +1,208 @@
+import {compose, TickingPromise} from '@avocado/core';
+import {Entity, StateProperty, Trait} from '@avocado/entity';
+
+import {TraitItemQtyPacket} from './trait-item-qty.packet';
+import {TraitItemSwapPacket} from './trait-item-swap.packet';
+
+const decorate = compose(
+  StateProperty('slotCount', {
+    track: true,
+  }),
+);
+
+const NULL_SLOT = 65535;
+const AUTO_SLOT = 65535;
+
+// TODO more localized events; inventoryChanged is too noisy
+export class Receptacle extends decorate(Trait) {
+
+  static defaultParams() {
+    return {
+      slots: {},
+    };
+  }
+
+  static defaultState() {
+    return {
+      slotCount: 10,
+    };
+  }
+
+  static type() {
+    return 'receptacle';
+  }
+
+  constructor(entity, params, state) {
+    super(entity, params, state);
+    this.packetUpdates = [];
+    this.qtyListeners = new Map();
+    this.slotItems = {};
+    // Load items.
+    for (const index in this.params.slots) {
+      const slotSpec = this.params.slots[index];
+      this.slotItems[index] = Entity.load(slotSpec.uri).then((item) => {
+        // Set quantity.
+        item.qty = slotSpec.qty;
+        // On the client, hydrate the item before adding it to the inventory.
+        if (AVOCADO_CLIENT) {
+          item.hydrate().then(() => {
+            this.entity.addItemToSlot(item, index);
+          });
+        }
+        // Server just adds it.
+        else {
+          this.entity.addItemToSlot(item, index);
+        }
+      });
+    }
+  }
+
+  destroy() {
+    for (let i = 0; i < this.entity.slotCount; ++i) {
+      const item = this.entity.removeItemFromSlot(i);
+      if (item) {
+        this.removeListenersForItem(item);
+        item.destroy();
+      }
+    }
+  }
+
+  acceptPacket(packet) {
+    // Quantity update.
+    if (packet instanceof TraitItemQtyPacket) {
+      const item = this.entity.itemInSlot(packet.data.slotIndex);
+      if (item) {
+        item.qty = packet.data.qty;
+      }
+    }
+    // Slot swap.
+    if (packet instanceof TraitItemSwapPacket) {
+      // NULL destination slot === remove.
+      const {firstSlotIndex, secondSlotIndex} = packet.data;
+      if (NULL_SLOT === secondSlotIndex) {
+        const item = this.entity.removeItemFromSlot(firstSlotIndex);
+        if (item) {
+          item.destroy();
+        }
+      }
+      // Normal slot swap.
+      else {
+        this.entity.swapSlots(firstSlotIndex, secondSlotIndex);
+      }
+    }
+  }
+
+  addListenersForItem(item) {
+    const listener = (oldQty, newQty) => {
+      if (AVOCADO_SERVER) {
+        const slotIndex = this.itemSlotIndex(item);
+        // Valid quantity; update client.
+        if (newQty > 0) {
+          this.packetUpdates.push(new TraitItemQtyPacket({
+            slotIndex,
+            qty: item.qty,
+          }, this.entity));
+        }
+        // Item was used up.
+        else {
+          this.entity.removeItemFromSlot(slotIndex);
+          item.destroy();
+        }
+      }
+      this.entity.emit('inventoryChanged');
+    };
+    this.qtyListeners.set(item, listener);
+    item.on('qtyChanged', listener);
+  }
+
+  isSlotIndexInRange(slotIndex) {
+    return slotIndex >= 0 && slotIndex < this.entity.slotCount;
+  }
+
+  itemSlotIndex(item) {
+    for (let i = 0; i < this.entity.slotCount; ++i) {
+      if (item === this.slotItems[i]) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  // TODO
+  mergeItem(item) {
+  }
+
+  packetsForUpdate() {
+    const packetsForUpdate = this.packetUpdates;
+    this.packetUpdates = [];
+    return packetsForUpdate;
+  }
+
+  removeListenersForItem(item) {
+    item.off('qtyChanged', this.qtyListeners.get(item));
+    this.qtyListeners.delete(item);
+  }
+
+  methods() {
+    return {
+
+      addItemToSlot: (item, slotIndex = AUTO_SLOT) => {
+        if (AUTO_SLOT === slotIndex) {
+          return this.mergeItem(item);
+        }
+        else {
+          this.addListenersForItem(item);
+          this.slotItems[slotIndex] = item;
+        }
+        this.entity.emit('inventoryChanged');
+      },
+
+      removeItemFromSlot: (slotIndex) => {
+        const item = this.entity.itemInSlot(slotIndex);
+        if (!item) {
+          return;
+        }
+        this.removeListenersForItem(item);
+        delete this.slotItems[slotIndex];
+        if (AVOCADO_SERVER) {
+          this.packetUpdates.push(new TraitItemSwapPacket({
+            firstSlotIndex: slotIndex,
+            secondSlotIndex: NULL_SLOT,
+          }, this.entity));
+        }
+        this.entity.emit('inventoryChanged');
+        return item;
+      },
+
+      itemInSlot: (slotIndex) => {
+        if (this.isSlotIndexInRange(slotIndex)) {
+          // While it's loading, it'll be a promise.
+          if (this.slotItems[slotIndex] instanceof Entity) {
+            return this.slotItems[slotIndex];
+          }
+        }
+      },
+
+      swapSlots: (leftIndex, rightIndex) => {
+        if (
+          !this.isSlotIndexInRange(leftIndex)
+          || !this.isSlotIndexInRange(rightIndex)
+        ) {
+          return;
+        }
+        // Swap items.
+        const leftItem = this.entity.itemInSlot(leftIndex);
+        const rightItem = this.entity.itemInSlot(rightIndex);
+        this.removeListenersForItem(leftItem);
+        this.removeListenersForItem(rightItem);
+        this.slotItems[leftIndex] = rightItem;
+        this.slotItems[rightIndex] = leftItem;
+        this.addListenersForItem(leftItem);
+        this.addListenersForItem(rightItem);
+      },
+
+    };
+  }
+
+}
+

common/traits/trait-item-qty.packet.js

@@ -0,0 +1,12 @@
+import {EntityPacket} from '@avocado/entity';
+
+export class TraitItemQtyPacket extends EntityPacket {
+
+  static get schema() {
+    const schema = super.schema;
+    schema.data.slotIndex = 'uint16';
+    schema.data.qty = 'uint16';
+    return schema;
+  }
+
+}

common/traits/trait-item-swap.packet.js

@@ -0,0 +1,12 @@
+import {EntityPacket} from '@avocado/entity';
+
+export class TraitItemSwapPacket extends EntityPacket {
+
+  static get schema() {
+    const schema = super.schema;
+    schema.data.firstSlotIndex = 'uint16';
+    schema.data.secondSlotIndex = 'uint16';
+    return schema;
+  }
+
+}

common/traits/wielder.trait.js

@@ -0,0 +1,84 @@
+import {createContext} from '@avocado/behavior';
+import {compose} from '@avocado/core';
+import {StateProperty, Trait} from '@avocado/entity';
+
+const decorate = compose(
+  StateProperty('activeSlotIndex', {
+    track: true,
+  }),
+);
+
+export class Wielder extends decorate(Trait) {
+
+  static dependencies() {
+    return [
+      'receptacle',
+    ];
+  }
+
+  static defaultState() {
+    return {
+      activeSlotIndex: 0,
+    };
+  }
+
+  static type() {
+    return 'wielder';
+  }
+
+  constructor(entity, params, state) {
+    super(entity, params, state);
+    this.itemActions = undefined;
+    this.itemActionsContext = createContext();
+    this.itemInUse = undefined;
+  }
+
+  methods() {
+    return {
+
+      useItemInActiveSlot: () => {
+        if (-1 === this.entity.activeSlotIndex) {
+          return;
+        }
+        this.entity.useItemInSlot(this.entity.activeSlotIndex)
+      },
+
+      useItemInSlot: (slotIndex) => {
+        // Already using an item? TODO: cancel on active slot change?
+        if (this.itemInUse) {
+          return;
+        }
+        const item = this.entity.itemInSlot(slotIndex);
+        if (!item) {
+          return;
+        }
+        this.itemInUse = item;
+        // Set up context.
+        this.itemActionsContext.add('user', this.entity);
+        this.itemActionsContext.add('item', item);
+        this.itemActionsContext.add('slotIndex', slotIndex);
+        // Keep a reference to the item.
+        this.itemActions = item.itemActions;
+        // Defer until the item actions are finished.
+        return new Promise((resolve) => {
+          this.itemActions.once('actionsFinished', () => {
+            // Check if the item was used up.
+            this.itemActions = undefined;
+            this.itemActionsContext.clear();
+            this.itemInUse = undefined;
+            resolve();
+          });
+        });
+      },
+
+    };
+  }
+
+  tick(elapsed) {
+    if (this.itemActions) {
+      this.itemActions.tick(this.itemActionsContext, elapsed);
+    }
+  }
+
+}
+

resource/potion.entity.json

@@ -0,0 +1 @@
+{"traits":{"damaging":{"params":{"damageSpecs":[{"affinity":0,"lock":0,"power":-50,"variance":0.1}]}},"existent":{},"item":{"params":{"itemActions":{"type":"actions","traversals":[{"type":"traversal","steps":[{"type":"key","key":"user"},{"type":"key","key":"takeDamageFrom"},{"type":"invoke","args":[{"type":"traversal","steps":[{"type":"key","key":"item"}]}]}]},{"type":"traversal","steps":[{"type":"key","key":"item"},{"type":"key","key":"decrementQuantity"},{"type":"invoke","args":[]}]},{"type":"traversal","steps":[{"type":"key","key":"global"},{"type":"key","key":"wait"},{"type":"invoke","args":[{"type":"literal","value":0.5}]}]}]},"slotImages":{"default":"/potion.png"}}}}}

server/create-entity-for-connection.js

@@ -59,6 +59,16 @@ export function createEntityForConnection(socket) {
           y: y * 4,
         },
       },
+      receptacle: {
+        params: {
+          slots: {
+            0: {
+              qty: 10,
+              uri: '/potion.entity.json',
+            },
+          },
+        },
+      },
       roomed: {},
       shaped: {
         params: {
@@ -70,6 +80,11 @@ export function createEntityForConnection(socket) {
       },
       visible: {},
       vulnerable: {},
+      wielder: {
+        state: {
+          activeSlotIndex: 0,
+        },
+      },
     },
   });
   // Embed socket.

server/create-fixtures.js

@@ -25,6 +25,9 @@ import {mamaKittySpawnerJSON} from './fixtures/mama-kitty-spawner.entity';
 writeFixture('mama-kitty-spawner.entity.json', mamaKittySpawnerJSON());
 import {mamaKittyJSON} from './fixtures/mama-kitty.entity';
 writeFixture('mama-kitty.entity.json', mamaKittyJSON());
+// Write items.
+import {potionJSON} from './fixtures/potion.entity';
+writeFixture('potion.entity.json', potionJSON());
 // Write rooms.
 import {kittyFireJSON} from './fixtures/kitty-fire.room';
 writeFixture('kitty-fire.room.json', kittyFireJSON());

server/fixtures/potion.entity.js

@@ -0,0 +1,49 @@
+import {buildInvoke, buildTraversal} from '@avocado/behavior';
+
+import {AFFINITY_NONE} from '../../common/combat/constants';
+
+// Healing potion.
+export function potionJSON() {
+  const causeHealing = buildInvoke(['user', 'takeDamageFrom'], [
+    buildTraversal(['item']),
+  ]);
+  const decrement = buildInvoke(
+    ['item', 'decrementQuantity'],
+  );
+  const cooldown = buildInvoke(
+    ['global', 'wait'],
+    [0.5],
+  );
+  return {
+    traits: {
+      damaging: {
+        params: {
+          damageSpecs: [
+            {
+              affinity: AFFINITY_NONE,
+              lock: 0,
+              power: -50,
+              variance: 0.1,
+            },
+          ],
+        },
+      },
+      existent: {},
+      item: {
+        params: {
+          itemActions: {
+            type: 'actions',
+            traversals: [
+              causeHealing,
+              decrement,
+              cooldown,
+            ],
+          },
+          slotImages: {
+            default: '/potion.png',
+          },
+        },
+      },
+    },
+  };
+}

server/traits/informed.trait.js

@@ -247,6 +247,9 @@ export class Informed extends decorate(Trait) {
         if (0 === packets.length) {
           return;
         }
+
+        // TODO: filter packets that are only delivered to self entity.
+
         // Filter invisible entities.
         packets = this.filterInvisibleEntityPackets(packets);
         // Reduce entities by range.