diff --git a/client/src/components/inventory.tsx b/client/src/components/inventory.tsx
index a358e5b..c379859 100644
--- a/client/src/components/inventory.tsx
+++ b/client/src/components/inventory.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
import { useState, useEffect } from 'react';
import '../css/inventory.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faLock, faBan } from '@fortawesome/free-solid-svg-icons'
+import { faLock, faBan, faCheck } from '@fortawesome/free-solid-svg-icons'
+import { faClipboard } from '@fortawesome/free-regular-svg-icons'
import { GameIdContext } from '../app';
import Markdown from './markdown';
import { useLoadDocQuery, InventoryTile, LevelInfo, InventoryOverview, useLoadInventoryOverviewQuery } from '../state/api';
@@ -105,13 +106,29 @@ function InventoryItem({name, displayName, locked, disabled, newly, showDoc, ena
const title = locked ? "Not unlocked yet" :
disabled ? "Not available in this level" : ""
+ const [copied, setCopied] = useState(false)
+
const handleClick = () => {
if (enableAll || !locked) {
showDoc()
}
}
- return
{icon} {displayName}
+ const copyItemName = (ev) => {
+ navigator.clipboard.writeText(displayName)
+ setCopied(true)
+ setInterval(() => {
+ setCopied(false)
+ }, 3000);
+ ev.stopPropagation()
+ }
+
+return
+ {icon} {displayName}
+
+ {copied ? : }
+
+
}
export function Documentation({name, type, handleClose}) {
diff --git a/client/src/css/inventory.css b/client/src/css/inventory.css
index 3e02805..fb6fb0f 100644
--- a/client/src/css/inventory.css
+++ b/client/src/css/inventory.css
@@ -26,7 +26,11 @@
.inventory .item {
background: #fff;
border: solid 1px #777;
- padding: .1em .5em;
+ padding-left: .5rem;
+ padding-right: 1.0rem;
+ padding-top: .1rem;
+ padding-bottom: .1rem;
+ position: relative;
}
.inventory .item.locked {
@@ -72,3 +76,21 @@
color: black;
border-bottom: 0.3em solid #999;
}
+
+
+.inventory .item .copy-button {
+ min-width: 3px;
+ min-height: 3px;
+ display: inline-block;
+ color: #ccc;
+ font-size: 0.6em;
+ padding-right: .2rem;
+ vertical-align: top;
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: 1rem;
+ align-items: end;
+ text-align: end;
+}
diff --git a/package-lock.json b/package-lock.json
index 65f056c..1bef0fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
"@emotion/styled": "^11.10.5",
"@fontsource/roboto": "^4.5.8",
"@fontsource/roboto-mono": "^4.5.8",
+ "@fortawesome/free-regular-svg-icons": "^6.5.1",
"@leanprover/infoview": "^0.4.3",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.1",
@@ -2616,6 +2617,27 @@
"node": ">=6"
}
},
+ "node_modules/@fortawesome/free-regular-svg-icons": {
+ "version": "6.5.1",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.1.tgz",
+ "integrity": "sha512-m6ShXn+wvqEU69wSP84coxLbNl7sGVZb+Ca+XZq6k30SzuP3X4TfPqtycgUh9ASwlNh5OfQCd8pDIWxl+O+LlQ==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.5.1"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-regular-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
+ "version": "6.5.1",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+ "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
+ "hasInstallScript": true,
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
diff --git a/package.json b/package.json
index 4f25ac1..3f0ca44 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"@emotion/styled": "^11.10.5",
"@fontsource/roboto": "^4.5.8",
"@fontsource/roboto-mono": "^4.5.8",
+ "@fortawesome/free-regular-svg-icons": "^6.5.1",
"@leanprover/infoview": "^0.4.3",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.1",