-
- 探索地図
+
-
-
-
{projection.status === "complete" ? (
@@ -215,43 +215,24 @@ export function ExplorationMap({
) : null}
-
-
+
+
- {selectedNode && selectedNode.state !== "undiscovered" ? (
-
-
-
+ openConsultation()}
+ />
- ) : null}
+
{
node: GraphNode;
index: number;
+ onSelect: () => void;
+ onOpen: () => void;
}
type WorldFlowNode = Node;
@@ -64,28 +68,111 @@ export function fallbackPositionFor(nodeId: string) {
};
}
+function displayPositionFor(node: GraphNode, nodeCount: number) {
+ const position = node.position ?? fallbackPositionFor(node.id);
+ if (nodeCount <= 6) return position;
+
+ return {
+ x: Math.round(position.x * 1.65),
+ y: position.y,
+ };
+}
+
+export function worldEdgeFor(
+ edge: LabProjection["graph"]["edges"][number],
+): Edge {
+ return {
+ id: edge.id,
+ source: edge.from,
+ target: edge.to,
+ type: "smoothstep",
+ className: `world-edge world-edge--${edge.state ?? "known"}`,
+ selectable: false,
+ focusable: false,
+ deletable: false,
+ markerEnd: {
+ type: MarkerType.ArrowClosed,
+ width: 16,
+ height: 16,
+ },
+ };
+}
+
function WorldNode({ data, selected }: NodeProps) {
const node = data.node;
+ const discovered = node.state !== "undiscovered";
+ const stateLabel =
+ selected
+ ? "選択中"
+ : node.state === "discovered"
+ ? "発見済み"
+ : "未発見";
+
return (
- (
() =>
projection.graph.nodes.map((node, index) => ({
id: node.id,
type: "world",
- position: node.position ?? fallbackPositionFor(node.id),
- data: { node, index },
+ position: displayPositionFor(node, projection.graph.nodes.length),
+ data: {
+ node,
+ index,
+ onSelect: () => onSelectNode(node.id),
+ onOpen: onOpenNode,
+ },
selected: selectedNodeId === node.id,
- selectable: node.state !== "undiscovered",
+ selectable: false,
draggable: false,
- focusable: node.state !== "undiscovered",
- ariaLabel:
- node.state === "undiscovered"
- ? "未発見の地点"
- : `${node.label}${node.detail ? `、${node.detail}` : ""}`,
+ deletable: false,
+ focusable: false,
})),
- [projection.graph.nodes, selectedNodeId],
+ [onOpenNode, onSelectNode, projection.graph.nodes, selectedNodeId],
);
const edges = useMemo(
- () =>
- projection.graph.edges.map((edge) => ({
- id: edge.id,
- source: edge.from,
- target: edge.to,
- type: "smoothstep",
- className: `world-edge world-edge--${edge.state ?? "known"}`,
- markerEnd: {
- type: MarkerType.ArrowClosed,
- width: 16,
- height: 16,
- },
- })),
+ () => projection.graph.edges.map(worldEdgeFor),
[projection.graph.edges],
);
@@ -146,22 +225,20 @@ export function MapCanvas({
edges={edges}
nodeTypes={nodeTypes}
fitView
- fitViewOptions={{ padding: 0.08, minZoom: 0.45, maxZoom: 1 }}
- minZoom={0.45}
- maxZoom={1}
+ fitViewOptions={{ padding: 0.04, minZoom: 0.42, maxZoom: 1.05 }}
+ minZoom={0.42}
+ maxZoom={1.05}
nodesConnectable={false}
nodesDraggable={false}
- elementsSelectable
+ nodesFocusable={false}
+ edgesFocusable={false}
+ elementsSelectable={false}
panOnDrag={false}
zoomOnDoubleClick={false}
zoomOnPinch={false}
zoomOnScroll={false}
preventScrolling={false}
proOptions={{ hideAttribution: true }}
- onNodeClick={(_, node) => {
- const graphNode = node.data.node;
- if (graphNode.state !== "undiscovered") onSelectNode(node.id);
- }}
>
) : (
-
+
+
+ {experience === "browse" ? "MISSION 00" : "LIVE MISSION"}
+
+ 探索地図
+
+
+
-
- {projection.heading}
+ +
+ 現在の目標
+ {projection.objective}
+
+ {experience === "live" ? (
+
+ {projection.progress.discovered}
+ /
+ {projection.progress.total}
+ 件中を発見
+
+ ) : null}
+
- 現在の目標
- {projection.objective}
-
- {experience === "live" ? (
-
- {projection.progress.discovered}
- /
- {projection.progress.total}
- 件中を発見
-
- ) : null}
- - 探索地図 -
-
- 選択中の地点
- {selectedNode.label}
-
- {selectedNode.progress ? (
-
- {selectedNode.progress}
-
- ) : null}
-
+ + 探索地図 +
+
+ <>
+
+
+
);
}
@@ -95,46 +182,38 @@ interface MapCanvasProps {
projection: LabProjection;
selectedNodeId?: string;
onSelectNode: (nodeId: string) => void;
+ onOpenNode: () => void;
}
export function MapCanvas({
projection,
selectedNodeId,
onSelectNode,
+ onOpenNode,
}: MapCanvasProps) {
const nodes = useMemo
+
+
+
+ {node.label}
+
+
+ )}
+