feat(xp): show experience descriptions
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
parent
523b19ee52
commit
d518b13f36
2 changed files with 21 additions and 3 deletions
|
|
@ -38,6 +38,7 @@ import XPDisplay from "@/components/frontend/blocks/XPDisplay";
|
||||||
import type { ResolvedLevel } from "@/utils/xp/resolveLevel";
|
import type { ResolvedLevel } from "@/utils/xp/resolveLevel";
|
||||||
import { Rank, User } from "@/payload-types";
|
import { Rank, User } from "@/payload-types";
|
||||||
import { Progress } from "@/components/ui/progress";
|
import { Progress } from "@/components/ui/progress";
|
||||||
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||||
import { updatePreferences } from "@/app/(frontend)/account/actions";
|
import { updatePreferences } from "@/app/(frontend)/account/actions";
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
|
|
@ -277,7 +278,16 @@ export function AppSidebar({
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
{isMiniMode ? (
|
{isMiniMode ? (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="text-xs text-muted-foreground uppercase">{xpLevel.levelName}</div>
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<div className="text-xs text-muted-foreground uppercase">
|
||||||
|
{xpLevel.levelName}
|
||||||
|
</div>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>{xpLevel.levelDesc}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
<SparkleIcon className="w-4 h-4" />
|
<SparkleIcon className="w-4 h-4" />
|
||||||
<span className="text-xs font-bold">{xpLevel.xp.toLocaleString()}</span>
|
<span className="text-xs font-bold">{xpLevel.xp.toLocaleString()}</span>
|
||||||
<Progress value={xpLevel.progress} className="w-20 h-1" />
|
<Progress value={xpLevel.progress} className="w-20 h-1" />
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,10 @@ import { Progress } from "@/components/ui/progress";
|
||||||
import { SparkleIcon } from "lucide-react";
|
import { SparkleIcon } from "lucide-react";
|
||||||
import type { ResolvedLevel } from "@/utils/xp/resolveLevel";
|
import type { ResolvedLevel } from "@/utils/xp/resolveLevel";
|
||||||
import { PROFILE_UPDATE_EVENT, type ProfileUpdateDetail } from "@/hooks/useGameTick";
|
import { PROFILE_UPDATE_EVENT, type ProfileUpdateDetail } from "@/hooks/useGameTick";
|
||||||
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||||
|
|
||||||
const XPDisplay = ({ xpLevel }: { xpLevel: ResolvedLevel }) => {
|
const XPDisplay = ({ xpLevel }: { xpLevel: ResolvedLevel }) => {
|
||||||
const { levelName, progress, xp, nextLevelXP } = xpLevel;
|
const { levelName, levelDesc, progress, xp, nextLevelXP } = xpLevel;
|
||||||
const [xpGain, setXpGain] = useState<number | null>(null);
|
const [xpGain, setXpGain] = useState<number | null>(null);
|
||||||
const [xpGainId, setXpGainId] = useState(0);
|
const [xpGainId, setXpGainId] = useState(0);
|
||||||
const lastGainRef = useRef<{ amount: number; at: number } | null>(null);
|
const lastGainRef = useRef<{ amount: number; at: number } | null>(null);
|
||||||
|
|
@ -44,7 +45,14 @@ const XPDisplay = ({ xpLevel }: { xpLevel: ResolvedLevel }) => {
|
||||||
<ItemTitle className="flex justify-between items-center w-full">
|
<ItemTitle className="flex justify-between items-center w-full">
|
||||||
<SparkleIcon />
|
<SparkleIcon />
|
||||||
<div className="flex flex-col items-end">
|
<div className="flex flex-col items-end">
|
||||||
<span className="uppercase">{levelName}</span>
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<span className="uppercase">{levelName}</span>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>{levelDesc ?? "Missing content!"}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
<span className="relative text-2xl font-bold uppercase flex flex-row items-center">
|
<span className="relative text-2xl font-bold uppercase flex flex-row items-center">
|
||||||
{xp.toLocaleString()}
|
{xp.toLocaleString()}
|
||||||
{xpGain !== null && (
|
{xpGain !== null && (
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue