@@ -36,6 +38,11 @@ export function SkillCardTile({ card, owned, firing, onOpen }: Props) {
owned
)}
+ {disposed && (
+
+ un-equipped
+
+ )}
{firing && (
casting
diff --git a/surfaces/webview/src/market/SkillDetailView.tsx b/surfaces/webview/src/market/SkillDetailView.tsx
index de325e9..1f2d6fb 100644
--- a/surfaces/webview/src/market/SkillDetailView.tsx
+++ b/surfaces/webview/src/market/SkillDetailView.tsx
@@ -1,21 +1,23 @@
import { useState } from "react";
import { useStore } from "../state/store";
-import type { SkillDetail } from "../transport/protocol";
+import type { SkillCard, SkillDetail } from "../transport/protocol";
import { SkillIcon } from "../icons";
interface Props {
detail: SkillDetail;
owned: boolean;
onBack: () => void;
+ onOpenSkill?: (card: SkillCard) => void;
}
-export function SkillDetailView({ detail, owned, onBack }: Props) {
- const { send } = useStore();
+export function SkillDetailView({ detail, owned, onBack, onOpenSkill }: Props) {
+ const { state, send } = useStore();
const [buying, setBuying] = useState(false);
const [noteText, setNoteText] = useState("");
const [noteGitLink, setNoteGitLink] = useState("");
const { card, skillText, notes } = detail;
const priceSol = card.price ? (Number(card.price) / 1_000_000_000).toFixed(3) : null;
+ const disposed = Object.values(state.marketDisposed).includes(card.id);
function handleBuy() {
setBuying(true);
@@ -40,6 +42,11 @@ export function SkillDetailView({ detail, owned, onBack }: Props) {
owned
)}
+ {disposed && (
+
+ un-equipped
+
+ )}
@@ -68,6 +75,25 @@ export function SkillDetailView({ detail, owned, onBack }: Props) {
)}
+ {Array.isArray(detail.requiredCards) && detail.requiredCards.length > 0 && (
+
+
Required skills
+
+ {detail.requiredCards.map((req) => (
+
+ ))}
+
+
+ )}
+
{Array.isArray(notes) && notes.length > 0 && (
Comments
@@ -107,7 +133,29 @@ export function SkillDetailView({ detail, owned, onBack }: Props) {
)}
- {!owned && (
+ {owned && (
+
+
+
+ )}
+
+ {!owned && disposed && (
+
+
+
+ )}
+
+ {!owned && !disposed && (