From 366f1cc5dd793398d4596f9242bf489d62de8a65 Mon Sep 17 00:00:00 2001
From: robojumper <robojumper@gmail.com>
Date: Thu, 18 Jan 2024 16:54:01 +0100
Subject: [PATCH] Add some icons to context menu items

---
 src/locationTracker/LocationContextMenu.tsx   | 43 ++++++++++++++-----
 .../LocationGroupContextMenu.tsx              | 27 ++++++++----
 src/locationTracker/LocationGroupHeader.tsx   |  2 +-
 3 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/src/locationTracker/LocationContextMenu.tsx b/src/locationTracker/LocationContextMenu.tsx
index efff6a13..bbb60b0c 100644
--- a/src/locationTracker/LocationContextMenu.tsx
+++ b/src/locationTracker/LocationContextMenu.tsx
@@ -4,6 +4,7 @@ import { Menu, Item, Separator, Submenu, ItemParams } from 'react-contexify';
 
 import hintItems from '../data/hintItems.json';
 import { LocationContextMenuProps } from './Location';
+import images from '../itemTracker/Images';
 
 type CtxProps<T = void> = ItemParams<LocationContextMenuProps, T>;
 interface ItemData {
@@ -37,19 +38,39 @@ export default function LocationContextMenu() {
             <Item onClick={handleUncheckClick}>Uncheck</Item>
             <Separator />
             <Submenu label="Set Item">
-                {
-                    _.map(hintItems, (items, category) => (
-                        <Submenu label={category}>
-                            {
-                                _.map(items, (listItem) => (
-                                    <Item onClick={handleSetItemClick} data={{ item: listItem } satisfies ItemData}>{listItem}</Item>
-                                ))
-                            }
-                        </Submenu>
-                    ))
-                }
+                {_.map(hintItems, (items, category) => (
+                    <Submenu label={category}>
+                        {_.map(items, (listItem) => (
+                            <Item
+                                onClick={handleSetItemClick}
+                                data={{ item: listItem } satisfies ItemData}
+                            >
+                                <MenuItemWithIcon name={listItem} image={_.last(images[listItem])!} />
+                            </Item>
+                        ))}
+                    </Submenu>
+                ))}
             </Submenu>
             <Item onClick={handleClearItemClick}>Clear Item</Item>
         </Menu>
     );
+}
+
+export function MenuItemWithIcon({ name, image }: { name: string, image: string }) {
+    return (
+        <span style={{ display: 'flex', flexFlow: 'row nowrap' }}>
+            <div style={{ width: '26px', height: '26px', paddingRight: '6px' }}>
+                <img
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'contain',
+                    }}
+                    src={image}
+                    alt={name}
+                />
+            </div>
+            {name}
+        </span>
+    );
 }
\ No newline at end of file
diff --git a/src/locationTracker/LocationGroupContextMenu.tsx b/src/locationTracker/LocationGroupContextMenu.tsx
index fec6bd21..c1541e23 100644
--- a/src/locationTracker/LocationGroupContextMenu.tsx
+++ b/src/locationTracker/LocationGroupContextMenu.tsx
@@ -1,7 +1,10 @@
 import _ from 'lodash';
 import { useCallback } from 'react';
 import { Menu, Item, Separator, Submenu, ItemParams } from 'react-contexify';
-import { LocationGroupContextMenuProps } from './LocationGroupHeader';
+import { LocationGroupContextMenuProps, pathImages } from './LocationGroupHeader';
+import { MenuItemWithIcon } from './LocationContextMenu';
+import sotsImage from '../assets/hints/sots.png';
+import barrenImage from '../assets/hints/barren.png';
 
 const bosses = {
     0: 'Ghirahim 1',
@@ -52,14 +55,22 @@ function LocationGroupContextMenu() {
             <Item onClick={uncheckAll}>Uncheck All</Item>
             <Separator />
             <Submenu label="Set Path">
-                {
-                    _.map(bosses, (bossName, bossIndex) => (
-                        <Item onClick={handlePathClick} data={{ boss: parseInt(bossIndex, 10) } satisfies BossData}>{bossName}</Item>
-                    ))
-                }
+                {_.map(bosses, (bossName, bossIndex) => (
+                    <Item
+                        onClick={handlePathClick}
+                        data={
+                            { boss: parseInt(bossIndex, 10) } satisfies BossData
+                        }
+                    >
+                        <MenuItemWithIcon
+                            name={bossName}
+                            image={pathImages[parseInt(bossIndex, 10)]}
+                        />
+                    </Item>
+                ))}
             </Submenu>
-            <Item onClick={handleSotsClick}>Set SotS</Item>
-            <Item onClick={handleBarrenClick}>Set Barren</Item>
+            <Item onClick={handleSotsClick}><MenuItemWithIcon name="Set SotS" image={sotsImage} /></Item>
+            <Item onClick={handleBarrenClick}><MenuItemWithIcon name="Set Barren" image={barrenImage} /></Item>
             <Item onClick={handleClearCheck}>Clear Hint</Item>
         </Menu>
     );
diff --git a/src/locationTracker/LocationGroupHeader.tsx b/src/locationTracker/LocationGroupHeader.tsx
index 10e7f3e1..3a154dd8 100644
--- a/src/locationTracker/LocationGroupHeader.tsx
+++ b/src/locationTracker/LocationGroupHeader.tsx
@@ -18,7 +18,7 @@ import g2 from '../assets/hints/g2.png';
 import 'react-contexify/dist/ReactContexify.css';
 import { useContextMenu } from './context-menu';
 
-const pathImages = [
+export const pathImages = [
     g1,
     scaldera,
     moldarach,