feat: New arena layout. Fixes #996

Author: Zenoo

client/public/images/arena/brute-bg-high.webp

@@ -1534,6 +1534,7 @@
   "rankingPrioritizeAscensions": "The rankings prioritize the amount of ascensions over experience and level !",
   "fasterFights": "Faster fights",
   "displayVersusPage": "Display versus page",
+  "displayOpponentDetails": "Display opponent details",
   "wiki.howToRankup": "How to rank up?",
   "wiki.winDaily": "Win daily tournament(s)",
   "wiki.wins_one": "{{count}} win",

client/public/images/dark/arena/brute-bg-high.webp

@@ -51,14 +51,12 @@ const BruteRender = ({
 
     if (p3 === 0) {
       width += 15;
-      shift.y += 7;
 
       if (looking === 'right') {
         shift.x += -20;
       }
     } else if (p3 === 1) {
       width += -10;
-      shift.y += 10;
     } else if (p3 === 3) {
       width += 40;
 
@@ -87,12 +85,18 @@ const BruteRender = ({
       width += 10;
       shift.y += 5;
     } else if (p3 === 11) {
-      shift.y += 10;
+      width -= 5;
+    } else if (p3 === 5) {
+      width += 20;
+      shift.y -= 10;
+    } else if (p3 === 3) {
+      shift.y -= 3;
     }
 
     if (p7 === 5) {
-      if (p3 === 9 || p3 === 4 || p3 === 6) {
-        width += 10;
+      if (p3 === 9 || p3 === 4 || p3 === 6 || p3 === 3) {
+        width += 20;
+        shift.y -= 5;
 
         if (looking === 'right') {
           shift.x += -15;

client/public/images/pets/bear.svg

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useBrute } from '../../hooks/useBrute';
 import StatColor from '../../utils/StatColor';
 import Text from '../Text';
+import { Brute } from '@labrute/prisma';
 
 const textShadowBase = '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000';
 const textProps = {
@@ -14,19 +15,23 @@ const textProps = {
 
 export interface PetTooltipProps extends Omit<TooltipProps, 'title'> {
   pet?: Pet;
+  brute?: Pick<Brute, 'hp' | 'strengthValue' | 'agilityValue' | 'speedValue'>;
 }
 
 const PetTooltip = ({
   pet,
+  brute: specificBrute,
   children,
   ...rest
 }: PetTooltipProps) => {
   const { t } = useTranslation();
-  const { brute } = useBrute();
+  const { brute: authedBrute } = useBrute();
   const theme = useTheme();
 
   const textShadow = useMemo(() => (theme.palette.mode === 'dark' ? textShadowBase : undefined), [theme.palette.mode]);
 
+  const brute = specificBrute || authedBrute;
+
   return (
     <Tooltip
       {...rest}

client/public/images/pets/dog.svg

@@ -1,5 +1,6 @@
 import { Box, BoxProps, useTheme } from '@mui/material';
 import React, { useCallback } from 'react';
+import { useNavigate } from 'react-router';
 
 export interface StyledButtonProps extends Omit<BoxProps, 'translate'> {
   image?: string;
@@ -9,6 +10,7 @@ export interface StyledButtonProps extends Omit<BoxProps, 'translate'> {
   contrast?: boolean;
   shift?: string;
   shadowColor?: string;
+  to?: string;
 }
 
 export const StyledButtonWidth = 207;
@@ -26,10 +28,12 @@ const StyledButton = React.forwardRef<HTMLDivElement, StyledButtonProps>(({
   contrast = true,
   shift = '4px',
   shadowColor = 'rgba(0, 0, 0, 0.2)',
+  to,
   sx,
   ...rest
 }: StyledButtonProps, ref) => {
   const { palette: { mode } } = useTheme();
+  const navigate = useNavigate();
 
   const themedImage = mode === 'dark' ? image.replace('/images/', '/images/dark/') : image;
   const themedImageHover = mode === 'dark' ? imageHover.replace('/images/', '/images/dark/') : imageHover;
@@ -43,10 +47,18 @@ const StyledButton = React.forwardRef<HTMLDivElement, StyledButtonProps>(({
   const handleMouseLeave = useCallback(() => {
     setHover(false);
   }, []);
+
+  const handleClick = () => {
+    if (to) {
+      navigate(to);
+    }
+  };
+
   return (
     <Box
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
       ref={ref}
       sx={{
         display: 'flex',

client/public/images/pets/panther.svg

@@ -1,6 +1,6 @@
 import { getFightsLeft, getGoldNeededForNewBrute, UserUpdateSettingsRequest } from '@labrute/core';
 import { Lang } from '@labrute/prisma';
-import { Add, AdminPanelSettings, DarkMode, Info, LightMode, Logout, Menu, MilitaryTech, MoreHoriz, MusicNote, NewReleases, Person, Policy, RssFeed, Speed, SportsKabaddi } from '@mui/icons-material';
+import { Add, AdminPanelSettings, DarkMode, Info, LightMode, Logout, Menu, MilitaryTech, MoreHoriz, MusicNote, NewReleases, Person, PersonSearch, Policy, RssFeed, Speed, SportsKabaddi } from '@mui/icons-material';
 import { Badge, Box, Button, Divider, Drawer, GlobalStyles, IconButton, List, ListItem, ListItemIcon, ListItemText, ListSubheader, Alert as MuiAlert, Switch, ThemeProvider, Tooltip, useTheme } from '@mui/material';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -34,6 +34,7 @@ const Main = () => {
     fightSpeed: 2,
     backgroundMusic: false,
     displayVersusPage: true,
+    displayOpponentDetails: true,
   });
 
   const favoriteCount = user?.brutes.filter((b) => b.favorite).length || 0;
@@ -46,6 +47,7 @@ const Main = () => {
       fightSpeed: user.fightSpeed,
       backgroundMusic: user.backgroundMusic,
       displayVersusPage: user.displayVersusPage,
+      displayOpponentDetails: user.displayOpponentDetails,
     });
   }, [user]);
 
@@ -100,6 +102,7 @@ const Main = () => {
       fightSpeed: settings.fightSpeed,
       backgroundMusic: settings.backgroundMusic,
       displayVersusPage: settings.displayVersusPage,
+      displayOpponentDetails: settings.displayOpponentDetails,
     };
 
     if (key === 'fightSpeed') {
@@ -116,6 +119,7 @@ const Main = () => {
         fightSpeed: newSettings.fightSpeed,
         backgroundMusic: newSettings.backgroundMusic,
         displayVersusPage: newSettings.displayVersusPage,
+        displayOpponentDetails: newSettings.displayOpponentDetails,
       } : null));
     }).catch(catchError(Alert));
   };
@@ -444,6 +448,8 @@ const Main = () => {
                     </Button>
                   )}
                   sx={{
+                    mt: 0,
+                    mb: 1,
                     '& .MuiAlert-action': {
                       alignItems: 'center',
                     }
@@ -503,6 +509,21 @@ const Main = () => {
                     }}
                   />
                 </ListItem>
+                <ListItem>
+                  <ListItemIcon>
+                    <PersonSearch />
+                  </ListItemIcon>
+                  <ListItemText id="switch-displayOpponentDetails" primary={t('displayOpponentDetails')} />
+                  <Switch
+                    edge="end"
+                    size="small"
+                    onChange={toggle('displayOpponentDetails')}
+                    checked={settings.displayOpponentDetails}
+                    inputProps={{
+                      'aria-labelledby': 'switch-displayOpponentDetails',
+                    }}
+                  />
+                </ListItem>
               </List>
             </ThemeProvider>
           </>