d2s-ui-react v1.0.9
d2s-ui-react
React components based on d2s-ui
- Includes d2s v2.0.34
- Implements stat layout from PoD
- Used by d2r.app
Table of contents
Preface
For item images to render, the project needs access to a copy of Diablo II's extracted data. Suggest reading through the next two sections, and checking out the working example, prior to integrating with another project.
Data directory
- Download Ladik's CASC Viewer
- Choose "open storage" and select D2R's data directory, e.g...
C:\Program Files (x86)\Diablo II Resurrected\Data
- Right click "data" in the navigation pane, then export
- When we refer to "d2d" below, we're referring to that exported data directory
-d2d
--global
--local
Working example (clone repo)
git clone git@github.com:d2r-app/d2s-ui-react.git
cd d2s-ui-react
cp -r [your-d2d] svr/d2d
cp [your-hero-save-file] hero.d2s
npm i
node svr/api
(open new terminal)
npm start
If you receive the error sh: 1: sass: not found
, then install sass... sudo apt install sass
Integration (install via npm)
Installation
Example project structure with existing API:
```
-project
--src
--svr
---api.js
```
npm i d2s-ui-react
tar xzf node_modules/d2s-ui-react/dist/d2s.tar.gz -C svr
echo "/svr/d2s" >> .gitignore
- Note the the newly created/ignored d2s directory
- It contains d2s and a modified d2s-ui API
Usage, client-side
import { Hero } from 'd2s-ui-react';
<Hero hero={parsedSaveFile} onClose={optionalCloseFunction}>
Include onClose
for a "close hero" button.
You must also include one of the following two Hero attributes for item images to render:
api="/api/d2s/img"
- Web API for responding to d2s-ui image requests
- See Express App below
handleImgReq={yourAPI.d2sAPI.handleImgReq}
- Local API for responding to d2s-ui image requests
- See Native App below
Usage, server-side (Express App)
const d2sAPI = require('./d2s/api');
const yourApp = express();
d2sAPI.init({ app: yourApp });
This configures an Express route for /api/d2s/img
Usage, server-side (Native App)
const d2sAPI = require('./d2s/api');
const yourAPI = {...};
d2sAPI.init({ api: yourAPI });
This exposes d2sAPI's image handler as yourAPI.d2sAPI.handleImgReq
Usage, parsing save files
const d2s = require('./d2s');
const hero = await d2s.read(await fs.promises.readFile('hero.d2s'), d2s.constants));
Dev
To update d2s...
Download d2s.bundle.js
and constants_99.bundle.js
from a d2s release, then combine:
cd ~/Downloads
rm index.js
for f in d2s.bundle.js constants_99.bundle.js; do (cat ${f}; echo) >> index.js; done
echo -e "\nd2s.constants = constants_99.constants;\nmodule.exports = d2s;\n" >> index.js
cp index.js /d2s-ui-react/svr/d2s/
To build d2s-ui-react...
Execute npm run build
(creates dist/
)
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago