@rpg-engine/long-bow 0.2.80 → 0.2.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.80",
+  "version": "0.2.90",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/CraftBook/CraftBook.tsx

@@ -5,6 +5,7 @@ import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
 import { Dropdown, IOptionsProps } from '../Dropdown';
 import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { RPGUIForceRenderStart } from '../RPGUIForceRenderStart';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 export interface IItemCraftSelectorProps {
@@ -79,85 +80,92 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
   };
 
   return (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      width="500px"
-      cancelDrag=".equipment-container-body .arrow-selector"
-      onCloseButton={() => {
-        if (onClose) {
-          onClose();
-        }
-      }}
+    <RPGUIForceRenderStart
+      elementDOMId="radioInput"
+      elementRenderedDOMKey="rpgui-radio"
+      RPGUICreateFunction="radio"
     >
-      <div style={{ width: '100%' }}>
-        <Title>{'Craftbook'}</Title>
-        <Subtitle>{'Select an item to craft'}</Subtitle>
-        <hr className="golden" />
-      </div>
-      <Dropdown
-        options={getDropdownOptions()}
-        onChange={value => onSelect(value)}
-      />
-      <RadioInputScroller>
-        {craftablesItems?.map((option, index) => (
-          <RadioOptionsWrapper key={index}>
-            <SpriteAtlasWrapper>
-              <SpriteFromAtlas
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                spriteKey={option.texturePath}
-                imgScale={3}
-                grayScale={!option.canCraft}
-              />
-            </SpriteAtlasWrapper>
-            <div>
-              <input
-                className="rpgui-radio"
-                type="radio"
-                value={option.name}
-                name="test"
-                disabled={!option.canCraft}
-              />
-              <label
-                onClick={handleClick}
-                style={{ display: 'flex', alignItems: 'center' }}
-                onMouseEnter={() => setIsShown({ show: true, index: index })}
-                onMouseLeave={() => setIsShown({ show: false, index: index })}
-              >
-                {modifyString(option.name)}
-              </label>
-
-              {isShown &&
-                isShown.index === index &&
-                option.ingredients.map((option, index) => (
-                  <Recipes key={index}>
-                    <SpriteFromAtlas
-                      atlasIMG={atlasIMG}
-                      atlasJSON={atlasJSON}
-                      spriteKey={option.texturePath}
-                      imgScale={1}
-                    />
-                    <StyledItem>
-                      {modifyString(option.key)} ({option.qty}x)
-                    </StyledItem>
-                  </Recipes>
-                ))}
-            </div>
-          </RadioOptionsWrapper>
-        ))}
-      </RadioInputScroller>
-      <ButtonWrapper>
-        <Button buttonType={ButtonTypes.RPGUIButton} onClick={onClose}>
-          Cancel
-        </Button>
-        <Button
-          buttonType={ButtonTypes.RPGUIButton}
-          onClick={() => onCraftItem(craftItem)}
-        >
-          Craft
-        </Button>
-      </ButtonWrapper>
-    </DraggableContainer>
+      <DraggableContainer
+        type={RPGUIContainerTypes.Framed}
+        width="500px"
+        cancelDrag=".equipment-container-body .arrow-selector"
+        onCloseButton={() => {
+          if (onClose) {
+            onClose();
+          }
+        }}
+      >
+        <div style={{ width: '100%' }}>
+          <Title>{'Craftbook'}</Title>
+          <Subtitle>{'Select an item to craft'}</Subtitle>
+          <hr className="golden" />
+        </div>
+        <Dropdown
+          options={getDropdownOptions()}
+          onChange={value => onSelect(value)}
+        />
+        <RadioInputScroller>
+          {craftablesItems?.map((option, index) => (
+            <RadioOptionsWrapper key={index}>
+              <SpriteAtlasWrapper>
+                <SpriteFromAtlas
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  spriteKey={option.texturePath}
+                  imgScale={3}
+                  grayScale={!option.canCraft}
+                />
+              </SpriteAtlasWrapper>
+              <div>
+                <input
+                  className="rpgui-radio"
+                  type="radio"
+                  value={option.name}
+                  name="test"
+                  disabled={!option.canCraft}
+                  id="radioInput"
+                />
+                <label
+                  onClick={handleClick}
+                  style={{ display: 'flex', alignItems: 'center' }}
+                  onMouseEnter={() => setIsShown({ show: true, index: index })}
+                  onMouseLeave={() => setIsShown({ show: false, index: index })}
+                >
+                  {modifyString(option.name)}
+                </label>
+
+                {isShown &&
+                  isShown.index === index &&
+                  option.ingredients.map((option, index) => (
+                    <Recipes key={index}>
+                      <SpriteFromAtlas
+                        atlasIMG={atlasIMG}
+                        atlasJSON={atlasJSON}
+                        spriteKey={option.texturePath}
+                        imgScale={1}
+                      />
+                      <StyledItem>
+                        {modifyString(option.key)} ({option.qty}x)
+                      </StyledItem>
+                    </Recipes>
+                  ))}
+              </div>
+            </RadioOptionsWrapper>
+          ))}
+        </RadioInputScroller>
+        <ButtonWrapper>
+          <Button buttonType={ButtonTypes.RPGUIButton} onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            onClick={() => onCraftItem(craftItem)}
+          >
+            Craft
+          </Button>
+        </ButtonWrapper>
+      </DraggableContainer>
+    </RPGUIForceRenderStart>
   );
 };
 

package/src/index.tsx

@@ -12,6 +12,7 @@ export * from './components/Input';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
+export * from './components/itemSelector/ItemSelector';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/NPCMultiDialog';
@@ -20,17 +21,17 @@ export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuestInfo/QuestInfo';
 export * from './components/QuestList';
-export * from './components/RPGUIContainer';
-export * from './components/RPGUIRoot';
 export * from './components/RadioButton';
 export * from './components/RangeSlider';
+export * from './components/RPGUIContainer';
+export * from './components/RPGUIForceRenderStart';
+export * from './components/RPGUIRoot';
+export * from './components/shared/SpriteFromAtlas';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
-export * from './components/itemSelector/ItemSelector';
-export * from './components/shared/SpriteFromAtlas';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';