Live site fabd.github.io/diablo2-runewizard
Runewizard for Diablo II helps you keep track of the runes you have found and what runewords you can make with them.
Runewizard used to be part of my mini fan site for Diablo II LoD called The Tankazon Resource (hosted at fabd/diablo2).
This repo is a full rewrite of the vanilla JS version I wrote ten+ years ago. It uses ViteJs, Vue3, and TailwindCSS/JIT. Typechecking is provided via JSDoc + TS types in ambient .d.ts files.
Should there be any new runewords / updates with Diablo II Resurrected, I hope this new repo will make it easier to keep the site updated!
See Releases tab for updates.
Please report any bugs or incorrect information in the Issues tab.
Feel free to post suggestions as well. If I like an idea, maybe I'll work on it.
In general Pull Requests for small fixes/typos are welcome.
For substantial changes, it's probably best to let me know in advance so I can tell you if I am interested to merge them. Keep in mind this is a little playground for me to experiment with ViteJs, Vue 3 and TypeScript (and now JSDoc). There are quite a few ideas I have in mind I'd like to work on.
If you need help to modify Runewizard for a Diablo II mod (ie. supporting new runes/runewords specific to a mod), feel free to ask in the Issues tab and I'll try to help you set it up. Let me know about your fork! I may post a link here and/or in the Runewizard footer.
Clone the repository, install the dependencies, and start the Vite server:
git clone https://github.com/fabd/diablo2-runewizard.git
npm install
npm run devUse npm run build (or just vite build to skip the TypeScript check which is kinda slow). Then deploy all the files in the dist/ folder to wherever you'd like to host it.
Be aware that small images can be encoded inside the JS or CSS as base64 URLs. If you don't like this and would rather have all images output separately, set assetsInlineLimit in vite.config.ts to zero.
Take special note of Public Base Path configuration if your images aren't showing (cf. base in vite.config.ts).
Sadly we can not simply drag-and-drop the index.html file (from the dist/ folder) into a browser. The browser will issue CORS errors, and refuse to load both Javascript and Css files.
Follow these steps to make it work offline:
- set
basein vite.config.ts to./(a relative path) : this causes references to images and other assets to be relative eg. './images/foo.png' instead of '/images/foo.png' - disable code splitting to simplify next step (this is already configured so we have a single output css and js file)
- manually edit the html to "inline" the contents of the CSS and JS
Remove these
<script type="module" crossorigin src="/assets/index.18705ba6.js"></script>
<link rel="stylesheet" href="/assets/style.06ce5f32.css" />And instead add script & style tags and copy the file contents inside:
<head>
...
<style type="text/css">
/* copy/paste contents of the css file here */
</style>
</head>
<body>
<div id="app"></div>
...
<script type="module">
/* copy/paste contents of the javascript file here */
</script>
</body>The package prettier is locked at 2.2.1 because of prettier issue 10918
Likewise Vetur extension in VSCode should be locked at 0.33.1, last version to use prettier 2.2.1 (I use Vue Language Features (Volar) which seems to work better with Vue3).
The project now uses JSDoc + TypeScript types via ambient .d.ts files. This is mainly an experiment, and also a way to make TypeScript optional. You should get correct code completions as well as TypeScript errors in the IDE with VSCode + Volar extension.
The game version as well as links in the header can be configured in the .env file. It can also be turned off, for eg. including in an existing layout.
Runewizard uses localStorage (instead of a cookie in the old version) to maintain selected runes: this is so that the app can be built to work completely offline. In the case of loading index.html via file:/// URL, cookies don't work.
Either way it is a known limitation that if the user clears "Cookie & other site related data" manually in their browser, the user state will be reset. For such a small app I felt it's an acceptable tradeoff, as creating a server for that seems overkill.
Stylesheets are kept in one folder under src/assets/. This is convenient for me and avoids issues with .scss linting of .vue files in VSCode not working properly (could be a bug with Vetur/Vite or maybe I misconfigured something).
In order to be able to use Sass and Tailwind together, the ordering of CSS declarations matters (cf. Tailwind imports in the main stylesheet). Ideally custom CSS should follow a strict BEM-like syntax, to avoid specificity issues.
The icons come from icones.js. Click "Components > Vue" in the bottom bar of that site to get the code for an icon. Could use vite-plugin-icons instead.
- @migouelBL for providing required levels data (in the old repository)
The rune icon in the header is Copyright © BLIZZARD ENTERTAINMENT. It is from a screenshot of Diablo II Resurrected.
SVG icons come from icones.js.org and are all licensed under some kind of open-source or free licence (cf. Iconify License)
MIT.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent