diff --git a/src/components/BattleTV/BattleTV.module.css b/src/components/BattleTV/BattleTV.module.css index 41b1af3a..0a546818 100644 --- a/src/components/BattleTV/BattleTV.module.css +++ b/src/components/BattleTV/BattleTV.module.css @@ -94,6 +94,12 @@ html { text-align: right; } +.score { + width: 12%; + text-align: center; + font-size: 2vw; + line-height: 22px; +} .coinused { width: 7%; text-align: center; @@ -101,10 +107,10 @@ html { line-height: 22px; } .destruction { - width: 12%; + width: 7%; text-align: center; - font-size: 2vw; - line-height: 25px; + font-size: 1vw; + line-height: 22px; } .vs { text-align: center; diff --git a/src/components/BattleTV/BattleTV.tsx b/src/components/BattleTV/BattleTV.tsx index f2df26dd..027d96e6 100644 --- a/src/components/BattleTV/BattleTV.tsx +++ b/src/components/BattleTV/BattleTV.tsx @@ -68,6 +68,10 @@ function PaginatedItems() { setItemOffset(newOffset); }; + function calculateScore(coinsUsed: number, destruction: number) { + return (1500 - coinsUsed) / 15 + 2 * destruction; + } + return ( <> <> @@ -99,6 +103,12 @@ function PaginatedItems() {
{[...match.games.values()][0].destruction.toFixed(2)}
+
+ {calculateScore( + [...match.games.values()][0].coinsUsed, + [...match.games.values()][0].destruction, + )} +
{ @@ -114,6 +124,16 @@ function PaginatedItems() { > Watch
+
+ {calculateScore( + [...match.games.values()][ + [...match.games.values()].length === 1 ? 0 : 1 + ].coinsUsed, + [...match.games.values()][ + [...match.games.values()].length === 1 ? 0 : 1 + ].destruction, + )} +
{[...match.games.values()][ [...match.games.values()].length === 1 ? 0 : 1 @@ -177,7 +197,9 @@ export default function BattleTV(): JSX.Element {
Coins Used
Destruction %
+
Score
VS
+
Score
Destruction %
Coins Used