Update demo + add thanks

README.md

@@ -53,6 +53,11 @@ pnpm i
 pnpm dev
 ```
 
+## Thanks
+
+- [@scotato](https://github.com/scotato) loot-rarity was heavily inspired by [github.com/scotato/inventory](https://github.com/scotato/inventory)
+- [@Anish-Agnihotri](https://github.com/Anish-Agnihotri) for [the data he extracted from Loot](https://github.com/Anish-Agnihotri/dhof-loot) and that loot-rarity is using.
+
 ## License
 
 MIT

demo/index.html

@@ -41,6 +41,28 @@
         margin: 20px 0;
         font-size: 20px;
       }
+      h2 {
+        margin: 20px 0;
+        font-size: 20px;
+      }
+      #bag-input {
+        width: 60px;
+        font-size: 20px;
+        font-family: serif;
+        text-align: center;
+        color: #fff;
+        border: 0;
+        background: transparent;
+        margin-right: 20px;
+      }
+      #bag-input:focus {
+        outline: 1px solid #fff;
+      }
+      ul {
+        margin: 10px 0;
+        padding: 0;
+        list-style: none;
+      }
       #root {
         width: 600px;
         margin: 80px auto;

demo/src/App.tsx

@@ -1,21 +1,46 @@
-import React from "react";
-import { useItemRarity, useRandomBag } from "./hooks";
+import React, { useState } from "react";
+import { randomBagId, useItemRarity, useBag } from "./hooks";
 
 function App() {
-  const [bag, newBag] = useRandomBag();
-  const itemsWithRarities = useItemRarity(bag.items);
+  const [bagId, setBagId] = useState(randomBagId());
+  const bag = useBag(bagId);
+  const itemsWithRarities = useItemRarity(bag?.items ?? []);
+
   return (
     <div>
-      <button onClick={newBag}>try another bag</button>
-      <h1 style={{ color: "#ffffff" }}>Bag #{bag.id}</h1>
-      {itemsWithRarities.map(
-        ({ color = "#ffffff", name, description = "…" }, index) => {
-          return (
-            <p key={name + index} style={{ color }}>
-              {name} ({description})
-            </p>
-          );
-        }
+      <h1>Loot Rarity Check</h1>
+      <h2>
+        <label htmlFor="bag-input">Bag #</label>
+        <input
+          id="bag-input"
+          value={bagId ?? ""}
+          onChange={(event) => {
+            const value = event.currentTarget.value.trim();
+            if (value === "") {
+              setBagId("");
+              return;
+            }
+
+            const numId = Number(value);
+            if (!isNaN(numId) && numId > 0 && numId <= 8000) {
+              setBagId(value);
+            }
+          }}
+        />
+        <button onClick={() => setBagId(randomBagId())}>random</button>
+      </h2>
+      {itemsWithRarities.length > 0 && (
+        <ul>
+          {itemsWithRarities.map(
+            ({ color = "#ffffff", name, description = "…" }, index) => {
+              return (
+                <li key={name + index} style={{ color }}>
+                  {name} ({description})
+                </li>
+              );
+            }
+          )}
+        </ul>
       )}
     </div>
   );

demo/src/hooks.tsx

@@ -51,17 +51,21 @@ export function useItemRarity(
   return infoList;
 }
 
-function randomBagId() {
-  return Math.floor(Math.random() * 7999) + 1;
+export function randomBagId() {
+  return String(Math.floor(Math.random() * 7999) + 1);
 }
 
-export function useRandomBag(): [
-  { id: string; items: Array<string> },
-  () => void
-] {
-  const [bagId, setBagId] = useState(randomBagId());
-  return [
-    { id: String(bagId), items: Object.values(loot[bagId - 1][bagId]) },
-    () => setBagId(randomBagId),
-  ];
+export function useBag(
+  id: string = randomBagId()
+): null | { id: string; items: Array<string> } {
+  const bagId = Number(id);
+
+  if (isNaN(bagId) || bagId < 1 || bagId > 8000) {
+    return null;
+  }
+
+  return {
+    id: String(bagId),
+    items: Object.values(loot[bagId - 1][bagId]),
+  };
 }