@rpg-engine/long-bow 0.3.44 → 0.3.45

package/src/components/RadioInput/RadioInput.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Button, ButtonTypes } from '../Button';
+import { RadioButton } from './RadioButton';
+
+export interface IRadioItems {
+    title: string;
+    subtitle: string;
+  }
+export interface IRadioInput {
+    title:string,
+    subtitle:string,
+    onSelect:(a:string)=>void,
+    onCancel:()=>void,
+    items:IRadioItems[]
+}
+
+export const RadioInput: React.FC<IRadioInput>=({title,subtitle,onSelect,onCancel,items})=>{
+const [instrument, setInstrument] = useState('')
+
+const confirHandler=()=>{
+    if(instrument){
+       onSelect(instrument)
+    }   
+}
+    
+return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onCancel) onCancel();
+      }}
+      width="500px"
+      cancelDrag=".equipment-container-body .arrow-selector"
+    >
+        <>
+        <div style={{ width: '100%' }}>
+          <Title>{title}</Title>
+          <Subtitle>{subtitle}</Subtitle>
+          <hr className="golden" />
+        </div>
+        <RadioInputScroller>{
+            items.map((item,index)=>(             
+              <RadioButton  
+              key={`${item.title}_${index}`}
+              title={item.title}
+              subtitle={item.subtitle}
+              setInstrument={setInstrument}
+              instrument={instrument}
+              />            
+            ))
+}
+        </RadioInputScroller>
+        <ButtonWrapper>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            onClick={() => onCancel()}
+           >
+            Cancel
+           </Button>
+           <Button
+            buttonType={ButtonTypes.RPGUIButton}            
+            onClick={ confirHandler}
+           >
+            Select
+           </Button>
+          
+        </ButtonWrapper>
+
+        </>
+    </DraggableContainer>
+)
+}
+const RadioInputScroller = styled.div`
+  overflow-y: scroll;
+  height: 390px;
+  width: 100%;
+  margin-top: 1rem;
+`;
+
+const Title = styled.h1`
+  z-index: 22;
+  font-size: 0.6rem;
+  color: yellow !important;
+`;
+const Subtitle = styled.h1`
+  z-index: 22;
+  font-size: 0.4rem;
+  color: yellow !important;
+`;
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 20px;
+  width: 100%;
+  margin-top: 1rem;
+`;

package/src/components/RadioInput/instruments.ts

@@ -0,0 +1,16 @@
+
+export const Itools:{title:string,subtitle:string}[] = [
+    {        
+        title : 'Ax',
+        subtitle:'Cut down trees',        
+      }, {
+        title : 'Sawing',
+        subtitle:'cut the wood into small pieces',        
+      }, {
+        title : 'Sickle',
+        subtitle:'harvesting cereal plants',        
+      }, {
+        title : 'Bow',
+        subtitle:'Hunting monsters',        
+      },   
+  ];

package/src/components/RangeSlider.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import { _RPGUI } from './RPGUIRoot';
 
 export enum RangeSliderType {
   Slider = 'rpgui-slider',
@@ -14,6 +13,7 @@ export interface IRangeSliderProps {
   valueMax: number;
   width: string;
   onChange: (value: number) => void;
+  value: number;
 }
 
 export const RangeSlider: React.FC<IRangeSliderProps> = ({
@@ -22,29 +22,46 @@ export const RangeSlider: React.FC<IRangeSliderProps> = ({
   valueMax,
   width,
   onChange,
+  value,
 }) => {
   const sliderId = uuidv4();
 
-  const onHandleMouseUp = () => {
-    const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);
-    const value = _RPGUI.get_value(rpguiSlider);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [left, setLeft] = useState(0);
 
-    onChange(Number(value));
-  };
+  useEffect(() => {
+    const calculatedWidth = containerRef.current?.clientWidth || 0;
+    setLeft(
+      Math.max(
+        ((value - valueMin) / (valueMax - valueMin)) * (calculatedWidth - 35) +
+          10
+      )
+    );
+  }, [value, valueMin, valueMax]);
+
+  const typeClass = type === RangeSliderType.GoldSlider ? 'golden' : '';
 
   return (
-    <div onMouseUp={onHandleMouseUp}>
+    <div
+      style={{ width: width, position: 'relative' }}
+      className={`rpgui-slider-container ${typeClass}`}
+      id={`rpgui-slider-${sliderId}`}
+      ref={containerRef}
+    >
+      <div style={{ pointerEvents: 'none' }}>
+        <div className={`rpgui-slider-track ${typeClass}`} />
+        <div className={`rpgui-slider-left-edge ${typeClass}`} />
+        <div className={`rpgui-slider-right-edge ${typeClass}`} />
+        <div className={`rpgui-slider-thumb ${typeClass}`} style={{ left }} />
+      </div>
       <Input
-        className={
-          type === RangeSliderType.Slider
-            ? RangeSliderType.Slider
-            : RangeSliderType.GoldSlider
-        }
         type="range"
         style={{ width: width }}
         min={valueMin}
         max={valueMax}
-        id={`rpgui-slider-${sliderId}`}
+        onChange={e => onChange(Number(e.target.value))}
+        value={value}
+        className="rpgui-cursor-point"
       />
     </div>
   );
@@ -52,4 +69,10 @@ export const RangeSlider: React.FC<IRangeSliderProps> = ({
 
 const Input = styled.input`
   opacity: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin-top: -5px;
 `;

package/src/components/SkillsContainer.tsx

@@ -163,5 +163,5 @@ const CloseButton = styled.div`
   right: 2px;
   color: white;
   z-index: 22;
-  font-size: 0.7rem;
+  font-size: 1.1rem;
 `;

package/src/components/Spellbook/QuickSpells.tsx

@@ -0,0 +1,120 @@
+import { IRawSpell } from '@rpg-engine/shared';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+
+export type QuickSpellsProps = {
+  quickSpells: IRawSpell[];
+  onSpellCast: (spellKey: string) => void;
+  mana: number;
+  isBlockedCastingByKeyboard?: boolean;
+};
+
+export const QuickSpells: React.FC<QuickSpellsProps> = ({
+  quickSpells,
+  onSpellCast,
+  mana,
+  isBlockedCastingByKeyboard = false,
+}) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (isBlockedCastingByKeyboard) return;
+
+      const shortcutIndex = Number(e.key) - 1;
+      if (shortcutIndex >= 0 && shortcutIndex <= 3) {
+        const shortcut = quickSpells[shortcutIndex];
+        if (shortcut?.key && mana >= shortcut?.manaCost) {
+          onSpellCast(shortcut.key);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [quickSpells, isBlockedCastingByKeyboard]);
+
+  return (
+    <List>
+      {Array.from({ length: 4 }).map((_, i) => (
+        <SpellShortcut
+          key={i}
+          onClick={onSpellCast.bind(null, quickSpells[i]?.key)}
+          disabled={mana < quickSpells[i]?.manaCost}
+        >
+          <span className="mana">
+            {quickSpells[i]?.key && quickSpells[i]?.manaCost}
+          </span>
+          <span className="magicWords">
+            {quickSpells[i]?.magicWords.split(' ').map(word => word[0])}
+          </span>
+          <span className="keyboard">{i + 1}</span>
+        </SpellShortcut>
+      ))}
+    </List>
+  );
+};
+
+export const SpellShortcut = styled.button`
+  width: 3rem;
+  height: 3rem;
+  background-color: ${uiColors.lightGray};
+  border: 2px solid ${uiColors.darkGray};
+  border-radius: 50%;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  span {
+    pointer-events: none;
+  }
+
+  .mana {
+    position: absolute;
+    top: -5px;
+    right: 0;
+    font-size: 0.65rem;
+    color: ${uiColors.blue};
+  }
+
+  .magicWords {
+    margin-top: 4px;
+  }
+
+  .keyboard {
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    font-size: 0.65rem;
+    color: ${uiColors.yellow};
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background-color: ${uiColors.gray};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+
+const List = styled.p`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;

package/src/components/Spellbook/Spell.tsx

@@ -0,0 +1,201 @@
+import { IRawSpell } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+
+interface Props extends IRawSpell {
+  charMana: number;
+  charMagicLevel: number;
+  onClick?: (spellKey: string) => void;
+  isSettingShortcut?: boolean;
+  spellKey: string;
+}
+
+export const Spell: React.FC<Props> = ({
+  spellKey,
+  name,
+  description,
+  magicWords,
+  manaCost,
+  charMana,
+  charMagicLevel,
+  onClick,
+  isSettingShortcut,
+  minMagicLevelRequired,
+}) => {
+  const disabled = isSettingShortcut
+    ? charMagicLevel < minMagicLevelRequired
+    : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
+
+  return (
+    <Container
+      disabled={disabled}
+      onClick={onClick?.bind(null, spellKey)}
+      isSettingShortcut={isSettingShortcut && !disabled}
+      className="spell"
+    >
+      {disabled && (
+        <Overlay>
+          {charMagicLevel < minMagicLevelRequired
+            ? 'Low magic level'
+            : manaCost > charMana && 'No mana'}
+        </Overlay>
+      )}
+      <SpellImage>{magicWords.split(' ').map(word => word[0])}</SpellImage>
+      <Info>
+        <Title>
+          <span>{name}</span>
+          <span className="spell">({magicWords})</span>
+        </Title>
+        <Description>{description}</Description>
+      </Info>
+
+      <Divider />
+      <Cost>
+        <span>Mana cost:</span>
+        <span className="mana">{manaCost}</span>
+      </Cost>
+    </Container>
+  );
+};
+
+const Container = styled.button<{ isSettingShortcut?: boolean }>`
+  display: block;
+  background: none;
+  border: 2px solid transparent;
+  border-radius: 1rem;
+  width: 100%;
+  display: flex;
+  height: 5rem;
+  gap: 1rem;
+  align-items: center;
+  padding: 0 1rem;
+  text-align: left;
+  position: relative;
+
+  animation: ${({ isSettingShortcut }) =>
+    isSettingShortcut ? 'border-color-change 1s infinite' : 'none'};
+
+  @keyframes border-color-change {
+    0% {
+      border-color: ${uiColors.yellow};
+    }
+    50% {
+      border-color: transparent;
+    }
+    100% {
+      border-color: ${uiColors.yellow};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background: none;
+  }
+`;
+
+const SpellImage = styled.div`
+  width: 4rem;
+  height: 4rem;
+  font-size: ${uiFonts.size.xLarge};
+  font-weight: bold;
+  background-color: ${uiColors.darkGray};
+  color: ${uiColors.lightGray};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+`;
+
+const Info = styled.span`
+  width: 0;
+  flex: 1;
+`;
+
+const Title = styled.p`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 5px;
+  margin: 0;
+
+  span {
+    font-size: ${uiFonts.size.medium} !important;
+    font-weight: bold !important;
+    color: ${uiColors.yellow} !important;
+    margin-right: 0.5rem;
+  }
+
+  .spell {
+    font-size: ${uiFonts.size.small} !important;
+    font-weight: normal !important;
+    color: ${uiColors.lightGray} !important;
+  }
+`;
+
+const Description = styled.div`
+  font-size: ${uiFonts.size.small} !important;
+  line-height: 1.1 !important;
+`;
+
+const Divider = styled.div`
+  width: 1px;
+  height: 100%;
+  margin: 0 1rem;
+  background-color: ${uiColors.lightGray};
+`;
+
+const Cost = styled.p`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  div {
+    z-index: 1;
+  }
+
+  .mana {
+    position: relative;
+    font-size: ${uiFonts.size.medium};
+    font-weight: bold;
+    z-index: 1;
+
+    &::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      background-color: ${uiColors.blue};
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      transform: scale(1.8);
+      filter: blur(10px);
+      z-index: -1;
+    }
+  }
+`;
+
+const Overlay = styled.p`
+  margin: 0 !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${uiColors.yellow};
+  font-size: ${uiFonts.size.large} !important;
+  font-weight: bold;
+  z-index: 10;
+  background-color: rgba(0 0 0 / 0.2);
+`;

package/src/components/Spellbook/Spellbook.tsx

@@ -0,0 +1,144 @@
+import { IRawSpell } from '@rpg-engine/shared';
+import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../../constants/uiFonts';
+import { DraggableContainer } from '../DraggableContainer';
+import { Input } from '../Input';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Spell } from './Spell';
+import { SpellbookShortcuts } from './SpellbookShortcuts';
+
+export interface ISpellbookProps {
+  onClose?: () => void;
+  onInputFocus?: () => void;
+  onInputBlur?: () => void;
+  spells: IRawSpell[];
+  magicLevel: number;
+  mana: number;
+  onSpellClick: (spellKey: string) => void;
+  setSpellShortcut: (key: string, index: number) => void;
+  spellShortcuts: IRawSpell[];
+  removeSpellShortcut: (index: number) => void;
+}
+
+export const Spellbook: React.FC<ISpellbookProps> = ({
+  onClose,
+  onInputFocus,
+  onInputBlur,
+  spells,
+  magicLevel,
+  mana,
+  onSpellClick,
+  setSpellShortcut,
+  spellShortcuts,
+  removeSpellShortcut,
+}) => {
+  const [search, setSearch] = useState('');
+  const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
+
+  useEffect(() => {
+    const handleEscapeClose = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose?.();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeClose);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeClose);
+    };
+  }, [onClose]);
+
+  const spellsToDisplay = useMemo(() => {
+    return spells
+      .sort((a, b) => {
+        if (a.minMagicLevelRequired > b.minMagicLevelRequired) return 1;
+        if (a.minMagicLevelRequired < b.minMagicLevelRequired) return -1;
+        return 0;
+      })
+      .filter(
+        spell =>
+          spell.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ||
+          spell.magicWords
+            .toLocaleLowerCase()
+            .includes(search.toLocaleLowerCase())
+      );
+  }, [search, spells]);
+
+  const setShortcut = (spellKey: string) => {
+    setSpellShortcut?.(spellKey, settingShortcutIndex);
+    setSettingShortcutIndex(-1);
+  };
+
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={onClose}
+      width="inherit"
+      height="inherit"
+      cancelDrag="#spellbook-search, #shortcuts_list, .spell"
+    >
+      <Container>
+        <Title>Learned Spells</Title>
+
+        <SpellbookShortcuts
+          setSettingShortcutIndex={setSettingShortcutIndex}
+          settingShortcutIndex={settingShortcutIndex}
+          shortcuts={spellShortcuts}
+          removeShortcut={removeSpellShortcut}
+        />
+
+        <Input
+          placeholder="Search for spell"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          onFocus={onInputFocus}
+          onBlur={onInputBlur}
+          id="spellbook-search"
+        />
+
+        <SpellList>
+          {spellsToDisplay.map(spell => (
+            <Fragment key={spell.key}>
+              <Spell
+                charMana={mana}
+                charMagicLevel={magicLevel}
+                onClick={
+                  settingShortcutIndex !== -1 ? setShortcut : onSpellClick
+                }
+                spellKey={spell.key}
+                isSettingShortcut={settingShortcutIndex !== -1}
+                {...spell}
+              />
+            </Fragment>
+          ))}
+        </SpellList>
+      </Container>
+    </DraggableContainer>
+  );
+};
+
+const Title = styled.h1`
+  font-size: ${uiFonts.size.large} !important;
+  margin-bottom: 0 !important;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  color: white;
+  display: flex;
+  flex-direction: column;
+`;
+
+const SpellList = styled.div`
+  width: 100%;
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-top: 1rem;
+`;