fixes #423

docs/CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 
 ### Added
+- [Issue 423](https://github.com/aza547/wow-recorder/issues/423) - Add affixes and some other UI improvements.
+
 ### Changed
 ### Fixed
 

src/renderer/ArenaInfo.tsx

@@ -0,0 +1,85 @@
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+import { RendererVideo } from 'main/types';
+import { getVideoResultText } from './rendererutils';
+
+interface IProps {
+  video: RendererVideo;
+}
+
+const ArenaInfo: React.FC<IProps> = (props: IProps) => {
+  const { video } = props;
+  const { category, zoneName } = video;
+  const resultText = getVideoResultText(video);
+
+  const renderResultText = () => {
+    return (
+      <Typography
+        align="center"
+        sx={{
+          color: 'white',
+          fontWeight: '600',
+          fontFamily: '"Arial",sans-serif',
+          fontSize: '0.75rem',
+          textShadow:
+            '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+        }}
+      >
+        {resultText}
+      </Typography>
+    );
+  };
+
+  const renderMapName = () => {
+    return (
+      <Typography
+        align="center"
+        sx={{
+          color: 'white',
+          fontWeight: '600',
+          fontFamily: '"Arial",sans-serif',
+          fontSize: '1.25rem',
+          textShadow:
+            '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+        }}
+      >
+        {zoneName}
+      </Typography>
+    );
+  };
+
+  const renderCategoryName = () => {
+    return (
+      <Typography
+        align="center"
+        sx={{
+          color: 'white',
+          fontWeight: '600',
+          fontFamily: '"Arial",sans-serif',
+          fontSize: '0.75rem',
+          textShadow:
+            '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+        }}
+      >
+        {category}
+      </Typography>
+    );
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {renderResultText()}
+      {renderMapName()}
+      {renderCategoryName()}
+    </Box>
+  );
+};
+
+export default ArenaInfo;

src/renderer/DungeonInfo.tsx

@@ -0,0 +1,161 @@
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+import { RendererVideo } from 'main/types';
+import { dungeonAffixesById } from 'main/constants';
+import * as Images from './images';
+import { getDungeonName, getVideoResultText } from './rendererutils';
+
+interface IProps {
+  video: RendererVideo;
+}
+
+const DungeonInfo: React.FC<IProps> = (props: IProps) => {
+  const { video } = props;
+  const { affixes } = video;
+  const resultText = getVideoResultText(video);
+  const dungeonName = getDungeonName(video);
+
+  const renderAffixDisplay = (affixID: number) => {
+    return (
+      <Box
+        key={`parent-${affixID}`}
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          backgroundColor: 'transparent',
+        }}
+      >
+        <Box
+          key={`child-${affixID}`}
+          component="img"
+          src={Images.affixImages[affixID]}
+          sx={{
+            height: '20px',
+            width: '20px',
+            border: '1px solid black',
+            borderRadius: '15%',
+            boxSizing: 'border-box',
+            objectFit: 'cover',
+          }}
+        />
+        <Typography
+          sx={{
+            color: 'white',
+            fontFamily: '"Arial",sans-serif',
+            ml: '2px',
+            fontSize: '0.75rem',
+            fontWeight: 700,
+            textShadow:
+              '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+          }}
+        >
+          {dungeonAffixesById[affixID]}
+        </Typography>
+      </Box>
+    );
+  };
+
+  const renderDungeonName = () => {
+    return (
+      <Typography
+        align="center"
+        sx={{
+          color: 'white',
+          fontWeight: '600',
+          fontFamily: '"Arial",sans-serif',
+          fontSize: '0.85rem',
+          textShadow:
+            '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+        }}
+      >
+        {dungeonName}
+      </Typography>
+    );
+  };
+
+  const renderDungeonLevel = () => {
+    return (
+      <Typography
+        align="center"
+        sx={{
+          color: '#ff8000',
+          fontWeight: '600',
+          fontFamily: '"Arial",sans-serif',
+          fontSize: '0.75rem',
+          textShadow:
+            '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+        }}
+      >
+        +{video.level}
+      </Typography>
+    );
+  };
+
+  const renderDungeonResult = () => {
+    return (
+      <Typography
+        align="center"
+        sx={{
+          color: 'white',
+          fontWeight: '600',
+          fontFamily: '"Arial",sans-serif',
+          fontSize: '0.75rem',
+          textShadow:
+            '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+        }}
+      >
+        {resultText}
+      </Typography>
+    );
+  };
+
+  if (affixes === undefined || affixes.length < 1) {
+    return <></>;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        backgroundColor: 'transparent',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          width: '50%',
+        }}
+      >
+        {renderDungeonResult()}
+        {renderDungeonName()}
+        {renderDungeonLevel()}
+      </Box>
+
+      <Box
+        sx={{
+          width: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+          }}
+        >
+          {affixes.map(renderAffixDisplay)}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default DungeonInfo;

src/renderer/RaidCompAndResult.tsx

@@ -0,0 +1,135 @@
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+import { RawCombatant, RendererVideo } from 'main/types';
+import { specializationById } from 'main/constants';
+import { getVideoResultText } from './rendererutils';
+import * as Images from './images';
+
+interface IProps {
+  video: RendererVideo;
+}
+
+type RoleCount = {
+  tank: number;
+  healer: number;
+  damage: number;
+};
+
+const RaidCompAndResult: React.FC<IProps> = (props: IProps) => {
+  const { video } = props;
+  const { combatants } = video;
+  const resultText = getVideoResultText(video);
+
+  const roleCount: RoleCount = {
+    tank: 0,
+    healer: 0,
+    damage: 0,
+  };
+
+  combatants.forEach((combant: RawCombatant) => {
+    const specID = combant._specID;
+
+    if (specID === undefined) {
+      return;
+    }
+
+    const spec = specializationById[specID];
+
+    if (spec === undefined) {
+      return;
+    }
+
+    const { role } = spec;
+    roleCount[role]++;
+  });
+
+  const renderCounter = (role: string) => {
+    return (
+      <Box
+        key={`parent-${role}`}
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          p: '4px',
+        }}
+      >
+        <Box
+          key={`child-${role}`}
+          component="img"
+          src={Images.roleImages[role]}
+          sx={{
+            height: '20px',
+            width: '20px',
+            objectFit: 'cover',
+          }}
+        />
+        <Typography
+          sx={{
+            color: 'white',
+            fontFamily: '"Arial",sans-serif',
+            ml: '2px',
+            fontSize: '1rem',
+            fontWeight: 700,
+            textShadow:
+              '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+          }}
+        >
+          {roleCount[role as keyof RoleCount]}
+        </Typography>
+      </Box>
+    );
+  };
+
+  const renderRaidComp = () => {
+    if (combatants.length < 1) {
+      return <></>;
+    }
+
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+        }}
+      >
+        {Object.keys(roleCount).map(renderCounter)}
+      </Box>
+    );
+  };
+
+  const renderResultText = () => {
+    return (
+      <Typography
+        align="center"
+        sx={{
+          color: 'white',
+          fontWeight: '600',
+          fontFamily: '"Arial",sans-serif',
+          fontSize: '1.5rem',
+          textShadow:
+            '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+        }}
+      >
+        {resultText}
+      </Typography>
+    );
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {renderResultText()}
+      {renderRaidComp()}
+    </Box>
+  );
+};
+
+export default RaidCompAndResult;