|
|
|
@ -1,6 +1,7 @@ |
|
|
|
|
import React, { useEffect,useState,useRef } from 'react'; |
|
|
|
|
import ReactTooltip from 'react-tooltip' //https://wwayne.github.io/react-tooltip/
|
|
|
|
|
import Modal from 'react-modal' |
|
|
|
|
import { NICONICONII,DisplayIcon } from './DEFAULTS'; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Hook that alerts clicks outside of the passed ref |
|
|
|
@ -276,10 +277,10 @@ useEffect(()=>{ |
|
|
|
|
<div className="boxTitleBar"> |
|
|
|
|
<h1>Equip</h1></div> |
|
|
|
|
<div className="equipPalette"> |
|
|
|
|
<div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img alt="" className="r4" src={process.env.PUBLIC_URL+selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon} /></div></div> |
|
|
|
|
<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div> |
|
|
|
|
<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div> |
|
|
|
|
<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div> |
|
|
|
|
<div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img alt="" className="r4" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div></div> |
|
|
|
|
<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src={DisplayIcon("https://i.imgur.com/GtusK2X.png")} /></div></div> |
|
|
|
|
<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src={DisplayIcon("https://i.imgur.com/GtusK2X.png")} /></div></div> |
|
|
|
|
<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src={DisplayIcon("https://i.imgur.com/GtusK2X.png")} /></div></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
@ -478,7 +479,7 @@ useEffect(()=>{ |
|
|
|
|
}
|
|
|
|
|
}} |
|
|
|
|
displayFunction={(item)=>{ |
|
|
|
|
return <li className={"itemwep r"+item[WEAPON_WEAPON].rarity} onClick={()=>{setSelectedWeapon(item);setWeaponSelectWindowOpen(false)}}><div class="itemWeaponWrapper"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+item[WEAPON_EXISTENCE_DATA]?.icon} /><em className="rifle">{item[WEAPON_WEAPON].name} {item[WEAPON_WEAPONTYPE].name}</em></div><br /><span className="atk">{item[WEAPON_WEAPON].atk}</span> <ExpandTooltip id={"mouseover-tooltip"+item[WEAPON_WEAPONTYPE].id+"_"+item[WEAPON_WEAPON].id+"_"+item[WEAPON_POTENTIAL].id+"_"+item[WEAPON_POTENTIAL_TOOLTIP].id} tooltip={<>{item[WEAPON_POTENTIAL_TOOLTIP].map((pot,i)=><>{(i!==0)&&<br/>}{pot.name}: {pot.description?pot.description.split("\\n").map((it)=><>{it}<br/> </>):<></>}</>)}</>}> |
|
|
|
|
return <li className={"itemwep r"+item[WEAPON_WEAPON].rarity} onClick={()=>{setSelectedWeapon(item);setWeaponSelectWindowOpen(false)}}><div class="itemWeaponWrapper"><img className="itemimg" alt="" src={DisplayIcon(item[WEAPON_EXISTENCE_DATA]?.icon)} /><em className="rifle">{item[WEAPON_WEAPON].name} {item[WEAPON_WEAPONTYPE].name}</em></div><br /><span className="atk">{item[WEAPON_WEAPON].atk}</span> <ExpandTooltip id={"mouseover-tooltip"+item[WEAPON_WEAPONTYPE].id+"_"+item[WEAPON_WEAPON].id+"_"+item[WEAPON_POTENTIAL].id+"_"+item[WEAPON_POTENTIAL_TOOLTIP].id} tooltip={<>{item[WEAPON_POTENTIAL_TOOLTIP].map((pot,i)=><>{(i!==0)&&<br/>}{pot.name}: {pot.description?pot.description.split("\\n").map((it)=><>{it}<br/> </>):<></>}</>)}</>}> |
|
|
|
|
<span className="pot">{item[WEAPON_POTENTIAL].name}</span> |
|
|
|
|
</ExpandTooltip></li>}} |
|
|
|
|
/> |
|
|
|
|