-
- World Map
-
-
- Interactive map of the game world. Click tiles for details, drag to
- pan, scroll to zoom.
-
+
+
+
+ World Map
+
+
+ Interactive map of the game world. Click tiles for details, drag to
+ pan, scroll to zoom. Press{" "}
+
+ /
+ {" "}
+ to search.
+
+
+
+ {/* Search */}
+
+
+
+ setSearchOpen(true)}
+ onChange={(e) => {
+ setSearchQuery(e.target.value);
+ setSearchOpen(true);
+ }}
+ />
+
+ {searchOpen && searchResults.length > 0 && (
+
+ {searchResults.map((r) => (
+
+ ))}
+
+ )}
+
{error && (
@@ -301,8 +864,25 @@ export default function MapPage() {
)}
- {/* Filters */}
+ {/* Layer selector + Filters */}
+
+
+ {LAYER_OPTIONS.map((layer) => (
+
+ ))}
+
+
{LEGEND_ITEMS.map((item) => (
+ {/* Tile skin image */}
+ {selectedTile.tile.skin && (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
})
+
+ )}
+
@@ -417,6 +1036,21 @@ export default function MapPage() {
{selectedTile.tile.content.code}
+
+ {/* Content icon image */}
+ {IMAGE_CONTENT_TYPES.has(selectedTile.tile.content.type) && (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
)}
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index daa5402..10c3053 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -1,7 +1,14 @@
"use client";
import { useState, useEffect } from "react";
-import { Settings, Save, RotateCcw } from "lucide-react";
+import {
+ Settings,
+ Save,
+ RotateCcw,
+ KeyRound,
+ Trash2,
+ Loader2,
+} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
@@ -9,16 +16,15 @@ import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
+import { useAuth } from "@/components/auth/auth-provider";
interface AppSettings {
- apiUrl: string;
characterRefreshInterval: number;
automationRefreshInterval: number;
mapAutoRefresh: boolean;
}
const DEFAULT_SETTINGS: AppSettings = {
- apiUrl: process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000",
characterRefreshInterval: 5,
automationRefreshInterval: 3,
mapAutoRefresh: true,
@@ -35,6 +41,9 @@ function loadSettings(): AppSettings {
export default function SettingsPage() {
const [settings, setSettings] = useState
(DEFAULT_SETTINGS);
+ const { status: authStatus, setToken, removeToken } = useAuth();
+ const [newToken, setNewToken] = useState("");
+ const [tokenLoading, setTokenLoading] = useState(false);
useEffect(() => {
setSettings(loadSettings());
@@ -55,6 +64,29 @@ export default function SettingsPage() {
toast.success("Settings reset to defaults");
}
+ async function handleSetToken(e: React.FormEvent) {
+ e.preventDefault();
+ if (!newToken.trim()) return;
+
+ setTokenLoading(true);
+ const result = await setToken(newToken.trim());
+ setTokenLoading(false);
+
+ if (result.success) {
+ setNewToken("");
+ toast.success("API token updated");
+ } else {
+ toast.error(result.error || "Failed to set token");
+ }
+ }
+
+ async function handleRemoveToken() {
+ setTokenLoading(true);
+ await removeToken();
+ setTokenLoading(false);
+ toast.success("API token removed");
+ }
+
return (
@@ -67,29 +99,83 @@ export default function SettingsPage() {
-
- Connection
+
+ API Token
-
-
-
- setSettings((s) => ({ ...s, apiUrl: e.target.value }))
- }
- placeholder="http://localhost:8000"
- />
-
- The URL of the backend API server. Requires page reload to take
- effect.
-
+
+ Status:
+ {authStatus?.has_token ? (
+
+ Connected (
+ {authStatus.source === "env"
+ ? "environment"
+ : "user-provided"}
+ )
+
+ ) : (
+ Not configured
+ )}
+
+ {authStatus?.source !== "env" && (
+
+ )}
+
+ {authStatus?.source === "env" && (
+
+ Token is configured via environment variable. To change it,
+ update the ARTIFACTS_TOKEN in your .env file and restart the
+ backend.
+
+ )}
+
@@ -114,7 +200,8 @@ export default function SettingsPage() {
onChange={(e) =>
setSettings((s) => ({
...s,
- characterRefreshInterval: parseInt(e.target.value, 10) || 5,
+ characterRefreshInterval:
+ parseInt(e.target.value, 10) || 5,
}))
}
/>
@@ -136,7 +223,8 @@ export default function SettingsPage() {
onChange={(e) =>
setSettings((s) => ({
...s,
- automationRefreshInterval: parseInt(e.target.value, 10) || 3,
+ automationRefreshInterval:
+ parseInt(e.target.value, 10) || 3,
}))
}
/>
diff --git a/frontend/src/components/auth/api-key-gate.tsx b/frontend/src/components/auth/api-key-gate.tsx
new file mode 100644
index 0000000..51af57d
--- /dev/null
+++ b/frontend/src/components/auth/api-key-gate.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useState } from "react";
+import { KeyRound, Loader2, ExternalLink } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "./auth-provider";
+
+export function ApiKeyGate({ children }: { children: React.ReactNode }) {
+ const { status, loading, setToken } = useAuth();
+
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+
+ if (status?.has_token) {
+ return <>{children};
+ }
+
+ return ;
+}
+
+function ApiKeyForm({
+ onSubmit,
+}: {
+ onSubmit: (token: string) => Promise<{ success: boolean; error?: string }>;
+}) {
+ const [token, setToken] = useState("");
+ const [error, setError] = useState(null);
+ const [submitting, setSubmitting] = useState(false);
+
+ async function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+ if (!token.trim()) return;
+
+ setError(null);
+ setSubmitting(true);
+
+ const result = await onSubmit(token.trim());
+ if (!result.success) {
+ setError(result.error || "Failed to set token");
+ }
+
+ setSubmitting(false);
+ }
+
+ return (
+
+
+
+
+
+
+ Artifacts Dashboard
+
+ Enter your Artifacts MMO API token to get started.
+
+
+
+
+
+
+
+ {/* Search & Category Filter */}
+
+
+
+ setSearch(e.target.value)}
+ className="pl-9"
+ />
+
+
+
+ {/* Category Tabs */}
+
+ {GALLERY_CATEGORIES.map((cat) => {
+ const Icon = CATEGORY_ICONS[cat.key];
+ const isActive = category === cat.key;
+ const count =
+ cat.key === "all"
+ ? GALLERY_TEMPLATES.length
+ : GALLERY_TEMPLATES.filter((t) => t.category === cat.key).length;
+
+ return (
+
+ );
+ })}
+
+
+ {/* Template Grid */}
+ {filtered.length === 0 ? (
+
+
+
+ No automations match your search.
+
+
+ ) : (
+
+ {filtered.map((template) => {
+ const Icon = STRATEGY_ICONS[template.strategy_type] ?? Zap;
+ const colors = STRATEGY_COLORS[template.strategy_type] ?? {
+ text: "text-muted-foreground",
+ bg: "bg-muted",
+ border: "border-muted",
+ };
+
+ return (
+
setSelectedTemplate(template)}
+ >
+ {/* Colored top bar */}
+
+
+
+
+
+
+
+
+ {template.name}
+
+
+ {template.description}
+
+
+
+
+ {template.difficulty}
+
+ {template.min_level > 1 && (
+
+ Lv. {template.min_level}+
+
+ )}
+ {template.skill_requirement && (
+
+ {template.skill_requirement.skill} {template.skill_requirement.level}+
+
+ )}
+
+
+
+ );
+ })}
+
+ )}
+
+ {/* Activation Dialog */}
+
setSelectedTemplate(null)}
+ />
+
+
+
+ Automations
+
+
+
+
+
+ {/* Active Automations */}
+ {isLoading && (
+
+
+
+ )}
+
+ {!isLoading && charAutomations.length === 0 && (
+
+ No automations for this character.
+
+ )}
+
+ {charAutomations.length > 0 && (
+
+ {charAutomations.map((automation) => {
+ const status = statusMap.get(automation.id);
+ const currentStatus = status?.status ?? "stopped";
+ const actionsCount = status?.actions_count ?? 0;
+ const Icon =
+ STRATEGY_ICONS[automation.strategy_type] ?? Bot;
+ const colors = STRATEGY_COLORS[automation.strategy_type];
+
+ return (
+
+
+
+
+
+
+
+ {automation.name}
+
+
+
+ {automation.strategy_type}
+
+
+
+
e.stopPropagation()}>
+
+
+
+ );
+ })}
+
+
+
+ Suggested
+
+
+
+
+ {suggestions.map((template) => {
+ const Icon =
+ STRATEGY_ICONS[template.strategy_type] ?? Zap;
+ const colors =
+ STRATEGY_COLORS[template.strategy_type];
+
+ return (
+
+ );
+ })}
+
+
+
{itemCode}
diff --git a/frontend/src/components/character/inventory-grid.tsx b/frontend/src/components/character/inventory-grid.tsx
index a02f3ea..07a1f8c 100644
--- a/frontend/src/components/character/inventory-grid.tsx
+++ b/frontend/src/components/character/inventory-grid.tsx
@@ -8,6 +8,7 @@ import {
CardDescription,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
+import { GameIcon } from "@/components/ui/game-icon";
import { cn } from "@/lib/utils";
import type { Character } from "@/lib/types";
@@ -58,16 +59,14 @@ export function InventoryGrid({ character }: InventoryGridProps) {
)}
>
{item && (
- <>
-
- {item.code}
-
+
+
{item.quantity > 1 && (
-
- x{item.quantity}
+
+ {item.quantity}
)}
-
+
)}
-
{character.name}
+
+
+ {character.name}
+
{automationStatus &&
automationStatus.status !== "stopped" && (
@@ -236,12 +240,14 @@ export function CharacterCard({ character, automationStatus }: CharacterCardProp
{(character.weapon_slot || character.shield_slot) && (
{character.weapon_slot && (
-
+
+
{character.weapon_slot}
)}
{character.shield_slot && (
-
+
+
{character.shield_slot}
)}
diff --git a/frontend/src/components/layout/providers.tsx b/frontend/src/components/layout/providers.tsx
index 024980c..94d0788 100644
--- a/frontend/src/components/layout/providers.tsx
+++ b/frontend/src/components/layout/providers.tsx
@@ -7,6 +7,8 @@ import {
useWebSocket,
type ConnectionStatus,
} from "@/hooks/use-websocket";
+import { AuthProvider } from "@/components/auth/auth-provider";
+import { ApiKeyGate } from "@/components/auth/api-key-gate";
interface WebSocketContextValue {
status: ConnectionStatus;
@@ -53,10 +55,12 @@ export function Providers({ children }: { children: React.ReactNode }) {
return (
-
- {children}
+
-
+
+ {children}
+
+
);
}
diff --git a/frontend/src/components/ui/game-icon.tsx b/frontend/src/components/ui/game-icon.tsx
new file mode 100644
index 0000000..ee3fb99
--- /dev/null
+++ b/frontend/src/components/ui/game-icon.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const TYPE_PATHS: Record = {
+ item: "items",
+ monster: "monsters",
+ resource: "resources",
+ character: "characters",
+ effect: "effects",
+ npc: "npcs",
+ badge: "badges",
+};
+
+const SIZES = {
+ xs: 16,
+ sm: 24,
+ md: 32,
+ lg: 48,
+ xl: 64,
+} as const;
+
+type GameIconType = keyof typeof TYPE_PATHS;
+type GameIconSize = keyof typeof SIZES;
+
+interface GameIconProps {
+ type: GameIconType;
+ code: string;
+ size?: GameIconSize;
+ className?: string;
+ showTooltip?: boolean;
+}
+
+function FallbackIcon({ code, px, className }: { code: string; px: number; className?: string }) {
+ const hue = [...code].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360;
+
+ return (
+
+ {code.charAt(0).toUpperCase()}
+
+ );
+}
+
+export function GameIcon({
+ type,
+ code,
+ size = "md",
+ className,
+ showTooltip = true,
+}: GameIconProps) {
+ const [errored, setErrored] = useState(false);
+ const px = SIZES[size];
+ const path = TYPE_PATHS[type] ?? "items";
+ const src = `https://artifactsmmo.com/images/${path}/${code}.png`;
+
+ const displayName = code.replaceAll("_", " ");
+
+ const icon = errored ? (
+
+ ) : (
+ setErrored(true)}
+ />
+ );
+
+ if (!showTooltip) return icon;
+
+ return (
+
+
+
+ {icon}
+
+
+ {displayName}
+
+
+
+ );
+}
diff --git a/frontend/src/lib/api-client.ts b/frontend/src/lib/api-client.ts
index 1e2a27f..9de88cc 100644
--- a/frontend/src/lib/api-client.ts
+++ b/frontend/src/lib/api-client.ts
@@ -84,6 +84,40 @@ async function deleteApi(path: string): Promise {
}
}
+// ---------- Auth API ----------
+
+export interface AuthStatus {
+ has_token: boolean;
+ source: "env" | "user" | "none";
+}
+
+export interface SetTokenResponse {
+ success: boolean;
+ source: string;
+ account?: string | null;
+ error?: string | null;
+}
+
+export function getAuthStatus(): Promise {
+ return fetchApi("/api/auth/status");
+}
+
+export async function setAuthToken(token: string): Promise {
+ return postApi("/api/auth/token", { token });
+}
+
+export async function clearAuthToken(): Promise {
+ const response = await fetch(`${API_URL}/api/auth/token`, {
+ method: "DELETE",
+ });
+ if (!response.ok) {
+ throw new Error(`API error: ${response.status}`);
+ }
+ return response.json() as Promise;
+}
+
+// ---------- Characters API ----------
+
export function getCharacters(): Promise {
return fetchApi("/api/characters");
}
@@ -185,37 +219,43 @@ export function getAutomationLogs(
// ---------- Grand Exchange API ----------
-export function getExchangeOrders(): Promise {
- return fetchApi("/api/exchange/orders");
+export async function getExchangeOrders(): Promise {
+ const res = await fetchApi<{ orders: GEOrder[] }>("/api/exchange/orders");
+ return res.orders;
}
-export function getExchangeHistory(): Promise {
- return fetchApi("/api/exchange/history");
+export async function getExchangeHistory(): Promise {
+ const res = await fetchApi<{ history: GEOrder[] }>("/api/exchange/history");
+ return res.history;
}
-export function getPriceHistory(itemCode: string): Promise {
- return fetchApi(
+export async function getPriceHistory(itemCode: string): Promise {
+ const res = await fetchApi<{ entries: PricePoint[] }>(
`/api/exchange/prices/${encodeURIComponent(itemCode)}`
);
+ return res.entries;
}
// ---------- Events API ----------
-export function getEvents(): Promise {
- return fetchApi("/api/events");
+export async function getEvents(): Promise {
+ const res = await fetchApi<{ events: GameEvent[] }>("/api/events");
+ return res.events;
}
-export function getEventHistory(): Promise {
- return fetchApi("/api/events/history");
+export async function getEventHistory(): Promise {
+ const res = await fetchApi<{ events: GameEvent[] }>("/api/events/history");
+ return res.events;
}
// ---------- Logs & Analytics API ----------
-export function getLogs(characterName?: string): Promise {
+export async function getLogs(characterName?: string): Promise {
const params = new URLSearchParams();
if (characterName) params.set("character", characterName);
const qs = params.toString();
- return fetchApi(`/api/logs${qs ? `?${qs}` : ""}`);
+ const data = await fetchApi(`/api/logs${qs ? `?${qs}` : ""}`);
+ return Array.isArray(data) ? data : (data?.logs ?? []);
}
export function getAnalytics(
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 14b4580..f6fb6d9 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -145,8 +145,10 @@ export interface Resource {
export interface MapTile {
name: string;
+ skin: string;
x: number;
y: number;
+ layer: string;
content?: {
type: string;
code: string;