change initial commands and fix reference

src/App.tsx

@@ -1,4 +1,4 @@
-import { Command, CommandBreakSlots, CommandInitialize, CommandNothing, CommandReload, CommandSave } from 'core/Command';
+import { Command, CommandBreakSlots, CommandInitialize, CommandNothing, CommandReload, CommandSave, CommandSortKey } from 'core/Command';
 import { Inventory } from 'core/Inventory';
 import React, { useEffect, useMemo, useState } from 'react';
 
@@ -32,6 +32,7 @@ export const App: React.FC =  () => {
     ]),
     new CommandBreakSlots(4),
     new CommandReload(),
+    new CommandSortKey(),
     new CommandSave(),
     new CommandReload()
   ]);
@@ -40,8 +41,6 @@ export const App: React.FC =  () => {
   const [contextMenuY, setContextMenuY] = useState<number>(0);
   const [contextMenuShowing, setContextMenuShowing] = useState<boolean>(false);
   const [contextIndex, setContextIndex] = useState<number>(-1);
-  console.log(Item.Diamond === "Diamond");
-  console.log(Item);
   // compute props
   const inventories = useMemo(()=>{
     const inventories: Inventory[] = [];

src/surfaces/DisplayPane.tsx

@@ -80,7 +80,21 @@ export const DisplayPane: React.FC<DisplayPaneProps> = ({command,editCommand,dis
             setHasError(true);
           }
         }}></input>
-        <button>Reference</button>
+        <button onClick={()=>{
+          alert(`Available Commands:
+Initialize X Item1 Y Item2 Z Item3 ...
+Break X Slots - add X broken slots
+Save
+Reload
+Sort Key/Material - sort key items or material
+Get/Add/Cook/Pickup X ITEM
+Remove/Drop/Sell X ITEM From Slot Y
+Remove/Sell/Eat MEAL From Slot X
+
+Limitations:
+When you reload without altering inventory, things become weird. It won't be handled correctly and the commands will become red
+  `);
+        }}>Reference</button>
         </div>
         
       <div style={{