You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import * as React from 'react';
|
|
import { useState, useEffect } from 'react';
|
|
import './inventory.css'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faLock, faLockOpen, faBook, faHammer, faBan } from '@fortawesome/free-solid-svg-icons'
|
|
import Markdown from './Markdown';
|
|
import { useLoadDocQuery } from '../state/api';
|
|
|
|
function Inventory({ tactics, lemmas } :
|
|
{lemmas: {name: string, locked: boolean, disabled: boolean}[],
|
|
tactics: {name: string, locked: boolean, disabled: boolean}[]}) {
|
|
|
|
const [docName, setDocName] = useState(null)
|
|
const [docType, setDocType] = useState(null)
|
|
|
|
|
|
return (
|
|
<div className="inventory">
|
|
<h2>Tactics</h2>
|
|
<div className="inventory-list">
|
|
{ tactics.map(tac =>
|
|
<InventoryItem key={tac.name} showDoc={() => {setDocName(tac.name); setDocType("Tactic")}}
|
|
name={tac.name} locked={tac.locked} disabled={tac.disabled} />) }
|
|
{/* TODO: Click on Tactic: show info
|
|
TODO: click on paste icon -> paste into command line */}
|
|
</div>
|
|
|
|
<h2>Lemmas</h2>
|
|
<div className="inventory-list">
|
|
{ lemmas.map(lem =>
|
|
<InventoryItem key={lem.name} showDoc={() => {setDocName(lem.name); setDocType("Lemma")}}
|
|
name={lem.name} locked={lem.locked} disabled={lem.disabled} />) }
|
|
</div>
|
|
|
|
{docName && <Documentation name={docName} type={docType} />}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function InventoryItem({name, locked, disabled, showDoc}) {
|
|
const icon = locked ? <FontAwesomeIcon icon={faLock} /> :
|
|
disabled ? <FontAwesomeIcon icon={faBan} /> : ""
|
|
const className = locked ? "locked" : disabled ? "disabled" : ""
|
|
|
|
const handleClick = () => {
|
|
if (!locked && !disabled) {
|
|
showDoc()
|
|
}
|
|
}
|
|
|
|
return <div className={`item ${className}`} onClick={handleClick}>{icon} {name}</div>
|
|
}
|
|
|
|
function Documentation({name, type}) {
|
|
|
|
const doc = useLoadDocQuery({type: type, name: name})
|
|
|
|
return <>
|
|
<h2 className="doc">{doc.data?.name}</h2>
|
|
<Markdown>{doc.data?.text}</Markdown>
|
|
</>
|
|
}
|
|
|
|
export default Inventory;
|