diff --git a/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection/index.tsx b/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection/index.tsx index 23796023c..8c44cfa3d 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection/index.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection/index.tsx @@ -1,6 +1,7 @@ import { CaretLeftIcon, CaretRightIcon, PlusIcon } from '@radix-ui/react-icons'; import { Flex, Heading, IconButton, ScrollArea, Text } from '@radix-ui/themes'; import { use, useEffect, useMemo, useRef, useState } from 'react'; +import { asset } from '../../../../../../../core/blitzkit/asset'; import { tankDefinitions } from '../../../../../../../core/blitzkit/tankDefinitions'; import * as Duel from '../../../../../../../stores/duel'; import { Arrow } from './components/Arrow'; @@ -62,6 +63,14 @@ export function TechTreeSection() { () => [...lines[lineIndex]].toReversed(), [master, lineIndex], ); + const totalXp = line.reduce( + (xp, id) => xp + (awaitedTankDefinitions[id].xp ?? 0), + 0, + ); + const totalCredits = line.reduce( + (credits, id) => credits + awaitedTankDefinitions[id].price.value, + 0, + ); if ( master.treeType !== 'researchable' || @@ -82,36 +91,48 @@ export function TechTreeSection() { my="6" direction="column" align="center" - gap="4" + gap="0" style={{ backgroundColor: 'var(--color-surface)', }} py="6" > - + Tech tree - {lines.length > 1 && ( - - - setLineIndex((lines.length + lineIndex - 1) % lines.length) - } - > - - - - Route {lineIndex + 1} of {lines.length} - - setLineIndex((lineIndex + 1) % lines.length)} - > - - - - )} + + + + XP + {totalXp.toLocaleString()} + + + + + + Silver + {totalCredits.toLocaleString()} + + + @@ -140,6 +161,32 @@ export function TechTreeSection() { )} + + + {lines.length > 1 && ( + + + setLineIndex((lines.length + lineIndex - 1) % lines.length) + } + > + + + + Route {lineIndex + 1} of {lines.length} + + setLineIndex((lineIndex + 1) % lines.length)} + > + + + + )} + ); }