Add Stash Units and a Stash Unit Toggle to the main map

addStashUnitsToChunkData.ts

@@ -0,0 +1,51 @@
+import * as fs from 'fs';
+
+// Define interfaces for the data structures
+import StashUnit, { StashChunk } from './src/models/stash-unit';
+import type { ClueChunk } from './src/models/clue';
+import type Chunk from './src/models/chunk';
+
+
+// Read the input files
+const chunkData: ClueChunk[] = JSON.parse(fs.readFileSync('./src/data/chunk-data.json', 'utf8'));
+const stashData: StashChunk[] = JSON.parse(fs.readFileSync('./src/data/stash-unit-data.json', 'utf8'));
+
+// Create a map of stash units keyed by coordinates
+const stashMap = new Map<string, StashUnit[]>();
+stashData.forEach(chunk => {
+    const key = `${chunk.x},${chunk.y}`;
+    stashMap.set(key, chunk.stashUnits);
+
+    // Also add stash units to alternate chunks if specified
+    chunk.stashUnits.forEach(stashUnit => {
+        if (stashUnit.alternateChunks) {
+            stashUnit.alternateChunks.forEach(altChunk => {
+                const altKey = `${altChunk.x},${altChunk.y}`;
+                const existingStashUnits = stashMap.get(altKey) || [];
+                stashMap.set(altKey, [...existingStashUnits, stashUnit]);
+            });
+        }
+    });
+});
+
+// Add stash units to chunk data
+const combinedChunkData: Chunk[] = chunkData.map(chunk => {
+    const key = `${chunk.x},${chunk.y}`;
+    const stashUnits = stashMap.get(key);
+
+    if (stashUnits) {
+        return {
+            ...chunk,
+            stashUnits
+        };
+    }
+    return chunk;
+});
+
+// Write the combined data to a new file
+fs.writeFileSync(
+    './src/data/chunk-data-with-stash-units.json',
+    JSON.stringify(combinedChunkData, null, 2)
+);
+
+console.log('Successfully combined chunk data with stash units!');

package.json

@@ -14,6 +14,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "caniuse-lite": "^1.0.30001680",
     "focus-trap-react": "^8.7.0",
     "lz-string": "^1.4.4",
     "qs": "^6.10.1",

src/components/ChunkTile.tsx

@@ -9,6 +9,7 @@ import {
 } from '../utils';
 import { ClueDifficulty, MapChunk } from '../models';
 import { ChunkDataContext } from '../data';
+import StashIcon from './StashIcon';
 
 const ChunkTile: React.FC<{
   mapChunk: MapChunk;
@@ -37,66 +38,67 @@ const ChunkTile: React.FC<{
     initialTouchRef.current = t;
   };
 
-  function resetMouseState() {
-    setMoveDistance(0);
-    setInitialTouch({ x: 0, y: 0 });
-    setMouseDown(false);
-  }
+  useEffect(() => {
 
-  function mouseDownHandler(e: MouseEvent | TouchEvent) {
-    const mobilePress = e.type === 'touchstart';
+    function resetMouseState() {
+      setMoveDistance(0);
+      setInitialTouch({ x: 0, y: 0 });
+      setMouseDown(false);
+    }
 
-    // if the left mouse button was pressed
-    if (mobilePress || (e as MouseEvent).button === 0) {
-      if (mobilePress) {
-        const touch = (e as TouchEvent).touches[0];
-        setInitialTouch({ x: touch.pageX, y: touch.pageY });
+    function mouseDownHandler(e: MouseEvent | TouchEvent) {
+      const mobilePress = e.type === 'touchstart';
+
+      // if the left mouse button was pressed
+      if (mobilePress || (e as MouseEvent).button === 0) {
+        if (mobilePress) {
+          const touch = (e as TouchEvent).touches[0];
+          setInitialTouch({ x: touch.pageX, y: touch.pageY });
+        }
+        setMouseDown(true);
       }
-      setMouseDown(true);
     }
-  }
-
-  function mouseUpHandler(e: MouseEvent | TouchEvent) {
-    // if the left mouse button was released
-    if (
-      mouseDownRef.current &&
-      (e.type === 'touchend' || (e as MouseEvent).button === 0)
-    ) {
-      // only trigger `onClick` when the user isn't moving the map
-      if (onClick && moveDistanceRef.current <= 10) {
-        onClick();
-      }
 
-      resetMouseState();
+    function mouseUpHandler(e: MouseEvent | TouchEvent) {
+      // if the left mouse button was released
+      if (
+        mouseDownRef.current &&
+        (e.type === 'touchend' || (e as MouseEvent).button === 0)
+      ) {
+        // only trigger `onClick` when the user isn't moving the map
+        if (onClick && moveDistanceRef.current <= 10) {
+          onClick();
+        }
+
+        resetMouseState();
+      }
     }
-  }
 
-  function mouseMoveHandler(e: MouseEvent | TouchEvent) {
-    // do nothing if the left mouse button isn't held down
-    if (!mouseDownRef.current) return;
+    function mouseMoveHandler(e: MouseEvent | TouchEvent) {
+      // do nothing if the left mouse button isn't held down
+      if (!mouseDownRef.current) return;
 
-    function distance(a: number, b: number) {
-      return Math.sqrt(a * a + b * b);
-    }
+      function distance(a: number, b: number) {
+        return Math.sqrt(a * a + b * b);
+      }
 
-    if (e.type === 'mousemove') {
-      const mouseEvent = e as MouseEvent;
+      if (e.type === 'mousemove') {
+        const mouseEvent = e as MouseEvent;
 
-      const a = mouseEvent.movementX;
-      const b = mouseEvent.movementY;
+        const a = mouseEvent.movementX;
+        const b = mouseEvent.movementY;
 
-      setMoveDistance(moveDistanceRef.current + distance(a, b));
-    } else if (e.type === 'touchmove') {
-      const touch = (e as TouchEvent).touches[0];
+        setMoveDistance(moveDistanceRef.current + distance(a, b));
+      } else if (e.type === 'touchmove') {
+        const touch = (e as TouchEvent).touches[0];
 
-      const a = touch.pageX - initialTouchRef.current.x;
-      const b = touch.pageY - initialTouchRef.current.y;
+        const a = touch.pageX - initialTouchRef.current.x;
+        const b = touch.pageY - initialTouchRef.current.y;
 
-      setMoveDistance(distance(a, b));
+        setMoveDistance(distance(a, b));
+      }
     }
-  }
 
-  useEffect(() => {
     const tdEl = tdRef.current;
     if (!tdEl) return;
 
@@ -116,7 +118,7 @@ const ChunkTile: React.FC<{
     tdEl.addEventListener('touchmove', mouseMoveHandler);
 
     tdEl.addEventListener('touchcancel', resetMouseState);
-  }, [tdRef]);
+  }, [tdRef, onClick]);
 
   // get clue counts
   const clueCounts = clueCountsForChunk(chunk || mapChunk);
@@ -126,6 +128,7 @@ const ChunkTile: React.FC<{
       className={createClassString({
         'no-clues': !chunkHasClues(chunk || mapChunk),
         locked: !mapChunk.unlocked,
+        'has-stash-units': !!chunk?.stashUnits?.length,
       })}
       ref={tdRef}
     >
@@ -149,6 +152,16 @@ const ChunkTile: React.FC<{
                 </div>
               ))}
           </div>
+          <div className="chunk-stash-units">
+            {chunk?.stashUnits?.map((stashUnit) => (
+              <div
+                className={stashUnit.type}
+                key={`stash-unit-${stashUnit.type}`}
+              >
+                <StashIcon type={stashUnit.type} />
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </td>

src/components/ClueIcon.tsx

@@ -19,7 +19,7 @@ const ClueIcon: React.FC<{
     Master: masterClueIcon,
   };
 
-  return <img src={icons[difficulty]} aria-hidden />;
+  return <img src={icons[difficulty]} aria-hidden alt={difficulty} />;
 };
 
 export default ClueIcon;

src/components/ClueTable.tsx

@@ -15,7 +15,7 @@ const ClueTable: React.FC<{
 
   const ClueHint = ({ hint }: { hint: string | undefined }) => {
     return hint && hint.startsWith('http') ? (
-      <img src={hint} />
+      <img src={hint} alt={hint} />
     ) : (
       <span className="clue-hint">{hint}</span>
     );

src/components/InfoModal.tsx

@@ -55,6 +55,7 @@ const InfoModal: React.FC = () => {
               <a
                 href="https://github.com/ConnorDY/clue-chunk-map/issues/new"
                 target="_blank"
+                rel="noreferrer"
               >
                 new issue
               </a>
@@ -67,7 +68,11 @@ const InfoModal: React.FC = () => {
 
       <p>
         The source code for this project can be found{' '}
-        <a href="https://github.com/ConnorDY/clue-chunk-map" target="_blank">
+        <a
+          href="https://github.com/ConnorDY/clue-chunk-map"
+          target="_blank"
+          rel="noreferrer"
+        >
           here
         </a>
         .
@@ -77,6 +82,7 @@ const InfoModal: React.FC = () => {
         <a
           href="https://github.com/ConnorDY/clue-chunk-map/issues/new"
           target="_blank"
+          rel="noreferrer"
         >
           let us know
         </a>

src/components/ItemIcon.tsx

@@ -22,10 +22,6 @@ const ItemIcon: React.FC<{ item: string }> = ({ item }) => {
     _setIconToShow(i);
   };
 
-  function nextIcon() {
-    setIconToShow((iconToShowRef.current + 1) % icons.length);
-  }
-
   // get the icon(s)
   useEffect(() => {
     if (Object.keys(itemSets).includes(item)) {
@@ -50,6 +46,11 @@ const ItemIcon: React.FC<{ item: string }> = ({ item }) => {
 
   // set or clear the interval
   useEffect(() => {
+
+    function nextIcon() {
+      setIconToShow((iconToShowRef.current + 1) % icons.length);
+    }
+
     if (icons.length > 1 && !iconInterval) {
       const _iconInterval = setInterval(() => {
         nextIcon();
@@ -72,13 +73,17 @@ const ItemIcon: React.FC<{ item: string }> = ({ item }) => {
 
   // if no icons, show the item name
   if (icons.length === 0) {
-    return <img className="loading-icon" src={loadingGif} aria-hidden />;
+    return <img className="loading-icon" src={loadingGif} aria-hidden alt={item} />;
   }
 
   // show the icon(s)
   return (
-    <a href={wikiPage} target="_blank">
-      <img src={`data:image/png;base64, ${icons[iconToShow]}`} title={item} />
+    <a href={wikiPage} target="_blank" rel="noreferrer">
+      <img
+        src={`data:image/png;base64, ${icons[iconToShow]}`}
+        title={item}
+        alt={item}
+      />
     </a>
   );
 };