@rpg-engine/long-bow 0.2.17 → 0.2.18

package/package.json

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

package/src/components/Dropdown.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+import { RPGUIForceRenderStart } from './RPGUIForceRenderStart';
 import { _RPGUI } from './RPGUIRoot';
 
 export interface IOptionsProps {
@@ -40,18 +41,24 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   }, [selectedValue]);
 
   return (
-    <select
-      id={`rpgui-dropdown-${dropdownId}`}
-      style={{ width: width }}
-      className="rpgui-dropdown"
+    <RPGUIForceRenderStart
+      elementDOMId={`rpgui-dropdown-${dropdownId}`}
+      elementRenderedDOMKey='[data-rpguitype="dropdown"]'
+      RPGUICreateFunction="dropdown"
     >
-      {options.map(option => {
-        return (
-          <option key={option.id} value={option.value}>
-            {option.option}
-          </option>
-        );
-      })}
-    </select>
+      <select
+        id={`rpgui-dropdown-${dropdownId}`}
+        style={{ width: width }}
+        className="rpgui-dropdown"
+      >
+        {options.map(option => {
+          return (
+            <option key={option.id} value={option.value}>
+              {option.option}
+            </option>
+          );
+        })}
+      </select>
+    </RPGUIForceRenderStart>
   );
 };

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -26,7 +26,7 @@ const EquipmentSlotSpriteByType: any = {
   Feet: 'boots/iron-boots.png',
   Inventory: 'containers/bag.png',
   RightHand: 'shields/plate-shield.png',
-  Accessory: 'gloves/plate-gloves.png',
+  Accessory: 'ranged-weapons/arrow.png',
 };
 
 interface IProps {

package/src/components/RPGUIForceRenderStart.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { _RPGUI } from './RPGUIRoot';
+
+interface IProps {
+  elementDOMId: string;
+  elementRenderedDOMKey: string; // this is what "proves" the element is rendered
+  children: React.ReactNode;
+  RPGUICreateFunction:
+    | 'dropdown'
+    | 'slider'
+    | 'checkbox'
+    | 'draggable'
+    | 'progress'
+    | 'radio'
+    | 'list';
+}
+
+export const RPGUIForceRenderStart: React.FC<IProps> = ({
+  children,
+  elementDOMId,
+  elementRenderedDOMKey,
+  RPGUICreateFunction,
+}) => {
+  const [isRendered, setIsRendered] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (_RPGUI) {
+      const element = document.getElementById(elementDOMId);
+
+      // create an interval to wait for the element to be rendered
+      // if it's not, trigger the rendering forcefully
+      const interval = setInterval(() => {
+        const dropdown = document.querySelector(elementRenderedDOMKey);
+
+        if (!dropdown && !isRendered) {
+          _RPGUI.__create_funcs[RPGUICreateFunction](element);
+          setIsRendered(true);
+          clearInterval(interval);
+        }
+      }, 10);
+    }
+  }, []);
+
+  return <>{children}</>;
+};

package/src/components/RangeSlider.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import { useEventListener } from '../hooks/useEventListener';
+import { RPGUIForceRenderStart } from './RPGUIForceRenderStart';
 import { _RPGUI } from './RPGUIRoot';
 
 export enum RangeSliderType {
@@ -26,15 +26,6 @@ export const RangeSlider: React.FC<IRangeSliderProps> = ({
 }) => {
   const sliderId = uuidv4();
 
-  const [wasMouseDownFirst, setWasMouseDownFirst] = useState<boolean>(false);
-
-  useEventListener('mouseup', () => {
-    if (wasMouseDownFirst) {
-      onHandleMouseUp();
-    }
-    setWasMouseDownFirst(false);
-  });
-
   const onHandleMouseUp = () => {
     const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);
     const value = _RPGUI.get_value(rpguiSlider);
@@ -43,23 +34,26 @@ export const RangeSlider: React.FC<IRangeSliderProps> = ({
   };
 
   return (
-    <div
-      onMouseUp={onHandleMouseUp}
-      onMouseDown={() => setWasMouseDownFirst(true)}
+    <RPGUIForceRenderStart
+      elementDOMId={`rpgui-slider-${sliderId}`}
+      elementRenderedDOMKey="[data-rpguitype='slider']"
+      RPGUICreateFunction="slider"
     >
-      <Input
-        className={
-          type === RangeSliderType.Slider
-            ? RangeSliderType.Slider
-            : RangeSliderType.GoldSlider
-        }
-        type="range"
-        style={{ width: width }}
-        min={valueMin}
-        max={valueMax}
-        id={`rpgui-slider-${sliderId}`}
-      />
-    </div>
+      <div onMouseUp={onHandleMouseUp}>
+        <Input
+          className={
+            type === RangeSliderType.Slider
+              ? RangeSliderType.Slider
+              : RangeSliderType.GoldSlider
+          }
+          type="range"
+          style={{ width: width }}
+          min={valueMin}
+          max={valueMax}
+          id={`rpgui-slider-${sliderId}`}
+        />
+      </div>
+    </RPGUIForceRenderStart>
   );
 };
 

package/src/stories/RangeSlider.stories.tsx

@@ -57,4 +57,7 @@ Default.args = {
   type: RangeSliderType.Slider,
   valueMin: 0,
   valueMax: 100,
+  onChange: n => {
+    console.log('onChange', n);
+  },
 };