diff --git a/client/src/components/inventory.css b/client/src/components/inventory.css index bb4eda5..16727e4 100644 --- a/client/src/components/inventory.css +++ b/client/src/components/inventory.css @@ -42,7 +42,7 @@ background-color: rgb(255, 242, 190); } -.inventory .item:not(.locked) { +.inventory .item:not(.locked), .inventory .item.enabled { cursor: pointer; } diff --git a/client/src/components/inventory.tsx b/client/src/components/inventory.tsx index dccadd4..3d085dd 100644 --- a/client/src/components/inventory.tsx +++ b/client/src/components/inventory.tsx @@ -7,10 +7,11 @@ import { GameIdContext } from '../app'; import Markdown from './markdown'; import { useLoadDocQuery, InventoryTile, LevelInfo, InventoryOverview } from '../state/api'; -export function Inventory({levelInfo, openDoc } : +export function Inventory({levelInfo, openDoc, enableAll=false} : { levelInfo: LevelInfo|InventoryOverview, openDoc: (name: string, type: string) => void, + enableAll?: boolean, }) { return ( @@ -19,27 +20,28 @@ export function Inventory({levelInfo, openDoc } : TODO: click on paste icon -> paste into command line */}

Tactics

{levelInfo?.tactics && - + }

Definitions

{levelInfo?.definitions && - + }

Lemmas

{levelInfo?.lemmas && - + } ) } -function InventoryList({items, docType, openDoc, defaultTab=null, level=undefined} : +function InventoryList({items, docType, openDoc, defaultTab=null, level=undefined, enableAll=false} : { items: InventoryTile[], docType: string, openDoc(name: string, type: string): void, defaultTab? : string, level? : LevelInfo|InventoryOverview, + enableAll?: boolean, }) { // TODO: `level` is only used in the `useEffect` below to check if a new level has // been loaded. Is there a better way to observe this? @@ -67,22 +69,22 @@ function InventoryList({items, docType, openDoc, defaultTab=null, level=undefine onClick={() => { setTab(cat) }}>{cat})} }
- {[...items].sort( - // For lemas, sort entries `available > disabled > locked` - // otherwise alphabetically - (x, y) => +(docType == "Lemma") * (+x.locked - +y.locked || +x.disabled - +y.disabled) - ).filter(item => ((tab ?? categories[0]) == item.category)).map((item, i) => { - return {openDoc(item.name, docType)}} - name={item.name} displayName={item.displayName} locked={item.locked} - disabled={item.disabled} newly={item.new}/> - }) - } + {[...items].sort( + // For lemas, sort entries `available > disabled > locked` + // otherwise alphabetically + (x, y) => +(docType == "Lemma") * (+x.locked - +y.locked || +x.disabled - +y.disabled) + ).filter(item => ((tab ?? categories[0]) == item.category)).map((item, i) => { + return {openDoc(item.name, docType)}} + name={item.name} displayName={item.displayName} locked={item.locked} + disabled={item.disabled} newly={item.new} enableAll={enableAll}/> + }) + }
} -function InventoryItem({name, displayName, locked, disabled, newly, showDoc}) { +function InventoryItem({name, displayName, locked, disabled, newly, showDoc, enableAll=false}) { const icon = locked ? : disabled ? : "" const className = locked ? "locked" : disabled ? "disabled" : newly ? "new" : "" @@ -90,12 +92,12 @@ function InventoryItem({name, displayName, locked, disabled, newly, showDoc}) { disabled ? "Not available in this level" : "" const handleClick = () => { - if (!locked) { + if (enableAll || !locked) { showDoc() } } - return
{icon} {displayName}
+ return
{icon} {displayName}
} export function Documentation({name, type, handleClose}) { diff --git a/client/src/components/welcome.tsx b/client/src/components/welcome.tsx index 16224c5..1d13fbb 100644 --- a/client/src/components/welcome.tsx +++ b/client/src/components/welcome.tsx @@ -138,7 +138,7 @@ function Welcome() { {inventoryDoc ? : - + } }